web-dev-qa-db-fra.com

Créer une fonctionnalité pour télécharger plusieurs images dans les Options de thème?

J'ai suivi la méthode utilisée dans le thème Satoshi Wordpress afin de permettre à l'utilisateur de télécharger une image dans une section de la page (et d'ajouter du texte).

Pour le moment, le code me permet de télécharger une image.

Dois-je créer des fichiers séparés pour archiver cela?

(par exemple, custom-slider-1.php, custom-slider-2.php, custom-slider-3.php, etc ...)?

Ou il y a une option plus simple?

Code:

upload-file.php: 

<?php
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], "images/" . $_FILES["uploadfile"]["name"])) { 
  echo "success"; 
} else {
 echo "error";
}
?>

custom-slider.php (il est appelé pour être placé dans un div dans * functions.php ): *

<?php
 $option_fields[] = $slider_image = THEME_PREFIX . "slider_image";
 $option_fields[] = $slider_image_enabled = THEME_PREFIX . "slider_image_enabled";
 $option_fields[] = $slider_text = THEME_PREFIX . "slider_text";

?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajaxupload.3.5.js" ></script>
<script type="text/javascript" >
 $(function(){
  var btnUpload=$('#slider-upload');
  var status=$('#slider-upload-status');
  new AjaxUpload(btnUpload, {
   action: '<?php bloginfo('template_directory'); ?>/upload-file.php',
   name: 'uploadfile',
   onSubmit: function(file, ext){
     if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
     status.text('Only JPG, PNG or GIF files are allowed');
     return false;
    }
    status.text('Uploading...');
   },
   onComplete: function(file, response){
    //On completion clear the status
    status.text('');
    //Add uploaded file to list
    if(response==="success"){
     $('<li></li>').appendTo('#files').html('<img src="<?php bloginfo('template_directory'); ?>/images/'+file+'" alt="" /><br />'+file).addClass('success');
     $('#<?php echo $slider_image; ?>').val(file);
    } else{
     $('<li></li>').appendTo('#files').text(file).addClass('error');
    }
   }
  });

 });
</script>

<div class="postbox">
    <h3>Slider Customization Options</h3>

    <div class="postbox-content">

     <div class="option-row">
      <p>Choose how you would like to display your slider.</p>
     </div><!--end option-row-->

     <div class="option-row">
      <div class="option-name">
       <label>Use Image For Slider</label>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="checkbox" id="<?php echo $slider_image_enabled; ?>" type="checkbox" name="<?php echo $slider_image_enabled; ?>" value="true"<?php checked(TRUE, (bool) get_option($slider_image_enabled)); ?> />
      </div><!--end option-value-->
     </div><!--end option-row-->

     <div class="option-row">
      <div class="option-name">
       <label>Upload An Image</label>
       <span id="slider-upload-status"></span>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="logo-name" id="<?php echo $slider_image; ?>" type="text" name="<?php echo $slider_image; ?>" value="<?php echo get_option($slider_image); ?>" />
       <input type="button" class="background_pattern_button" id="slider-upload" value="Choose Image" />

      </div><!--end option-value-->
  </div><!--end option-row-->

  <div class="option-row">
      <div class="option-name">
       <label>Slider Text</label>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="input-box" id="<?php echo $slider_text; ?>" type="text" name="<?php echo $slider_text; ?>" value="<?php echo get_option($slider_text) ?>" />
      </div><!--end option-value-->
     </div><!--end option-row-->

  <input type="submit" class="button" value="Save Changes" />

    </div>

</div><!--end postbox-->

front-page.php: 

  <div id="slider">
   <img src="<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>" />
  </div>
uploads
1
janoChen

Boucle sur le tableau $_FILES et ajoute chaque fichier séparément. Je n'ai pas un exemple de code complet sous la main, mais juste un extrait de ma classe d'options de thème:

/**
 * Saves uploaded files in media library and the corresponding id in option field.
 *
 * @return void
 */
protected function handle_uploads()
{
    if ( ! isset ( $_FILES ) or empty ( $_FILES ) )
    {
        return;
    }

    foreach ( $_FILES as $file_key => $file_arr )
    {
        // Some bogus upload.
        if ( ! isset ( $this->fields[$file_key] )
            or empty ( $file_arr['type'] )
        )
        {
            continue;
        }

        if ( ! $this->is_allowed_mime( $file_key, $file_arr ) )
        {
            set_theme_mod( $file_key . '_error', 'wrong mime type' );
            continue;
        }

        // The file is allowed, no error until now and the type is correct.
        $uploaded_file = wp_handle_upload(
            $file_arr
        ,   array( 'test_form' => FALSE )
        );

        // error
        if ( isset ( $uploaded_file['error'] ) )
        {
            set_theme_mod( $file_key . '_error', $uploaded_file['error'] );
            continue;
        }

        // add the file to the media library

        // Set up options array to add this file as an attachment
        $attachment = array(
            'post_mime_type' => $uploaded_file['type']
        ,   'post_title'     => $this->get_media_name(
                                    $file_key, $uploaded_file['file']
                                )
        );

        // Adds the file to the media library and generates the thumbnails.
        $attach_id = wp_insert_attachment(
            $attachment
        ,   $uploaded_file['file']
        );

        $this->create_upload_meta( $attach_id, $uploaded_file['file'] );

        // Update the theme mod.
        set_theme_mod( $file_key, $attach_id );
        remove_theme_mod( $file_key . '_error' );
    }
}

handle_uploads() est appelé par save_options() à partir de la même classe. is_allowed_mime() garantit que je ne reçois que les types dont j'ai besoin dans le fichier et get_media_name() recherche un nom prédéfini pour le fichier ("Logo", "bg-body" etc.).

Comme vous pouvez le constater, ce n’est pas si difficile. Utilisez simplement l’API intégrée, pas le code de votre upload-file.php. Il existe de très nombreux cas Edge que WordPress traitera mieux que votre simple move_uploaded_file().

2
fuxia