web-dev-qa-db-ja.com

テーマオプションで複数の画像をアップロードする機能を作成しますか？

ユーザーがページのセクションに画像をアップロードする（そしてテキストを追加する）ことを可能にするために、私はSatoshi Wordpressテーマで使用された方法に従いました。

今のところ、このコードでは1つの画像をアップロードすることができます。

これをアーカイブするために別々のファイルを作成する必要がありますか？

（例：custom-slider-1.php、custom-slider-2.php、custom-slider-3.phpなど）

それとももっと簡単なオプションがありますか？

コード：

upload-file.php:

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

custom-slider.php（* functions.php のdivに入れるために呼び出されます）： *

<?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

$_FILES配列をループ処理して、各ファイルを別々に追加します。私はテーマのオプションクラスから抜粋した、完全なコード例は手元にはありません。

/**
 * 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()は、同じクラスからsave_options()によって呼び出されます。 is_allowed_mime()は必要な型だけをファイルすることを保証します、そしてget_media_name()はそのファイルの特別な事前定義された名前を探します（"Logo"、"bg-body"など）。

ご覧のとおり、それほど難しいことではありません。 upload-file.phpのコードではなく、組み込みAPIを使用するだけです。 WordPressがあなたの普通のmove_uploaded_file()よりもうまく処理するであろうEdgeケースがたくさんあります。

2
fuxia