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

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

我在用着：

  • WordPress 3.5.1
  • 自定义帖子类型 UI 插件
4

1 回答 1

0

我仍然没有评论的权利，所以我把我的评论放在这里作为答案，也许它会有所帮助。

对于这种情况，我的方法是创建一个 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 中，我称之为 the_div_ contains_li）。并单击您的锚点，调用 javascript 函数 f（此锚点的 id）。您当然可以通过 wordpress 循环为每个锚分配一个 id。

于 2013-03-07T11:17:36.170 回答