WordPress：为特色图片添加下拉菜单，按页面设置object-position

一、自定义代码实现（无需插件） #

这种方式不依赖第三方插件，灵活性更高，步骤如下：

1. 给页面编辑后台添加自定义下拉选项 #

把以下代码添加到主题（或子主题，避免主题更新丢失代码）的functions.php文件中：

// 注册特色图片位置选择元框
function add_featured_image_position_meta_box() {
    add_meta_box(
        'featured_image_position',
        '特色图片显示位置',
        'render_featured_image_position_meta_box',
        'page', // 只给页面添加，需要支持文章的话加上'post'参数
        'side',
        'default'
    );
}
add_action('add_meta_boxes', 'add_featured_image_position_meta_box');

// 渲染下拉选择框
function render_featured_image_position_meta_box($post) {
    // 获取已保存的位置值，默认选居中
    $selected_position = get_post_meta($post->ID, '_featured_image_position', true) ?: 'center';
    wp_nonce_field('save_featured_image_position', 'featured_image_position_nonce');
    ?>
    <select name="featured_image_position">
        <option value="center-top" <?php selected($selected_position, 'center-top'); ?>>顶部居中</option>
        <option value="center" <?php selected($selected_position, 'center'); ?>>居中</option>
        <option value="center-bottom" <?php selected($selected_position, 'center-bottom'); ?>>底部居中</option>
    </select>
    <?php
}

// 保存选择的位置值
function save_featured_image_position_meta_box($post_id) {
    // 验证权限与nonce，防止非法提交
    if (!isset($_POST['featured_image_position_nonce']) || !wp_verify_nonce($_POST['featured_image_position_nonce'], 'save_featured_image_position')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_page', $post_id)) {
        return;
    }
    // 保存或更新自定义字段值
    if (isset($_POST['featured_image_position'])) {
        update_post_meta($post_id, '_featured_image_position', sanitize_text_field($_POST['featured_image_position']));
    }
}
add_action('save_post', 'save_featured_image_position_meta_box');

2. 在页面模板中输出带定位类的特色图片 #

找到你页面模板（比如page.php或自定义模板）中输出特色图片的代码，修改成如下形式：

<?php
if (has_post_thumbnail()) {
    $position_class = get_post_meta(get_the_ID(), '_featured_image_position', true) ?: 'center';
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_url = wp_get_attachment_image_url($thumbnail_id, 'your-custom-size'); // 替换成你需要的图片尺寸
    ?>
    <img src="<?php echo esc_url($thumbnail_url); ?>" 
         alt="<?php echo esc_attr(get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true)); ?>"
         class="featured-image featured-image--<?php echo esc_attr($position_class); ?>"
         style="object-fit: cover;" />
    <?php
}

3. 添加对应的CSS规则 #

在主题的style.css文件中添加：

.featured-image--center-top {
    object-position: center top;
}
.featured-image--center {
    object-position: center;
}
.featured-image--center-bottom {
    object-position: center bottom;
}

完成后，编辑页面时右侧会出现「特色图片显示位置」的下拉选项，选择对应选项后，前端图片就会应用对应的裁剪定位规则。

二、使用插件快速实现 #

如果不想写代码，可以用**Advanced Custom Fields（ACF）**插件快速实现：

1. 安装并激活ACF插件后，在后台「自定义字段」页面新建字段组：

   • 字段组名称：特色图片位置设置
   • 规则：设置为「显示在页面编辑页面」（需要支持文章的话可添加对应规则）
   • 添加一个「选择」类型的字段：
     • 字段名称：featured_image_position
     • 选择选项格式填写：

       center-top : 顶部居中
       center : 居中
       center-bottom : 底部居中
       

     • 字段位置：设置为侧边栏，和原生特色图片选项放在一起更方便操作

2. 修改页面模板的特色图片输出代码，调用ACF字段添加定位类：

<?php
if (has_post_thumbnail()) {
    $position_class = get_field('featured_image_position') ?: 'center';
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_url = wp_get_attachment_image_url($thumbnail_id, 'your-custom-size');
    ?>
    <img src="<?php echo esc_url($thumbnail_url); ?>" 
         alt="<?php echo esc_attr(get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true)); ?>"
         class="featured-image featured-image--<?php echo esc_attr($position_class); ?>"
         style="object-fit: cover;" />
    <?php
}

3. 同样添加前面的CSS规则到样式表，即可实现自定义定位效果。

内容的提问来源于stack exchange，提问作者Churchill