如何创建自定义WordPress小工具(逐步指南)

04/05/2024

什么是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小工具。你可能还想看看我们关于域名和网络托管区别的指南,以及我们专家推荐的最佳免费网站托管比较。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>