Wordpress自定义帖子类型和Bootstrap模式

时间:2015-11-10 02:49:16

标签: ajax wordpress twitter-bootstrap modal-dialog custom-post-type

我正在为我的WP网站使用高级自定义帖子和自定义帖子类型插件。

如何根据触发按钮在Bootstrap模式上制作自定义帖子?我想让它显示在模态的.modal-body里面。我在这里找到了一个解决方案,但它需要将模态语法放在while循环中,并且每次有新的自定义帖子时,都会重复模态语法,这不是很好。

我仍然是新手并且正在学习AJAX / JSON请求,但无法让它工作。我认为这是最好的方法。据我所知,我需要创建一个单独的PHP文件,但不知道在里面编码什么。

有人可以提供一个例子吗?我被困了将近一个星期。非常感谢提前!

这是我的代码:

<div class="row">

  <?php $sample_query = new WP_Query( array( 
    'post_type' => 'sample',
    'category_name' => 'trending',
    'orderby' => 'rand'
  ) ); ?>

  <?php while( $sample_query->have_posts() ) : $sample_query->the_post(); ?>

  <?php
    $sample_logo = get_field('sample_logo');
    $sample_body = get_field('sample_body');
  ?>

  <div class="col-md-3">
    <div class="trending-sample">
      <div class="thumbnail">
        <a href="#">
          <img src="<?php echo $sample_logo[url]; ?>" alt="<?php echo $sample_logo[alt]; ?>">
        </a>
        <div class="caption">
          <h3><?php the_title(); ?></h3>
          <p><?php echo $sample_body; ?></p>
          <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Open Modal</button>
        </div>
      </div>
    </div>              
  </div>            

  <?php endwhile; ?>        

</div>

我的模态:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">                             
      <div class="modal-body">

        <h3><?php the_title(); ?></h3>                  
        <img src="<?php echo $sample_logo[url]; ?>" alt="<?php echo $sample_logo[alt]; ?>">                 
        <p class="sample-desc"><?php echo $sample_body; ?></p>

        <hr class="dashed">

        <p class="lead">Sample Text</p>
        <p class="modal-share">
          <strong>Share:</strong>
            <span class="sharefb"><a href="#"><i class="fa fa-facebook"></i></a></span>
            <span class="sharetwitter"><a href="#"><i class="fa fa-twitter"></i></a></span>
            <span class="sharegplus"><a href="#"><i class="fa fa-google-plus"></i></a></span>
            <span class="sharemail"><a href="#"><i class="fa fa-envelope-o"></i></a></span>
            <button type="button" class="btn btn-danger pull-right" data-dismiss="modal"><strong>Close</strong></button>
         </p>

      </div>
    </div>
  </div>
</div>

0 个答案:

没有答案