web-dev-qa-db-ja.com

Ajaxで投稿をwp_queryする方法

カテゴリが入ったナビゲーションバーがあります。カテゴリの上にカーソルを置くと、ajaxを使用して最新の3つの投稿にクエリを実行したいと思います。

hTMLマークアップ

<ul>
    <li id="alabama">Alabama</li>
    <li id="banana">Banana</li>
    <li id="bible">Bible</li>

</ul> 

<div id="main"></div>

ajaxの呼び出し

$( "#alabama" ).click(function() {
 var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
      $.post(
          ajaxurl, 
          {
              'action'  :   'fetch_posts',
              'fetch' :   'alabama',
          }, 
          function(output){
            $('#main').html(output);
          });
});
enter code here

functions.phpのphp

function import_post() {
    if($_REQUEST['fetch'] == 'alabama'){
        $query_args = array(
                'post_type' => 'post',
                      'tax_query' => array(
                      'relation' => 'AND',
                          array(
                              'taxonomy' => 'category',
                              'field'    => 'slug',
                              'terms'    => array( 'news' ),

                          ),
                          array(
                              'taxonomy' => 'category',
                              'field'    => 'slug',
                                  'terms'    => array( 'alabama' ),
                          ),
                      ),
            );
            $the_query = new WP_Query( $query_args ); 

        if ( $the_query->have_posts() ) :
             while ( $the_query->have_posts() ) : $the_query->the_post();
                $return_str.= '<div class="col-md-3">';
                $return_str.= '<li>' . get_the_title() . '</li>';
                $return_str.='</div>';
            endwhile;
            wp_reset_postdata();
            else :
                $return_str.= 'No posts found';
        endif;
    } 


    echo $return_str;
    die;
}



add_action('wp_ajax_fetch_posts', 'fetch_posts');

add_action('wp_ajax_nopriv_fetch_posts', 'fetch_posts');
wp-queryajax
1
Tsea

私は一連のコメントをしたいのですが、全体の長さがコメントには長すぎるので、私は答えを書かなければなりません。

  1. あなたは何がうまくいっていて何が失敗しているのかを述べ、あなたがそれをうまく動かそうとしたことを私たちに話してください。コードを見るのは一般的すぎます。

  2. ワードプレスでは、jQueryのエイリアス$は通常は機能しません。ただし、Developer Toolsコンソールを開いていると、エラーメッセージが表示されます。私はいつも愚かなエラーを避けるために$の代わりにjQueryを使います。

  3. あなたはあなたがカテゴリの上にマウスを乗せたいと言っていますが、あなたの引き金はクリックにあります。

    $( "#alabama" ).click(function() {

    ホバー動作が起きない場合は、をクリックしてみてください。

  4. あなたのAJAX呼び出しは大丈夫ですが、コールバック関数はデータを間違った場所に置いているようです。クエリをホバーで実行したい場合は、outputをツールチップに入れないでください。

  5. AJAX呼び出しのアクションはfetch_postsに対するものですが、PHP関数はimport_postという名前です。 AJAXが機能するには、これら2つの関数が同一である必要があります。

  6. あなたのPHP関数は$_REQUEST[]変数を使います。あなたはAJAXをPOST経由で送信しているので、$_POST[]変数を使うことができます。変更しても壊れたり修正したりすることはおそらくないでしょうが、私にとっては意味があります（コードは読みやすくなります）。

  7. AJAX呼び出しを開発するときには、jQuery AJAX呼び出しを設定します。それからPHP呼び出しを処理するAJAX関数を作成します。まず、AJAX経由で送信したデータをエコーするだけです。それがうまくいくことがわかったら、次にSQLを書き、構文エラーがないことを確認するためにそれをエコーし​​ます。その時点で、必要なデータを取得して送り返します。最後の手順は、AJAXコールバック関数でデータを正しく表示することです。

はい、あなたのAJAXチュートリアルがあります。それが役に立てば幸い。

4
scott