您要在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
?>
添加代碼後，您需要轉到 外觀»小部件 頁。 您會在可用小部件列表中註意到新的WPBeginner小部件。 您需要將此小部件拖放到側邊欄。
這個小部件只有一個表單字段可以填寫，您可以添加文本，然後單擊“保存”按鈕以存儲您的更改。
現在，您可以訪問您的網站以查看其運行情況。
現在讓我們再次研究代碼。
首先，我們註冊了“ wpb_widget”並加載了自定義小部件。 之後，我們定義了該小部件的功能以及如何顯示小部件的後端。
最後，我們定義瞭如何處理對小部件所做的更改。
現在，您可能要問幾件事。 例如，目的是什麼 wpb_text_domain？
WordPress使用gettext處理翻譯和本地化。 這個 wpb_text_domain 和 __e 告訴gettext使字符串可用於翻譯。 了解如何找到可翻譯的WordPress主題。
如果要為主題創建自定義窗口小部件，則可以替換 wpb_text_domain 與主題的文本域。
我們希望本文能幫助您學習如何輕鬆創建自定義WordPress小部件。 您可能還想查看我們的網站上最有用的WordPress小部件列表。
如果您喜歡這篇文章，請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。