Wordpress和彩盒與動態內容

Question

我目前使用下面的代碼中提取內容從使用顏色框稱爲product一些自定義的帖子：

WordPress的內容：

<a href='#1612' class='inline'>Test</a> 

腳本：

<script src="<?php echo get_template_directory_uri();?>/js/jquery.colorbox-min.js" type="text/javascript"></script> 
<script>jQuery(document).ready(function(){ 
jQuery(".inline").colorbox({ 
    inline:true, 
    width:"90%", 
    maxWidth:800 
}).mouseover(function(){ jQuery(this).click();}) 
jQuery('#cboxContent').mouseover(
    function(){ jQuery(this).click(); 
}); 

jQuery('#cboxContent').mouseleave(
    function(){ jQuery.colorbox.close(); 
}); 
}); 
</script> 

頁面底部模板：

<div style="display:none"> 
<?php $loop = new WP_Query(array('p' => '399', 'post_type' => 'product', 'posts_per_page' => 1)); ?> 
    <?php while ($loop->have_posts()) : $loop->the_post(); ?> 
     <div class="inline_content" id="<?php echo $post->ID ?>"> 
      <h2><?php the_title();?></h2> 
      <div class="sixty"> 
       <?php the_post_thumbnail();?> 
      </div> 
      <div class="forty"> 
       <p> 
        <?php the_field('product_description');?> 
       </p> 
       <button onClick="window.open('<?php the_field('similar_product_link');?>');">See Similar</button> 
       <button onClick="window.open('<?php the_field('product_link');?>');" class="dark">Buy</button> 
       <?php endwhile; wp_reset_query(); ?> 
      </div> 
     </div> 
</div> 

這很好，但是我必須一遍又一遍地添加最後一個塊的新實例，預先填寫產品的ID號。因此，對於添加到網站中的新產品，他們不會吸引內容。什麼是最好的方式將href快速傳遞到燈箱，所以它會拉入正確的ID號碼，只是唱一塊？

Answer 1

如果我理解你的權利，應該比你修改的代碼的最後一塊是這樣的：

<?php $loop = new WP_Query(array('post_type' => 'product', 'posts_per_page' => -1)); ?> 
<?php while ($loop->have_posts()) : $loop->the_post(); ?> 
<div style="display:none"> 
    <div class="inline_content" id="<?php the_ID(); ?>"> 
     <h2><?php the_title();?></h2> 
     <div class="sixty"> 
      <?php the_post_thumbnail();?> 
     </div> 
     <div class="forty"> 
      <p><?php the_field('product_description');?></p> 
      <button onClick="window.open('<?php the_field('similar_product_link');?>');">See Similar</button> 
      <button onClick="window.open('<?php the_field('product_link');?>');" class="dark">Buy</button> 
     </div> 
    </div> 
</div> 
<?php endwhile; wp_reset_query(); ?> 

此代碼將輸出一個隱藏的每個產品實例塊。這將是如果你有很多產品的一些麻煩，所以我建議你學習： https://codex.wordpress.org/Class_Reference/WP_Query， https://codex.wordpress.org/Function_Reference/paginate_links 和 https://codex.wordpress.org/Pagination

附：在同一種循環中，你可以輸出你的鏈接

<?php $loop = new WP_Query(array('post_type' => 'product', 'posts_per_page' => -1)); ?> 
<?php while ($loop->have_posts()) : $loop->the_post(); ?> 
    <a href='#<?php the_ID(); ?>' class='inline'>Test</a><br> 
<?php endwhile; wp_reset_query(); ?>