如何创建自定义WordPress小部件

2020-05-15
WordPress

您要在WordPress中创建自己的自定义小部件吗？小部件允许您将非内容元素添加到网站的侧边栏或任何小部件就绪区域。

您可以使用小部件向您的网站添加横幅，广告，新闻通讯注册表单和其他元素。

在本文中，我们将逐步向您展示如何创建自定义WordPress小部件。

注意：本教程适用于正在学习WordPress开发和编码的DIY WordPress用户。

什么是WordPress小部件？

WordPress小部件包含一些代码片段，您可以将其添加到网站的侧边栏或可用于小部件的区域。

将它们视为模块，您可以使用简单的拖放界面来添加不同的元素。

默认情况下，WordPress附带了一组标准的小部件，您可以将其与任何WordPress主题一起使用。请参阅我们的初学者指南，了解如何在WordPress中添加和使用窗口小部件。

WordPress还允许开发人员创建自己的自定义小部件。

许多高级WordPress主题和插件都带有它们自己的自定义小部件，您可以将其添加到侧边栏中。

例如，您可以在不编写任何代码的情况下将联系人表单，自定义登录表单或照片库添加到侧边栏。

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

在WordPress中创建自定义小部件

如果您正在学习WordPress编码，那么您将需要本地开发环境。您可以在计算机（Mac或Windows）上安装WordPress。

有几种方法可以在WordPress中添加自定义窗口小部件代码。

理想情况下，您可以创建一个特定于站点的插件，然后在其中粘贴您的小部件代码。

您也可以将代码粘贴到主题的functions.php文件中。但是，仅当该特定主题处于活动状态时才可用。

您可以使用的另一个工具是代码片段插件，该插件可让您轻松地将自定义代码添加到WordPress网站。

在本教程中，我们将创建一个简单的小部件来迎接访客。这里的目标是使自己熟悉WordPress小部件类。

让我们开始吧。

创建一个基本的WordPress小部件

WordPress带有内置的WordPress Widget类。每个新的WordPress小部件都扩展了WordPress小部件类。

WordPress开发人员手册中提到的18种方法可与WP Widget类一起使用。

但是，出于本教程的考虑，我们将重点介绍以下方法。

__construct（）：这是我们创建小部件ID，标题和描述的部分。
widget：这是我们定义小部件生成的输出的地方。
form：这部分代码是我们创建带有后端小部件选项的表单的地方。
更新：这是我们将小部件选项保存在数据库中的部分。

让我们研究以下代码，在其中使用了WP_Widget类中的这四个方法。

// Creating the widget 
class wpb_widget extends WP_Widget {

// The construct part  
function __construct() {

}
 
// Creating widget front-end
public function widget( $args, $instance ) {

}
         
// Creating widget Backend 
public function form( $instance ) {

}
     
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {

}

// Class wpb_widget ends here
}

代码的最后一部分是我们将实际注册小部件并将其加载到WordPress中的位置。

function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

现在，让我们将所有这些放在一起以创建一个基本的WordPress小部件。

您可以将以下代码复制并粘贴到自定义插件或主题的functions.php文件中。

// Creating the widget 
class wpb_widget extends WP_Widget {
 
function __construct() {
parent::__construct(
 
// Base ID of your widget
'wpb_widget', 
 
// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), 
 
// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}
 
// Creating widget front-end
 
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
 
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
 
// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
         
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '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>
<?php 
}
     
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}

// Class wpb_widget ends here
} 


// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

添加代码后，您需要转到外观»小部件页面。您会在可用小部件列表中注意到新的WPBeginner小部件。您需要将此小部件拖放到侧边栏。

这个小部件只有一个表单字段可以填写，您可以添加文本，然后单击“保存”按钮以存储您的更改。

现在，您可以访问您的网站以查看其运行情况。

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

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

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

现在，您可能要问几件事。例如，目的是wpb_text_domain什么？

WordPress使用gettext处理翻译和本地化。这wpb_text_domain并__e 告诉gettext使字符串可用于翻译。了解如何找到可翻译的WordPress主题。

如果要为主题创建自定义窗口小部件，则可以替换wpb_text_domain为主题的文本域。