post-wordpress ACF 之前的画廊

Question

我正在开发 wordpress ACF，其中包含帖子和单个图片库。两者都完美显示。
但是我正在尝试加载我的 ACF 的图片库之后帖子...我尝试了许多不同的方式，玩弄 'endif' / 'endwhile' 什么都没有有效。
知道如何更改订单吗？ 谢谢！

#gallerie {
    width: 100%; z-index: 990; position: relative; margin-top: 700px;
}
div.image-home {
    text-align: center;
    margin-bottom: 40px;
}
.post{width: 30%; float: left;}

这就是重要的CSS （上面的菜​​单是固定的）

<?php if(have_posts()) : ?>
<!-- beginning of the gallery -->
<div id="gallerie">
    <?php ;?>
    <?php $images = get_field('image_gallery');?>
    <?php if( $images ): ?>
        <div class="image-home">
            <?php foreach( $images as $image ): ?>
                <a href="<?php echo $image['url']; ?>">
                <img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                               
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<!-- end of the gallery  -->

<?php while(have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>"><br>
        <h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
        <div class="contenu">
            <p><?php the_field('description'); ?></p>
            <p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
        </div>                  
    </div>
 <?php endwhile; ?>

Answer 1

您似乎在帖子循环完全存在之前发布了图库（即，甚至不是在循环开始时，而是在它之前。）

如果您使用相同的图库 sn-p 并将其放在最终的 endwhile 之后，您将获得更多可接受的结果。

编辑：在不知道或看到更多期望结果的情况下发表评论真的很难，即如果每个帖子都重复相同的 sn-p，则可以在最终 endwhile 之前发布。

CSS

只改了一行：

#gallerie {
    width: 100%; z-index: 990; position: relative; margin-top: 20px;
}

PHP

<?php if(have_posts()) : ?>    
<?php while(have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>"><br>
        <h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
        <div class="contenu">
            <p><?php the_field('description'); ?></p>
            <p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
        </div>                  
    </div>
 <?php endwhile; ?>
<!-- beginning of the gallery -->
<div id="gallerie">
    <?php ;?>
    <?php $images = get_field('image_gallery');?>
    <?php if( $images ): ?>
        <div class="image-home">
            <?php foreach( $images as $image ): ?>
                <a href="<?php echo $image['url']; ?>">
                <img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                               
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<!-- end of the gallery  -->

Chrome 开发工具很棒

此外，您使用的是 Chrome，它本身就是一个很棒的开发工具，您使用的是 Mac，所以当您在页面上时，请按 Command+Option 和 i。这将打开开发工具。

展开您的代码，当您将鼠标悬停在每一行上时（在代码端），您将在视口中看到您的边距元素。这将允许您使用您的样式并使其完美