WordPress-写插件增加小工具(Widget)的方法

Categories Wordpress建站
WordPress-写插件增加小工具(Widget)的方法
写这篇文章的目的,是因为在使用WP-MulticolLinks插件时,发现只能增加一个小工具(Widget)到工具栏。如下图,这样没有办法按照类别增加多列友链小工具。 Wordpress-写插件增加小工具(Widget)的方法 于是对该插件做了修改,可以支持在后台拖动多个多列友情链接小工具。 Wordpress-写插件增加小工具(Widget)的方法 以下是在插件中增加代码实现多列的方法:
  • 注册我们的小工具,在widget界面初始化时可以在后台界面中增加我们的小工具
// 以下为在widgets界面初始化时,注册我们自己定义的小工具
function register_ex_widget() {
    register_widget( 'EX_Widget' );
}
add_action( 'widgets_init', 'register_ex_widget' );
  • 定义小工具的类,继承自WP_Widget,这个基类是可以创建多个实例的
// 自定小工具类,继承WP_Widget
class EX_Widget extends WP_Widget {
    // 初始化设定,定义小工具的名字等基本信息
    function EX_Widget() {
        $widget_ops = array( 'classname' => 'side_ex', 'description' => '设定多列友情链接');
        $control_ops = array( 'width' => 300, 'height' => 500, 'id_base' => 'side_ex-widget' );
        $this->WP_Widget( 'side_ex-widget', '多列友情链接', $widget_ops, $control_ops );
    }
    // 小工具在工具栏显示的函数,之后介绍具体实现
    function widget( $args, $instance ) {
  
    }
    // 更新Widget时执行该函数
    function update( $new_instance, $old_instance ) {
        return $instance;
    }
    // Widget菜单的显示时执行该函数
    function form( $instance ) {
    }
}
  • widget函数实现
function widget( $args, $instance ) {
   // 以上均为转化参数用于后续传递
   $this_title = empty($instance['title']) ? __('Links', 'wp-multicollinks') : $instance['title'];
   $orderbyParam = 'name';
   if ($instance['orderby'] == 2) {
     $orderbyParam = 'url';
   } else if ($instance['orderby'] == 3) {
     $orderbyParam = 'rating';
   } else if ($instance['orderby'] == 4) {
     $orderbyParam = 'rand';
   }
   $orderParam = 'ASC';
   if ($instance['order'] == 2) {
     $orderParam = 'DESC';
   }
   // 组合参数字符串,用于wp_multicollinks函数执行时使用。wp_multicollinks为显示友情链接的函数,原插件就有定义
   $argsBinding = 	  'limit='	    . $instance['number'] 
           . '&columns='	. $instance['columns'] 
           . '&category='	. $instance['category'] 
           . '&orderby='	. $orderbyParam 
           . '&order='		. $orderParam 
           . '&navigator='	. ($instance['navigator'] ? 'true' : 'false');
               extract( $args );// $args裡可以拿到所在栏位的资讯,如before_widget、after_widget..等
   echo $before_widget;
   echo "<h2 class=\"widget-title\">$this_title</h2>";
   echo '<ul>';
   wp_multicollinks($argsBinding);
   echo '</ul>';       
   echo $after_widget;	
   }
  • 后台小工具显示及更新函数实现
// 於後台更新Widget時會做的事
    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        //用填写的值给新创建的Widget实例赋值
    $instance['title'] = strip_tags( $new_instance['title'] );
    $instance['number'] = strip_tags( $new_instance['number'] );
    $instance['columns'] = strip_tags( $new_instance['columns'] );
    $instance['category'] = strip_tags( $new_instance['category'] );
    $instance['orderby'] = strip_tags( $new_instance['orderby'] );
    $instance['order'] = strip_tags( $new_instance['order'] );
    $instance['navigator'] = strip_tags( $new_instance['navigator'] );
    
        return $instance;
    }
     
    // Widget在後台模組頁的外觀
    function form( $instance ) {
        // 可以用数组设定显示小工具表格的时的预设值
    $defaults = array('title'=>'友情链接');
                $instance = wp_parse_args( (array) $instance, $defaults ); ?>
  // 表项的显示,显示时应该要能加载出之前已经保存的内容	
    <p>
      <label  for="<?php echo $this->get_field_id( 'title' ); ?>">
        <?php _e('Title: ', 'wp-multicollinks'); ?>
        <input class="widefat" id="title" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
      </label>
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'number' ); ?>">
          <?php _e('Number of links to show: ', 'wp-multicollinks'); ?>
          
      </label>
      <input style="width: 25px;" id="number" name="<?php echo $this->get_field_name( 'number' );?>" type="text" value="<?php echo $instance['number']; ?>" />
      <br />
      <small><?php _e('(0 for ∞)', 'wp-multicollinks'); ?></small>
    </p>
       //以下省略剩余表项代码
   }
最后,放上插件链接,点击下载 后解压到wordpress的plugin目录,启用插件即可使用 P.S. 原插件由mg12(http://www.fighton.cn/)编写

猜你喜歡

升級到WordPress 4.9.8 Wordpress後台最近一直在推送Gutenberg(古騰堡)編輯器。本想直接打開試試,發現Wordpress必須升級到新版才可。 做完備份,便做了升級,第一時間試用了古騰堡,發現與原生編輯器完全不同。但是各有利弊。 好處如下: 界面更大氣好看 如下圖: 所有文章標題、段落、圖...
WordPress: 简单修改七牛云图床插件支持Gutenburg(古腾堡)... 前言 博客空间有限,一直使用七牛云图床和开心洋葱的图床插件做图片上传。之前按照《升級到WORDPRESS 4.9.8》介绍更新古腾堡编辑器后,发现插件失效。本文介绍简单修改,让Gutenberg后台仍可使用插件做图片上传。 注:本文修改简单,并非实现Gutenberg Block,若您...
WordPress如何关联熊掌号 WordPress关联熊掌号 前言 做站还是希望能得到大家的关注,百度作为国内最大的搜索引擎,给站长提供了熊掌号平台。绑定网站后,百度搜索会倾向于优先展现熊掌号的内容,可以为网站引入一定搜索流量。 通过摸索,得到建立熊掌号的流程如下: 建立熊掌号 Wordpress页面...
WordPress显示数学公式:WP-KaTeX插件 + VS Code Markdown Math... 前言     最近希望在了解一些机器学习的相关知识,并在博客里做一些记录。先从著名的Tom Mitchell大神的《机器学习》开始。奈何发现数学公式过多,用WORDPRESS使用MARKDOWN编辑器里介绍的方法做笔记,想添加公式发现力不从心。经过搜索,摸索到后文的方法。 本地编辑:VS Code...
WordPress:解决Autoptimize+Enlighter插件冲突 最近博客增加了不少图片,头部也增加了不少自定义代码,导致页面打开速度变慢。便在后台给博客增加了Autoptimize插件压缩一下CSS和JS脚本,以减小页面大小。安装后,整体运行速度的确有提高。但是打开类似文章《LINUX电源管理介绍-1》后,发现里边的Enlighter代码高亮全不见了。如下图:...

版权声明:本站文章除非特别声明,均为L&H原创。允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。

本文链接:WordPress-写插件增加小工具(Widget)的方法 @ L&H site


2 thoughts on “WordPress-写插件增加小工具(Widget)的方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

+ 85 = 91

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据