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

使用以下代码替换上述代码：

<?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文件中添加以下代码：

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文件中添加以下代码：

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

在同一个div中显示帖子和图片

2 个答案: