web-dev-qa-db-ja.com

AJAX カテゴリに基づいてクリック時に投稿をフィルタリングする

これはAJAXへの私の最初の進出です、私はおそらく助けにはならなかった様々なチュートリアルからのコードの断片をつなぎ合わせてきました。

私は私のホームページ（index.php）にカテゴリのリストと最新の投稿のリストを持っています。ユーザーがカテゴリをクリックしたとき、私はページを更新せずにこの投稿のリストを更新したいです。現在フィルタをクリックすると、すべての投稿がレスポンスコンテナにロードされ（カテゴリによるフィルタリングは行われません）、ロードされる唯一のコンテンツはthe_content（）です。 、カテゴリなど.

私は最初のテーマとしてBonesを使用しています。そのため、このファイルにwp_localize_scriptが含まれているのはなぜでしょう（正常に機能しています）。私は問題があるとわかっているコードだけを含めました（私はサイトの残りとJSがうまく働いていることを知っています）。

bones.php 

//Add AJAX path to use in load-posts.js
$getPath = array('ajaxURL' => admin_url('admin-ajax.php'));
wp_localize_script('main-js', 'pathToFile', $getPath);

functions.php 

//AJAX Category Filter
add_action( 'wp_ajax_load_cat_posts', 'load_cat_posts' );
add_action( 'wp_ajax_nopriv_load_cat_posts', 'load_cat_posts' );

function load_cat_posts () {
    $cat_id = get_post_meta($_REQUEST['cat']);
    $args = array (
      'cat' => $cat_id,
      'posts_per_page' => 10,
      'order' => 'DESC'
    );

    $posts = get_posts($args);

    ob_start ();

    foreach ( $posts as $post ) {
      setup_postdata( $post ); ?>

      <?php get_template_part( 'partials/listing', 'post'); ?>

   <?php } wp_reset_postdata();

   $response = ob_get_contents();
   ob_end_clean();

   echo $response;
   die(1);
}

index.php 

<?php $categories = get_categories(); ?>

<ul class="category-filters">
    <?php foreach ( $categories as $cat ) { ?>
        <li id="cat-<?php echo $cat->term_id; ?>">
            <a class="<?php echo $cat->slug; ?> ajax" data-cat="<?php echo $cat->term_id; ?>" href="javascript:void(0)"><?php echo $cat->name; ?></a>
        </li>
    <?php } ?>
</ul>

listing-post.php 

<li class="standard-post">
    <article id="<?php echo sanitize_title_with_dashes( get_the_title() ); ?>" <?php post_class(); ?> role="article">

        <?php if (has_post_thumbnail()) { ?>
            <div class="article-image">
                <?php the_post_thumbnail(large); ?>
            </div>
        <?php } ?>

        <div class="article-left">
            <?php foreach((get_the_category()) as $category) { ?>
                <span class="article-category"><?php echo $category->cat_name . ' ';?></span>
            <?php } ?>
            </div>

            <div class="article-right">
            <header class="article-header">
                <h1 class="article-title"><?php the_title(); ?></h1>
                <p class="article-time">
                    <?php printf( __( '<time class="updated" datetime="%1$s" pubdate>%2$s</time>', 'bonestheme' ), get_the_time(), get_the_time(get_option('date_format'))); ?>
                </p>
            </header>

            <section class="entry-content">
                <?php the_content(); ?>
            </section>
        </div>

    </article>
</li>

load-posts.js 

function cat_ajax_get(currentCat) {
            $('a.ajax').removeClass('current');
            $('a.ajax').addClass('current');
            $('#loading-animation').show();
            $.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {action: 'load_cat_posts', cat: currentCat },
                success: function(response) {
                    $('.article-listing').html(response);
                    $('#loading-animation').hide();
                    return false;
                }
            });
        };

ajaxFilters: function() {
            $('.category-filters a').on('click', $.proxy(function(clickEvent) {
                $clickTarget = $(clickEvent.currentTarget);
                var currentCat = $clickTarget.attr('data-cat');
                cat_ajax_get(currentCat);
            },this));
        }
filtersajaxjavascript
4
GuerillaRadio

functions.phpのこの行はあなたの問題です：

$cat_id = get_post_meta($_REQUEST['cat']);

get_post_meta()関数 の目的を誤解していると思います。サイトへのPOSTリクエストからのデータではなく、WordPress Postのメタデータを取得するように設計されています。 get_post_meta()関数の最初のパラメータは$post_idですが、代わりにカテゴリIDを渡すので、そのカテゴリIDと同じIDを持つ投稿が存在する場合はfalseまたはすべてのメタ値の配列を取得します。どちらの場合も、catクエリvarの値は有効なカテゴリIDではないため、クエリの一部は無視され、すべての投稿が返されます。その行をこれに変更すれば、それはその問題を解決し、あなたのコードはおそらくうまくいくでしょう：

$cat_id = absint( $_REQUEST['cat'] );

absint()関数 はユーザー指定の値を正の整数に変換するだけです。

1
J.D.