WordPress post-tri avec AJAX
Je vais avoir une page de résultats de recherche pour le type de message personnalisé. Je veux avoir une fonctionnalité de tri ajax. Par exemple, triez la publication par taxonomie sans recharger la page. Un exemple très basique aidera. Merci 
Le formulaire de recherche:
<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>
Sélecteur de modèles:
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');
Ceci est le modèle de sortie page_lat.php :
Résultats de la recherche (actuellement, le titre et le type de message sont uniquement imprimés:
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>
Il s’agit donc d’une longue question. Nous vous donnons donc un exemple simple qui fonctionnera pour l’étape 1) Cat1 cat2 cat3 pour cela, vous devez d'abord appeler une taxonomie personnalisée dans un formulaire.
Étape 2) Supposons que vous avez cat1 cat2 comme case à cocher avec la valeur de l'ID de taxonomie personnalisée
Étape 3) Ajouter un événement de clic
Étape 4) Appelez votre fonction ajax
Allez à cet exemple - http://www.tinyjewelbox.com/product-category/jewelry/ - J'espère que vous souhaitiez atteindre cet objectif. Les cases à cocher sont une taxonomie personnalisée et un clic sur le tri du filtre selon la taxonomie.
Méthode - permet de commencer: -
Voici le modèle de sortie page_lat.php:
Résultats de la recherche (actuellement, le titre et le type de message sont uniquement imprimés:
<?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>
Ajouter un événement clic sur 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>
Ajoutez votre action dans 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;
}
?>
Essayez de regarder cela un peu plus:
obtenir des conditions:
$type = get_terms( array('type') );
Récupère toutes tes taxonomies:
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>';
}
}
regardez dans votre type de message personnalisé
if( !empty( $_POST['options_type'] ) ){
array_Push($args['tax_query'], array(
'taxonomy' => 'type',
'field' => 'term_id',
'terms' => $_POST['options_type'],
)
);
}
Dans le fichier js, exécutez votre appel 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,
}});
faites-le avec la requête 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 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;
?>