引导模式下的Wordpress帖子

Question

我正在看这个例子：https://wordpress.stackexchange.com/questions/95661/open-wordpress-posts-in-bootstrap-modal但似乎不了解其原理。我有这样的循环在首页上以砖石网格形式显示我的帖子：

<?php query_posts('posts_per_page=25'); ?> 
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            <?php the_title(); ?>
            <a href="<?php echo the_permalink(); ?>" class="box col<?php echo rand(2,3); ?>">       
                <?php 
if ( has_post_thumbnail() ) { 
    the_post_thumbnail(); 
} 
?>  
        <?php endwhile; endif; ?>

单击时将打开single-content.php：

<?php while (have_posts()) : the_post(); ?>
  <article <?php post_class(); ?>>

<?php the_title(); ?>
      <?php get_template_part('templates/entry-meta'); ?>


      <?php the_content(); ?>


  </article>
<?php endwhile; ?>

我一直在尝试单击砖石网格的缩略图时在引导模态窗口中获取单一内容。在网络上尝试其他内容时没有运气，任何指导将不胜感激。

最美好的祝愿O。

编辑：

    <?php query_posts('posts_per_page=25'); ?> <!-- posts per page -->
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<span class="new-wrapper">

            <span><h1><?php the_title(); ?></h1></span>

            <a href="<?php echo the_permalink(); ?>" class="box col<?php echo rand(2,3); ?>"> <!-- randomize .col2 & .col3, creating the grid portfolio -->

        <?php 
    $post_id    = get_the_id();

if ( has_post_thumbnail() ) { 
     $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#post<?php echo $post_id; ?>"><img src="<?php  echo $feat_image;?>"></a> 
        <?php
} 
?>  
    </span>

        <?php endwhile; endif; ?>



  <div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <!-- Here showing the title of the post -->
                        <h4 class="modal-title" id="myModalLabel"><?php
                            the_title();
                        ?></h4>
                      </div>
                      <div class="modal-body">
                        <?php the_content() // the content is adding here ?>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
            </div>
        <?php

正在使用您的代码，但是它仅在第一篇文章中起作用，因此不是动态的。点击所有其他帖子似乎没有任何效果。

Answer 1

<?php query_posts('posts_per_page=25'); ?> 

<?php the_title(); ?>
<?php 
    $post_id    = get_the_id();//make sure this getting the correct post id
    //here change the direct thum to custom link like this
    if ( has_post_thumbnail()) 
    { 
        //here we can get the featured image of the post as a link
        $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); //make sure this will return the correct featured image url

        //place the url in our custome html like this:
        //in this we change the target as per the post id so each post have its own modal for show the content in the while loop. 
        ?>
        <a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#post<?php echo $post_id; ?>"><img src="<?php  echo $feat_image;?>"></a> 
        <?php
    }     
        // here the target is set as #post'current post id'

        //here we starting the modal part
        ?>
        <!-- Modal -->
            <div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <!-- Here showing the title of the post -->
                        <h4 class="modal-title" id="myModalLabel"><?php
                            the_title();
                        ?></h4>
                      </div>
                      <div class="modal-body">
                        <?php the_content() // the content is adding here ?>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
            </div>
        <?php

?>  

这里尝试在while循环中加载模式，并更改模式名称和与帖子ID相关的点击触发器。假设发布ID为1，然后是触发器，则模式ID如＃post1和post1。这里避免永久链接到详细信息页面。我希望这可以解决问题。

Answer 2

<?php
    //Get Post ID 
    echo $id= get_the_ID(); ?>

    link to open model
    <a href="#myModal<?php echo $id;?>" class="project-read-more" id="custId<?php echo $id;?>" data-toggle="modal" data-id="<?php echo $id;?>">Read More</a>

    Bootsrap model
    <div class="modal fade project-model" id="myModal<?php echo $id;?>" role="dialog">
        <div class="modal-dialog" role="document">
           <div class="modal-content">
             <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel"><?php the_title(); ?></h5>
                <button type="" class="close project-close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
              </div>
            <div class="modal-body">
           <?php the_content(); ?>
         </div>
        </div>
       </div>
       </div>