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

Question

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

这是我到目前为止所做的：

名为“功能”的自定义帖子类型

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

这是我遇到的问题：

来自自定义帖子类型='功能'的每个网格图像和标题都显示得很完美，看起来很棒，就像模态本身一样。模态的内容显示在所有帖子的第一篇帖子中。换句话说，分配给列表中第一个帖子的标题和副本在其余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>