CSS

Question

我正在使用wordpress ACF，帖子和单个图片库。两者都很完美。
但我正在尝试加载我的ACF图片库 AFTER 这些帖子......我尝试了很多不同的方式，玩弄＆＃39 ; ENDIF＆＃39; /＆＃39; endwhile＆＃39;什么都行不通。
知道如何改变订单吗？谢谢！

#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

看来你已经在帖子循环完全存在之前发布了画廊（即，甚至不是在循环开始时，而是在它之前。）

如果您使用相同的图片摘要并在最终endwhile之后将其放置正确，那么您将获得更多可接受的结果。

编辑：如果不知道或看到更多所需的结果，很难发表评论，即如果每个帖子都重复，那么在最终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 + {{1 }和Option。这将打开开发工具。

扩展您的代码，当您将鼠标悬停在每一行（在代码端）时，您将在视口中看到您的边距元素。这样你就可以玩你的造型并使其更加完美

发布之前的画廊 - wordpress ACF

1 个答案:

CSS

PHP

Chrome开发工具很棒