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

2024-09-27 19:15:28

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

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

首先需要添加提示框的脚本，这样才能使用提示框的 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' );

WordPress后台中实现图片上传功能的实例讲解

图片上传文件准备:新建php文件,我用默认主题Twenty Ten来测试,首先在这个主题的文件夹下新建一个文件-myfunctions.php 然后打开functions.php文件在最底部添加下面的代码载入我们新建的这个文件: include_once('myfunctions.php'); 类的代码如下: <?php //类ClassicOptions class ClassicOptions { /* -- getOptions函数获取选项组 -- */ function getOp
整理的一些实用WordPress后台MySQL操作命令

不过假设你的WordPress网站上有成百上千篇文章,而你需要进行全站范围的改动, 这时从后台逐条编辑就有点费时费力了,并且犯错的几率也会提高. 最好的方法是进入WordPress的MySQL数据库执行必要的查询(改动). 通过MySQL可以迅速地完成以上任务,为你节省更多时间. 下面要介绍的就是一些省时省力的WordPress SQL查询方法. 事先备份 WordPress数据库里存储了你精心发表的每一篇文章,来自你的读者的所有评论,以及你对自己网站进行的所有个性化设置. 因此,无论你对自己有
在WordPress的后台中添加顶级菜单和子菜单的函数详解

添加设置页面-add_menu_page函数 add_menu_page(),这个函数是往后台添加顶级菜单先,也就是和"外观"."插件"等一样的顶级菜单. 函数介绍如下: <?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); //page_title页面title标签信息 //$menu_title 菜
WordPress中给文章添加自定义字段及后台编辑功能区域

add_post_meta add_post_meta 函数是 WordPress 中用来给文章或页面添加自定义字段值的一个函数, 其用法与在编写文章时在文章编写界面中利用自定义栏目面板为文章添加自定义字段值的效果是一样的. add_post_meta函数描述为文章添加自定义字段. 常见的使用有:文章浏览次数.喜欢按钮.seo插件等常用插件就是使用的自定义字段功能. 参数详解 add_post_meta($post_id, $meta_key, $meta_value,$unique); $p
Wordpress ThickBox 点击图片显示下一张图的修改方法

以wordpress 3.0.2为例,打开 wp-includes/js/thickbox/thickbox.js,找到以下代码行: 复制代码代码如下: jQuery("#TB_window").append("<a href='' id='TB_ImageOff' title='"+thickboxL10n.close+"'><img id='TB_Image' src='"+url+"' width='"
WordPress中自定义后台管理界面配色方案的小技巧

WordPress 3.8 开始的全新设计的后台支持多颜色选择,默认有八种非常精美的配色,可以让用户自己选择. 关于配色 WordPress 提供了一个函数 wp_admin_css_color() 可以让开发者自定义配色,只需要调用一下这个函数即可完成所有的注册操作. 参数 wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ); $key(string):颜色的 ID $name(string)
给WordPress的编辑后台添加提示框的代码实例分享

WordPress 3.5 新添加了一个提示框功能,可以创建一个提示框,然后指向任何元素,比如下边的例子: 本文就来教你怎么创建一个这样的提示框. 首先需要添加提示框的脚本,这样才能使用提示框的 JS 方法. //挂载提示框脚本 function Bing_admin_pointer_enqueue_scripts(){ wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); } add_action( 'admi
django admin search_fields placeholder 管理后台添加搜索框提示文字

本文主要介绍了django admin search_fields placeholder 管理后台添加搜索框提示文字,分享给大家,具体如下: 如图, Django admin后台生成的搜索框, 默认是没有提示文字的, 不够友好; 网上也没搜到什么好的示例, 于是自己动手实现了一个 0. 已经存在的app名为carousel, 大致相当于如下操作/代码 $ python manage.py startapp carousel # settings.py ``` INSTALLED_APPS =
easyUI实现(alert)提示框自动关闭的实例代码

原理:使用js的定时任务函数setInterval设置时间,然后触发关闭事件参数说明 title:提示框的标题 msg:提示信息内容 ico:显示的提示信息图标,'info','warnning','error'等函数体 function alert_autoClose(title,msg,icon){ var interval; var time=1000; var x=2; //设置时间2s $.messager.alert(title,msg,icon,function(){}); i
微信小程序搜索框组件代码实例

这篇文章主要介绍了微信小程序搜索框组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon>
JS组件Bootstrap实现弹出框和提示框效果代码

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框
PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享

没办法,只能自己研究,经过大概一天时间吧,还是搞好了,写个总结. 出现这种问题,解决方法大概有这几种: 1.权限不够,导致弹出空吧提示框.(直接上链接) http://jingyan.baidu.com/article/066074d6760959c3c21cb0d6.html 就PL/SQL图标上点右键---属性---兼容性--管理员身份运行此程序的勾打上,即可 2.环境变量没设对. ①在安装oracle服务器的机器上搜索下列文件,oci.dllocijdbc10.dll(其中10代表orac
javascript实现延时显示提示框特效代码

本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法.分享给大家供大家参考.具体如下: 先给大家展示一个延迟/定时/强制弹出窗口的JS代码参数解释: 设置时间:Then.setTime(Then.getTime() + 1*60*60*1000) mylove/ttan.htm(过渡网页) ttan.htm中的 http://弹出网页/ 是要弹出的网页 scroll:1(滚动条) status:1(状态栏) help:1(帮助按钮) toolbar=1(工具栏)
JS延时器提示框的应用实例代码解析

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时显示提示框</title> <style> #div1 { float: left; width: 60px; height: 60px; background-color: aqua;
微信小程序实现自定义动画弹框/提示框的方法实例

目录前言 css3 实现动画小程序动画 API-实现动画结语相关文档前言在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画如下是wxml代码 <view> <view class="click-btn" catcht
js右下角弹出提示框示例代码

本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>网页右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px;

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

相关推荐

随机推荐