如何创建一个自定义的WordPress小部件

你想在WordPress中创建自己的自定义小部件吗? 小部件允许您将元素拖放到网站的任何侧栏或小部件准备好区域。 在本文中,我们将向您展示如何轻松创建自定义WordPress小部件。

创建一个自定义WordPress小部件

什么是WordPress的Widget?

WordPress小部件包含可添加到网站侧边栏或小部件准备好区域的代码片段。 把它们想象成模块,你可以使用一个简单的拖放界面来添加不同的元素。

默认情况下,WordPress提供了一组标准的小部件,您可以使用任何WordPress主题。

WordPress小部件

WordPress还允许开发人员创建自己的自定义小部件。 许多WordPress主题和插件都带有自己的自定义小部件,您可以将其添加到您的侧边栏。

例如,您可以将联系表单,自定义登录表单或照片库添加到侧栏,而无需编写任何代码。

话虽如此,让我们看看如何轻松地在WordPress中创建自己的自定义小部件。

在WordPress中创建一个自定义的小部件

在我们开始之前,最好的做法是创建一个特定于站点的插件,在这里您将粘贴本教程中的小部件代码。

您也可以将代码粘贴到主题的functions.php文件中。 但是,只有在特定主题处于活动状态时才能使用。

在本教程中,我们将创建一个简单的小部件,只是迎接访问者。 看看这个代码,然后将其粘贴到您的网站特定的插件,看看它的行动。

//注册并加载小部件
 函数wpb_load_widget(){
 register_widget('wpb_widget');
 }
 add_action('widgets_init','wpb_load_widget');

 //创建小部件
 类wpb_widget扩展WP_Widget {

 函数__construct(){
 父:: __结构(

 //您的小部件的基本ID
 'wpb_widget',

 //小部件名称将出现在UI中
 __('site Widget','wpb_widget_domain'),

 //小工具描述
 array('description'=> __('基于网站教程的示例小部件','wpb_widget_domain'),)
 );
 }

 //创建小部件前端

 公共功能部件($ args,$ instance){
 $ title = apply_filters('widget_title',$ instance ['title']);

 //小部件参数前后由主题定义
 echo $ args ['before_widget'];
 如果(!empty($ title))
 echo $ args ['before_title']。  $ title。 的$ args [ 'after_title'];

 //这是你运行代码并显示输出的地方
 echo __('Hello,World!','wpb_widget_domain');
 echo $ args ['after_widget'];
 }

 //微件后端
 公共函数形式($实例){
 if(isset($ instance ['title'])){
 $ title = $ instance ['title'];
 }
 else {
 $ title = __('新标题','wpb_widget_domain');
 }
 //小工具管理员表单
 ?> 

现场

自定义WordPress小部件添加到侧栏

现在你可以访问你的网站,看看它的行动。

预览您的自定义小部件

现在让我们再次研究代码。

首先,我们注册了“wpb_widget”并加载了我们的自定义小部件。 之后,我们定义了这个小部件的功能,以及如何显示小部件的后端。

最后,我们定义了如何处理对小部件的更改。

现在有几件事你可能会问。 例如,目的是什么 wpb_text_domain

WordPress使用gettext来处理翻译和本地化。 这个 wpb_text_domain __e 告诉gettext使一个字符串可用于翻译。 看看你如何找到翻译准备的WordPress主题。

如果您正在为您的主题创建自定义小部件,则可以替换 wpb_text_domain 与您的主题的文本域。