Question

我正在这个网站上工作：

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实现这一点，这样页面就不会刷新，产品（自定义帖子类型）会动态加载，同时保持分页。

关于从哪里开始的任何指示都非常感激。

我正在使用：

Wordpress 3.5.1
自定义帖子类型UI插件

Answer 1

我仍然没有权利发表评论，因此我将此评论作为答案，或许会有所帮助。

我遇到这种情况的方法是创建一个php文件file.php，我将通过像这个file.php这样的参数来解决这个问题.p = infant（例如）

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


?>

我还将创建一个javascript函数，它将管理这样的ajax调用：

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中，我称之为_div_containing_li）。并点击你的锚点，调用javascript函数f（这个锚点的id）。你当然可以通过wordpress循环为每个锚分配一个id。

使用AJAX按类别动态加载自定义帖子

1 个答案: