Bootstrap 4文章卡片集成WordPress插件后显示异常求助

Let's tackle your two main issues: getting the 3-column grid working correctly, and handling posts without featured images.

1. Fix the 3-Column Grid Layout #

Your current code wraps all cards inside a single col-md-12 div, which forces everything into one column. The original Bootsnipp snippet uses a row with individual col-md-4 columns for each card (since 12/4 = 3 columns on medium screens). Here's how to adjust your code:

Modified Loop Structure #

$args = array(
    'post_type' => $settings['post_type'],
    'author__in' => $settings['authors2'],
    'posts_per_page' => $settings['posts_per_page'],
    'orderby' => $settings['orderby'],
    'order' => $settings['order'],
);

// Move styles OUT of the loop to avoid redundant code
?>
<style>
h1{
    text-align:center;
    margin-bottom:50px;
    margin-top:50px;
}
.blog-card-blog {
    margin-top: 30px;
}
.blog-card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.blog-card .blog-card-image {
    height: 60%;
    position: relative;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -30px;
    border-radius: 6px;
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.blog-card .blog-card-image img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    pointer-events: none;
}
.blog-card .blog-table {
    padding: 15px 30px;
}
.blog-table {
    margin-bottom: 0px;
}
.blog-category {
    position: relative;
    line-height: 0;
    margin: 15px 0;
}
.blog-text-success {
    color: #28a745!important;
}
.blog-card-blog .blog-card-caption {
    margin-top: 5px;
}
.blog-card-caption {
    font-weight: 700;
    font-family: "Roboto Slab", "Times New Roman", serif;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.blog-card-caption, .blog-card-caption a {
    color: #333;
    text-decoration: none;
}
p {
    color: #3C4857;
}
p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.blog-card .ftr {
    margin-top: 15px;
}
.blog-card .ftr .author {
    color: #888;
}
.blog-card .ftr div {
    display: inline-block;
}
.blog-card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}
.blog-card .ftr .stats {
    position: relative;
    top: 1px;
    font-size: 14px;
}
.blog-card .ftr .stats {
    float: right;
    line-height: 30px;
}
/* Add style for no-image case */
.blog-card-image.no-image img {
    opacity: 0.7;
    background-color: #f5f5f5;
}
</style>
<?php

echo '<div class="row">'; // Start Bootstrap row
$query = new \WP_Query($args);
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        // Wrap each card in a col-md-4 for 3 columns (add col-sm-6 for 2 columns on small screens)
        echo '<div class="col-md-4 col-sm-6 mb-4">';
?>
<div class="blog-card blog-card-blog">
    <?php 
    // Handle posts without featured images
    if (has_post_thumbnail()) : ?>
    <div class="blog-card-image">
        <?php the_post_thumbnail('medium', array('class' => 'img')); ?>
        <div class="ripple-cont"></div>
    </div>
    <?php else : ?>
    <!-- Show a placeholder image if no featured image exists -->
    <div class="blog-card-image no-image">
        <img src="https://picsum.photos/600/400" alt="<?php the_title_attribute(); ?>" class="img">
        <div class="ripple-cont"></div>
    </div>
    <?php endif; ?>
    <div class="blog-table">
        <h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
        <h4 class="blog-card-caption">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h4>
        <p class="blog-card-description"><?php echo wp_trim_words(get_the_content(), 20); ?></p>
        <div class="ftr">
            <div class="author">
                <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>">
                    <?php echo get_avatar(get_the_author_meta('ID'), 36); ?>
                    <span><?php the_author(); ?></span>
                </a>
            </div>
            <div class="stats">
                <i class="far fa-clock"></i> <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?>
            </div>
        </div>
    </div>
</div>
<?php
        echo '</div>'; // Close column div
    }
    wp_reset_postdata(); // Reset post data after loop
} else {
    echo '<div class="col-12 text-center py-5" style="background:red; color:white;">No posts found</div>';
}
echo '</div>'; // Close row div

2. Key Improvements Explained #

• Grid Fix: By wrapping each card in col-md-4, we get the 3-column layout on medium+ screens. col-sm-6 ensures 2 columns on small screens, and mb-4 adds consistent bottom margin (Bootstrap utility class).
• No-Image Handling: We use has_post_thumbnail() to check for featured images. If none exists, we show a placeholder image (you can replace the URL with your own custom placeholder).
• Redundant Styles: Moved the <style> block outside the loop so it only loads once, instead of once per post.
• Dynamic Content: Replaced static text with WordPress native functions for more accurate, site-specific content:
  • the_permalink() for valid post links
  • wp_trim_words(get_the_content(), 20) for truncated post content
  • get_avatar() and the_author() for dynamic author info
  • human_time_diff() for user-friendly relative post dates
• Post Data Reset: Added wp_reset_postdata() to avoid conflicts with the main WordPress query after using a custom WP_Query.

3. Additional Checks #

Make sure your WordPress theme is loading Bootstrap 4 CSS (the original snippet depends on it). If your theme doesn't include Bootstrap, enqueue it in your plugin with this code:

function my_plugin_enqueue_bootstrap() {
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css');
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_bootstrap');

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