Wordpress и Colorbox с динамическим содержанием

Question

В настоящее время я использую следующий код, чтобы тянуть содержимое из некоторых пользовательских сообщений, называемых product использованием ColorBox:

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> 

Это прекрасно работает, однако я должен снова и снова добавлять новые экземпляры последнего блока, предварительно заполняя идентификационный номер продукта. Таким образом, для новых продуктов, добавленных на сайт, они не будут тянуть содержимое. Каков наилучший способ переноса 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

P.S. В такой же петле вы можете выводить свои ссылки

<?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(); ?>