给WordPress的编辑后台添加提示框的代码实例分享


Posted in PHP onDecember 25, 2015

WordPress 3.5 新添加了一个提示框功能,可以创建一个提示框,然后指向任何元素,比如下边的例子:

本文就来教你怎么创建一个这样的提示框。

首先需要添加提示框给WordPress的编辑后台添加提示框的代码实例分享的脚本,这样才能使用提示框的 JS 方法。

//挂载提示框脚本
function Bing_admin_pointer_enqueue_scripts(){
  wp_enqueue_style( 'wp-pointer' );
  wp_enqueue_script( 'wp-pointer' );
}
add_action( 'admin_enqueue_scripts', 'Bing_admin_pointer_enqueue_scripts' );

然后使用 pointer() 方法创建一个简单的提示框:

/**
  *WordPress 后台添加提示框
  *http://www.endskin.com/admin-help-box/
*/
function Bing_add_pointer_scripts(){
  $content = '<h3>请设置主题</h3>';
  $content .= '<p>请为新主题进行简单的配置!';
?>  
  <script type="text/javascript">
  //<![CDATA[
  jQuery(document).ready(function($){
    $('#menu-appearance').pointer({//可以指向任何元素
      content: '<?php echo $content; ?>',
      position: {
        edge: 'left',
        align: 'center'
      },
      close: function(){
        //提示框打开之后做的事情
      }
    }).pointer('open');
  });
  //]]>
  </script>
<?php
}
add_action( 'admin_print_footer_scripts', 'Bing_add_pointer_scripts' );

综合代码:

/**
  *WordPress 后台添加提示框
  *http://www.endskin.com/admin-help-box/
*/
function Bing_add_pointer_scripts(){
  $content = '<h3>请设置主题</h3>';
  $content .= '<p>请为新主题进行简单的配置!';
?>  
  <script type="text/javascript">
  //<![CDATA[
  jQuery(document).ready(function($){
    $('#menu-appearance').pointer({//可以指向任何元素
      content: '<?php echo $content; ?>',
      position: {
        edge: 'left',
        align: 'center'
      },
      close: function(){
        //提示框打开之后做的事情
      }
    }).pointer('open');
  });
  //]]>
  </script>
<?php
}
add_action( 'admin_print_footer_scripts', 'Bing_add_pointer_scripts' );
 
//挂载提示框脚本
function Bing_admin_pointer_enqueue_scripts(){
  wp_enqueue_style( 'wp-pointer' );
  wp_enqueue_script( 'wp-pointer' );
}
add_action( 'admin_enqueue_scripts', 'Bing_admin_pointer_enqueue_scripts' );

PHP 相关文章推荐
APMServ使用说明
Oct 23 PHP
JpGraph php柱状图使用介绍
Aug 23 PHP
web server使用php生成web页面的三种方法总结
Oct 28 PHP
PHP时间戳 strtotime()使用方法和技巧
Oct 29 PHP
php实现监听事件
Nov 06 PHP
ThinkPHP Mobile使用方法简明教程
Jun 18 PHP
PHP模板引擎Smarty内置变量调解器用法详解
Apr 11 PHP
ThinkPHP表单令牌错误的相关解决方法分析
May 20 PHP
php cli模式下获取参数的方法
May 05 PHP
实现PHP中session存储及删除变量
Oct 15 PHP
mysqli扩展无法在PHP7下升级问题的解决
Sep 10 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
Feb 10 PHP
smarty高级特性之对象的使用方法
Dec 25 #PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
Dec 25 #PHP
smarty高级特性之过滤器的使用方法
Dec 25 #PHP
WordPress中编写自定义存储字段的相关PHP函数解析
Dec 25 #PHP
PHP加密解密实例分析
Dec 25 #PHP
PHP时间类完整实例(非常实用)
Dec 25 #PHP
PHP图形操作之Jpgraph学习笔记
Dec 25 #PHP
You might like
PHP合并静态文件详解
2014/11/14 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
python 域名分析工具实现代码
2009/07/15 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
大学生个人推荐信范文
2013/11/25 职场文书
大学军训感言
2014/01/10 职场文书
留学自荐信写作方法
2014/01/27 职场文书
岗位廉政承诺书
2014/03/27 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
委托书格式
2014/08/01 职场文书
师德师风整改措施
2014/10/24 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL