web-dev-qa-db-fra.com

Widget sélecteur d'images

Je souhaite créer un widget personnalisé afin que l'utilisateur puisse sélectionner 2 images dans la bibliothèque multimédia via une liste déroulante et les afficher dans une barre latérale.

J'ai donc besoin que le widget affiche 2 menus déroulants, chacun affichant le TITRE des images de la médiathèque.

J'ai ensuite besoin de sauvegarder l'URL de ces deux images pour l'utiliser dans le front-end (étiqueté <?php $IMAGEVAR ?> dans la fonction widget.

Voici mon modèle de 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");') );

?>

Je faisais cela en tant que méta-boîte pour les publications, mais je dois créer une version de widget et je ne peux pas trouver comment l’appliquer. J'ai ajouté un modèle frontal pour illustrer son fonctionnement en tant que widget. Ce modèle s'affiche en tant que widget si vous l'incluez dans votre functions.php, mais il est évident qu'il ne fera rien.

Toute aide est grandement appréciée, bravo.

widgetsmedia-library
2
reekogi

Essayez ce 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");') );
4
Joshua Abenazer