WordPressの特注画像をカスタマイズする

Question

Wordpressで画像を配置するオプションをカスタマイズすることは可能ですか？

現在、私が作成しているテーマは、投稿画像の上にバナーとしておすすめ画像を置きます。一部のユーザーに、画像の右上に、画像の周りにテキストの折り返しを入れて、特集画像を表示できるようにするオプションを要求させます。

これに対処する方法については不明です。私の最初の考えはカスタマイザにオプ​​ションを付けることですが、これは個人ベースではなくすべてのブログの投稿に適用されることに懸念しています。

もう一つのアイデアは、ポスト編集画面（feat。イメージボックスの下）にメタボックスを作り、次にwpポストにフックする機能を構築することです。

私はこれを行う方法については、Googleを徹底的に調べてきましたが、これまでに見つかったのはcontent.phpを編集してすべてのおすすめ画像の配置を変更/編集する方法に関する情報です。

Answer 1

テンプレートがどのようにマークアップされているかを知らなくても、正確な答えを出すのは難しいですが、これを行う方法は2つあります。プラグイン（拡張カスタムフィールド）を使用するか、投稿したソリューションを使用して、ポストエディタにメタボックスを追加します。

オプション1プラグインは安定しており、設定が可能で、さらにフィールドを追加する必要がある場合は時間を節約できます。

オプション1：使用高度なカスタムフィールド

ダウンロードして自分のサイトからプラグインをインストールします。https://www.advancedcustomfields.com

カスタムフィールドを追加するプラグインを使用します。これらの方向は役立つかもしれない：あなたのコードでこれを必要になりますようhttps://www.advancedcustomfields.com/resources/creating-a-field-group/

がフィールド名を書き留めておきます。 image_placementのようなものを使用することがあります。 などの値を持つ選択ボックスを設定することをお勧めします。、センターおよび右のような値を持つ選択ボックスを設定することをおすすめします。

<?php if(get_option('image_placement') === 'left') : ?> 
    // Write the markup here when the image be left-aligned 
<?php else if(get_option('image_placement') === 'right') : ?> 
    // Write the markup here when the image should be right-aligned 
<?php else : ?> 
    // Write the markup here when the image should be shown as a banner 
<?php endif; ?> 

オプション2：

次に、あなたのPHPのテンプレートファイルには、あなたはこのような何かをしたいでしょう

があなたのfunctions.phpに次のコードを追加し、各ポストにカスタムメタボックスを追加します。

：

// add the meta box to the post editor page 
function add_image_meta_box($post) { 
    add_meta_box('image_meta_box', 'Image Placement', 'image_build_meta_box', 'post', 'side', 'low'); 
} 
add_action('add_meta_boxes', 'add_image_meta_box'); 

// build the front-end for the meta box (shown on the post editor page) 
function image_build_meta_box($post) { 
    wp_nonce_field(basename(__FILE__), 'image_meta_box_nonce'); 

    $image_placement = get_post_meta($post->ID, '_post_image_placement'); 

    ?> 
    <h3>Image Placement URL</h3> 
    <select name="image_placement"> 
     <option value="left" <?php ($image_placement[0] === 'left') ?; echo 'selected'; ?>>Left</option> 
     <option value="center" <?php ($image_placement[0] === 'center') ?; echo 'selected'; ?>>Center</option> 
     <option value="right" <?php ($image_placement[0] === 'right') ?; echo 'selected'; ?>>Right</option> 
    </select> 
    <?php 
} 

// save the setting 
function image_save_meta_box_data($post_id) { 
    // Check the user's permissions. 
    if (!current_user_can('edit_post', $post_id)) { 
     return; 
    } 

    $image_placement = $_POST['image_placement']; 

    if(isset($image_placement)){ 
     update_post_meta($post_id, '_post_image_placement', sanitize_text_field($image_placement)); 
    } 
} 
add_action('save_post', 'image_save_meta_box_data'); 

これは、このように同じようなマークアップで使用することができ、あなたのポストのそれぞれにフィールドを追加します

<?php $image_placement = get_post_meta($post->ID, '_post_image_placement')[0]; ?> 

<?php if($image_placement === 'left') : ?> 
    // Write the markup here when the image be left-aligned 
<?php else if($image_placement === 'right') : ?> 
    // Write the markup here when the image should be right-aligned 
<?php else : ?> 
    // Write the markup here when the image should be shown as a banner 
<?php endif; ?> 

Answer 2

私は解決策を手伝ってくれました。だれでもそれを使用する必要がある場合は（一部の実装では）

私はfunctions.phpをきれいに保つので、includeファイル内の別のphpファイルに入れて、関数内に組み込みます。PHP」

// add the meta box to the post editor page 
function add_image_meta_box($post) { 
    add_meta_box('image_meta_box', 'Featured Image Placement', 'image_build_meta_box', 'post', 'side', 'low'); 
} 
add_action('add_meta_boxes', 'add_image_meta_box'); 

// build the front-end for the meta box (shown on the post editor page) 
function image_build_meta_box($post) { 
    wp_nonce_field(basename(__FILE__), 'image_meta_box_nonce'); 

    $image_placement_array = get_post_meta($post->ID, '_post_image_placement'); 
    $image_placement = implode (" ",$image_placement_array); 

    ?> 
    <p>Please select the layout/alignment of your featured image <em>(default is full width banner)</em></p> 
    <select name="image_placement"> 
     <option value="default" name="feat_img_align" <?php if($image_placement === 'default'){ echo "selected"; } ?>>Default</option> 
     <option value="left" name="feat_img_align" <?php if($image_placement === 'left'){ echo "selected"; } ?>>Left</option> 
     <option value="right" name="feat_img_align" <?php if($image_placement === 'right'){ echo "selected"; } ?>>Right</option> 
    </select> 
    <?php 
} 

// save the setting 
function image_save_meta_box_data($post_id) { 
    // Check the user's permissions. 
    if (!current_user_can('edit_post', $post_id)) { 
     return; 
    } 

    $image_placement = $_POST['image_placement']; 

    if(isset($image_placement)){ 
     update_post_meta($post_id, '_post_image_placement', sanitize_text_field($image_placement)); 
    } 
} 
add_action('save_post', 'image_save_meta_box_data'); 

私はポストcontent.phpテンプレートに挿入されたコードがした

<?php 
$post_feat_img = quick_resize_to_ratio_and_size(get_post_thumbnail_id($post->ID),1,1,250); 
$alt_text = get_post_meta(get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true); 
$image_placement_array = get_post_meta($post->ID, '_post_image_placement'); 
$image_placement = implode (" ",$image_placement_array); 
?> 

<?php if ($image_placement === 'default') { ?> 
    <p><?php echo get_the_post_thumbnail($post->ID, 'large', array('class'=>'img-responsive center-block img-thumbnail')); ?></p> 
<?php } else if ($image_placement === 'left') { ?> 
    <img src="<?php echo $post_feat_img; ?>" alt="<?php echo $alt_text ?>" class="alignFeatleft img-thumbnail img-responsive"> 
<?php } else if ($image_placement === 'right') { ?> 
    <img src="<?php echo $post_feat_img; ?>" alt="<?php echo $alt_text ?>" class="alignFeatRight img-thumbnail img-responsive"> 
<?php } else { ?> 
    <p><?php echo get_the_post_thumbnail($post->ID, 'large', array('class'=>'img-responsive center-block img-thumbnail')); ?></p> 
<?php } ?> 

<?php the_content(); ?>