永久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

智能推荐

oracle 12c 集群安装后的检查_12c查看crs状态-程序员宅基地

文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下:http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态:[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态

解决jupyter notebook无法找到虚拟环境的问题_jupyter没有pytorch环境-程序员宅基地

文章浏览阅读1.3w次,点赞45次,收藏99次。我个人用的是anaconda3的一个python集成环境,自带jupyter notebook,但在我打开jupyter notebook界面后,却找不到对应的虚拟环境,原来是jupyter notebook只是通用于下载anaconda时自带的环境,其他环境要想使用必须手动下载一些库:1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境

国内安装scoop的保姆教程_scoop-cn-程序员宅基地

文章浏览阅读5.2k次,点赞19次,收藏28次。选择scoop纯属意外,也是无奈,因为电脑用户被锁了管理员权限,所有exe安装程序都无法安装,只可以用绿色软件,最后被我发现scoop,省去了到处下载XXX绿色版的烦恼,当然scoop里需要管理员权限的软件也跟我无缘了(譬如everything)。推荐添加dorado这个bucket镜像,里面很多中文软件,但是部分国外的软件下载地址在github,可能无法下载。以上两个是官方bucket的国内镜像,所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn

Element ui colorpicker在Vue中的使用_vue el-color-picker-程序员宅基地

文章浏览阅读4.5k次,点赞2次,收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了,例如:这里的:sty..._vue el-color-picker

迅为iTOP-4412精英版之烧写内核移植后的镜像_exynos 4412 刷机-程序员宅基地

文章浏览阅读640次。基于芯片日益增长的问题,所以内核开发者们引入了新的方法,就是在内核中只保留函数,而数据则不包含,由用户(应用程序员)自己把数据按照规定的格式编写,并放在约定的地方,为了不占用过多的内存,还要求数据以根精简的方式编写。boot启动时,传参给内核,告诉内核设备树文件和kernel的位置,内核启动时根据地址去找到设备树文件,再利用专用的编译器去反编译dtb文件,将dtb还原成数据结构,以供驱动的函数去调用。firmware是三星的一个固件的设备信息,因为找不到固件,所以内核启动不成功。_exynos 4412 刷机

Linux系统配置jdk_linux配置jdk-程序员宅基地

文章浏览阅读2w次,点赞24次,收藏42次。Linux系统配置jdkLinux学习教程,Linux入门教程(超详细)_linux配置jdk

随便推点

matlab(4):特殊符号的输入_matlab微米怎么输入-程序员宅基地

文章浏览阅读3.3k次,点赞5次,收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图:_matlab微米怎么输入

C语言程序设计-文件(打开与关闭、顺序、二进制读写)-程序员宅基地

文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件,可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中,对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数,而关闭则使用fclose函数。在C语言中,可以使用fread和fwrite函数进行二进制读写。‍ Biaoge 于2024-03-09 23:51发布 阅读量:7 ️文章类型:【 C语言程序设计 】在C语言中,用于打开文件的函数是____,用于关闭文件的函数是____。

Touchdesigner自学笔记之三_touchdesigner怎么让一个模型跟着鼠标移动-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏13次。跟随鼠标移动的粒子以grid(SOP)为partical(SOP)的资源模板,调整后连接【Geo组合+point spirit(MAT)】,在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in(CHOP)鼠标位置到metaball的坐标,实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动

【附源码】基于java的校园停车场管理系统的设计与实现61m0e9计算机毕设SSM_基于java技术的停车场管理系统实现与设计-程序员宅基地

文章浏览阅读178次。项目运行环境配置:Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计

Android系统播放器MediaPlayer源码分析_android多媒体播放源码分析 时序图-程序员宅基地

文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多,会从Java-&amp;amp;gt;Jni-&amp;amp;gt;C/C++慢慢分析,后面会慢慢更新。另外,博客只作为自己学习记录的一种方式,对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图

java 数据结构与算法 ——快速排序法-程序员宅基地

文章浏览阅读2.4k次,点赞41次,收藏13次。java 数据结构与算法 ——快速排序法_快速排序法