WordPress的：查詢帖子在Modal - 顯示標題

Question

場景：我有一個鏈接列表顯示來自帖子類型（視頻）的查詢。有一個CTA可以查看鏈接到YouTube的視頻。

更改：當用戶單擊CTA按鈕時，我正在更改功能以執行模式/表單。我想在他們剛剛點擊的模式內顯示視頻/鏈接的標題。我被困在那部分，因爲它只顯示最近的標題。我也喜歡資產url（前一個直接鏈接）在隱藏表單域中填充。

CODE爲視頻

<a name="webinars"></a> 
 
\t \t \t <img class="title-icon" src="<?php bloginfo('stylesheet_directory'); ?>/images/icon_video.png" width="64" height="60" alt=""> 
 
\t \t \t <h3>Webinars</h3> 
 
\t \t \t <div class="container container--discover text-center"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <?php $args = array('post_type' => array('videos'), 'showposts' => 3) ?> 
 
\t \t \t \t \t <?php query_posts($args); ?> 
 
\t \t \t \t \t <?php while (have_posts()) : the_post(); ?> 
 
\t \t \t \t \t \t <div class="asset asset--video col-sm-4"> 
 
<a href="#" onclick="ga('send', 'event', 'Video', 'Clicked', '<?php the_title(); ?>');" rel="bookmark" data-reveal-id="formModal"><div class="post" id="post-<?php the_ID(); ?>"> 
 
\t \t \t \t \t \t \t \t <div class="thumb <?php if (in_category('enterprise-technology-solutions')) { ?>thumb--yellow<?php } elseif (in_category('digital-solutions')) { ?>thumb--orange<?php } else { ?>thumb--green<?php } ?>"><?php if (has_post_thumbnail()) { the_post_thumbnail("medium"); } \t else { echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/thumb-default.jpg" />'; } ?></div> 
 
\t \t \t \t \t \t \t \t <h5><?php the_title(); ?></h5> 
 
\t \t \t \t \t \t \t \t <?php the_excerpt(); ?><br> 
 
\t \t \t \t \t \t \t \t <div class="btn btn--black btn--short">View Now</div> 
 
\t \t \t \t \t \t \t </div></a> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t <?php endwhile; ?> 
 
\t \t \t \t </div>

碼查詢模態

<div id="formModal" class="reveal-modal"> 
 
\t <div class="contact-form"> 
 
\t \t <?php $args = array('post_type' => array('videos'), 'showposts' => 1) ?> 
 
\t \t <?php query_posts($args); ?> 
 
\t \t <?php while (have_posts()) : the_post(); ?> 
 
\t 
 
\t \t <h3><?php the_title(); ?></h3> 
 
     
 

 
\t \t <form action="..."> 
 

 

 
<input id="field0" name="firstName" type="text" required pattern="[a-zA-Z]+" placeholder="First Name" /> 
 
<input id="field1" name="lastName" type="text" required pattern="[a-zA-Z]+" placeholder="Last Name" /> 
 
<input id="field4" name="emailAddress" type="text" required placeholder="Email" /> 
 
<input id="field2" name="company" type="text" placeholder="Company" /> 
 
<input id="field3" name="title" type="text" placeholder="Title" /> 
 
<input id="field5" name="busPhone" type="text" placeholder="Business Phone" /> 
 

 
<input id="field7" type="hidden" name="ViewNow" value="<?php echo get_post_meta($post->ID, 'asset-address', true); ?>" /> 
 
<input type="submit" value="Send" class="submit right btn btn--form"> 
 

 

 
\t \t </form> 
 
     <a class="close-reveal-modal">&#215;</a>   
 
    <?php endwhile; ?> \t 
 
</div>

是個甚至可能只用PHP或jQuery/JS是更好的解決方案？

Answer 1

如果你只想用PHP來做，你需要爲每個視頻單獨使用模態HTML。您的每一個環節模態的目標就必須針對特定的一個用於視頻，所以不是（我猜你這是怎麼定位你的語氣）：

<a href=.... data-reveal-id="formModal" ...> 

您可以試試：

<a href=.... data-reveal-id="formModal-<?php the_ID(); ?>" ...> 

，以便它們都是唯一可識別的。

然後你需要再次循環，產生所有的情態動詞，用的標題和視頻網址：

<?php rewind_posts(); // Think you'll need this to have the loop 2x on one page ?> 
<?php while (have_posts()) : the_post(); ?> 
    <div id="formModal-<?php the_ID(); ?>" class="reveal-modal"> 
     ... 
    </div> 
<?php endwhile; ?> 

顯然，這不是很優雅 - 大量重複的HTML，大頁面大小等的一個另一種方法是使用Javascript，只有一種模式，根據點擊鏈接動態更新。您可以通過這樣做，說包括你要動態地添加到模式與每個鏈接數據的數據：

<a href='' data-video='url-to-video' data-title='video-title' ...> 

然後在JS你抓住的數據並將其添加到模式（使用jQuery示例代碼） ：

<script> 
    var $title=$('#formModal h3'), 
     $input=$('#field7'); 

    $('a').on('click', function() { 
     var title=$(this).data('title'), 
      url=$(this).data('video'); 
     $title.html(title); 
     $input.val(url); 
     // ... and now code to display your modal 
    }); 
</script>