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

前端技术 2023/09/08 PHP

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\' );


本文地址：https://www.stayed.cn/item/22356

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案