如何防止 Masonry Grid 中 'get related content' 的重叠？

Question

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

我面临的问题是，当我将鼠标悬停在一个相关 post 缩略图上时，每个 post（叠加层被拉伸，它没有单独出现)。我也试图调出描述，但它只是调用我正在查看的当前 post（e.x。当前 single.php header 说雪，当我将鼠标悬停在第一个相关 post 时，它还会调出雪 ) 的描述，但是，如果您单击第一个相关 post 缩略图，它会将您带到不同的文章（它没有调用不同文章的描述）。

<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”来为一个 post 提取正确的描述和叠加层？

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>

如何防止 Masonry Grid 中 'get related content' 的重叠？

How do I prevent overlaps for 'get related content' in a Masonry Grid?

html

php

wordpress

wordpress-theming

masonry