建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

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

GG网络技术分享 2025-03-18 16:05 2


自己的自定义小部件

如何在 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 中的小部件管理的文章是由他贡献的。

标签: WordPress op

提交需求或反馈

Demand feedback