什么是WordPress小工具?
WordPress小工具包含可以添加到网站侧边栏或小工具就绪区域的代码片段。将它们视为可用于向站点添加不同元素和功能的模块。默认情况下,WordPress附带了一套标准小工具,可与任何WordPress主题一起使用。WordPress还允许开发者创建自己的自定义小工具。
在WordPress中创建自定义小工具之前
如果你正在学习WordPress编码,那么你将需要一个本地开发环境。你可以在Mac上使用MAMP或在Windows上使用WAMP本地安装WordPress。如果你已经有一个在线网站,那么你可以将其移动到本地服务器。在这之后,有几种方法可以将你的自定义小工具代码添加到WordPress中。理想情况下,你可以创建一个特定于站点的插件并将小工具代码粘贴在那里。你也可以将代码粘贴到主题的functions.php文件中。然而,这样做的代码仅在该特定主题处于活动状态时才可用。
创建一个基本的WordPress小工具
WordPress附带了一个内置的小工具类。每个新的WordPress小工具都会扩展这个小工具类。在这篇教程中,我们将创建一个简单的小工具,向访问者打招呼。目标是熟悉WordPress的小工具类。我们将重点关注以下方法:
__construct() :
在这里我们创建小工具ID、标题和描述。
widget:
在这里我们定义小工具生成的输出。
form:
在这里我们为后台创建小工具选项表单。
update:
在这里我们将小工具选项保存到数据库中。
要创建自定义小工具,你可以将以下代码段复制并粘贴到你的functions.php文件或一个特定于站点的插件中:
<?php
// 创建小工具
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// 你的小工具的基础ID
'wpb_widget',
// 小工具名称将出现在UI中
__( 'WPressize Me 小工具', 'textdomain' ),
// 小工具描述
[
'description' => __( '基于WPressize Me教程的示例小工具', 'textdomain' ),
]
);
}
// 创建前端小工具
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// 主题定义的前后小工具参数
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// 这是你运行代码并显示输出的地方
echo __( '你好,世界!', 'textdomain' );
echo $args['after_widget'];
}
// 小工具设置表单
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( '新标题', 'textdomain' );
}
// 小工具管理表单
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( '标题:', 'textdomain' ); ?>
</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>
<?php
}
// 更新小工具,替换旧实例为新实例
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// 类wpb_widget在这里结束
}
// 注册并加载小工具
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
?>
使用WPCode插件添加自定义代码
一种更简便的方法是在你的WordPress网站中使用WPCode插件添加自定义代码。首先,你需要在你的网站上安装并激活WPCode插件。激活后,你可以前往WordPress管理面板中的“代码片段”»“+添加片段”。从这里选择“添加你的自定义代码(新片段)”选项,然后在代码预览区域中粘贴自定义小工具代码。同时需要选择“代码类型”下拉菜单,并选择“PHP片段”选项。然后,你可以向下滚动并选择代码的插入方法。WPCode允许你选择在哪些地方运行代码。在这个教程中,你可以使用默认选项并在任何地方运行代码。完成后,你可以返回顶部并保存片段。要激活片段,只需点击切换按钮使其变为激活状态。
添加代码到WordPress后,你需要前往WordPress管理面板中的“外观”»“小工具”页面。然后点击“加号”添加块图标,搜索“WPressize Me 小工具”,并选择新小工具。
在WordPress经典编辑器中添加自定义小工具
如果你使用经典小工具编辑器向网站添加新小工具,过程将类似。列表中将出现一个名为“WPressize Me 小工具”的新小工具。你需要将此小工具拖放到你的侧边栏中。然后,输入标题并点击“保存”按钮保存你的小工具设置。你新的自定义小工具现在将在线上网站上可见。
再次研究代码
首先,我们注册了“wpb_widget”并加载我们的自定义小工具。然后,我们定义了该小工具的功能以及如何显示小工具的后端。最后,我们定义了如何处理对小工具所做的更改。你可能会问一些问题,例如textdomain的目的是什么?WordPress使用“gettext”处理翻译和本地化。这个textdomain和_e 告诉“gettext”使字符串可供翻译使用。如果你正在为你的主题创建一个自定义小工具,你可以用你的主题的文本域替换textdomain。或者,你可以使用WordPress翻译插件轻松地翻译WordPress并创建多语言WordPress站点。
希望这篇文章帮助你了解如何轻松创建自定义WordPress小工具。你可能还想看看我们关于域名和网络托管区别的指南,以及我们专家推荐的最佳免费网站托管比较。