WordPress首页模板元框开发：自定义成就展示选择功能

Hey 伙计，我来帮你把这个首页成就展示的元框功能补全。咱们一步步来，让用户既能开关首页成就展示，又能从自定义文章类型capacity_portfolio里挑具体项目。

1. 完成元框的注册与UI渲染 #

你可以把这段代码加到主题的functions.php里（如果之前已经在front-page.php里写了一部分，整合到这里更规范）：

// 注册首页成就设置元框
function capacity_page_add_custom_box() {
    $screens = ['page']; // 只针对页面类型，因为首页是静态页面
    foreach ($screens as $screen) {
        add_meta_box(
            'homepage_achievements_meta', // 元框唯一ID
            '首页成就展示设置', // 元框标题
            'homepage_achievements_meta_box_html', // 渲染内容的回调函数
            $screen,
            'side', // 显示位置：侧边栏
            'default' // 优先级
        );
    }
}
add_action('add_meta_boxes', 'capacity_page_add_custom_box');

// 渲染元框的具体内容
function homepage_achievements_meta_box_html($post) {
    // 安全验证字段
    wp_nonce_field('homepage_achievements_save_meta', 'homepage_achievements_nonce');
    
    // 获取已保存的设置值
    $display_achievements = get_post_meta($post->ID, '_display_homepage_achievements', true);
    $selected_capacity = get_post_meta($post->ID, '_selected_homepage_capacity', true);
    
    ?>
    <p>
        <label for="display_homepage_achievements">
            <input type="checkbox" id="display_homepage_achievements" name="display_homepage_achievements" value="1" <?php checked($display_achievements, '1'); ?>>
            在首页展示成就
        </label>
    </p>

    <!-- 选择项目的容器，默认隐藏，勾选后显示 -->
    <div id="capacity_selection_container" style="<?php echo empty($display_achievements) ? 'display:none;' : ''; ?>">
        <p>
            <label for="selected_homepage_capacity">选择要展示的成就项目:</label><br>
            <select id="selected_homepage_capacity" name="selected_homepage_capacity" style="width:100%;">
                <option value="">-- 请选择项目 --</option>
                <?php
                // 查询所有已发布的capacity_portfolio项目
                $args = [
                    'post_type' => 'capacity_portfolio',
                    'post_status' => 'publish',
                    'posts_per_page' => -1,
                    'orderby' => 'title',
                    'order' => 'ASC'
                ];
                $capacity_posts = new WP_Query($args);
                
                if ($capacity_posts->have_posts()) {
                    while ($capacity_posts->have_posts()) {
                        $capacity_posts->the_post();
                        $selected_attr = selected($selected_capacity, get_the_ID(), false);
                        echo '<option value="' . get_the_ID() . '" ' . $selected_attr . '>' . get_the_title() . '</option>';
                    }
                    wp_reset_postdata(); // 重置查询
                }
                ?>
            </select>
        </p>
    </div>

    <!-- 前端交互：勾选后显示选择框 -->
    <script>
        const toggleCheckbox = document.getElementById('display_homepage_achievements');
        const selectionContainer = document.getElementById('capacity_selection_container');
        
        toggleCheckbox.addEventListener('change', function() {
            selectionContainer.style.display = this.checked ? 'block' : 'none';
        });
    </script>
    <?php
}

2. 保存元框的设置数据 #

接下来添加保存逻辑，确保用户的选择能被正确存储：

// 保存首页成就设置的元数据
function homepage_achievements_save_meta($post_id) {
    // 验证安全字段
    if (!isset($_POST['homepage_achievements_nonce']) || !wp_verify_nonce($_POST['homepage_achievements_nonce'], 'homepage_achievements_save_meta')) {
        return;
    }
    
    // 跳过自动保存
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    
    // 检查用户编辑权限
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    
    // 保存"是否展示"的开关状态
    $display_value = isset($_POST['display_homepage_achievements']) ? '1' : '0';
    update_post_meta($post_id, '_display_homepage_achievements', $display_value);
    
    // 保存选中的项目ID（只有当开关开启时才保存）
    if ($display_value === '1' && isset($_POST['selected_homepage_capacity'])) {
        update_post_meta($post_id, '_selected_homepage_capacity', sanitize_text_field($_POST['selected_homepage_capacity']));
    } else {
        delete_post_meta($post_id, '_selected_homepage_capacity'); // 开关关闭时清空选中值
    }
}
add_action('save_post', 'homepage_achievements_save_meta');

3. 在首页展示选中的成就 #

最后，在你的front-page.php里添加展示代码，把选中的成就内容渲染出来：

<?php
// 获取首页的设置数据
$homepage_id = get_option('page_on_front');
$display_achievements = get_post_meta($homepage_id, '_display_homepage_achievements', true);
$selected_capacity_id = get_post_meta($homepage_id, '_selected_homepage_capacity', true);

// 只有当开关开启且选中了有效项目时才展示
if ($display_achievements === '1' && !empty($selected_capacity_id)) {
    $capacity_post = get_post($selected_capacity_id);
    if ($capacity_post && $capacity_post->post_status === 'publish') {
        ?>
        <section class="homepage-achievements-section">
            <h2 class="achievements-title"><?php echo esc_html($capacity_post->post_title); ?></h2>
            <div class="achievements-content">
                <?php echo apply_filters('the_content', $capacity_post->post_content); ?>
                <!-- 如果有特色图片，也展示出来 -->
                <?php if (has_post_thumbnail($selected_capacity_id)): ?>
                    <div class="achievements-image">
                        <?php echo get_the_post_thumbnail($selected_capacity_id, 'large', ['class' => 'img-fluid']); ?>
                    </div>
                <?php endif; ?>
            </div>
        </section>
        <?php
    }
}
?>

额外小提示 #

• 如果需要支持选择多个成就项目，把<select>改成<select multiple name="selected_homepage_capacity[]">，然后修改保存逻辑为处理数组（用array_map('sanitize_text_field', $_POST['selected_homepage_capacity'])来过滤）。
• 记得根据你的主题风格，给展示区域的CSS类名添加对应的样式哦。

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