0

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

前もって感謝します。

4

2 に答える 2

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' );

これが役立つことを願っています....!!!!!

于 2013-02-28T09:24:14.553 に答える
-1 
<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; ?>
于 2013-02-28T07:57:36.947 に答える