将模态函数与自定义帖子类型集成

Question

我正在尝试为希望让每个图块打开自己的模式以显示其他信息的客户构建一个“功能”网格。

这是我目前所拥有的：

一种称为“能力”的自定义帖子类型

分配给“能力”帖子类型的两个 ACF 字段（'main_photo'、'modal_copy'）

这是我遇到的问题：

自定义帖子类型 = 'capability' 中的每个网格图像和标题都显示完美，看起来很棒，模态本身也是如此。模态的内容从所有帖子的第一个帖子开始显示。换句话说，分配给列表中第一个帖子的标题和副本在其余 11 个帖子中显示相同。

这是我当前状态的代码：

<section class="capability clearfix">

          <?php
          // For creating multiple, customized loops.
          // http://codex.wordpress.org/Class_Reference/WP_Query

          $custom_query = new WP_Query( array( 'post_type' => 'capability','posts_per_page' => '-1', 'orderby' => 'title', 'order' => 'ASC' ));

          while($custom_query->have_posts()) : $custom_query->the_post(); ?>

            <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

              <div class="inner">                    

                  <div class="imagecontainer">

                    <img title="check us out" data-toggle="modal" data-target="#myModal"                                       

                       <?php

                        $image = get_field('main_photo');

                          if( $image ): ?> 
                            onmouseout="src='<?php echo $image['url']; ?>'" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>';"                                 
                            src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>"

                           <?php endif; ?>

                         />

                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

                      <div class="modal-dialog" role="document">

                        <div class="modal-content">

                          <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                            <h4 class="modal-title" id="myModalLabel"><?php echo the_title(); ?></h4>

                          </div>

                          <div class="modal-body">

                            <?php

                              $copy = get_field('modal_copy');

                              if( $copy ): ?> 

                              <p><?php echo $copy; ?></p>

                           <?php endif; ?>

                          </div>                                 

                        </div>

                      </div>

                    </div>

                  </div>

                <div class="entry-summary">

                  <h2 class="entry-title"><?php the_title(); ?></h2>

                  <?php echo the_excerpt(); ?>

                </div>

                <?php //the_content(); ?>

              </div>

            </article>

          <?php endwhile; ?>

          <?php wp_reset_postdata(); // reset the query ?>

        </section>

这是我正在处理的网格的链接：http://eightsevencentral.com/corporate-program/

我知道解决方案一定很明显，但我已经为此苦苦挣扎了几天，并认为是时候与社区联系了。

如果我没有提供一些重要信息来帮助剖析问题，请告诉我。这是我第一次在 SO 上发帖，所以我可能遗漏了一些东西。

谢谢！

Answer 1

在发完上述帖子后，我再次跑回我的代码并找到了解决方案：

我知道问题不在于从每个帖子类型中的自定义字段生成内容（因为图像和标题显然可以正常运行），所以我认为定位模态 ID 时缺少一些东西。我不确定这是否是正确的答案，但它现在对我有用。

注意包裹图像的锚标记 = <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" >

图片标签=<img title="check us out" data-toggle="modal" data-target="#myModal-<? the_ID(); ?>"

模态本身 = <div class="modal fade" id="myModal-<? the_ID(); ?>"

据我所知，它现在起作用的原因是因为现在每个帖子的 ID 都被生成为唯一的帖子 ID，而不是调用第一个帖子的内容并将其应用于 myModal 的所有实例的循环。

我很确定我没有正确解释这一点，这意味着我有一些关于 WP 查询和一般模式的功课要做。无论如何，我很欣慰地让这个功能按预期运行，并希望它在将来能免去一些人的头疼。

这是我现在比较的代码：

<section class="capability clearfix">

          <?php
          // For creating multiple, customized loops.
          // http://codex.wordpress.org/Class_Reference/WP_Query

          $custom_query = new WP_Query( array( 'post_type' => 'capability','posts_per_page' => '-1', 'orderby' => 'title', 'order' => 'ASC' ));

          while($custom_query->have_posts()) : $custom_query->the_post(); ?>

            <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

              <div class="inner">                    

                  <div class="imagecontainer">

                    <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" >

                    <img title="check us out" data-toggle="modal" data-target="#myModal-<? the_ID(); ?>"

                       <?php

                        $image = get_field('main_photo');

                          if( $image ): ?> 
                            onmouseout="src='<?php echo $image['url']; ?>'" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>';"                                 
                            src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>"

                           <?php endif; ?>

                         />

                       </a>

                    <div class="modal fade" id="myModal-<? the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

                      <div class="modal-dialog" role="document">

                        <div class="modal-content">

                          <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                            <h4 class="modal-title" id="myModalLabel"><?php echo the_title(); ?></h4>

                          </div>

                          <div class="modal-body">

                            <?php

                              $copy = get_field('modal_copy');

                              if( $copy ): ?> 

                              <p><?php echo $copy; ?></p>

                           <?php endif; ?>

                          </div>                                 

                        </div>

                      </div>

                    </div>

                  </div>

                <div class="entry-summary">

                  <h2 class="entry-title"><?php the_title(); ?></h2>


                </div>

                <?php //the_content(); ?>

              </div>

            </article>

          <?php endwhile; ?>

          <?php wp_reset_postdata(); // reset the query ?>

        </section>