2016-04-08 26 views
3

私はカスタム投稿をしています。私は多くの特集画像をアップロードしたいと思います。私はそれをやっているいくつかのプラグインがあることを知っているが、私はプラグインをインストールせずにそれを試してみたいです。出来ますか? 何か助けを借りていただければ幸いです。カスタム投稿(Wordpress)に複数の特集画像をアップロードする

答えて

7

さて、特集は1つしかありません。しかし、新しい画像を追加できるカスタムメタボックスを作成することができます。ここではワードプレスアップローダーを使用した例です:

のfunctions.phpまたは私-plugin.php

//init the meta box 
add_action('after_setup_theme', 'custom_postimage_setup'); 
function custom_postimage_setup(){ 
    add_action('add_meta_boxes', 'custom_postimage_meta_box'); 
    add_action('save_post', 'custom_postimage_meta_box_save'); 
} 

function custom_postimage_meta_box(){ 

    //on which post types should the box appear? 
    $post_types = array('post','page'); 
    foreach($post_types as $pt){ 
     add_meta_box('custom_postimage_meta_box',__('More Featured Images', 'yourdomain'),'custom_postimage_meta_box_func',$pt,'side','low'); 
    } 
} 

function custom_postimage_meta_box_func($post){ 

    //an array with all the images (ba meta key). The same array has to be in custom_postimage_meta_box_save($post_id) as well. 
    $meta_keys = array('second_featured_image','third_featured_image'); 

    foreach($meta_keys as $meta_key){ 
     $image_meta_val=get_post_meta($post->ID, $meta_key, true); 
     ?> 
     <div class="custom_postimage_wrapper" id="<?php echo $meta_key; ?>_wrapper" style="margin-bottom:20px;"> 
      <img src="<?php echo ($image_meta_val!=''?wp_get_attachment_image_src($image_meta_val)[0]:''); ?>" style="width:100%;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" alt=""> 
      <a class="addimage button" onclick="custom_postimage_add_image('<?php echo $meta_key; ?>');"><?php _e('add image','yourdomain'); ?></a><br> 
      <a class="removeimage" style="color:#a00;cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" onclick="custom_postimage_remove_image('<?php echo $meta_key; ?>');"><?php _e('remove image','yourdomain'); ?></a> 
      <input type="hidden" name="<?php echo $meta_key; ?>" id="<?php echo $meta_key; ?>" value="<?php echo $image_meta_val; ?>" /> 
     </div> 
    <?php } ?> 
    <script> 
    function custom_postimage_add_image(key){ 

     var $wrapper = jQuery('#'+key+'_wrapper'); 

     custom_postimage_uploader = wp.media.frames.file_frame = wp.media({ 
      title: '<?php _e('select image','yourdomain'); ?>', 
      button: { 
       text: '<?php _e('select image','yourdomain'); ?>' 
      }, 
      multiple: false 
     }); 
     custom_postimage_uploader.on('select', function() { 

      var attachment = custom_postimage_uploader.state().get('selection').first().toJSON(); 
      var img_url = attachment['url']; 
      var img_id = attachment['id']; 
      $wrapper.find('input#'+key).val(img_id); 
      $wrapper.find('img').attr('src',img_url); 
      $wrapper.find('img').show(); 
      $wrapper.find('a.removeimage').show(); 
     }); 
     custom_postimage_uploader.on('open', function(){ 
      var selection = custom_postimage_uploader.state().get('selection'); 
      var selected = $wrapper.find('input#'+key).val(); 
      if(selected){ 
       selection.add(wp.media.attachment(selected)); 
      } 
     }); 
     custom_postimage_uploader.open(); 
     return false; 
    } 

    function custom_postimage_remove_image(key){ 
     var $wrapper = jQuery('#'+key+'_wrapper'); 
     $wrapper.find('input#'+key).val(''); 
     $wrapper.find('img').hide(); 
     $wrapper.find('a.removeimage').hide(); 
     return false; 
    } 
    </script> 
    <?php 
    wp_nonce_field('custom_postimage_meta_box', 'custom_postimage_meta_box_nonce'); 
} 

function custom_postimage_meta_box_save($post_id){ 

    if (! current_user_can('edit_posts', $post_id)){ return 'not permitted'; } 

    if (isset($_POST['custom_postimage_meta_box_nonce']) && wp_verify_nonce($_POST['custom_postimage_meta_box_nonce'],'custom_postimage_meta_box')){ 

     //same array as in custom_postimage_meta_box_func($post) 
     $meta_keys = array('second_featured_image','third_featured_image'); 
     foreach($meta_keys as $meta_key){ 
      if(isset($_POST[$meta_key]) && intval($_POST[$meta_key])!=''){ 
       update_post_meta($post_id, $meta_key, intval($_POST[$meta_key])); 
      }else{ 
       update_post_meta($post_id, $meta_key, ''); 
      } 
     } 
    } 
} 

より多くの画像を作成するには、custom_postimage_meta_box_func($post)custom_postimage_meta_box_save($post)

$meta_keys -arrayを調整することができます

保存した画像IDを取得するには、get_post_meta($post_id, 'second_featured_image', true);を使用できます。そのため、おそらくこのような:

<?php echo wp_get_attachment_image(get_post_meta($post_id, 'second_featured_image', true),'thumbnail'); ?>

+0

あなたの答え、乗車券のために余分なメタボックスを追加するソリューションをありがとうといいですねそこに画像をアップロードします。私はそのように試みます。再度ありがとう –

+0

本当に働いてくれてありがとうNicoたくさんありがとう。保存された画像を取得するには、次のようにしました。<?php echo wp_get_attachment_image(get_post_meta(get_the_ID()、 'second_featured_image'、true)、 'full'); ?> –

+0

よろしくお願いします。私はそれがうまくいってうれしいです。 –