用 fancybox 显示帖子内容

Question

我正在尝试在花式框中显示帖子内容，它几乎可以正常工作，除了单击链接后它只显示第一个帖子的内容。

所以我想到了将帖子 ID 添加到 data-src 的想法，但由于某种原因，我的代码没有添加 ID。

<ul>
          <?php $args = array('post_type' => 'rm', 'showposts' => 20, 'order' => 'ASC'); $the_query = new WP_Query( $args ); ?>
          <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
          <?php $meta = get_post_meta( $post->ID, 'city_council_candidates', true );

          $postsData[$row]['links'][$i] = [
            'id' => get_the_id(),
          ];

          foreach($postsData as $key => $value) :
            $links = $value['links'];

            echo '<pre>'; echo var_dump($links); echo '</pre>';
          ?>

          <li class="candidates-wrapper col-12 col-sm-12 col-md-4 col-lg-3 col-xl-2">
            <a data-fancybox data-src="#selectableModal-<?php echo $value['id'] ?>" href="javascript:;">
              <div class="candidates-img">
                <?php the_post_thumbnail(); ?>
              </div><!-- .news_img -->
              <div class="candidates-name">
                <?php echo $meta['name']; ?>
              </div>
              <div class="candidates-surname">
                <?php echo $meta['surname']; ?>
              </div>
              <div class="candidates-constituency">
                <?php echo $meta['constituency']; ?>
              </div>

              <div style="display: none;max-width:500px;" id="selectableModal-<?php echo $value['id'] ?>">
                <h2>
                  <?php echo $meta['name']; ?><?php echo $meta['surname']; ?>
                <h2>
                <p>
                  <?php the_content(); ?>
                </p>
              </div>
            </a>
          </li><!-- .news-wrapper -->

          <?php
            endforeach;
            endwhile;
            wp_reset_postdata();
          ?>
        </ul>

如您所见，我还添加了 var_dump 函数来检查 $links 是否从查询中获取任何 ID，并且 ID 是否传递到那里。

在控制台中，链接看起来像这样<a data-fancybox="" data-src="#selectableModal-" href="javascript:;">

我做错了什么？

Answer 1

<div style="display: none; max-width:500px;" id="selectableModal">
  <h2>name + surname<h2>
  <p>content</p>
 </div>

您不应该将样式 display:none 与 id="selectableModal" 元素内联。它不应该在那里，它可能会显示fancybox，但不会显示内容，因为它不会显示内容。也许用 display: block!important 覆盖内容；当fancybox显示时。

Answer 2

看起来问题是<?php echo $value['id'] ?> 的输出为空，因此很可能您有多个具有相同 id 的元素 - #selectableModal-，这会导致您的问题。

抱歉，我不是 WP 专家，但可以尝试将 $value['id'] 替换为 $post->ID。