如何为WordPress创建小部件插件

WordPress是一个了不起的内容管理系统,具有许多出色的功能,例如小部件。在本教程中,我将向您解释如何在一个小插件中创建自己的窗口小部件。这篇文章将介绍在创建小部件本身之前您需要了解的一些其他要点。开始了!


步骤1:建立小工具外挂程式

我最近创建了一个名为“ Freelancer Widgets Bundle”的插件,有人问我如何创建这样的插件,因此我决定写这篇文章。第一步是创建插件。如您所见,这不是最难的部分。插件是激活后会添加到WordPress的额外代码。 WordPress通过文件夹创建一个循环,以检索所有可用的插件并在后台将其列出。要创建插件,您需要一个编辑器,例如Coda(Mac)或Dreamweaver(PC&Mac)。我建议您在本地安装的WordPress中创建插件,如果在运行时将其放置在实时服务器上可能会造成一些麻烦。因此,请等待测试我们的插件,然后再将其放置在主机上.

现在打开文件夹wp-content / plugins。这是您要添加插件的位置。创建一个新目录并将其命名为“ widget-plugin”(实际上,此名称可以是您想要的任何名称)。即使我们的插件只有一个文件,也最好为每个插件使用一个文件夹。在您的目录中,创建一个名为“ widget-plugin.php”的新文件(此名称也可以更改),然后将其打开。现在,我们将添加第一行代码。 WordPress下的插件定义遵循一些您可以阅读的规则 在法典上. WordPress定义插件的方法如下:

因此,我们必须修改此代码以使其符合我们的需求:

保存文件。通过仅将代码添加到我们的widget-plugin.php文件中,我们创建了一个插件!好吧,目前该插件无法执行任何操作,但WordPress可以识别它。为确保确实如此,请进行管理,然后转到“插件”菜单下。如果您的插件出现在插件列表中,则表示您很好,否则请确保按照我的说明进行操作,然后重试。您现在可以激活插件.

步骤2:建立小工具

现在,我们将创建小部件本身。该小部件将是扩展核心WordPress类的PHP类 WP_Widget. 基本上,我们的小部件将以这种方式定义:

//小部件类
My_Custom_Widget类扩展了WP_Widget {

//主构造函数
公共功能__construct(){
/ * ... * /
}

//窗口小部件形式(用于后端)
公共职能表格($ instance){
/ * ... * /
}

//更新小部件设置
公共功能更新($ new_instance,$ old_instance){
/ * ... * /
}

//显示小部件
公共功能小部件($ args,$ instance){
/ * ... * /
}

}

//注册小部件
函数my_register_custom_widget(){
register_widget('My_Custom_Widget');
}
add_action('widgets_init','my_register_custom_widget');

这段代码为WordPress提供了系统能够使用小部件所需的所有信息:

  1. 建设者, 启动小部件
  2. 的 form()函数 在管理中创建小部件表单
  3. update()函数, 在编辑期间保存小部件数据
  4. 和 widget()函数 在前端显示小部件内容

1 –构造函数

构造函数是定义小部件名称和主要参数的代码部分,以下是其外观的示例.

//主构造函数
公共功能__construct(){
父母:: __ construct(
'my_custom_widget',
__('我的自定义窗口小部件','text_domain'),
数组(
'customize_selective_refresh'=>是,
)
);
}

请不要在小部件名称周围使用__(),WordPress会使用此函数进行翻译。我真的建议你总是使用 这些功能, 使您的主题完全可翻译使用“ customize_selective_refresh”参数可以在以下位置刷新小部件 外观>定制 在编辑窗口小部件时,而不是刷新整个页面,而是在进行更改时仅刷新窗口小部件.

2 – form()函数

此功能是在WordPress管理区域中创建小部件表单设置的功能(在``外观''>``小部件''或``外观''>``自定义''>``小部件''下)。这就是您要输入要在网站上显示的数据的情况。因此,我将说明如何在小部件表单设置中添加文本字段,文本区域,选择框和复选框.

//窗口小部件形式(用于后端)
公共职能表格($ instance){

//设置小部件默认值
$ defaults =数组(
'标题'=>'',
'文本'=>'',
'textarea'=>'',
'复选框'=>'',
'选择'=>'',
);

//使用默认值解析当前设置
extract(wp_parse_args((array)$ instance,$ defaults)); ?>


get_field_id('textarea')); ?>“>