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

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">&nbsp; &nbsp;&nbsp; &nbsp; <?php $args = array(&nbsp; &nbsp; 'category__in' => wp_get_post_categories( get_queried_object_id() ),&nbsp; &nbsp; 'posts_per_page' => 3,&nbsp; &nbsp; 'orderby' => 'rand',&nbsp; &nbsp; 'post__not_in' => array( get_queried_object_id() )&nbsp; &nbsp; );&nbsp; &nbsp; $the_query = new WP_Query( $args );&nbsp; &nbsp; if ( $the_query->have_posts() ) : ?>&nbsp; &nbsp; <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>&nbsp; &nbsp; <div class="item-masonry overlay">&nbsp; &nbsp; <a href="<?php the_permalink();?>">&nbsp; &nbsp; &nbsp; &nbsp; <div class="posts">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1><?php the_title();?></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ————&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4><?php the_author();?></h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <?php the_post_thumbnail(array(300,300)); ?>&nbsp; &nbsp; </div>&nbsp; &nbsp; </a>&nbsp; &nbsp; <?php endwhile; ?>&nbsp; &nbsp; <?php wp_reset_postdata(); ?>&nbsp; &nbsp; <?php endif; ?></div>