WordPress : 모달의 게시물 쿼리 - 제목 표시

Question

시나리오 : 게시물 유형 (비디오)의 쿼리 목록을 표시하는 링크 목록이 있습니다. YouTube에 연결되는 동영상을 볼 수있는 CTA가 있습니다.

변경 : 사용자가 CTA 버튼을 클릭 할 때 모달/양식 기능이 변경됩니다. 방금 클릭 한 모달 안에 비디오/링크의 제목을 표시하고 싶습니다. 내가 가장 최근의 제목을 보여주는 것만으로 나는 그 부분에 붙어있다. 숨겨진 양식 필드에 채울 자산 URL (이전 직접 링크)도 마음에 듭니다. 모달에 대한 비디오

<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>

코드의 쿼리에 대한

CODE

<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을 별도로 사용해야합니다. 각 링크에 대한 귀하의 모달 목표는 비디오의 특정 일을 대상으로해야합니다, 그래서 대신 (I 추측하고이 당신이 당신의 모달을 대상으로하는 방법입니다) :

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

당신은 시도 할 수 있습니다 :

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

이 모두 고유하도록 식별 할 수 있습니다. - 중복 HTML, 큰 페이지 크기 등 많은

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

분명히 그것은 매우 우아 아니다 :

그럼 당신은 제목과 동영상 URL과 함께 모든 조동사를 생성, 다시 루프에 필요한 것 다른 방법은 클릭 한 링크에 따라 동적으로 업데이트하는 단 하나의 모달과 함께 자바 스크립트를 사용하는 것입니다. 당신은 당신이 동적으로 각 링크와 데이터로 모달에 추가 할 데이터를 포함하여 그렇게 말할 수 :

<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>