如何在前端将文章类型以单选框形式实现精选文章功能？

问题分析 #

你的代码存在几个关键问题导致功能无法正常工作：

• 单选框value为空，无法识别选中的文章
• 图片地址错误使用get_the_content()，应该调用文章特色图片
• 缺少表单提交逻辑，无法保存用户选择
• 没有标记已选中的精选文章

完整实现代码 #

下面是修复并完善后的代码，包含提交逻辑、单选框展示、选中状态标记三部分：

<?php
// 处理表单提交：保存用户选中的精选文章ID
if (isset($_POST['set_featured_post']) && current_user_can('edit_posts')) {
    $featured_post_id = intval($_POST['featured_post']);
    // 验证文章是否属于当前用户
    $post = get_post($featured_post_id);
    if ($post && $post->post_author == get_current_user_id()) {
        update_user_meta(get_current_user_id(), 'user_featured_post', $featured_post_id);
        // 提交后刷新页面提示
        echo '<div class="notice notice-success">精选文章已设置</div>';
    }
}

// 获取当前用户的文章列表
$current_user = wp_get_current_user();
$attachments = get_posts(array(
    'post_type'      => 'post',
    'posts_per_page' => 500,
    'post_status'    => 'publish', // 只显示已发布文章，可根据需求调整
    'post_parent'    => null,
    'author'         => $current_user->ID
));

// 获取用户已设置的精选文章ID
$current_featured_id = get_user_meta($current_user->ID, 'user_featured_post', true);

if ($attachments) {
    // 表单使用POST方法，提交到当前页面
    echo '<form method="post">';
    foreach ($attachments as $post) {
        setup_postdata($post);
        $post_id = get_the_ID();
        // 标记当前选中的单选框
        $checked = ($post_id == $current_featured_id) ? 'checked' : '';
        // 获取文章特色图片地址，没有则用默认图
        $thumbnail_url = get_the_post_thumbnail_url($post_id, 'thumbnail');
        $thumbnail_url = $thumbnail_url ?: 'https://via.placeholder.com/150'; // 替换为你的默认图地址
        ?>
        <div style="margin-bottom: 10px; display: flex; align-items: center;">
            <input type="radio" name="featured_post" value="<?php echo esc_attr($post_id); ?>" <?php echo $checked; ?>>
            <img src="<?php echo esc_url($thumbnail_url); ?>" alt="<?php echo esc_attr(get_the_title()); ?>" style="width: 150px; margin-left: 10px;">
            <span style="margin-left: 10px;"><?php echo esc_html(get_the_title()); ?></span>
        </div>
        <?php
    }
    wp_reset_postdata();
    // 添加提交按钮
    echo '<button type="submit" name="set_featured_post" class="button">设置为精选</button>';
    echo '</form>';
} else {
    echo '<p>你还没有发布任何文章</p>';
}
?>

在其他页面展示精选文章 #

在需要展示精选文章的页面，添加以下代码即可：

<?php
$current_user = wp_get_current_user();
$featured_post_id = get_user_meta($current_user->ID, 'user_featured_post', true);

if ($featured_post_id) {
    $featured_post = get_post($featured_post_id);
    if ($featured_post && $featured_post->post_author == $current_user->ID) {
        setup_postdata($featured_post);
        ?>
        <div class="featured-post">
            <h2>我的精选文章</h2>
            <?php if (has_post_thumbnail()) : ?>
                <img src="<?php echo get_the_post_thumbnail_url($featured_post_id, 'medium'); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
            <?php endif; ?>
            <h3><?php echo get_the_title(); ?></h3>
            <p><?php echo get_the_excerpt(); ?></p>
            <a href="<?php echo get_permalink(); ?>">阅读全文</a>
        </div>
        <?php
        wp_reset_postdata();
    } else {
        echo '<p>精选文章不存在或已被删除</p>';
    }
} else {
    echo '<p>你还没有设置精选文章</p>';
}
?>

关键改进点说明 #

• 用update_user_meta/get_user_meta存储用户的精选文章ID，确保数据持久化
• 单选框value设置为文章ID，提交后能准确识别选中项
• 使用get_the_post_thumbnail_url获取文章特色图片，避免内容混乱
• 添加表单提交验证，确保只有当前用户能修改自己的精选文章
• 标记已选中的单选框，提升用户体验

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