如何防止砌体网格中“获取相关内容”的重叠？

Question

我在 single.php 页面上有一个有效的 '$lated = get_posts' 砌体。我还添加了一个悬停覆盖层，以便当用户将鼠标悬停在缩略图上时，会出现一个透明的覆盖层以及描述（标题名称、类别和昵称）。我面临的问题是，当我将鼠标悬停在一个相关帖子缩略图上时，每个帖子都会出现叠加层（叠加层被拉伸，不会单独出现）。我也尝试过调用描述，但它只是调用我正在查看的当前帖子（例如当前的 single.php 标题说 Snow ，当我将鼠标悬停在第一个相关帖子时，它还会调用 Snow 的描述），但是，如果您单击第一个相关帖子缩略图，它会将您带到另一篇文章（它不会调用不同文章的描述）。<div class="related">    <h3>Related</h3>    <div class="js-masonry">        <div class="overlay">            <?php $related = get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'orderby' => 'rand', 'numberposts' => 3, 'post__not_in' => array($post->ID) ) );            if( $related ) foreach( $related as $post ) { setup_postdata($post); ?>            <a href="<?php the_permalink()?>"><?php the_post_thumbnail(array(300,300)); ?></a>            <?php } wp_reset_postdata(); ?>            <div class="posts">            <?php foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?>          <h1><?php the_title();?></h1>          ————          <h4><?php the_author();?></h4>            </div>        </div>    </div></div>正如标题所述，如何通过将鼠标悬停在 WordPress 的 single.php 页面上的“$related = get_posts”来提取一篇文章的正确描述和覆盖？

Answer 1

我通过正确地重新组织代码解决了这个问题。

<div class="js-masonry">   

    <?php $args = array(

    'category__in' => wp_get_post_categories( get_queried_object_id() ),

    'posts_per_page' => 3,

    'orderby' => 'rand',

    'post__not_in' => array( get_queried_object_id() )

    );

    $the_query = new WP_Query( $args );

    if ( $the_query->have_posts() ) : ?>

    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <div class="item-masonry overlay">

    <a href="<?php the_permalink();?>">

        <div class="posts">

            <?php foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?> 

            <h1><?php the_title();?></h1>

            ————

            <h4><?php the_author();?></h4>

        </div>

        <?php the_post_thumbnail(array(300,300)); ?>

    </div>

    </a>

    <?php endwhile; ?>

    <?php wp_reset_postdata(); ?>

    <?php endif; ?>

</div>