定製WordPress的位置精選圖片

Question

是否有可能在Wordpress中建立一個選項，允許用戶自定義精選圖片的位置？

當前我正在構建主題，將精選圖片作爲橫幅帖子頂部的橫幅。讓一些用戶請求選項，以便能夠在文章的右上方顯示精選圖片，並在文字周圍顯示文字。

不知道如何解決這個問題。我的第一個想法是在定製商中添加一個選項，但我擔心這將適用於所有博客帖子，而不是單個個人。

另一個想法是在後編輯屏幕（在專業圖像框下）構建一個元框，然後構建一個掛鉤到wp post的函數。

我已經沖刷了谷歌就如何如何做到這一點，但所有我能找到到目前爲止是如何編輯content.php普遍地改變所有的/編輯功能放置圖像的信息。

Answer 1

很難給出一個確切的答案不知道你的模板是如何標記的，但我認爲你必須這樣做的兩個選項。使用插件（高級自定義字段），或者您提到的向後期編輯器添加元框的解決方案。

我會推薦選項1，因爲該插件是穩定的，可配置的，並且如果您需要添加更多的字段將節省您一些時間。

方法1：使用高級自定義字段

下載並從他們的網站安裝該插件：https://www.advancedcustomfields.com

使用插件添加自定義字段。這些方向可能有所幫助：https://www.advancedcustomfields.com/resources/creating-a-field-group/

記下字段名稱，因爲您需要在代碼中使用此名稱。你可能會使用諸如image_placement。我建議你左，設置了值的選擇框，如中心和右。

然後，在你的PHP模板文件，你會想是這樣的：

<?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：自定義元框添加到每個崗位

下面的代碼添加到您的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

榮譽給@ rideron89對我的幫助與解決方案。所以在這裏，如果任何人需要使用它（在一些實現中）：

我保持functions.php有點乾淨，所以我把它放在'incl'文件夾中的另一個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(); ?>