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

quality,Q 70

1638625252 20211204134052 61ab6fe452596

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

Widget22

  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/

类似文章