17713433920 info@mac163.com
如何创建WordPress自定义仪表板页面
如何创建WordPress自定义仪表板页面

几天前,我被要求创建一个自定义WordPress仪表板来替换原始的WordPress仪表板。它不仅仅是显示或隐藏已经自定义的元框,它还替换了整个仪表板。这是我第一次被要求做这样的事情,因此非常具有挑战性。与往常一样,在这种情况下,我查看了互联网,看是否已经做过类似的事情。再一次,没有结果。我不知道我是否会问Google特定的问题,还是大多数WordPress教程都针对相同的主题,但我找不到任何东西。

然后,我记得,自WordPress 3.x起,我们在更新后首次登录后便有了一个新页面。这或多或少是我想做的。

在WordPress核心文件中快速搜索后,我发现了很多很棒的东西。最后,我设法以WordPress样式创建了整个自定义仪表板。为此,我再次创建了一个插件。

步骤1:创建插件

如果您阅读过我以前关于WPexplorer的文章,那么您现在应该知道如何创建插件,但是这里有个提醒。

打开wp-content下的plugins文件夹,并创建一个名为«sweet-custom-dashboard»的新存储库,并在此文件夹中创建一个名为«sweet-custom-dashboard.php»的新文件。然后打开文件。

要声明插件,只需将以下代码添加到文件中:

<?php
/*
Plugin Name: Sweet Custom Dashboard
Plugin URL: http://remicorson.com/sweet-custom-dashboard Description: A nice plugin to create your custom dashboard page
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com Contributors: corsonr
Text Domain: rc_scd
*/

仅通过添加此代码,您就已经创建了一个插件,一个空插件,但可以正常工作!

现在,我们需要为插件URL定义一个常量,稍后我们需要。添加此代码:

/*
|--------------------------------------------------------------------------
| CONSTANTS
|--------------------------------------------------------------------------
*/
// plugin folder url
if(!defined('RC_SCD_PLUGIN_URL')) {
define('RC_SCD_PLUGIN_URL', plugin_dir_url( __FILE__ ));
}

现在是时候创建插件的主类了:

/*
|--------------------------------------------------------------------------
| MAIN CLASS
|--------------------------------------------------------------------------
*/

class rc_sweet_custom_dashboard {

	/*--------------------------------------------*
	 * Constructor
	 *--------------------------------------------*/

	/**
	 * Initializes the plugin
	 */
	function __construct() {

	} // end constructor

}

// instantiate plugin's class
$GLOBALS['sweet_custom_dashboard'] = new rc_sweet_custom_dashboard();

步骤2:构造函数

在第二步中,我们需要添加仅在用户位于仪表板页面上时才会发生的操作。为此,用以下代码替换构造函数:

function __construct() {

	add_action('admin_menu', array( &$this,'rc_scd_register_menu') );
	add_action('load-index.php', array( &$this,'rc_scd_redirect_dashboard') );

} // end constructor

通过添加此代码,我们告诉WordPress我们希望在加载index.php时加载rc_get_screen()函数(index.php是仪表板页面)。我们还告诉WordPress注册一个新的仪表板页面。我们将在重定向中使用的那个。下一步是rc_redirect_dashboard()函数的构造。

步骤3:仪表板重定向

rc_redirect_dashboard()函数非常简单。其目的是在用户要访问默认仪表板时将其重定向到自定义页面。为此,我们必须使用get_current_screen()函数检查是否在正确的屏幕上(阅读《页面》)。当从“ admin_init”钩子调用此函数时,它返回NULL,这部分是为什么我将rc_dashboard_redirection()钩接到“ load-index.php”的原因。这是函数的内容:

function rc_scd_redirect_dashboard() {

	if( is_admin() ) {
		$screen = get_current_screen();
		
		if( $screen->base == 'dashboard' ) {

			wp_redirect( admin_url( 'index.php?page=custom-dashboard' ) );
			
		}
	}

}

如果我们是管理员,则此代码非常容易理解,并且如果当前屏幕为“ dashboard”,则我们将强制重定向到名为“ custom_dashboard.php”的文件。

注册仪表板页面

现在是时候注册新的仪表板页面了。为此,我们需要添加两个功能:一个用于在WordPress菜单中注册页面,另一个用于填充内容页面:

function rc_scd_register_menu() {
	add_dashboard_page( 'Custom Dashboard', 'Custom Dashboard', 'read', 'custom-dashboard', array( &$this,'rc_scd_create_dashboard') );
}

function rc_scd_create_dashboard() {
	include_once( 'custom_dashboard.php'  );
}

如果您保存了文件,请激活插件并尝试访问仪表板,您应该会看到空白页或404消息。我们可以创建自定义仪表板。

步骤4:自定义信息中心的创建

当我创建此插件时,我希望新的仪表板采用WordPress样式,这就是为什么我的出发点是在首次登录后在进行核心更新时看到的页面。我浏览了此页的代码以寻找灵感。

首先,在您的sweet-custom-dashboard文件夹中创建一个名为«custom_dashboard.php»的新文件。打开它并添加以下代码:

<?php
/**
 * Our custom dashboard page
 */

/** WordPress Administration Bootstrap */
require_once( ABSPATH . 'wp-load.php' );
require_once( ABSPATH . 'wp-admin/admin.php' );
require_once( ABSPATH . 'wp-admin/admin-header.php' );
?>

第一个require_once()功能,通过添加此简单行来加载WordPress,现在您可以使用任何WordPress变量或任何函数。

需要另外两个require_once()加载来正确显示管理。

现在我们要做的就是创建自定义仪表板的内容。下面的代码受到前面提到的文件的启发,这就是为什么您可能需要对其进行一些调整以满足自己的需求。在我的示例中,我只想要一个菜单​​,其中包含3个链接,这些链接将显示为选项卡,并包含两个段落,一次包含一个图像。这是代码:

<div class="wrap about-wrap">
<h1><?php _e( 'Welcome to My Custom Dashboard Page' ); ?></h1>

 <div class="about-text">
 <?php _e('Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.' ); ?>
 </div>

 <h2 class="nav-tab-wrapper">
 <a href="#" class="nav-tab nav-tab-active">
 <?php _e( 'Step 1' ); ?>
 </a><a href="#" class="nav-tab">
 <?php _e( 'Step 2' ); ?>
 </a><a href="#" class="nav-tab">
 <?php _e( 'Step 3' ); ?>
 </a>
 </h2>

 <div class="changelog">
 <h3><?php _e( 'Morbi leo risus, porta ac consectetur' ); ?></h3>

 <div class="feature-section images-stagger-right">
 <img src="<?php echo esc_url( admin_url( 'images/screenshots/theme-customizer.png' ) ); ?>" class="image-50" />
 <h4><?php _e( 'Risus Consectetur Elit Sollicitudin' ); ?></h4>
 <p><?php _e( 'Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.' ); ?></p>

 <h4><?php _e( 'Mattis Justo Purus' ); ?></h4>
 <p><?php _e( 'Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.' ); ?></p>
 </div>
 </div>
</div>

该代码中没有什么真正有趣的,只是HTML代码。

最后,我们必须加载WordPress管理页脚。为此,只需在文件底部的这一行:

<?php include( ABSPATH . 'wp-admin/admin-footer.php' );

而且…就是这样!该插件现在运行良好,当然有很多方法可以使其变得更好,例如,您可以添加自定义样式表和自定义javascript文件,或者可以添加一些额外的验证以仅将自定义仪表板显示给某些用户角色…

好吧,我希望您喜欢本教程,并期待在评论部分阅读您的评论!

还有一件事,官方的WordPress插件存储库上已经有该插件的已编译版本,请单击此处下载。


微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
回到顶部