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循环中加载模态并更改模态的名称和与post id相关的单击触发器。假设post id为1则触发器和modal id类似于＃post1和post1。这里避免了详细页面的permlink。我希望这能解决问题。

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>

在bootstrap模态的Wordpress帖子

2 个答案: