使用 jQuery 加载 WordPress 帖子答案

【问题标题】：Load WordPress posts using jQuery使用 jQuery 加载 WordPress 帖子
【发布时间】：2010-07-24 10:32:33
【问题描述】：

我有一个带有以下代码的页面设置：

    <?PHP

        get_header();

    ?>

    <div class="wrapper clearfix">

        <div class="clearfix">

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

            <div class="page-header">

                <h2 class="section_title"><?php the_title(); ?></h2>

            </div>

            <?php endwhile; endif; ?>

            <div class="filter">
                <p>Filter :</p>
                <?php 
                //list terms in a given taxonomy using wp_list_categories (also useful as a widget if using a PHP Code plugin)

                $taxonomy     = 'portfolio_tag';
                $orderby      = 'name'; 
                $show_count   = 0;      // 1 for yes, 0 for no
                $pad_counts   = 0;      // 1 for yes, 0 for no
                $hierarchical = 1;      // 1 for yes, 0 for no
                $title        = '';
                $hide_empty   = 0;

                $args = array(
                  'taxonomy'     => $taxonomy,
                  'orderby'      => $orderby,
                  'show_count'   => $show_count,
                  'pad_counts'   => $pad_counts,
                  'hierarchical' => $hierarchical,
                  'title_li'     => $title,
                  'hide_empty'   => $hide_empty
                );
                ?>

                <ul>
                <li class="current-cat"><a title="View all posts" href="<?php bloginfo('url'); ?>/portfolio/">All</a></li>
                <?php wp_list_categories( $args ); ?>
                </ul>

            </div>              

        </div>

        <div class="description">

        <?php the_content(); ?>

        </div>

        <div class="portfolio-archives">

            <ul class="portfolio-list clearfix">

            <?php $temp = $wp_query; $wp_query= null; ?>        

            <?php $wp_query = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => 999, 'paged' => $paged)); while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

            <?php //$portfolio_query = new WP_Query(array( 'post_type' => 'portfolio' )); while ($portfolio_query->have_posts()) : $portfolio_query->the_post();

            ?>      

                <?PHP

                    if (!($nr++ % 4))
                    {
                        echo '<li class="first">';  
                    }
                    else 
                    {
                        echo '<li>';
                    }
                ?>

                <?php
                if ( has_post_thumbnail() ) { ?>

                    <a title="<?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
                    <h3><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
                    <?php echo get_the_term_list( $post->ID, 'portfolio_tag', '<p class="taxonomy">', ', ', '</p>' ); ?>

                <?php

                } else {

                ?>

                    <a title="<?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><img src="http://dummyimage.com/600x400/ccc/fff&text=x" /></a>
                    <h3><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
                    <?php echo get_the_term_list( $post->ID, 'portfolio_tag', '<p class="taxonomy">', ', ', '</p>' ); ?>

                <?php } ?>

                </li>

            <?php endwhile; ?>

            </ul>

        </div>
        <!-- END div.portfolio-archives -->


        <?php if(function_exists('wp_pagenavi'))
        {
            wp_pagenavi();
        }
        ?>

        <div class="navigation">
            <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
            <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
        </div>

        <?php $wp_query = null; $wp_query = $temp; ?>


    </div>
    <!-- END div.clearfix -->

    <?PHP

        get_footer();

    ?>

它基本上为我所有的帖子吐出一个名为投资组合的自定义帖子类型。我为这种类型创建了一个自定义分类法，它允许我使用过滤器标记帖子。用户可以点击右上角的链接，只查看该过滤器中的帖子。

我想做的是让它使用 jQuery 加载到这些帖子中，而不是让用户离开页面（如果他们没有 javascript，它只会正常加载页面）。

这是我想要工作的示例：http://adamfoster.me.uk（这不是我的网站）如果您单击右侧的链接（自定义分类法），它会更改上面的帖子。

谁能帮忙？

【问题讨论】：

有什么更新吗？真的希望尽快为客户项目工作。谢谢。

标签： jquery wordpress

【解决方案1】：

可以使用WordPress › AJAX Page Loader 1.5 « WordPress Plugins的一些代码

【讨论】：

我支持这个，很棒的插件。

【解决方案2】：

很简单。你需要做几件事。

1) 用于更新内容的 Div 占位符。对于这个例子，我们称之为“placeHolder” 2) jQuery post 方法可在任何时候单击过滤器时触发。因此，如果您使用特定样式设置了过滤器的样式，比如“classFilter”，那么示例如下： $('.classFilter').click(function(){ .... 3) PHP 来处理你的帖子。只需将查询更改为按帖子过滤（例如 query_posts('tag=tag1+tag2+tag3'); ）并返回结果集。如果您选择以 json 格式发布，那么在将您的帖子循环到变量（例如 $posts['posts']）之后：return json_encode($posts) 4）然后回到你的 jQuery post 方法......在函数（数据）部分，确保你将你的 'placeHolder' html 设置为 data.posts

【讨论】：