13小工具的使用–新手小白，快速使用静态页面建立wordpress主题
说明：使用小工具，可以在常见的位置添加小工具。可以快速的布局网站，提高用户体验。
比如：头部加入一些认证信息，侧边栏加入一些广告，底部加入一些友情链接等。
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;
}
