web-dev-qa-db-ja.com

WordPressによる投稿の並べ替え AJAX

カスタム投稿タイプの検索結果ページがあります。私はAjaxのソート機能を持ちたいです。例えば、ページを再ロードせずに分類法で投稿をソートします。非常に基本的な例が役立ちます。ありがとう enter image description here 

検索フォーム

<form id="cptsearch" action="/" method="get">
    <input type="text" name="s" />
    <input type="hidden" name="post_type" value="lat" />
    <input id="searchsubmit" type="submit" alt="Search" value="Search" />
</form>

テンプレートの選択：

function template_chooser($template) {
    global $wp_query;
    $post_type = get_query_var('post_type');
    if( $wp_query->is_search && $post_type == 'lat' ) {
    return locate_template('page_lat.php');
    }
    return $template;
}
add_filter('template_include', 'template_chooser');

これは出力テンプレートpage_lat.php ：です。

検索結果（現在はタイトルと投稿の種類のみが印刷されています：

if($_GET['s'] && !empty($_GET['s'])){

  $text =$_GET['s'];
}
 ?>


 <div class="container">

      <?php
        $args = array(
          'post_per_page'=> -1,
          's'=>$text
        );

        $query= new WP_Query($args);
        while($query->have_posts()): $query->the_post();
      ?>

      <div>
        <h5><?php the_title(); ?></h5>
        <strong>
          <?php echo get_post_type(); ?>
        </strong>
      </div>
    <?php endwhile; wp_reset_query(); ?>
  </div>
custom-post-typesajaxsearchsort
4
Latheesh V M Villa

それで、これは長い質問です、それであなたにステップ1）のために働く簡単な例を与えます1）Cat1 cat2 cat3あなたはフォームでカスタム分類学を呼ぶ必要があります

ステップ2）カスタム分類IDの値を持つチェックボックスとしてcat1とcat2があるとします。

ステップ3）クリックイベントを追加する

ステップ4）あなたのAjax関数を呼び出す

この例に進む - http://www.tinyjewelbox.com/product-category/jewelry/ - このチェックボックスをクリックして達成するには、カスタム分類法と、分類法に従ったフィルタソートをクリックしてください。

方法 - 始めましょう： -

これは出力テンプレートpage_lat.phpです。

検索結果（現在はタイトルと投稿の種類のみが印刷されています：

            <?php 
            if($_GET['s'] && !empty($_GET['s'])){
              $text =$_GET['s'];
              $posttype = $_GET['post_type'];

            }
            else{
                $posttype = 'custom_post_type';
            }
            ?>
            //This will fetch your custom taxonomy cat1, cat2 , cat3

            <form action="" method="" class="" id="filter-menu" >
            <?php 
            $terms = get_terms('post_tag',, array('hide_empty' => false) );
            foreach($terms as $filteroption)
            {
                <input type="checkbox"  name="filter[]" value="<?php echo $filteroption->term_id; ?>" onclick="filtermenu()" >  
                <?php echo $filteroption->name; ?>
            }
            <input type="hidden" name="posttype" id="posttype" value="<?php echo $posttype; ?>" />
            ?>
            <form>
             <div class="container">
                 <div class="load_html">

                      <?php
                        $args = array(
                          'post_per_page'=> -1,
                          's'=>$text
                        );

                        $query= new WP_Query($args);
                        while($query->have_posts()): $query->the_post();
                      ?>

                      <div>
                        <h5><?php the_title(); ?></h5>
                        <strong>
                          <?php echo get_post_type(); ?>
                        </strong>
                      </div>
                    <?php endwhile; wp_reset_query(); ?>
                  </div>
              </div>

クリック時にクリックイベントを追加

                <script> //this a click event of checkbox which call ajax action
            function filtermenu(paged)
            {   
            var filtercheckedbox = // get your checkbox value via jquery; 
            var posttype = // get your posttype value; jQuery('#posttype').val(0);
            jQuery.ajax({
                url: AJAXURL,
                data: {
                    'action' : 'filter_menu' ,
                    'checkbox': filtercheckedbox, 
                    'posttype' :posttype,
                    'paged' : 1, 
                },
                type: 'POST',
                success: function(data) {
                        jQuery(".load_html").html(data);    
                }
            });     

            }   
            </script>

アクションをfunctions.phpに追加してください

            <?php 
            // add this function to functions.php this is your ajax action 
            add_action( 'wp_ajax_filter_menu', 'wp_ajax_filter_menu' );
            add_action( 'wp_ajax_nopriv_filter_menu', 'wp_ajax_filter_menu' );

            function wp_ajax_filter_menu()
            {
            global $post, $wp_query;

            $args = array(
                'post_type' => '$_POST['post_type']',
                'tax_query' => array(
                                'relation' => 'AND',
                                 array(
                                    'taxonomy' => 'custom_taxonomy name',
                                    'field'    => 'term_id',
                                    'terms'    => array($_POST['checkbox']),
                                 ),
                ),
                'orderby'   => 'ASC',                   
            );

                $filteroption = new WP_Query( $args );
                if ( $filteroption->have_posts() ) :
                while ($filteroption->have_posts()) : $filteroption->the_post();
                  ?>

                  <div>
                    <h5><?php the_title(); ?></h5>

                  </div>
                <?php 
                endwhile; 
                else: 
                    return false; 
                endif;
            }   
            die;
            }
            ?>
1
sakshi ranga

もう少し詳しく調べてみてください。

用語を入手： 

$type   = get_terms( array('type') );

すべての分類法を取得する： 

foreach ($type as $t) {
        if(!in_array($t->term_id, $type)){
                    echo '<label class="filter '.$t->slug.'">';
                    echo '<input type="checkbox" data-filter=".'. $t->term_id .'" class="filter-check '. $t->term_id .'" value="'. $t->term_id .'" name="type[]" ><div class="filter-title">'. $t->name .'</div>';
                    echo '</label>';
        }
}

あなたのカスタム投稿タイプを調べてください 

if( !empty( $_POST['options_type'] ) ){
    array_Push($args['tax_query'],   array(
              'taxonomy' => 'type',
              'field'    => 'term_id',
              'terms'    => $_POST['options_type'],
            )
          );
   }

jsファイルであなたのajax呼び出しを実行する 

$("input:checkbox").on( "change", function() {

            var options_type = Array();
$( 'input[name="type[]"]:checked' ).each(function( index, value ) {
          options_type.Push( $(this).val() );
            });

  jQuery.ajax({
            url : filters.ajax_filter,
            type : 'post',
            data : {
                action : 'filter_reports',
                options_type : options_type,

;}}）;

1
Dionoh

xmlhttpリクエストでそれを行う

<button type="button" onclick="loadDoc()">Sort Type X</button>
<div id="result"></div>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("result").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "//example.com/s.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("search=XXX&sort=YYY");
}
</script>

s.phpで

    <?php
        $xxx = $_POST['search'];
        $yyyy = $_POST['sort'];
        $args = array( //your query
        );
        while ( have_posts() ): the_post();
        // display post
        if ( have_posts() ): // If this is the last post, the loop will start over
                // Do something if this isn't the last post
        endif;
endwhile;
        ?>
1
David Corp