到目前为止,在本系列文章中,我们已经介绍了两种消除永久WordPress管理员通知的方法。 我们将在本教程系列的第四部分也是最后一部分的基础上,通过研究两种更具体的方法来永久解除管理员通知,以此为基础。 我们将通过展示如何创建自己的自定义管理员通知类型以及添加装饰(例如图标)来解决问题。
粘性管理员通知
我们已经知道如何显示可以被撤消的管理员通知。 我们要做的就是将is-dismissible
CSS类添加到包含的div元素中。 但是,这只是暂时的,只会忽略当前页面的通知。 页面重新加载后,它会再次出现。
要使其永久性地被废弃,涉及的代码要比到目前为止所看到的更多,但是实现起来并不难。 让我们从概述开始看一下所涉及的内容。
我们将使用自定义选项来存储管理员通知的显示状态。 激活插件后,将创建/更新此选项并将其设置为true。 仅当该选项当前为true时,才会显示管理员通知。
该方法的关键是使用Ajax允许我们在单击关闭按钮时将选项设置为false。 成功设置为false后,检查选项状态的条件代码将失败,并且不再显示管理员通知。
首先添加管理员通知本身,这将是一个普通的通知。 在Gwyer_Dismissible_Admin_Notices::init()
,添加一个新的add_action
调用:
add_action( 'admin_notices', array( $this, 'dismiss_admin_notice' ) );
然后将dismiss_admin_notice()
回调函数添加到同一类中:
public function dismiss_admin_notice() {
$whitelist_admin_pages = array( 'settings_page_admin-notices/plugin-options' );
$admin_page = get_current_screen();
if( in_array( $admin_page->base, $whitelist_admin_pages ) ) :
?>
<div id="an1" class="updated notice is-dismissible">
<p>Dismiss me, if you can. Ha ha ha!</p>
</div>
<?php
endif;
}
这会添加一个管理员通知,该通知仅显示在插件管理页面上,与我们在之前的教程中看到的非常相似。 唯一的区别是我们还向管理员通知div
容器添加了CSS ID。 这将用于专门针对我们感兴趣的管理员通知。
我们需要添加JavaScript代码以使Ajax调用正常工作,因此在admin-notices
插件根文件夹中添加一个js
文件夹,并在内部创建一个名为admin-notices.js
的文件。 通过输出控制台消息,向新文件中添加代码以测试其是否正确加载。
jQuery(document).ready(function($) {
console.log( 'admin-notices.js loaded!' );
});
在Gwyer_Plugin_Options::init()
,添加一个新的add_action
调用以使脚本文件入队:
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
我们只希望将此JavaScript文件加载到插件选项页面上,因此我们需要一种有条件地使其入队的方法。 我们可以通过查看当前正在使用的管理页面来查看是否是我们的插件选项页面。
我们可以通过将add_options_page()
的返回值存储在class属性中来获取插件选项页面的句柄。 以前我们不需要此值,因此我们仅调用add_options_page()
而不存储返回值。
将类属性添加到Gwyer_Plugin_Options
:
protected $plugin_options_page;
然后,在create_admin_menu_page()
,使用此新属性将句柄存储到我们的插件选项页面:
public function create_admin_menu_page() {
$this->plugin_options_page = add_options_page(
'Admin Notices',
'Admin Notices',
'manage_options',
__FILE__,
array( $this, 'render_options_page' )
);
}
最后,我们可以将我们JavaScript文件放入队列,以便仅在插件选项页面上加载:
public function enqueue_scripts($hook) {
if( $hook != $this->plugin_options_page ) {
return;
}
wp_enqueue_script(
'gwyer-admin-notice-js',
plugin_dir_url( __FILE__ ) . 'js/admin-notices.js'
);
}
如果一切顺利,那么您将看到admin-notices.js已加载! 消息输出到浏览器控制台。
将admin-notices.php
JavaScript代码更新为以下代码:
jQuery(document).ready(function($) {
$(document).on('click', '#an1 .notice-dismiss', function( event ) {
data = {
action : 'display_dismissible_admin_notice',
};
$.post(ajaxurl, data, function (response) {
console.log(response, 'DONE!');
});
});
});
在这里,我们正在侦听先前添加到管理员通知中的an1
CSS ID上的click事件。 单击后,将触发Ajax请求。 接下来让我们处理该请求。
在Gwyer_Dismissible_Admin_Notices::init()
,添加一个新的add_action
调用:
add_action( 'wp_ajax_display_dismissible_admin_notice', array( &$this, 'display_dismissible_admin_notice' ) );
一旦display_dismissible_admin_notice
Ajax请求触发,它将运行回调函数。 请记住,这最初是在我们的Ajax请求中定义为data.action
属性。
现在,将display_dismissible_admin_notice
回调函数添加到Gwyer_Dismissible_Admin_Notices
:
public function display_dismissible_admin_notice() {
echo "Processing Ajax request...";
wp_die();
}
保存您的更改,重新加载插件选项页面,然后单击管理员通知关闭按钮以查看正在运行的Ajax请求!
如果请求成功,那么您将看到处理Ajax请求...完成! 浏览器控制台中显示的消息。
难题的最后一步是创建一个自定义选项,该选项最初设置为true,然后在单击关闭按钮时设置为false。 然后,在加载插件选项页面时,仅在自定义选项值为true时才会显示管理员通知。
在Gwyer_Dismissible_Admin_Notices::init()
,向register_activation_hook()
添加第二个调用:
register_activation_hook( plugin_dir_path( __FILE__ ) . 'admin-notices.php', array( $this, 'create_custom_option' ) );
并将create_custom_option
回调函数添加到该类:
public function create_custom_option() {
update_option( 'gwyer-dismiss', true );
}
现在,激活插件后, gwyer-dismiss
创建一个名为gwyer-dismiss
的自定义选项并将其设置为true
。
当Ajax请求触发时,更新display_dismissible_admin_notice()
以更新我们的自定义选项:
public function display_dismissible_admin_notice() {
update_option( 'gwyer-dismiss', false );
wp_die();
}
现在剩下要做的就是更新dismiss_admin_notice()
来检查自定义选项的值,并且仅在设置为true时才呈现管理员通知。
public function dismiss_admin_notice() {
$whitelist_admin_pages = array( 'settings_page_admin-notices/plugin-options' );
$admin_page = get_current_screen();
$display_status = get_option( 'gwyer-dismiss' );
if( in_array( $admin_page->base, $whitelist_admin_pages ) && $display_status ) :
?>
<div id="an1" class="updated notice is-dismissible">
<p>Dismiss me, if you can. Ha ha ha!</p>
</div>
<?php
endif;
}
停用并重新激活插件以测试我们添加的代码。 访问插件选项页面,关闭管理员通知,然后刷新页面。 该通知将不再可见。 好极了!
由于每次激活插件时都会将custom选项设置为true,因此您可以重复上述步骤以根据需要多次测试可撤销的管理员通知。
为简单起见,这是使用Ajax请求设置定制管理员通知选项的一个简单示例。 实际上,您希望使用随机数 (一次使用的数字)值来验证Ajax请求,以此作为最小的安全措施。
永久取消管理员通知是一项繁重的工作,但最终效果很好,您可以在自己的插件中使用此效果。
自定义操作管理员通知被解雇
现在是时候考虑一种用于解除管理员通知的稍微不同的方法了。 这是一种不良的管理通知,显示在所有管理屏幕上,只有执行某些操作才能将其关闭。
注意:请谨慎使用此方法,否则您将冒着很快疏远插件用户的风险!
在示例中,我们将重点关注的特定操作是显示管理员通知,直到安装并激活了所需的插件或插件列表为止。
不同于以前的方法,我们必须跳过箍以获取永久性地被取消的管理员通知,此方法的解决方案非常简单!
首先,注释掉Gwyer_Dismissible_Admin_Notices::init()
所有函数调用。 然后,添加一个新的add_action()
函数:
add_action( 'admin_notices', array( $this, 'install_plugin_to_dismiss_admin_notice' ) );
并如下定义回调:
public function install_plugin_to_dismiss_admin_notice() {
if ( ! is_plugin_active( 'hello-dolly/hello.php' ) ) :
?>
<div class="notice notice-error">
<p>Please install and activate the <strong>Hello Dolly</strong> plugin.</p>
</div>
<?php
endif;
}
这里的所有都是它的! 我告诉过你很简单,不是吗?
这次我们唯一做的不同的事情是使用is_plugin_active()
WordPress函数测试Hello Dolly插件是否已安装和激活。 如果不是,则is_plugin_active()
将返回false,并且将显示我们的管理员通知。
尝试激活Hello Dolly插件以验证管理员通知是否消失。
这对于单个插件效果很好,但是如果您想提醒用户激活多个插件怎么办? 代替在Hello Dolly插件信息中进行硬编码,我们可以创建一个数组将所需的插件列入白名单。
将install_plugin_to_dismiss_admin_notice()
替换为:
public function install_plugin_to_dismiss_admin_notice() {
$required_plugins = array(
'Hello Dolly' => 'hello-dolly/hello.php',
'Akismet' => 'akismet/akismet.php'
);
$requires_activating = array();
foreach( $required_plugins as $required_plugin_name => $required_plugin_path ) {
if( ! is_plugin_active( $required_plugin_path ) ) {
array_push( $requires_activating, $required_plugin_name );
}
}
if ( ! empty( $requires_activating ) ) :
?>
<div class="notice notice-error">
<p>Please install and activate the following plugins: <strong><?php echo join( ", ", $requires_activating );?></strong>.</p>
</div>
<?php
endif;
}
现在,所需的插件存储在一个数组中,该数组将循环检查每个插件是否已激活。 对于当前未处于活动状态的任何插件,该名称将添加到$requires_activating
数组中,该数组通过管理员通知作为必需的插件名称的逗号分隔列表输出。
自定义管理员通知
在完成之前,我们通过创建自己的自定义管理员通知类型来获得一些乐趣。 让我们看看如何添加一些自己的自定义管理员通知类型。 到现在为止,您将完全熟悉WordPress默认提供的四个内置管理通知,但是提出我们自己的一些通知并不难。
不过,首先,注释掉Gwyer_Dismissible_Admin_Notices::init()
所有函数调用,以便我们从头开始。
我们需要为自定义管理员通知类型添加CSS,因此在根插件文件夹中添加一个css
文件夹,并在内部创建一个名为admin-notices.css
的文件。 要将其加入所有管理页面,请在Gwyer_Plugin_Options::init()
添加一个新的add_action
调用。
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_styles' ) );
然后,对于enqueue_styles()
回调,将此方法添加到同一类中:
public function enqueue_styles() {
wp_enqueue_style(
'gwyer-admin-notice-css',
plugin_dir_url( __FILE__ ) . 'css/admin-notices.css'
);
}
现在,让我们设置一个新方法来输出我们的自定义管理员通知。 在Gwyer_Admin_Notices::init()
,添加:
add_action( 'admin_notices', array( $this, 'custom_admin_notices' ) );
然后添加一个回调以显示一系列自定义管理员通知:
/**
* Output custom admin notices.
*/
public function custom_admin_notices() {
?>
<div class="notice notice-big-error"><p>Houston, I definitely think we have a problem!</p></div>
<div class="notice notice-admin-user-award"><p>Congratulations, you've won the Admin user of the year award!</p></div>
<div class="notice notice-light-bulb"><p>Now this is a great idea.</p></div>
<div class="notice notice-social-media"><p>Let's connect!</p></div>
<div class="notice notice-neo"><p>Join Neo and follow the white rabbit. If you see him give him this carrot. The rabbit that is, not Neo!</p></div>
<?php
}
最后,将CSS添加到admin-notices.css
以设置自定义管理通知的样式:
.notice-big-error {
border: 3px solid red;
-webkit-transform: rotateZ(-1deg);
-ms-transform: rotateZ(-1deg);
transform: rotateZ(-1deg);
}
.notice-admin-user-award {
border-left: 5px solid purple;
}
.notice-admin-user-award p:before {
font: normal 24px/1 'dashicons';
content: "\f313";
color: purple;
}
.notice-light-bulb {
border-right: 5px solid #e2e224;
}
.notice-light-bulb p:before {
font: normal 22px/1 'dashicons';
content: "\f339";
color: #e6e610;
}
.notice-social-media {
border-left: 5px solid #1da25f;
padding-bottom: 5px;
}
.notice-social-media p {
padding-bottom: 0;
margin-bottom: 4px;
}
.notice-social-media:after {
font: normal 22px/1 'dashicons';
content: "\f301 \f304 \f462";
color: #888;
}
.notice-neo {
border-right: 10px solid orangered;
border-left: 10px solid orangered;
}
.notice-neo p:before {
font: normal 22px/1 'dashicons';
content: "\f511";
color: orangered;
}
保存更改后,加载任何管理页面以查看我们的自定义管理通知。
从结果来看,谨慎使用自定义管理员通知可能是个好主意,否则您将冒着它们显得花哨的风险。
我不会详细介绍所使用的自定义CSS。 这只是出于一点乐趣,大多数样式都是不言自明的。
为了方便起见,我们将dashicons字体图标用于自定义管理员通知,因为默认情况下在WordPress管理员中可用。 但是您可以导入并使用任何您喜欢的图标进行额外的装饰。
自己尝试代码
本教程系列中的所有代码都包装在WordPress插件中供您下载。 查看代码,对其进行扩展,并实现新的方式来显示(和关闭)管理员通知。 如果您创造了很棒的东西,请务必在评论中让我知道! 我很想看看你的想法。
结论
感谢您加入我这个分为四部分的教程系列。 希望您现在对在自己的项目中实施管理员通知有更多信心。
我们已经介绍了WordPress管理员通知的许多不同方面,包括多种永久关闭它们的方法,如果没有自定义代码,这是不可能的。
创建自己的自定义管理员通知也非常容易,但是实际上,您希望在自己的项目中少量使用它们。 在大多数情况下,最好保持默认的WordPress样式以获得一致的用户体验。
WordPress的经济非常活跃。 有主题,插件,库和许多其他产品可帮助您构建站点和项目。 该平台的开源特性也使其成为一个很好的选择,您可以从中提高自己的编程技能。 无论如何,您都可以在Envato市场上看到我们提供的产品 。
并且不要忘记下载插件并试用代码。 这是一种更好地了解所有部件如何组合在一起的好方法。 并且请通过以下评论让我知道您对本教程的想法。
翻译自: https://code.tutsplus.com/tutorials/persisted-wordpress-admin-notices-part-4--cms-30137