纯代码实现Metabox：添加文章页滑块启用复选框功能

Got it, let's walk through building this custom metabox and slider functionality entirely with code—no plugins needed. I'll break this down into easy-to-follow steps that you can drop right into your WordPress theme or a custom plugin.

First, we need to tell WordPress to add our metabox to the post edit screen. We'll use the add_meta_box() function hooked to add_meta_boxes:

function add_slider_metabox() {
    add_meta_box(
        'slider_metabox', // Unique ID for the metabox
        'Slider Settings', // Visible title in the post editor
        'render_slider_metabox', // Callback function to render content
        'post', // Apply to posts (swap with 'page' if you want it for pages too)
        'side', // Placement in the editor (side/normal/advanced)
        'default' // Priority relative to other metaboxes
    );
}
add_action('add_meta_boxes', 'add_slider_metabox');

Next, we'll create the callback function that outputs the actual checkbox in the metabox. We'll also pre-check the box if the post was already marked to show in the slider:

function render_slider_metabox($post) {
    // Add a nonce field for security (prevents unauthorized saves)
    wp_nonce_field('save_slider_metabox', 'slider_metabox_nonce');

    // Get the existing value from post meta to retain state on edit
    $show_in_slider = get_post_meta($post->ID, '_show_in_slider', true);
    $checked_state = ($show_in_slider === 'yes') ? 'checked' : '';

    // Output the checkbox with a clear label
    echo '<label for="show_in_slider">';
    echo '<input type="checkbox" id="show_in_slider" name="show_in_slider" ' . $checked_state . '>';
    echo ' Display this post in the homepage slider';
    echo '</label>';
}

We need to hook into the save_post action to save the checkbox value when the post is updated. Don't skip security checks—they're critical to prevent misuse:

function save_slider_metabox_data($post_id) {
    // Skip auto-saves (we don't want to save during draft previews)
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

    // Verify the nonce to ensure the request is legitimate
    if (!isset($_POST['slider_metabox_nonce']) || !wp_verify_nonce($_POST['slider_metabox_nonce'], 'save_slider_metabox')) return;

    // Check that the current user has permission to edit this post
    if (!current_user_can('edit_post', $post_id)) return;

    // Save the checkbox value (set to 'yes' if checked, 'no' otherwise)
    $slider_value = isset($_POST['show_in_slider']) ? 'yes' : 'no';
    update_post_meta($post_id, '_show_in_slider', $slider_value);
}
add_action('save_post', 'save_slider_metabox_data');

Now, let's create a function to pull all posts marked for the slider and render them. You can place this wherever you want your slider to appear—like header.php, a custom template part, or even turn it into a shortcode:

function display_post_slider() {
    // Query posts marked to show in the slider
    $slider_query = new WP_Query(array(
        'post_type' => 'post',
        'posts_per_page' => 5, // Adjust how many slider posts you want to show
        'meta_key' => '_show_in_slider',
        'meta_value' => 'yes',
        'orderby' => 'date',
        'order' => 'DESC' // Show newest slider posts first
    ));

    if ($slider_query->have_posts()) {
        echo '<div class="post-slider">';
        while ($slider_query->have_posts()) {
            $slider_query->the_post();
            echo '<div class="slider-slide">';
            // Show post thumbnail if available
            if (has_post_thumbnail()) {
                the_post_thumbnail('large');
            }
            // Add post title linked to the full article
            echo '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
            // Add a short excerpt
            echo '<p>' . wp_trim_words(get_the_excerpt(), 20) . '</p>';
            echo '</div>';
        }
        echo '</div>';
        // Reset the query to avoid conflicts with other post loops
        wp_reset_postdata();
    }
}

To make the slider look functional, add this basic CSS to your theme's style.css or the customizer's additional CSS section:

.post-slider {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px 0;
    scroll-snap-type: x mandatory;
}

.slider-slide {
    min-width: 300px;
    background: #fff;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    scroll-snap-align: start;
}

.slider-slide img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

If you want a more polished slider with prev/next buttons or auto-scroll, you can add a simple JavaScript snippet, but the above gives you a fully functional starting point that works without extra scripts.

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