Clasificación de publicaciones de WordPress con AJAX

4

Tengo una página de resultados de búsqueda para el tipo de publicación personalizada. Quiero tener una característica de clasificación ajax. Por ejemplo, ordenar la publicación por taxonomía sin volver a cargar la página. Un ejemplo muy básico te ayudará. Gracias

Elformulariodebúsqueda:

<formid="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>

Selector de plantillas:

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');

Esta es la plantilla de salida page_lat.php :

Resultados de la búsqueda (actualmente solo imprime título y tipo de publicación:

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>
    
pregunta Latheesh V M Villa 05.09.2018 - 21:30

4 respuestas

1

Entonces, esta es una pregunta larga, por lo que le damos un ejemplo simple que funcionará para Paso 1) Cat1 cat2 cat3 para esto primero debe llamar taxonomía personalizada en un formulario

Paso 2) Suponga que tiene cat1 cat2 como una casilla de verificación con el valor de la identificación de taxonomía personalizada

Paso 3) Agrega un evento de clic

Paso 4) Llama a tu función ajax

Vaya a este ejemplo - enlace : espero que desee lograr este clic en las casillas de verificación son taxonomía personalizada y al hacer clic en la clasificación de filtros de acuerdo a la taxonomía.

Método - comencemos: -

Esta es la plantilla de salida page_lat.php:

Resultados de la búsqueda (actualmente solo imprime título y tipo de publicación:

            <?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>

Agregar clic al evento haciendo clic

                <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>

Añade tu acción a 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;
            }
            ?>
    
respondido por el sakshi ranga 13.09.2018 - 15:41
1

Intenta ver esto un poco más:

obtener términos:

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

Recupera todas tus taxonomías:

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>';
        }
}

consulta tu tipo de publicación personalizada

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

en el archivo js ejecute su llamada 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,

} });

    
respondido por el Dionoh 12.09.2018 - 11:17
1

hazlo con una solicitud 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>

en 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;
        ?>
    
respondido por el David Corp 13.09.2018 - 12:08
-1

Simplemente agregue orderby y / o order a sus argumentos. Por ejemplo ...

    $args = array(
      'post_per_page'=> -1,
      's'=>$text,
      'orderby' => 'title',
      'order'   => 'DESC',
    );

Aquí está más información

    
respondido por el RiddleMeThis 10.09.2018 - 17:17

Lea otras preguntas en las etiquetas