如何防止 Masonry Grid 中“获取相关内容”的重叠？答案

【问题标题】：How do I prevent overlaps for 'get related content' in a Masonry Grid?如何防止 Masonry Grid 中“获取相关内容”的重叠？
【发布时间】：2020-08-09 16:24:23
【问题描述】：

我在 single.php 页面上有一个有效的 '$related = get_posts' 砌体。我还添加了一个悬停覆盖，这样当用户悬停在缩略图上时，会出现一个透明覆盖以及描述（标题名称、类别和昵称）。

我面临的问题是，当我将鼠标悬停在一个相关的帖子缩略图上时，每个帖子都会显示叠加层（叠加层被拉伸，它不会单独显示 )。我也尝试调用描述，但它只调用我正在查看的当前帖子（e.x。当前的 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”为一篇文章提取正确的描述和覆盖？

【问题讨论】：

标签： php html wordpress wordpress-theming masonry

【解决方案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>

【讨论】：