选项1：使用高级自定义字段

Question

是否可以在Wordpress中构建一个选项，允许用户自定义特色图像的位置？

目前我正在制作的主题，将精选图片作为横幅放在帖子的顶部。让一些用户请求选项，以便能够在帖子的右上角显示特色图像，文字环绕它。

不确定如何处理此问题。我的第一个想法是在定制服务器中添加一个选项，但我担心这将适用于所有博客帖子而不是个人基础。

另一个想法是在后期编辑屏幕（在feat。图像框下面）构建一个元数据盒，然后构建一个函数来挂钩到wp post。

我已经在google上搜索了如何做到这一点，但到目前为止我能找到的是有关如何编辑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有点干净，所以我把它放在＆＃39; incl＆＃39;中的另一个php文件中。文件夹，它包含在functions.php＆＃34;

中

// 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' );

我在post 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(); ?>

自定义WordPress特色图片的位置

2 个答案:

选项1：使用高级自定义字段

选项2：为每个帖子添加自定义元框