在同一個div中顯示帖子和圖像

Question

我在特定div的頁面中顯示了針對同一類別的不同帖子顯示的精選圖像。我需要在另一個div的相同頁面中顯示與此圖片相關的整個帖子。我知道我必須在這裏使用JavaScript。但我需要一些參考，我可以使用這個。誰能幫我這個？我正在使用下面的代碼來顯示圖像

<?php 
/* 
Template Name: Meet The Team Template 
*/ 
?> 
<?php get_header(); ?> 
<div id = "meet_posts" class = "narrowcolumn"> 
<?php 
    $recent = new WP_Query("cat=6&orderby=title&order=ASC"); 
    while($recent->have_posts()) : $recent->the_post(); 
    $desc_values = get_post_custom_values("description"); 

?> 
<div id="meetteam_featured_image"> 
    <a href="<?php the_permalink() ?>" rel="title"> 
    <?php 
      if (has_post_thumbnail()) { 
       the_post_thumbnail(); 
      } 
    ?> 
    </a> 
</div> 
<?php endwhile; ?> 
</div> 
<?php get_footer(); ?> 

在此先感謝。

Answer 1

與此下面的代碼替換你上面的代碼：

add_action('wp_ajax_ajaxified_function', 'ajaxified_function'); 
add_action('wp_ajax_nopriv_ajaxified_function', 'ajaxified_function'); 
function ajaxified_function() { 
$temp = get_post($_POST['post_id']); 
echo $temp->post_title.'<br/><br/>'.$temp->post_content; 
die(); 
} 

添加這下面的代碼在自定義的js文件：

<?php /* 
Template Name: Meet The Team Template 
*/ 
?> 
<?php get_header(); ?> 
<div id="meet_posts" class="narrowcolumn"> 
<?php 
$recent = new WP_Query("cat=6&orderby=title&order=ASC"); 
while($recent->have_posts()):$recent->the_post(); 
$desc_values = get_post_custom_values("description"); 

?> 
<div id="meetteam_featured_image" class="<?php the_ID(); ?>"> 
<a href="<?php the_permalink() ?>" rel="title"> 
<?php 
if (has_post_thumbnail()) { 
     the_post_thumbnail(); 
    } 
?> 
</a> 
</div> 
<?php endwhile ?> 
<div id="image-post-info"></div> 
</div> 

<?php get_footer(); ?> 

在functions.php文件添加此下面的代碼：

jQuery(document).ready(function(){  

jQuery('#meetteam_featured_image a').on('click',function(event){   
event.preventDefault(); 

var post_id = jQuery(this).parent().attr('class');    
jQuery.ajax({ 
    type: "POST",     
    url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php', 
    data: 'action=ajaxified_function&post_id='+post_id,  
    success: function (msg) {           
     jQuery('#image-post-info').html(msg); 
    }, 
    error: function() {     
    alert('Error');      
    } 
    });   
    });  
}); 

通過在functions.php文件下面的代碼添加自定義的js文件：

function add_custom_scripts() { 
wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() .'/js/custom-  scripts.js'); 
} 
add_action('wp_enqueue_scripts', 'add_custom_scripts'); 

希望這將有助於.... !!!!!

Answer 2

<div id = "meet_posts" class = "narrowcolumn"> 
<?php 
    $recent = new WP_Query("cat=6&orderby=title&order=ASC"); 
    while($recent->have_posts()) : $recent->the_post(); 
    $desc_values = get_post_custom_values("description"); 

?> 
</div><!--close first div--> 

<div id="meetteam_featured_image"> 
    <a href="<?php the_permalink() ?>" rel="title"> 
    <?php 
      if (has_post_thumbnail()) { 
       the_post_thumbnail(); 
      } 
    ?> 
    </a> 
</div><!--close second div--> 
<?php endwhile; ?>