13小工具的使用–新手小白，快速使用静态页面建立wordpress主题

28.09.2025 239

说明：使用小工具，可以在常见的位置添加小工具。可以快速的布局网站，提高用户体验。
比如：头部加入一些认证信息，侧边栏加入一些广告，底部加入一些友情链接等。

1.登录后台后进入「外观 > 小工具」，新版界面采用区块编辑器模式，支持拖拽式操作‌
2.使用方式；
点击「添加」按钮，在弹出的「添加小工具」窗口中，选择「小工具」，然后选择「小工具」，点击「确定」，即可将小工具添加到当前页面。
点击「编辑」按钮，在弹出的「编辑小工具」窗口中，可以对小工具进行编辑，包括「标题」、「内容」、「链接」、「图标」等。

3.具体操作；
1.在function.php中，添加如下代码：
1.1创建一个函数，用于注册自定义编辑区域。

TEXT

12345678910

function register_custom_areas() {
    register_sidebar(array(
        'name'          => '自定义编辑区域',
        'id'            => 'custom_edit_area',
        'description'   => '通过外观→小工具管理此区域内容',
        'before_widget' => '<div class="custom-widget">',
        'after_widget'  => '</div>'
    ));
}
add_action('widgets_init', 'register_custom_areas');

可以创建一个小工具，并添加到自定义编辑区域中。
1.2创建多个函数，用于注册多个自定义编辑区域。

TEXT

12345678910111213141516171819

function register_custom_areas() {
    register_sidebar(array(
        'name'          => '自定义编辑区域1',
        'id'            => 'custom_edit_area1',
        'description'   => '通过外观→小工具管理此区域内容',
        'before_widget' => '<div class="custom-widget">',
        'after_widget'  => '</div>'
    ));
    register_sidebar(array(
        'name'          => '自定义编辑区域2',   
        'id'            => 'custom_edit_area2',
        'description'   => '通过外观→小工具管理此区域内容',
        'before_widget' => '<div class="custom-widget">',
        'after_widget'  => '</div>'             
    ))

    //等等
 }

3.在页面中，添加如下代码：//custom_edit_area为小工具创建的ID名称

TEXT

123456

<?php if (is_active_sidebar('custom_edit_area')) : ?>
    <div id="custom-edit-area">
        <?php dynamic_sidebar('custom_edit_area'); ?>
    </div>
<?php endif; ?>

4.自己创建区块
4.1注册钩子

TEXT

1234

function register_custom_html_widget() {
    register_widget('Custom_HTML_Widget');
}
add_action('widgets_init', 'register_custom_html_widget');

4.2创建一个函数，用于注册自定义编辑区域。
class Custom_HTML_Widget extends WP_Widget {}
4.21在函数里面增加如下代码：
1.区块代码：

TEXT

12345678

public function __construct() {
        parent::__construct(
            'custom_html_widget', // 小工具ID
            __('自定义提交', 'text_domain'), // 名称
            array('description' => __('支持直接插入HTML代码的小工具', 'text_domain')) // 描述
        );
    }

2.前端显示代码：

TEXT

1234567891011

  // 前端显示
    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }
        if (!empty($instance['html_content'])) {
            echo wp_kses_post($instance['html_content']); // 安全输出HTML
        }
        echo $args['after_widget'];
    }

3.后端要输出的代码

TEXT

1234567891011121314151617181920

  // 后台表单
    public function form($instance) {
        $title = isset($instance['title']) ? $instance['title'] : __('默认标题', 'text_domain');
        $html_content = isset($instance['html_content']) ? $instance['html_content'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">标题:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
                   name="<?php echo $this->get_field_name('title'); ?>"
                   type="text"
                   value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('html_content'); ?>">HTML内容:</label>
            <textarea class="widefat" rows="10" id="<?php echo $this->get_field_id('html_content'); ?>"
                      name="<?php echo $this->get_field_name('html_content'); ?>"><?php echo esc_textarea($html_content); ?></textarea>
        </p>
        <?php
    }

4.更新数据

TEXT

12345678

 // 更新数据
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        $instance['html_content'] = (!empty($new_instance['html_content'])) ? wp_kses_post($new_instance['html_content']) : '';
        return $instance;
    }

« 上一篇: 12搜索调用–新手小白，快速使用静态页面建立wordpress主题
下一篇: WordPress插件—Code_itwuyu插件一款代码添加插件，用于代码前端显示 »