WordPress如何添加自定义小工具

首页 WordPress教程 WordPress如何添加自定义小工具
    • 正文
    • 我要评论
    • 今天给大家带来一篇WordPress添加一个自定义小工具的教程,之前主题君分享了WordPress屏蔽后台自带默认小工具,没有印象的朋友可以看看:

      WordPress屏蔽后台自带默认小工具
      WordPress后台自带很多默认小工具,而这些小工具大多也不一定适合我们的WordPress主题,甚至根本没有用到,所以主题君就想着如何能在Wo...

      创建小工具

      创建一个小工具,需要使用 register_widget() 函数挂载一个继承于 WP_Widget 类的类,下边是一个简单的例子,创建了一个随机文章小工具。

      注意,register_widget() 函数需要在 widgets_init 钩子上调用。

      
      class widget_tags extends WP_Widget{
       
          //添加小工具
          function __construct(){
              $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
          }
       
          //小工具内容
          function widget( $args, $instance ){
       
              //导入当前侧边栏设置
              extract( $args, EXTR_SKIP );
       
              //输出小工具前代码
              echo $before_widget;
       
                  //输出小工具标题
                  echo $before_title . '随机文章' . $after_title;
       
                  //随机文章
                  query_posts( 'orderby=rand&showposts=10' );
                  if( have_posts() ):
                      echo '<ul>';
                          while( have_posts() ):
                              the_post();
                              printf( '<li><a href="%s" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                          endwhile;
                      echo '</ul>';
                  endif;
       
              //输出小工具后代码
              echo $after_widget;
          }
       
      }
      function Bing_add_widget_tags(){
          register_widget( 'widget_tags' );
      }
      add_action( 'widgets_init', 'Bing_add_widget_tags' );

      这样,后台就会出现了一个随机文章小工具,拖动到侧边栏上,会在前台显示十篇随机文章。

      小工具设置

      但我们会发现这个小工具并没有设置选项,那如何给这个小工具添加设置选项呢?设置选项涉及类的两个函数,update()(更新小工具设置时的处理函数)和 form()(设置表单)。

      下边的代码添加了一个标题设置和显示文章数量的设置:

      class widget_tags extends WP_Widget{
       
          //添加小工具
          function __construct(){
              $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
          }
       
          //小工具内容
          function widget( $args, $instance ){
       
              //导入当前侧边栏设置
              extract( $args, EXTR_SKIP );
       
              //输出小工具前代码
              echo $before_widget;
       
                  //输出小工具标题
                  echo $before_title . '随机文章' . $after_title;
       
                  //随机文章
                  query_posts( 'orderby=rand&showposts=10' );
                  if( have_posts() ):
                      echo '<ul>';
                          while( have_posts() ):
                              the_post();
                              printf( '<li><a href="%s" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                          endwhile;
                      echo '</ul>';
                  endif;
       
              //输出小工具后代码
              echo $after_widget;
          }
       
          //更新选项
          function update( $instance, $old_instance ){
              $instance['title'] = strip_tags( $instance['title'] );
              $instance['number'] = (int) strip_tags( $instance['number'] );
              return $instance;
          }
       
          //选项表单
          function form( $instance ){
       
              //添加默认设置
              $instance = wp_parse_args( $instance, array(
                  'title' => __( '随机文章', 'Bing' ),
                  'number' => 10
              ) );
       
              //设置表单
      ?>
              <p>
                  <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '标题', 'Bing' ); ?>:</label>
                  <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
              </p>
              <p>
                  <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( '文章数量', 'Bing' ); ?>:</label>
                  <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $instance['number']; ?>" />
              </p>
      <?php
          }
       
      }
      function Bing_add_widget_tags(){
          register_widget( 'widget_tags' );
      }
      add_action( 'widgets_init', 'Bing_add_widget_tags' );

      这样再展开小工具,就能看到设置了:

      WordPress如何添加自定义小工具

      然后,在生成小工具内容的时候使用选项,就能达到用户自定义的效果。

      class widget_tags extends WP_Widget{
       
          //添加小工具
          function __construct(){
              $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
          }
       
          //小工具内容
          function widget( $args, $instance ){
       
              //导入当前侧边栏设置
              extract( $args, EXTR_SKIP );
       
              //添加小工具标题过滤器
              $title = apply_filters( 'widget_name', $instance['title'] );
       
              //输出小工具前代码
              echo $before_widget;
       
                  //输出小工具标题
                  echo $before_title . $title . $after_title;
       
                  //随机文章
                  query_posts( 'orderby=rand&showposts=' . $instance['number'] );
                  if( have_posts() ):
                      echo '<ul>';
                          while( have_posts() ):
                              the_post();
                              printf( '<li><a href="%s" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                          endwhile;
                      echo '</ul>';
                  endif;
       
              //输出小工具后代码
              echo $after_widget;
          }
       
          //更新选项
          function update( $instance, $old_instance ){
              $instance['title'] = strip_tags( $instance['title'] );
              $instance['number'] = (int) strip_tags( $instance['number'] );
              return $instance;
          }
       
          //选项表单
          function form( $instance ){
       
              //添加默认设置
              $instance = wp_parse_args( $instance, array(
                  'title' => __( '随机文章', 'Bing' ),
                  'number' => 10
              ) );
       
              //设置表单
      ?>
              <p>
                  <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '标题', 'Bing' ); ?>:</label>
                  <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
              </p>
              <p>
                  <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( '文章数量', 'Bing' ); ?>:</label>
                  <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $instance['number']; ?>" />
              </p>
      <?php
          }
       
      }
      function Bing_add_widget_tags(){
          register_widget( 'widget_tags' );
      }
      add_action( 'widgets_init', 'Bing_add_widget_tags' );

      文章到这里就已经完成了WordPress如何添加自定义小工具的全部教程了,希望对你有些帮助。

      WordPress如何添加自定义小工具

      扫码关注wp主题君

      精选优质免费WordPress主题模板,分享最新WordPress实用建站教程!

      记住我们的网址:ztJun.com

      收藏 (0)
      打赏 支付宝打赏 微信打赏
      点赞 (6)

      标题:WordPress如何添加自定义小工具

      分类:WordPress教程

      链接:https://www.ztjun.com/1711.html

      版权:

好久不见,甚是想念

相关文章

评论 暂无评论