WordPress自定义小工具（Widget ）开发实例

WordPress149.1K阅读模式

这是一段有详细注释的WordPress自定义小工具（Widget ）开发实例代码，可用于制作主题时集成自定义小工具，将代码添加到主题functions.php中，具体效果如图：

WordPress自定义小工具（Widget ）开发实例

  1. <?php
  3. /** 
  4.  * Add function to widgets_init that'll load our widget. 
  5.  * @since 0.1 
  6.  */
  7. add_action( 'widgets_init', 'example_load_widgets' );
  9. /** 
  10.  * Register our widget. 
  11.  * 'Example_Widget' is the widget class used below. 
  12.  * 
  13.  * @since 0.1 
  14.  */
  15. function example_load_widgets() {
  16.     register_widget( 'Example_Widget' );
  17. }
  19. /** 
  20.  * Example Widget class. 
  21.  * This class handles everything that needs to be handled with the widget: 
  22.  * the settings, form, display, and update.  Nice! 
  23.  * 
  24.  * @since 0.1 
  25.  */
  26. class Example_Widget extends WP_Widget {
  28.     /** 
  29.      * Widget setup. 
  30.      */
  31.     function Example_Widget() {
  32.         /* Widget settings. */
  33.         $widget_ops = array( 'classname' => 'example', 'description' => __('An example widget that displays a person\'s name and sex.', 'example') );
  35.         /* Widget control settings. */
  36.         $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
  38.         /* Create the widget. */
  39.         $this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
  40.     }
  42.     /** 
  43.      * How to display the widget on the screen. 
  44.      */
  45.     function widget( $args, $instance ) {
  46.         extract( $args );
  48.         /* Our variables from the widget settings. */
  49.         $title = apply_filters('widget_title', $instance['title'] );
  50.         $name = $instance['name'];
  51.         $sex = $instance['sex'];
  52.         $show_sex = isset( $instance['show_sex'] ) ? $instance['show_sex'] : false;
  54.         /* Before widget (defined by themes). */
  55.         echo $before_widget;
  57.         /* Display the widget title if one was input (before and after defined by themes). */
  58.         if ( $title )
  59.             echo $before_title . $title . $after_title;
  61.         /* Display name from widget settings if one was input. */
  62.         if ( $name )
  63.             printf( '<p>' . __('Hello. My name is %1$s.', 'example') . '</p>', $name );
  65.         /* If show sex was selected, display the user's sex. */
  66.         if ( $show_sex )
  67.             printf( '<p>' . __('I am a %1$s.', 'example.') . '</p>', $sex );
  69.         /* After widget (defined by themes). */
  70.         echo $after_widget;
  71.     }
  73.     /** 
  74.      * Update the widget settings. 
  75.      */
  76.     function update( $new_instance, $old_instance ) {
  77.         $instance = $old_instance;
  79.         /* Strip tags for title and name to remove HTML (important for text inputs). */
  80.         $instance['title'] = strip_tags( $new_instance['title'] );
  81.         $instance['name'] = strip_tags( $new_instance['name'] );
  83.         /* No need to strip tags for sex and show_sex. */
  84.         $instance['sex'] = $new_instance['sex'];
  85.         $instance['show_sex'] = $new_instance['show_sex'];
  87.         return $instance;
  88.     }
  90.     /** 
  91.      * Displays the widget settings controls on the widget panel. 
  92.      * Make use of the get_field_id() and get_field_name() function 
  93.      * when creating your form elements. This handles the confusing stuff. 
  94.      */
  95.     function form( $instance ) {
  97.         /* Set up some default widget settings. */
  98.         $defaults = array( 'title' => __('Example', 'example'), 'name' => __('John Doe', 'example'), 'sex' => 'male', 'show_sex' => true );
  99.         $instance = wp_parse_args( (array) $instance, $defaults ); ?>
  101.         <!-- Widget Title: Text Input -->
  102.         <p>
  103.             <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'hybrid'); ?></label>
  104.             <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
  105.         </p>
  107.         <!-- Your Name: Text Input -->
  108.         <p>
  109.             <label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Your Name:', 'example'); ?></label>
  110.             <input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
  111.         </p>
  113.         <!-- Sex: Select Box -->
  114.         <p>
  115.             <label for="<?php echo $this->get_field_id( 'sex' ); ?>"><?php _e('Sex:', 'example'); ?></label>
  116.             <select id="<?php echo $this->get_field_id( 'sex' ); ?>" name="<?php echo $this->get_field_name( 'sex' ); ?>" class="widefat" style="width:100%;">
  117.                 <option <?php if ( 'male' == $instance['format'] ) echo 'selected="selected"'; ?>>male</option>
  118.                 <option <?php if ( 'female' == $instance['format'] ) echo 'selected="selected"'; ?>>female</option>
  119.             </select>
  120.         </p>
  122.         <!-- Show Sex? Checkbox -->
  123.         <p>
  124.             <input class="checkbox" type="checkbox" <?php checked( $instance['show_sex'], true ); ?> id="<?php echo $this->get_field_id( 'show_sex' ); ?>" name="<?php echo $this->get_field_name( 'show_sex' ); ?>" />
  125.             <label for="<?php echo $this->get_field_id( 'show_sex' ); ?>"><?php _e('Display sex publicly?', 'example'); ?></label>
  126.         </p>
  128.     <?php
  129.     }
  130. }
  132. ?>

原文：http://justintadlock.com/

本站文章大部分始于原创，用于个人学习记录，可能对您有所帮助，仅供参考！

WordPress文章与页面互换
WordPress文章与页面互换
图片为王，标题为皇
图片为王，标题为皇
移除WordPress 6.5区块样板菜单项
移除WordPress 6.5区块样板菜单项
获取指定侧边栏中的小工具列表
获取指定侧边栏中的小工具列表
weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • WordPress
  • Wordpress教程
  • WordPress主题
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  14  访客  14
    • boke112导航
      boke112导航 5
      广西南宁市 1F
      回复

      有详细注释的比较好，从而可以举一反三，学习了

      • 寻金笔记
        寻金笔记 6
        广东省深圳市 2F
        回复

        不错

        • 老杨
          老杨 4
          香港 3F
          回复

          构造 widget 的方法 4.3 版本之后改变了……

          • 香港云主机
            香港云主机 3
            重庆市 4F
            回复

            这么长的代码我只能说勉强看得懂，不得不佩服鸟哥的技术专业

            • ExplorePress
              ExplorePress 1
              浙江省嘉兴市 5F
              回复

              建议转载翻译一下注释，就方便理解了，。

              • 星岩博客
                星岩博客 2
                浙江省杭州市 6F
                回复

                全是英文及代码，看起来有难度。

                • 守心斋
                  守心斋 1
                  四川省 7F
                  回复

                  有注释，很详细，学习了很有用。谢谢鸟哥分享。

                  • 免费资源
                    免费资源 4
                    湖北省武汉市 8F
                    回复

                    学习 感谢鸟哥

                    • 网站目录
                      网站目录 1
                      浙江省台州市 9F
                      回复

                      好东西，收藏了

                      • 家电维修
                        家电维修 1
                        湖北省武汉市 10F
                        回复

                        这个小工具感觉不错，收藏了，博主多上点，学习了。

                        http://www.jdwx.cc

                        • 天下
                          天下 2
                          湖北省十堰市 11F
                          回复

                          :smile: 学习了

                          • TeachCourse
                            TeachCourse 2
                            广东省广州市荔湾区 12F
                            回复

                            看不明白，还得继续学习！

                            • 龙笑天
                              龙笑天 5
                              江苏省南京市 13F
                              回复

                              英文注释看着头晕…..

                              • 三百米生活服务中心
                                三百米生活服务中心 1
                                湖南省长沙市 14F
                                回复

                                学习了

                              匿名

                              发表评论

                              匿名网友
                              :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                              拖动滑块以完成验证