1

私はこのサイトに取り組んでいます：

http://www.bajo.co.uk/2012/

...ホームページにおもちゃのポートフォリオが表示されます。おもちゃにはさまざまなカテゴリがあります。幼児、乗り物、教育などです。ユーザーがサイドバー メニューの [幼児] をクリックすると、カテゴリが [幼児] のすべてのおもちゃのサムネイルが右側に一覧表示されます。

現在、次のカスタム ループを使用して、カテゴリごとに異なるページ テンプレートを使用して、この設定を行っています。

<!-- loop to show products list -->
<?php
    $args = array(
    'post_type' => 'products',
    'orderby' => 'title',
    'order' => 'DES',
    'posts_per_page' => 8,
    'paged' => get_query_var ('page'),
    'post_parent' => $parent,
    'category_name' => 'educational'
    ); 
?>

<?php query_posts($args); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<li>
    <a href="<?php the_permalink() ?>" class="product_image">
        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
        <span class="overlay"></span>
    </a>
    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>                                
</li>   

<?php endwhile; ?>

<?php else :?>

<p>There are no products to display</p>

<?php endif; ?>

これは正しく機能しますが、ユーザーがメニューからカテゴリを選択するたびに、ページが更新されます。

これを AJAX で実装して、ページが更新されず、ページネーションを維持しながら製品 (カスタム投稿タイプ) が動的に読み込まれるようにしたいと考えています。

どこから始めるべきかについての指針は大歓迎です。

私は使用しています：

  • ワードプレス 3.5.1
  • カスタム投稿タイプ UI プラグイン
4

1 に答える 1

0

私はまだコメントする権利を持っていないので、ここに私のコメントを答えとして入れます。

このような状況に対する私のアプローチは、この file.php?p=infant のようなパラメーターを介してアドレス指定する php ファイル file.php を作成することです (例)

<?php

$p=$_GET['p']; 

require('../../../wp-load.php');

?>

                            <?php

                            $my_query = new WP_Query();
                            $my_query->query(array( 'post__in' => array($p)));




                            if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); 

                               ?>
    <li>
    <a href="<?php the_permalink() ?>" class="product_image">
        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
        <span class="overlay"></span>
    </a>
    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>                                
</li>  
                                <?php
                            endwhile;
                            endif;


?>

さらに、次のような ajax 呼び出しを管理する JavaScript 関数を作成します。

function f(str)
{

$.ajax({  
cache: true,  
   type: "GET",  
   timeout: 5000,   
   url: 'url/to/file.php?p='+str,  
   success: function(msg)  
    {  

                $('#the_div_containing_li').html(msg);

    },  
    error: function(msg)  
    {  

       alert("Your browser broke!");
            return false;
    }  
});


}

li (および動的にロードされたコンテンツを div に配置する必要があることに注意してください。これを the_div_containing_li と呼びます)。アンカーを onClick し、javascript 関数 f(このアンカーの id) を呼び出します。もちろん、wordpress ループを介して各アンカーに ID を割り当てることができます。

于 2013-03-07T11:17:36.170 に答える