Come creare una ricerca instantanea ajax in WordPress

Nell’articolo di oggi vedremo come creare una ricerca instantanea ajax (asincrona e senza refresh di pagina) in WordPress e andremo ad ottimizzare anche la ricerca nativa in modo da renderla più veloce e personalizzata.

Come ottimizzare la ricerca nativa di WordPress

Prima di andare a creare la nostra ricerca instantanea con WordPress andiamo a vedere due hook molto pratici e comodi che possono ottimizzare la vostra ricerca nativa di WordPress.

Il primo modo per ottimizzare la ricerca di WordPress è sicuramente quello di andare a effettuare la query solo sul titolo. Molto spesso quando cercate su un sito WordPress noterete come vi faccia apparire anche articoli che a prima vista non hanno senso con la query cercata. Questo perchè di default se cercate la parola “gatto” WordPress andrà a effettuare la ricerca non solo sul titolo ma anche all’interno del content dei vari articoli.

Questo ha due ripercussioni: una la lentezza della query (cosa non da poco!) e due il fatto che a seconda della query vengono visualizzati articoli poco in target con quanto cercato.

Per ovviare a questo problema possiamo usare questo hook all’interno del file functions.php del vostro tema per andare a filtrare solo per titolo durante la ricerca.

//Cerca solo nel title
function __search_by_title_only( $search, &$wp_query )
{
    global $wpdb;
 
    if ( empty( $search ) )
        return $search; // nessuna ricerca
 
    $q = $wp_query->query_vars;    
    $n = ! empty( $q['exact'] ) ? '' : '%';
 
    $search =
    $searchand = '';
 
    foreach ( (array) $q['search_terms'] as $term ) {
        $term = esc_sql( like_escape( $term ) );
        $search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
        $searchand = ' AND ';
    }
 
    if ( ! empty( $search ) ) {
        $search = " AND ({$search}) ";
        if ( ! is_user_logged_in() )
            $search .= " AND ($wpdb->posts.post_password = '') ";
    }
 
    return $search;
}
add_filter( 'posts_search', '__search_by_title_only', 500, 2 );

Un altro problema che a volte potrebbe dare fastidio è quello che di default WordPress usa lo stesso parametro di articoli da visualizzare che usa ad esempio per archivi o altro. Talvolta potreste avere l’esigenza di dare un numero differente di articoli all’interno della ricerca. Per farlo potete aggiungere questo codice al file functions.php del vostro tema:

// Cambia numero di articoli solo nel cerca 
function trg_search_posts_per_page($query) {
    if ( $query->is_search) {
        $query->set( 'posts_per_page', '12' );
    }
    return $query;
}
add_filter( 'pre_get_posts','trg_search_posts_per_page' );

NOTA BENE: Questo filtro verrà applicato anche alla ricerca delle immagini nel backend di WordPress. Se non volete variare il numero anche li dovrete modificare come segue:

// Cambia numero di articoli solo nel cerca - escludi admin area
function trg_search_posts_per_page($query) {
    if ( $query->is_search && !is_admin() ) {
        $query->set( 'posts_per_page', '12' );
    }
    return $query;
}
add_filter( 'pre_get_posts','trg_search_posts_per_page' );

Come creare una ricerca instantanea in Ajax su WordPress

Veniamo ora al punto saliente dell’articolo: come creare una ricerca instantanea in ajax su WordPress.

Per farlo useremo queste librerie:

Wp Advanced Search

Scaricate dal git i files e caricateli dentro la vostra cartella del tema.

Spostatevi all’interno del file functions.php del tema e aggiungete le seguenti righe di codice:

//Advanced Search
require_once('wp-advanced-search/wpas.php'); // Librerie Ajax Search
function dp_ajax_search() {
    $args = array();
    $args['wp_query'] = array( 'post_type' => array('post'),
    						   'post_status' => 'publish',
                               'orderby' => 'date', 
                               'order' => 'DESC' );

    $args['form'] = array( 'auto_submit' => true );

    $args['form']['ajax'] = array( 'enabled' => true,
                                   'show_default_results' => false,
                                   'results_template' => 'ajaxSearch.php', 
                                   'button_text' => 'Carica altri risultati...');

    $args['fields'][] = array( 'type' => 'search', 
                               'placeholder' => 'Cerca qualcosa...' );

    register_wpas_form('customAjaxForm', $args);
}
add_action('init', 'dp_ajax_search');

Nel sito ufficiale delle librerie utilizzate troverete varie informazioni e altri opzioni utili. Nel mio caso ho incluso il parametro:

'post_status' => 'publish',

Che permette di filtrare solo gli articoli pubblicati.

Come vedete nel codice sopra-riportato facciamo riferimento a un file di template. Andiamo quindi a creare un template di pagina chiamato ajaxSearch.php dove andremo a impostare la struttura di visualizzazione dei nostri articoli nella ricerca.

File ajaxSearch.php

<?php

/*

Template Name: Search Ajax

*/

?>
<?php
if ( have_posts() ) :             
   while ( have_posts() ) : the_post(); 
   $post_type = get_post_type_object($post->post_type);
   ?>

<div class="search-post">
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
   <a href="<?php echo get_permalink(  ); ?> ">
      <h2><?php echo the_title(); ?></h2>
    </a>
   </article><!-- #post-<?php the_ID(); ?> -->
</div><!-- search-post -->

<?php 
endwhile; 

else :
   echo '<p>Siamo spiacenti, nessun risultato trovato. Prova un altro termine!</p>';
endif; 
wp_reset_query();
?>

A questo punto abbiamo implementato la parte backend della ricerca ajax. Ci basterà ora aggiungere la parte frontend in modo da completare il sistema di ricerca asincrono.

Per prima cosa nell’header.php aggiungiamo il div che andrà a renderizzare il form di ricerca.

File: header.php

<!--Ricerca -->			
<div id="omni-search">
   <div class="container">
	<div class="search-container">
		<div class="search-close">
                   <i class="fa fa-times"></i>
                </div>

                <?php 
                $search = new WP_Advanced_Search('customAjaxForm');
                $search->the_form(); 
                ?>
                <div id="wpas-results"></div> 
                <!-- Risultati-->

     </div>
   </div>
 </div><!--omni-search-->
<!--Ricerca -->	

Posizionate dove volete far apparire l’icona del cerca questo codice:

<div class="search-trigger">CERCA</div>

Nel footer del vostro tema andiamo ad aggiungere il codice necessario ad aprire e chiudere il div di ricerca.

NOTA: Dovete prima caricare le librerie di jQuery qualora il vostro tema non le utilizzi. In alternativa potete riscrivere il codice in Javascript “Vanilla” o in altro linguaggio che preferite.

File footer.php

//Ajax Gestione Search					$('.search-trigger').click(function(e){						$("body").css("overflow","hidden");							$("#omni-search").show();
});
							$('.search-close').click(function(e){							$("body").css("overflow","auto");
$("#omni-search").hide();
});
//Ajax Gestione Search

Per finire andiamo a stilizzare, ovviamente questa parte è a vostra discrezione.

/*Ricerca*/
body {
  -webkit-overflow-scrolling: touch; /*Fix ios Scroll bug*/
}
#omni-search{ 
  background: rgba(0,0,0,0.8);
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow-y: scroll;
  display: none;
  top: 0px;
  left: 0px;
  z-index: 999; 
  -webkit-overflow-scrolling: touch; /*Fix ios Scroll bug*/
}
.search-close{
  padding: 5px 15px;
  position: fixed; 
  right: 0; 
  top:0; 
  cursor: pointer; 
  background: red;
  color:#fff; 
  font-size: 2rem; 
  font-weight: bold;
  z-index: 999;
}
#wpas-results-inner{}
.search-container{ padding:15px; }
#search_query{
width: 100%; 
padding: 15px; 
margin:15px 0px; 
text-align: center; 
}
/*Stile leggi tutto*/
#wpas-load-btn{
cursor:pointer; 
}
#wpas-load-btn:hover{}
.searchimage img{ 
width: 100%;  
}
.search-post{   
  margin: 0px; 
}

Conclusioni

Spero che questo articolo sia stato utile, fatemi sapere cosa ne pensate cliccando su “Commenta” qui sotto o condividendo l’articolo sui vostri social network preferiti.

Image credits “Ricerca” disponibile su Shutterstock