永久WordPress管理员注意事项:第4部分-程序员宅基地

技术标签: ViewUI  python  java  php  js  javascript  

到目前为止,在本系列文章中,我们已经介绍了两种消除永久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。 这将用于专门针对我们感兴趣的管理员通知。

具有自定义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已加载! 消息输出到浏览器控制台。

管理员通知JavaScript已加载

admin-notices.phpJavaScript代码更新为以下代码:

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请求

如果请求成功,那么您将看到处理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,并且将显示我们的管理员通知。

nag管理员通知的示例

尝试激活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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cunjie3951/article/details/106917951

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些

PHP设置谷歌验证器(Google Authenticator)实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数,兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios

如何将EXCEL表导入plsql数据库中-程序员宅基地

文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql

Git常用命令速查手册-程序员宅基地

文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...

分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120-程序员宅基地

文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120

【C++缺省函数】 空类默认产生的6个类成员函数_空类默认产生哪些类成员函数-程序员宅基地

文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数

推荐文章

热门文章

相关标签