WordPress 头像挂件功能代码：用户自定义头像

WordPress 头像挂件功能代码：用户自定义头像

本文提供一个简单的 WordPress 头像挂件代码示例，允许用户选择自己的头像。

1. 创建新的 WordPress 插件并添加代码：

<?php
/**
 * Plugin Name: Avatar Widget
 * Plugin URI: https://example.com/avatar-widget
 * Description: A widget that allows users to select their own avatars.
 * Version: 1.0
 * Author: Your Name
 * Author URI: https://example.com
 * License: GPL2
 */

// Register the widget
add_action( 'widgets_init', 'avatar_widget_register' );
function avatar_widget_register() {
    register_widget( 'Avatar_Widget' );
}

// Define the widget class
class Avatar_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'avatar_widget',
            __( 'Avatar Widget', 'text_domain' ),
            array( 'description' => __( 'A widget that allows users to select their own avatars', 'text_domain' ), )
        );
    }

    // Front-end display of widget
    public function widget( $args, $instance ) {
        echo $args['before_widget'];

        // Widget title
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }

        // Avatar selection form
        echo '<form method='post'>';
        echo '<label for='' . $this->get_field_id( 'avatar' ) . ''>' . __( 'Select your avatar:', 'text_domain' ) . '</label><br />';
        echo '<select id='' . $this->get_field_id( 'avatar' ) . '' name='' . $this->get_field_name( 'avatar' ) . ''>';
        echo '<option value='avatar1.jpg'>' . __( 'Avatar 1', 'text_domain' ) . '</option>';
        echo '<option value='avatar2.jpg'>' . __( 'Avatar 2', 'text_domain' ) . '</option>';
        echo '<option value='avatar3.jpg'>' . __( 'Avatar 3', 'text_domain' ) . '</option>';
        echo '</select><br />';
        echo '<input type='submit' value='' . __( 'Save', 'text_domain' ) . '' />';
        echo '</form>';

        echo $args['after_widget'];
    }

    // Sanitize widget form values as they are saved
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
        $instance['avatar'] = ( ! empty( $new_instance['avatar'] ) ) ? sanitize_text_field( $new_instance['avatar'] ) : '';

        return $instance;
    }

    // Back-end widget form
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
        $avatar = ! empty( $instance['avatar'] ) ? $instance['avatar'] : '';

        // Widget title field
        echo '<p>';
        echo '<label for='' . $this->get_field_id( 'title' ) . ''>' . __( 'Title:', 'text_domain' ) . '</label>';
        echo '<input class='widefat' id='' . $this->get_field_id( 'title' ) . '' name='' . $this->get_field_name( 'title' ) . '' type='text' value='' . esc_attr( $title ) . '' />';
        echo '</p>';

        // Avatar selection form
        echo '<p>';
        echo '<label for='' . $this->get_field_id( 'avatar' ) . ''>' . __( 'Select your avatar:', 'text_domain' ) . '</label><br />';
        echo '<select id='' . $this->get_field_id( 'avatar' ) . '' name='' . $this->get_field_name( 'avatar' ) . ''>';
        echo '<option value='avatar1.jpg' ' . selected( $avatar, 'avatar1.jpg', false ) . '>' . __( 'Avatar 1', 'text_domain' ) . '</option>';
        echo '<option value='avatar2.jpg' ' . selected( $avatar, 'avatar2.jpg', false ) . '>' . __( 'Avatar 2', 'text_domain' ) . '</option>';
        echo '<option value='avatar3.jpg' ' . selected( $avatar, 'avatar3.jpg', false ) . '>' . __( 'Avatar 3', 'text_domain' ) . '</option>';
        echo '</select>';
        echo '</p>';
    }
}

2. 启用插件并添加小工具：

在 WordPress 后台中启用该插件，然后将“Avatar Widget”小工具添加到您的侧边栏或其他可用的小工具区域中。

3. 使用小工具：

在“Avatar Widget”小工具中，您将看到一个标题字段和一个下拉菜单，用户可以从中选择他们自己的头像。选择的头像将保存在小工具实例中，供后续使用。

4. 代码修改：

您可以根据需要自行修改代码，以便用户可以上传自己的头像或从 Gravatar 等服务中选择头像。