如何修改WordPress模板PHP代码使服务区图片显示在左侧

要把蓝色“Services”区域的图片从右侧移到左侧，不需要移除循环（循环是用来渲染ACF重复字段lirtb_sections的每个区块，移除会导致内容丢失或显示异常），只需要调整循环内列的顺序和对应的样式类即可，具体修改如下：

修改后的完整代码 #

<?php get_template_part('waves/blue', 'top-one'); ?>
<div id="about-wrapper" class="wrapper">
    <div class="wrapper">
        <div class="<?php echo esc_attr( $container ); ?> back-forth-text-image">
            <?php $sections = get_field('lirtb_sections'); ?>
            <?php $numOfRows = count($sections) - 1; ?>

            <?php foreach($sections as $skey=>$section){ ?>
                <div class="row <?php echo($skey < $numOfRows ? 'margin-bottom-double sm-margin-bottom-half' : '') ?>">
                    <!-- 图片列移到左侧，放在文本列之前 -->
                    <div class="col-12 col-md-6  bft-image sm-margin-bottom-quarter">
                        <div class="row">
                            <img src="<?php echo $section['lirtb_image']['url']?>" />
                        </div>  
                        <div class="row">
                            <img src="<?php echo $section['lirtb2_image']['url']?>" />
                        </div>
                    </div>

                    <!-- 文本列移到右侧 -->
                    <div class="col-12 col-md-6 <?php echo ($skey % 2 == 0 ? 'pl-5' : '')?>  bft-text padding-left-half">
                        <div class="bft-text-container">
                            <h6 class="sans-serif font-weight-bold emphasis no-margin"><?php echo $section['lirtb_title'] ?></h6>
                            <h3 class="h2"><?php echo $section['lirtb_header']?></h3>
                            <div class="first-p margin-bottom-half">
                                <?php echo $section['lirtb_text']?>
                            </div>
                            <?php if(
                                    isset($section['lirtb_button_text']) &&
                                     !empty($section['lirtb_button_text']) &&
                                     isset($section['lirtb_link']) &&
                                     !empty($section['lirtb_link'])){?>
                            <a href="<?php echo $section['lirtb_link'] ?>" type="button" class="btn transparent"><?php echo $section['lirtb_button_text'] ?></a>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>
</div>
<?php get_template_part('waves/blue', 'bottom-one'); ?>

关键改动说明 #

1. 调换列的顺序：Bootstrap栅格按HTML代码顺序渲染，把「图片列」放在「文本列」之前，就能让图片显示在左侧。
2. 调整内边距类：把原文本列的padding-right-half改为padding-left-half，保证文本和图片之间的间距协调。
3. 修正奇偶行的间距判断：原代码中奇数行给文本列加pl-5，现在因为列顺序调换，改为偶数行添加该类，保持不同区块的间距逻辑统一；如果不需要交替间距，直接删除这段条件判断即可。

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