Update Loop with Form

时间:2012-01-01 作者:frankV

我有一个照片库,我正在开发使用WP作为内容管理手段。我非常依赖一些jQuery插件来管理UI样式和操作(通过排序)。我的问题是有太多该死的帖子!737,每个都有一个缩略图,显示在页面上。这不可避免地会使任何浏览器陷入困境。尤其是排序插件在对图像进行排序时会“克隆”图像。帖子使用Wp\\u查询脚本构建;

<?php
 $paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1;
 $post_per_page = 15; // (-1 shows all posts) SETS NUMBER OF IMAGES TO DISPLAY!
 $do_not_show_stickies = 1; // 0 to show stickies
 $args=array(
\'post_type\' => array (\'post\'),
\'orderby\' => \'rand\',
\'order\' => \'ASC\',
\'paged\' => $paged,
\'posts_per_page\' => $post_per_page
);
$pf_categorynotin = get_post_meta($wp_query->post->ID, true);
if($pf_categorynotin){
    $args[\'tax_query\'] = array(
        array(
            \'taxonomy\' => \'category\',
            \'field\' => \'slug\',
            \'terms\' => $pf_categorynotin,
            \'operator\' => \'NOT IN\'
        )
    ); //category__in
}
$temp = $wp_query;  // assign orginal query to temp variable for later use
$wp_query = null;
$wp_query = new WP_Query($args);

if( have_posts() ) :
    echo \'<ul id="applications" class="applications pf_item3">\';
    $r = 0;
    while ($wp_query->have_posts()) : $wp_query->the_post();
        $post_cat = array();
        $post_cat = wp_get_object_terms($post->ID, "category");
        $post_cats = array();
        $post_rel = "";
        for($h=0;$h<count($post_cat);$h++){
                $post_rel .= $post_cat[$h]->slug.\' \';
                $post_cats[] = $post_cat[$h]->name;
            }
    $r++;
    echo\'<li data-id="id-\'. $r .\'" data-type="\'.$post_rel.\'" >\';
    if (get_post_meta($post->ID, \'port_thumb_image_url\', true)) { ?>
<a  class="tozoom" href="<?php echo get_post_meta($post->ID, \'port_large_image_url\', true); ?>" rel="example4" title="<?php echo $post->post_title; ?>">
<img src="<?php echo get_post_meta($post->ID, \'port_thumb_image_url\', true); ?>" class="portfolio_box" alt="<?php the_title(); ?>" width="199px" height="134px" /></a>
    <?php } ?>
        </li>
    <?php endwhile ?>
         </ul>
这些项目按照它们的html5标签进行排序,并在侧边栏中显示一个菜单。

你可以看到它在这里工作;http://marbledesigns.net/marbledesigns/products

现在它随机加载15篇文章并显示出来。我希望能够根据我从菜单中的选择(通过类别)重新加载帖子,然后更新图像列表,而无需刷新页面。我希望不仅能够更改显示哪些类别的帖子,还可以更改每页的帖子。

我认为AJAX是实现这一点的方法,但我不想为了让它工作而撤销菜单中的一大堆代码。现在菜单的样式是单选按钮。是否有一种方法可以从该表单中获取相同的输入并更新循环的参数?

寻找有效的解决方案!请帮忙!

1 个回复
最合适的回答,由SO网友:Velvet Blues 整理而成

是的,AJAX是一个不错的选择。

基本上,您可以在主题函数中为WP的ajax挂钩编写自己的回调函数。php文件。然后,您的函数可以以您选择的任何格式返回数据。我通常返回JSON。我会带你完成设置。

首先,由于您的访问者似乎没有登录,因此您将在回调函数中使用以下挂钩。

add_action(\'wp_ajax_nopriv_get_images\', \'get_images_callback\');
get_images 是将用于表单/jQuery ajax方法的$\\u POST操作。

接下来,设置ajax来处理请求并返回请求的图像。WordPress已经有了一个处理AJAX的脚本。它被称为admin-ajax.php, 我们post 在下面的示例中。

jQuery(document).ready(function($) {
    var params = {
        action: \'get_images\',
        category: 5,
        limit: 20
    };
    jQuery.post(<?php echo admin_url(\'admin-ajax.php\'); ?>, params, function(response) {
        // do your magic!
    });
});
(注意:有一种比使用PHP echo语句更好的声明管理员url的方法,但我只是给你一个简单的示例,以便你自己设置。)

最后,编写为其添加操作的回调函数。我们将返回JSON,但您也可以选择返回普通的未编码数据。

function get_images_callback(){
    $category = $_POST(\'category\'); //get the requested category
    $limit = $_POST(\'limit\'); //get the requested limit

    // your WP Query retrieves the appropriate posts/images and stores data to $images
    // you might also return the number of images in $num
    // and perhaps you\'ll return some other data in $data

    header(\'Content-type: application/json\');
    print json_encode(array(\'images\' => $images, \'number\' => $num, \'data\' => $data));
    die();
}
就在这里。在jQuery函数中,确保正确处理返回的数据。要获取数据,只需如下引用它们:response.images, response.num, 或response.data. 如果图像以数组的形式返回,则必须对其进行迭代以获取数据,就像使用任何其他数组一样。ie。

jQuery.each(response.images,function(key,val){
    // do stuff with the values
}); 
(顺便说一句,即使只有15幅图像,这也是一个加载速度很慢的页面。为什么不加载实际的缩略图,然后在用户选择较大的图像时调用它?…检查你的拇指大小…)

结束

相关推荐

使jQuery库在插件文件之前加载

我正在使用一些jQuery插件,比如validate。但是它们都是在由WordPress和my theme自动加载的Jquery库之前加载的。我需要在之后加载插件,所以有没有办法让Jquery在函数中首先加载。php-以便我可以使用它的前端和管理。我目前正在函数中加载以下内容。phpwp_enqueue_script(\'validation\', get_bloginfo(\'template_url\') .\"/js/jquery.validate.min.js\"); w