WordPress存档页Bootstrap每行3列循环添加自定义字段位置咨询

Hey there! Let's get your Bootstrap 3-column layout working correctly with all your custom podcast fields. The main issue right now is that your custom field code is sitting outside the foreach loop, so it won't repeat for each podcast entry. Plus, there are a few syntax and structure issues to clean up.

Here's the corrected, fully functional code:

<?php 
// Set up Bootstrap column configuration
$numOfCols = 3;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols; // Equals 4, so we'll use .col-md-4
?>
<div class="row">
<?php foreach ($rows as $row): 
    // Set up post data for ACF fields (assuming $row is a WP_Post object)
    setup_postdata($row);
?>
    <div class="col-md-<?php echo $bootstrapColWidth; ?>">
        <div class="thumbnail">
            <!-- Use custom thumbnail field if available, fallback to the foto field -->
            <?php if( get_field('thumbnail', $row->ID) ): ?>
                <img src="<?php the_field('thumbnail', $row->ID); ?>" alt="<?php the_title_attribute(); ?>">
            <?php else: ?>
                <img src="user_file/<?php echo $row->foto; ?>" alt="<?php the_title_attribute(); ?>">
            <?php endif; ?>
        </div>
        
        <!-- Podcast embed player -->
        <div class="embed-container">
            <?php the_field('podcast_embed_link', $row->ID); ?>
        </div>
        
        <!-- Podcast title with permalink -->
        <h3>
            <a href="<?php the_permalink($row->ID); ?>" title="<?php the_title_attribute(['post' => $row->ID]); ?>">
                <?php echo get_the_title($row->ID); ?>
            </a>
        </h3>
        
        <!-- Podcast date -->
        <p><b><?php echo get_the_date('', $row->ID); ?></b></p>
        
        <!-- Podcast description -->
        <p><?php the_field('description', $row->ID); ?></p>
    </div>

<?php 
    $rowCount++;
    // Close row and start new one after every 3 columns
    if($rowCount % $numOfCols == 0) {
        echo '</div><div class="row">';
    }
endforeach; 
// Reset post data to avoid conflicts
wp_reset_postdata();
?>
</div><!-- Close the last row -->
</div><!-- #content -->

Key Fixes & Explanations: #

• All Content Inside the Loop: Every part of your podcast entry (thumbnail, embed, title, date, description) is now inside the foreach loop, so it will render for each podcast in your $rows array.
• ACF Field Context: Since we're looping through custom $rows, we pass the post ID ($row->ID) to ACF functions like the_field() and get_field() to ensure we pull the correct data for each entry.
• Valid Bootstrap Classes: The $bootstrapColWidth calculation gives us 4, so .col-md-4 is used directly (no invalid double-number classes like .col-md-44).
• Proper Loop Closure: Removed the stray endwhile (you're using a foreach loop, not while), and added wp_reset_postdata() to clean up after setting up post data.
• Fallback Image: Added a fallback to your original $row->foto field if the thumbnail ACF field isn't set.

Why This Works: #

Each iteration of the foreach loop creates a single Bootstrap column with all the content for one podcast. After every 3 columns, the current row is closed and a new row is started, ensuring the layout wraps correctly on all screen sizes.

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