post 之前的画廊 - wordpress ACF

Question

我正在开发 wordpress ACF，其中包含帖子和单个图片库。两者都完美显示。
但我正在尝试加载我的 ACF 图片库 AFTER 帖子...我尝试了很多不同的方式，玩弄'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

看来您已经 post 在 post 循环完全存在之前编辑了画廊（即，甚至不是在循环开始时，而是在它之前。）

如果您使用相同的图库片段并将其放在最后一个 endwhile 之后，您将获得更可接受的结果。

编辑：在不知道或看到更多预期结果的情况下很难发表评论，即如果对每个 post.

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。这将打开开发工具。

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

post 之前的画廊 - wordpress ACF

gallery before post - wordpress ACF

php

wordpress

post

gallery

advanced-custom-fields

CSS

PHP

Chrome 开发工具很棒