web-dev-qa-db-ja.com

CPT内の単一の投稿に複数の画像を挿入する方法

複数の画像をまとめて公開するためのCustom Post Typeを作成しました。

--- >>>タイトル<<< ---
--- >>>画像のデフォルト - サムネイル<<< ---
--- >>>効力<<< ---
--- >>>画像<<< ---
--- >>>画像<<< ---
.....

最初の3つのセクション（タイトル、画像のデフォルト、内容）は基本です。準備ができています。

私はcustom metaboxを使用して各画像のURLを追加することを考えました。ただし、urlによるurlの追加は直感的なものではなく、初心者でも上級者でもユーザーにとってははるかに面倒です。さらに、量は、写真は1、5は10、10などになります。

それでは、どのように私は単一の投稿CPT内に複数の画像を追加するのですか？

ダッシュボードは次のようになります。

--- >>>タイトル<<< ---
--- >>>画像のデフォルト - サムネイル<<< ---
--- >>>効力<<< ---
--- >>>画像を追加する<<< ---

これどうやってするの？プラグインになるか、function.phpに直接アクセスしてください。

custom-post-typesimagesgallery
1
Zkk

更新しました

わかった！私はこのようにして、私はワードプレスエディタ内にギャラリーを作成しました。そしてforeachを使って、ループの各画像とディスプレイのIDを取得しました。

<?php
global $post;
$gallery = get_post_gallery_images( $post );

foreach( $gallery as $image_url ) {
?>
<div class="item">
  <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="<?php echo $image_url ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0">
          <img src="<?php echo $image_url ?>" class="image" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>
<?php 
}
?>
0
Zkk

ご存知のとおり、URLの格納はユーザーにとって不便です。 URLだけでは違うサイズの画像を出力するなどの操作が難しいため、コードにとっても不便です。画像のURLからその添付データへの一般的なの反転を行うのはかなりやりがいがあります。

保管のための典型的なやり方は添付ファイルIDを保管することです。それらは、保存、問い合わせ、出力、そして置き換えられるイメージサイズのような変化に対して弾力性があるのにやさしいです。

残念なことにWPは単一の画像を保存するためのインターフェースを提供しています。

構造については、基本的な方法を説明します。

  1. ネイティブまたはプラグイン拡張のギャラリー機能を使用して、おすすめの画像および残りの画像としてサムネイルをコンテンツに保存します。これは機能するだけで、ユーザーにとっては便利で使い慣れたものですが、ユーザーがそれを破るためのスペースが残ります。
  2. 画像のカスタムインターフェイスを持つカスタムメタボックスを実装します。 Coreはこれにはほとんど役に立ちませんが、周りに複数のカスタムフィールドフレームワークがあると役に立つことがあります。明らかに一般的な使用例です。これにより開発はより困難になりますが、インターフェースはより特殊化され、ユーザーエラーの余地が少なくなります。
1
Rarst

私が理解しているように、フィールドを持つメタボックスを作成し、jQueryを使って画像ボックスを追加/削除する必要があります。また、jQuery UIを使用してフィールドをドラッグ可能にすることもできます。

あなたのメタボックスコードはこのようになります。

// Fields
$prefix = 'your_prefix_';

$custom_meta_fields = array(
array(
   'label' => 'Gallery Images',
   'desc' => 'Add additional images for this portfolio item.',
   'id' => $prefix.'gallery_images',
   'scope' => array('your_custom_post_type'),
   'type' => 'repeatable_image',
),
);

// Add the Meta Box
function add_custom_meta_box()
{
    $post_types = array('your_custom_post_type', 'page', 'post');
    foreach ($post_types as $post_type) {
        add_meta_box(
            'custom_meta_box', // $id
            'Additional Information', // $title
            'show_custom_meta_box', // $callback
             $post_type,
            'normal', // $context
            'high' // $priority
        );
    }
}
add_action('add_meta_boxes', 'add_custom_meta_box');
// The Callback
function show_custom_meta_box()
{
    global $custom_meta_fields, $post;

// Use nonce for verification
echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';
// Begin the field table and loop
echo '<table class="form-table">';

    foreach ($custom_meta_fields as $field) {
        //Check if scope matches post type
$scope = $field[ 'scope' ];
        $field_output = false;
        foreach ($scope as $scopeItem) {
            switch ($scopeItem) {
default: {
if ($post->post_type == $scopeItem) {
    $field_output = true;
}
break;
}
}
            if ($field_output) {
                break;
            }
        }
        if ($field_output) {
            // get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
            $row = 0;
// begin a table row with
echo '<tr>
<th><label for="'.$field['id'].'">'.$field['label'].'</label></th>
<td>';
            switch ($field['type']) {
// text
case 'text':
echo '<input type="text" name="'.$field['id'].'" id="'.$field['id'].'" value="'.$meta.'" size="30" />
<br /><span class="description">'.$field['desc'].'</span>';
break;
// repeatable
case 'repeatable_image':
 echo '<a class="repeatable-add button" href="#">+</a>
         <ul id="'.$field['id'].'-repeatable" class="custom_repeatable">';
 $i = 0;
 if ($meta) {
     foreach ($meta as $row) {
         echo '<li><span class="sort hndle">|||</span>
                     <input type="text" class="img_field" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="'.$row.'" size="30" />
                     <a class="repeatable-remove button" href="#">-</a></li>';
         ++$i;
     }
 } else {
     echo '<li><span class="sort hndle">|||</span>
                 <input class="img_field" type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="" size="30" />
                 <a class="repeatable-remove button" href="#">-</a></li>';
 }
 echo '</ul>
     <span class="description">'.$field['desc'].'</span>';
break;
} //end switch
echo '</td></tr>';
        }
    } // end foreach
echo '</table>'; // end table
}

// Save the Data
function save_custom_meta($post_id)
{
    global $custom_meta_fields;
// verify nonce
if (!isset($_POST['custom_meta_box_nonce']) || !wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__))) {
    return $post_id;
}
// check autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return $post_id;
}
// check permissions
if ('page' == $_POST['post_type']) {
    if (!current_user_can('edit_page', $post_id)) {
        return $post_id;
    } elseif (!current_user_can('edit_post', $post_id)) {
        return $post_id;
    }
}
// loop through fields and save the data
foreach ($custom_meta_fields as $field) {
    $old = get_post_meta($post_id, $field['id'], true);
    if (isset($_POST[$field['id']])) {
        $new = $_POST[$field['id']];
        if ($field['type'] === 'repeatable_ad' || $field['type'] === 'repeatable_image') {
            $new = array_values($new);
        }
    }
    if ($new && $new != $old) {
        update_post_meta($post_id, $field['id'], str_replace('"', "'", $new));
    } elseif ('' == $new && $old) {
        delete_post_meta($post_id, $field['id'], $old);
    }
} // end foreach
}
add_action('save_post', 'save_custom_meta');

そしてあなたのjsはこのようなものである必要があるでしょう

jQuery(document).on('click', '.img_field', function(e) {



var clicked_field = e.target.name;


var custom_uploader;


    e.preventDefault();

    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Select Image',
        button: {
            text: 'Select Image'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        jQuery('input[name="'+ clicked_field +'"]').val(attachment.url);
        jQuery('.custom_preview_image').attr('src', attachment.url);
        jQuery('.custom_media_image').attr('src',attachment.url);
    });

    //Open the uploader dialog
    custom_uploader.open();

});


jQuery('.repeatable-add').click(function() {
    field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true);
    fieldLocation = jQuery(this).closest('td').find('.custom_repeatable li:last');
    jQuery('input', field).val('').attr('name', function(index, name) {
        return name.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    })
    field.insertAfter(fieldLocation, jQuery(this).closest('td'))
    return false;
});

jQuery('.repeatable-remove').click(function(){
    jQuery(this).parent().remove();
    return false;
});

jQuery('.custom_repeatable').sortable({
    opacity: 0.6,
    revert: true,
    cursor: 'move',
    handle: '.sort'
});

私はこれをテストしていないので、うまくいかないかどうか私に知らせてください。そうは言っても、 ACF または CMB2 の方がずっと簡単です。 ）このようなことをするために）とにかく、私はこれが役立つことを願っています。

1
user53340

高度なカスタムフィールドプラグインは、追加の名前付きacfリピーターフィールド www.advancedcustomfields.com/resources/repeater を通じてこの機能を提供します。

0
Unnikrishnan R