我试图从自定义帖子类型（Wordpress）显示功能图像，但我不擅长PHP，我使用的是一个名为（Business）的HTML startbootstrap模板使用Bootstrap框架，我做了所有的页面和wordpress模板，就目前我无法在3格列中显示我的投资组合女巫使用模态来显示项目细节，我的静态代码是这样的：
<div class="row">
<div class="col-md-4 col-sm-9 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/myimage.jpg" class="img-responsive" alt="my text">
</a>
<div class="portfolio-caption">
<h4>MatriConseil</h4>
<p class="text-muted">my text</p>
</div>
</div>
这就像这样调用一个模态：
<div class="portfolio-modal modal fade" id="portfolioModal12" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h1>Darlink</h1>
<p class="item-intro text-muted">My muted text</p>
<img class="img-responsive img-centered" src="img/myimage.jpg" alt="Création de site internet à Marrakech">
<p>my text</p>
<ul class="list-inline">
<li>Date: my text 2014</li>
<li>Client: my text </li>
<li>Catégorie: my text </li>
</ul>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Fermer</button>
</div>
</div>
</div>
</div>
</div>
</div>
我知道我必须使用循环，但我尝试了不同的，我不知道我把PHP代码的地方：
我必须达到这样的投资组合：
Portfolio Layout with 4X Grid column
请原谅我的英文，并提前感谢您的帮助
我已经解决了图像的水平对齐问题，但是还有一个想法，我无法在点击图像时显示模态，或者有时当我删除重置查询时，只有一个项目显示在模态中：
<?php wp_reset_query(); ?>
这是我的HTML代码和我的自定义内容类型的循环：
<section id="portfolio">
<div class="container">
<div class="row">
<?php $loop = new WP_Query( array( 'post_type' => 'portfoliologo', 'posts_per_page' => -1 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-md-4 portfolio-item">
<a href="#portfoliologo<?php echo '#portfoliologo' .get_the_ID() ?>" data-toggle="modal" class="portfolio-link" >
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<?php the_post_thumbnail('post-image', array('class' => 'img-responsive')); ?>
</a><!-- End Portfolio Hover -->
</div><!-- End Col -->
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div><!-- End Row -->
<style>
//additional styles required for grid
.portfolio-item .col-md-4 img {
max-height:260px;
}
</style>
</div><!-- Container -->
</section><!-- Section Portfolio -->
这是同一模板中的My Modal：
<!-- Portfolio Modal Section -->
<div class="portfolio-modal modal fade" id="portfoliologo<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h1><?php the_title(); ?></h1>
<?php the_post_thumbnail('post-image', array('class' => '')); ?>
<?php the_content(); ?>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Fermer </button>
</div><!-- Modal Body -->
</div><!-- Col -->
</div><!-- row -->
</div><!-- Container -->
</div><!-- Modal Content -->
</div><!-- Portfolio Modal -->
我需要你的帮助