Image picker widget

时间:2011-11-17 作者:rgdigi

我想创建一个自定义小部件,以便用户可以通过下拉框从媒体库中选择2个图像,并将它们显示在侧栏中。

因此,我需要小部件显示2个下拉列表,每个下拉列表显示媒体库中图像的标题。

然后我需要保存这两个图像的url,以便在前端使用(标记为<?php $IMAGEVAR ?>widget 作用

这是我的小部件模板->

<?php
class Image_Picker extends WP_Widget
{
  function Image_Picker() {
    $widget_ops = array(\'classname\' => \'Image_Picker\', \'description\' => \'Pick 2 images from media library\');
    $this->WP_Widget(\'Image_Picker\', \'Image Picker\', $widget_ops);
  }

  function form() {
  //WIDGET BACK-END SETTINGS
    echo \'<select name="link1">\';
    echo \'<option value="image1" selected>Image 1 Title</option>\';
    echo \'<option value="image2">Image 2 Title</option>\';
    echo \'<option value="image3">Image 3 Title</option>\';
    echo \'</select><br>\';
    echo \'<select name="link2">\';
    echo \'<option value="image1" selected>Image 1 Title</option>\';
    echo \'<option value="image2">Image 2 Title</option>\';
    echo \'<option value="image3">Image 3 Title</option>\';
    echo \'</select>\';
  }

  function update() {
  //WIDGET SAVE FUNCTION
  }

  function widget() {
  //WIDGET FRONT-END VIEW
  ?>

    <!-- Display images -->
    <div class="sidebar-image"><img src="<?php $IMAGEVAR ?>" alt="" width="203" height="271" border="0"></div>
    <div class="sidebar-image"><img src="<?php $IMAGEVAR ?>" alt="" width="177" height="207" border="0"></div>

<?php
  }
}

// Add class for Random Posts Widget
add_action( \'widgets_init\', create_function(\'\', \'return register_widget("Image_Picker");\') );

?>
我一直在做文章的元框,但我需要制作一个小部件版本,无法解决如何实现它。我添加了一个前端模板来说明它是如何作为一个小部件工作的,如果您将其包含在functions.php, 但很明显它什么都做不了。。。

非常感谢您的帮助,干杯。

1 个回复
最合适的回答,由SO网友:Joshua Abenazer 整理而成

Try this code.

class Image_Picker extends WP_Widget
{
  function Image_Picker() {
    $widget_ops = array(\'classname\' => \'Image_Picker\', \'description\' => \'Pick 2 images from media library\');
    $this->WP_Widget(\'Image_Picker\', \'Image Picker\', $widget_ops);
  }

  function form($instance) {
      //WIDGET BACK-END SETTINGS
      $instance = wp_parse_args((array) $instance, array(\'link1\' => \'\', \'link2\' => \'\'));
      $link1 = $instance[\'link1\'];
      $link2 = $instance[\'link2\'];
      $images = new WP_Query( array( \'post_type\' => \'attachment\', \'post_status\' => \'inherit\', \'post_mime_type\' => \'image\' , \'posts_per_page\' => -1 ) );
      if( $images->have_posts() ){ 
          $options = array();
          for( $i = 0; $i < 2; $i++ ) {
              $options[$i] = \'\';
              while( $images->have_posts() ) {
                  $images->the_post();
                  $img_src = wp_get_attachment_image_src(get_the_ID());
                  $the_link = ( $i == 0 ) ? $link1 : $link2;
                  $options[$i] .= \'<option value="\' . $img_src[0] . \'" \' . selected( $the_link, $img_src[0], false ) . \'>\' . get_the_title() . \'</option>\';
              } 
         } ?>
      <select name="<?php echo $this->get_field_name( \'link1\' ); ?>"><?php echo $options[0]; ?></select>
      <select name="<?php echo $this->get_field_name( \'link2\' ); ?>"><?php echo $options[1]; ?></select><?php
      } else {
            echo \'There are no images in the media library. Click <a href="\' . admin_url(\'/media-new.php\') . \'" title="Add Images">here</a> to add some images\';
      }

  }

  function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance[\'link1\'] = $new_instance[\'link1\'];
      $instance[\'link2\'] = $new_instance[\'link2\'];
      return $instance;
  }

  function widget($args, $instance) {
      $link1 = ( empty($instance[\'link1\']) ) ? 0 : $instance[\'link1\'];
      $link2 = ( empty($instance[\'link2\']) ) ? 0 : $instance[\'link2\']; ?>

      <!-- Display images --><?php 
      if( !( $link1 || $link2 ) ) {
          echo "Please configure this widget.";
      } else { 
          if($link1) { ?><div class="sidebar-image"><img src="<?php echo $link1; ?>" alt="" width="203" height="271" border="0"></div><?php }
          if($link1) { ?><div class="sidebar-image"><img src="<?php echo $link2; ?>" alt="" width="177" height="207" border="0"></div><?php }
      } 
  }
}

// Add class for Random Posts Widget
add_action( \'widgets_init\', create_function(\'\', \'return register_widget("Image_Picker");\') );
结束

相关推荐

Why use widgets?

我对使用WordPress很陌生,我想知道使用小部件的好处是什么?看here 这听起来像是为那些不是程序员的人准备的,他们想在他们的网站上添加插件。对吗?或者小部件是否在某种程度上使站点更加健壮?