wordpress 自定义_如何创建自定义WordPress小部件

wordpress 自定义

Do you want to create your own custom widgets in WordPress? Widgets allow you to add non-content elements into a sidebar or any widget-ready area of your website.

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

You can use widgets to add banners, advertisements, newsletter sign up forms, and other elements to your website.

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

In this article, we will show you how to create a custom WordPress widget, step by step.

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

Note: This tutorial is for DIY WordPress users who are learning WordPress development and coding.

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

什么是WordPress小部件？ (What is a WordPress Widget?)

WordPress widgets contain pieces of code that you can add to your website’s sidebars or widget-ready areas.

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

Think of them as modules that you can use to add different elements by using a simple drag and drop interface.

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

By default, WordPress comes with a standard set of widgets that you can use with any WordPress theme. See our beginner’s guide on how to add and use widgets in WordPress.

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

WordPress also allows developers to create their own custom widgets.

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

Many premium WordPress themes and plugins come with their own custom widgets that you can add to your sidebars.

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

For example, you can add a contact form, a custom login form, or a photo gallery to a sidebar without writing any code.

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

Having said that, let’s see how to easily create your own custom widgets in WordPress.

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

影片教学 (Video Tutorial)

演示地址

If you prefer written instructions, then please continue reading.

如果您喜欢书面说明，请继续阅读。

在WordPress中创建自定义小部件 (Creating a Custom Widget in WordPress)

If you are learning WordPress coding, then you will need a local development environment. You can install WordPress on your computer (Mac or Windows).

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

There are several ways to add your custom widget code in WordPress.

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

Ideally, you can create a site-specific plugin and paste your widget code there.

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

You can also paste the code in your theme’s functions.php file. However, it will only be available when that particular theme is active.

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

Another tool that you can use is the Code Snippets plugin which allows you to easily add custom code to your WordPress website.

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

In this tutorial, we will create a simple widget that just greets visitors. The goal here is to familiarize yourself with the WordPress widget class.

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

Let’s get started.

让我们开始吧。

创建一个基本的WordPress小部件 (Creating a Basic WordPress Widget)

WordPress comes with a built-in WordPress Widget class. Each new WordPress widget extends the WordPress widget class.

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

There are 18 methods mentioned in the WordPress developer’s handbook that can be used with the WP Widget class.

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

However, for the sake of this tutorial, we will be focusing on the following methods.

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

• __construct() : This is the part where we create the widget ID, title, and description.
  __construct()：这是我们创建小部件ID，标题和描述的部分。
• widget : This is where we define the output generated by the widget.
  widget：这是我们定义小部件生成的输出的地方。
• form : This part of the code is where we create the form with widget options for backend.
  form：这部分代码是我们创建带有后端小部件选项的表单的地方。
• update: This is the part where we save widget options in the database.
  更新：这是我们在数据库中保存窗口小部件选项的部分。

Let’s study the following code where we have used these four methods inside the WP_Widget class.

让我们研究以下代码，在其中使用了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
} 

The final piece of the code is where we will actually register the widget and load it inside WordPress.

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

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

Now let’s put all of this together to create a basic WordPress widget.

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

You can copy and paste the following code in your custom plugin or theme’s functions.php file.

您可以将以下代码复制并粘贴到自定义插件或主题的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' );

After adding the code you need to head over to Appearance » Widgets page. You will notice the new WPBeginner Widget in the list of available widgets. You need to drag and drop this widget to a sidebar.

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

This widget has only one form field to fill, you can add your text and click on the Save button to store your changes.

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

Now you can visit your website to see it in action.

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

Now let’s study the code again.

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

First we registered the ‘wpb_widget’ and loaded our custom widget. After that we defined what that widget does, and how to display the widget back-end.

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

Lastly, we defined how to handle changes made to the widget.

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

Now there are a few things that you might want to ask. For example, what’s the purpose wpb_text_domain?

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

WordPress uses gettext to handle translation and localization. This wpb_text_domain and __e tells gettext to make a string available for translation. See how you can find translation ready WordPress themes.

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

If you are creating a custom widget for your theme, then you can replace wpb_text_domain with your theme’s text domain.

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

We hope this article helped you learn how to easily create a custom WordPress widget. You may also want to see our list of the most useful WordPress widgets for your site.

我们希望本文能帮助您学习如何轻松创建自定义WordPress小部件。 您可能还想查看我们的网站上最有用的WordPress小部件列表。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/

wordpress 自定义