在 WordPress 中創建自己的自定義小部件的值得注意的指南

如何在 WordPress 網站中創建自定義小部件

如果您已經運行 WordPress 網站一段時間了，那麼您肯定會對小部件及其使用有一個大致的了解。 小部件是一種出色的工具，可幫助 WordPress 用戶向其網站主題的側邊欄（也稱為小部件區域）添加更多內容和功能。

此外，可以根據您的需要將小部件添加到 WP 主題的其他幾個區域，例如頁眉、頁腳等。

小部件主要有助於在您的網站中拖放元素。 默認情況下，您可以在 WordPress 主題的管理儀表板中找到多個小部件。

但是，您可以使站點的儀表闆對創建自定義小部件更加有用。 通過這篇文章，我將讓您了解如何在 WordPress 網站儀表板中創建自己的自定義小部件。

相關文章：如何在 WordPress 網站中添加小部件並開始使用它們？

如何在儀表板中創建自定義小部件？

假設您想在站點的管理儀表板中創建一個自定義小部件。 為此，您需要做的第一件事就是在 WordPress 中註冊您的小部件。

為此，您只需要使用 wp_add_dashboard_widget() 函數。 這是一個默認的 WordPress 功能，用於通知 WordPress 新創建的小部件。

下面的代碼將演示如何註冊自定義小部件：

// Register your custom widget function by hooking into the 'wp_dashboard_setup' action
add_action( 'wp_dashboard_setup', 'first_custom_dashboard_widget' );

功能 first_custom_dashboard_widget() {

wp_add_dashboard_widget(

'first_custom_dashboard_widget',
//這是小部件蛞蝓
'第一個自定義儀表板小部件'，
//這是你的小部件的標題
'first_custom_dashboard_widget_display'
//顯示函數
);

}
//創建一個函數來顯示要在儀表板小部件中顯示的內容。
功能 first_custom_dashboard_widget_display() {

echo '你在這裡描述你的小部件 Widget';

}

注意：上面的代碼需要添加到你主題的functions.php文件中。

上面的代碼片段將有助於創建一個名為“First Custom Dashboard Widget”的自定義小部件。 現在讓我們了解代碼是如何工作的：

• 在第一行代碼中， register_first_custom_dashboard_widget() 函數被掛接到 wp_dashboard_setup 動作鉤子中。 簡而言之，代碼的開頭行意味著每當 wp_dashboard_setup 操作出現在您的主題代碼中時， first_custom_dashboard_widget() 就會被執行。
• 接下來，wp_dashboard_setup() 函數對具有不同參數的 wp_add_dashboard_widget() 進行簡單調用，例如：
  • 小部件蛞蝓
  • 小部件標題
  • 顯示功能

  創建自定義小部件需要所有這些參數。

• 最後，定義了 my_dashboard_widget_display() 函數並包含一些文本內容，即“這是我的第一個自定義小部件”。

執行代碼後，只需前往您的管理儀表板，您就會在管理儀表板頁面的底部看到新創建的小部件。 只需拖動該小部件並將其放置在您想要的任何位置。

輸出：

如何更改自定義小部件的位置？

在上面的部分中，我們討論了有助於在 WordPress 網站儀表板中創建和添加自定義小部件的代碼。

顯然，您希望讓您的插件用戶能夠將您的“自定義儀表板小部件”放置到他們選擇的位置，只需拖動它即可。

不幸的是，WordPress 沒有提供易於使用的 API，可以讓您處理對默認小部件的預排序。 這意味著您的自定義小部件將始終顯示在儀表板列表的底部。

但是，如果您想將自定義小部件置於所有默認小部件之上怎麼辦？ 您可以通過擺弄代碼來做到這一點。

實現這一目標的一種最佳方法是手動更改元框的內部數組。 然後，您可以將新創建的小部件放在小部件列表的頂部。 這是執行相同任務的代碼：

function first_custom_dashboard_widgets() {
wp_add_dashboard_widget( 'first_custom_dashboard_widget', 'First Custom Dashboard Widget', 'first_custom_dashboard_widget_function' );
// Globalize the array of the metaboxes, this will apply to all the widgets for wp-admin
global $wp_meta_boxes;
// Fetch array of the regular dashboard widgets
$normal_dashboard = $wp_meta_boxes['dashboard']['normal']['core'];
// Create a backup of the custom dashboard widget and delete it from the end of the array
$first_custom_widget_backup = array( 'first_custom_dashboard_widget' => $normal_dashboard['first_custom_dashboard_widget'] );
unset( $normal_dashboard['first_custom_dashboard_widget'] );
// Combine both the arrays together to put custom widget at the beginning
$sorted_dashboard = array_merge( $first_custom_widget_backup, $normal_dashboard );
// Save the value of sorted array back into the main metaboxes
$wp_meta_boxes['dashboard']['normal']['core'] = $sorted_dashboard;
}

請記住，此代碼適用於根本沒有重新訂購其小部件的 WordPress 網站所有者。 但是，一旦用戶執行此功能，他們當前的偏好將覆蓋此功能。 因此，用戶需要將小部件移動到頂部。

包起來
儘管 WordPress 提供了對幾個默認小部件的訪問權限以擴展您的網站管理儀表板功能，但它仍然可能無法滿足您的特定需求。

但是，您可以通過創建自定義小部件來實現所有期望的目標並使您的管理儀表板更加有用。 畢竟，小部件提供了一種添加額外內容和功能的絕佳方式。

不用說，創建一個為完成管理儀表板中的某些任務而量身定制的新小部件將證明對您有益。

希望這篇文章可以作為一個方便的指南，幫助您更好地了解如何在站點的管理面板中創建自定義小部件。

請記住，如果您在編碼部分遇到任何困難，最好聘請可以幫助您完成項目的 WordPress 開發人員。

作者簡介：
Samuel Dawson 是 Designs2html Ltd 的網站應用程序開發人員和文件管理器。他還成功地將 HTML 轉換為 WordPress 主題。

他動態維護 WordPress 文件的整體處理。 上面關於 WordPress 中的小部件管理的文章是由他貢獻的。