WordPress自定义小工具(Widget )开发实例

2015年10月22日03:41:04 13 6,270

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

WordPress自定义小工具(Widget )开发实例

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

原文:http://justintadlock.com/

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:13   其中:访客  13   博主  0

    • boke112导航 5

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

      • 寻金笔记 6

        不错

        • 老杨 4

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

          • 香港云主机 3

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

            • ExplorePress 1

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

              • 星岩博客 2

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

                • 守心斋 1

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

                  • 免费资源 4

                    学习 感谢鸟哥

                    • 网站目录 1

                      好东西,收藏了

                      • 家电维修 1

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

                        http://www.jdwx.cc

                        • 天下 2

                          :smile: 学习了

                          • TeachCourse 2

                            看不明白,还得继续学习!

                            • 龙笑天 4

                              英文注释看着头晕…..