Búsqueda Ajax sin plugin de WordPress

WordPress incluye una búsqueda sencilla que puedes usar en tu web, tanto si la creas con un editor visual como si has comprado un tema de WordPress. Introduces una palabra o una frase y la página de resultados te muestra todas las páginas, entradas, etc. relevantes según la coincidencia.

Ajax permite una forma más elegante y rápida de buscar en la web, ya que carga los resultados sin recargar toda la página. En esta guía te muestro cómo crear una búsqueda Ajax sin instalar otro plugin de WordPress, usando PHP, Ajax y jQuery. No te preocupes si no sabes programar: explicaré todo el código y dónde colocarlo para que pueda hacerlo incluso un principiante sin experiencia.

La imagen debajo de este párrafo muestra una vista previa de la búsqueda terminada. Gracias a los comentarios en el código, incluso un usuario normal de WordPress que no sabe programar puede personalizar algunas cosas. Los cambios más grandes, sin embargo, requieren al menos conocimientos de PHP.

¿Qué es Ajax?

AJAX (Asynchronous JavaScript and XML) es una técnica de desarrollo web que permite a los visitantes interactuar con una página sin tener que recargarla entera. Así, los datos que pedimos al servidor mediante Ajax se cargan más rápido, porque no hace falta volver a cargar el resto de la página (cabecera, pie, ...).

Las ventajas de Ajax son la carga rápida de los datos solicitados y una menor carga del servidor, que procesa menos datos, lo que también te ahorra dinero que tendrías que pagar a tu empresa de hosting por más rendimiento. Y, por último, Ajax contribuye a una mejor experiencia de usuario en tu web.

Puedes leer más sobre Ajax en WordPress aquí.

Posibilidades y funciones de la búsqueda Ajax

Como esta búsqueda Ajax está programada a mano, puedes adaptarla como quieras. No te limitarán los ajustes de los plugins disponibles: tienes control total sobre el código.

1. Coincidencia en título, extracto y contenido – Al buscar una palabra/frase se muestran resultados según la coincidencia total o parcial en el título, el extracto o el contenido de todos los tipos de entrada (elegidos en el código).
2. Cualquier tipo de entrada – Tú decides qué incluye la búsqueda: solo páginas, entradas, productos o todo junto. Puedes elegir cualquier tipo de entrada, incluidos los tipos personalizados (CPT).
3. Resultados personalizables – Con control total sobre el código decides qué aparece en los resultados. ¿Solo el título de la entrada, o también la imagen destacada y las categorías?
4. Mensaje mientras se procesa la petición – Al buscar, se envía una petición al servidor, que la procesa y devuelve los resultados. Mientras tanto, bajo el campo de búsqueda aparece el texto «Buscando...».

1. Callback si no hay coincidencias – Si la búsqueda no da ninguna coincidencia relevante, se muestra el texto «No se encontró nada».

Búsqueda Ajax propia - código y pasos

Primero crea un formulario de búsqueda sencillo con un campo de texto y un botón.

<form action="/" method="get" autocomplete="off">
	<input type="text" name="s" autofocus placeholder="Vyhľadať zľavu..." id="keyword" class="input_search"> <!-- vyhľadávacie políčko -->
	<button> <!-- Tlačidlo, ktorým zabezpečíte klasické WordPress vyhľadávanie. -->
		Hľadať
	</button>
</form>
<div class="search_result" id="datafetch"></div> <!-- V tomto div elemente sa zobrazia výsledky vyhľadávania -->

Puedes colocar este formulario en cualquier parte de la web. Si creas la web con editores visuales (page builders) como Divi Builder, Breakdance, Elementor u Oxygen Builder, puedes insertar el código HTML mediante un módulo de code block.

Con los temas de WordPress normalmente no puedes añadir HTML directamente, así que lo mejor es instalar un tema hijo y usar un hook para colocar el HTML donde quieras. Pega todo el código en el archivo functions.php del tema hijo activo. Como alternativa al tema hijo, puedes instalar el plugin de WordPress Code Snippets (versión gratuita) y pegar ahí todo el código.

¡CONSEJO! No te pierdas los descuentos en plugins de WordPress y temas de WordPress.

He dado estilo al campo de búsqueda y a los resultados con el siguiente CSS. Puedes ajustarlo a tu gusto.

/* Formulár na vyhľadávanie */
. search_bar form {
	Width: 100%;
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
}

/* Vyhľadávacie políčko */
.search_bar input  {
	padding: 8px 16px;
	width: calc(100% - 80px);
	color: #666666;
	border: 1px solid #666666;
	border-radius: 5px;
	outline: none;
}

/* Tlačidlo Hľadať */
 .search_bar button {
	background-color: white;
	padding: 8px 12px;
	color: #666666;
	border: 1px solid #666666;
	border-radius: 5px;
	cursor: pointer;
}

.search_bar button:hover {
	color: #0a5888; 
	border-color: #0a5888;
	transition-duration: 0.3s;
}

/* Div element, v ktorom sa zobrazia výsledky vyhľadávania */
div.search_result {
 	display: none;
}

/* UL - zoznam výsledkov */
div.search_result ul {
	list-style: none;
	padding: 15px;
	margin: 0;
}

/* Jednotlivé položky v zozname (výsledky) */
div.search_result ul li {
	color: white;
}

/* Jednotlivé výsledky vyhľadávania (napr. jeden článok) */
li.search-result-item {
	padding: 10px 0;
	border-bottom: 1px solid #666666;
}

/* Odkazy vo výsledkoch vyhľadávania */
li.search-result-item a {
	display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
color: white;
}

li.search-result-item a:hover {
	color: #fd834c;
}

Por último falta un paso: añadir la parte principal del código, que gestiona la llamada Ajax y muestra los resultados. Pega el siguiente código en el archivo functions.php de tu tema hijo. Como dije antes, también puedes añadirlo con el plugin Code Snippets.

<?php
add_action( 'wp_footer', 'ajax_fetch' ); // Hook, ktorý určuje že kód sa má načítať vo footri
function ajax_fetch() { ?>
<script type="text/javascript">
function debounce(func, delay) { // funkcia, ktorá zabezpečuje odosielanie požiadavky až po 600ms
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}
jQuery("input#keyword").keyup(debounce(function() { // funkcia, ktorá zabezpečuje zobrazenie elementu s výsledkami vyhľadávania po napísaní aspoň 2 písme do inputu
	let keyword = jQuery(this).val().toLowerCase();
	if (keyword.length > 2) { // podmienka, ktorá zabezpečuje, aby sa požiadavky na server posielali, až keď sú napísané v inpute apsoň dve písmená
		jQuery('#datafetch').html('<ul><li>Hľadá sa ...</li></ul>'); // Hláška, ktorá sa zobrazí počas čakania na odpoveď servera
		jQuery.ajax({ // ajaxové volanie
			url: '<?php echo admin_url('admin-ajax.php'); ?>',
			type: 'post',
			data: { action: 'data_fetch', keyword: keyword },
			success: function(data) {
				jQuery('#datafetch').html(data);
			}
		});
		jQuery("#datafetch").show();
		jQuery("#datafetch").css('overflow', 'auto');
		jQuery(".search_bar").css('background-color', 'rgba(0,0,0,0.85)');
	} else {
		jQuery("#datafetch").hide();
		jQuery(".search_bar").css('background-color', 'rgba(0,0,0,0.10)');
	}
}, 600)); // hodnota, ktorá určuje po akom dlhom čase sa pošle požiadavka na server v milisekundách
</script>
<?php }

// ajax funkcia
add_action('wp_ajax_data_fetch', 'data_fetch'); // endpoint pre prihlásených používateľov
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch'); // endpoint pre neprihlásených používateľov
function data_fetch(){
	$the_query = new WP_Query( 
		array( 'posts_per_page' => -1, // Počet výsledkov vyhľadávania (-1 = všetky relevantné výsledky vyhľadávania) 
			  's' => strtolower(esc_attr( $_POST['keyword'] )), 
			  'post_type' => array('page','post'), // Typy postu medzi ktorými sa bude vyhľadávať
			  'post_status' => 'publish', // Vyhľadávanie len medzi publikovanými príspevkami
			 ) 
	);
    if( $the_query->have_posts() ) :
        echo '<ul>';
        while( $the_query->have_posts() ): $the_query->the_post(); ?>
            <li class="search-result-item">
				<a href="<?php echo esc_url( get_permalink() ); ?>">
					<img src="<?php echo get_the_post_thumbnail_url($post_id); ?>" width="87.5px" height="50px"> // Ilustračný obrázok
					<div><?php the_title(); ?></div> // Titulok postu
				</a>
			</li>

        <?php endwhile;
       echo '</ul>';
		else : {
			echo '<ul><li>Nič sa nenašlo.</li></ul>'; // Hláška, ktorá sa zobrazí v prípade nulovej zhody
		}
        wp_reset_postdata();  
	endif;
    die();
}

El código anterior hace lo siguiente:

• Tras escribir al menos 3 letras en el campo y hacer una pausa de 600 ms después del último carácter, se envía una petición asíncrona al servidor. Buscar con una o dos letras no tiene mucho sentido: la coincidencia sería demasiado amplia. La pausa de 600 ms permite escribir tranquilamente toda la palabra/frase antes de que aparezcan los resultados.
• Se muestran resultados de entradas y páginas. Puedes cambiarlo según lo que quieras incluir en la búsqueda. En el código 'post_type' => array('page','post') puedes cambiar 'page','post' por cualquier tipo de entrada.

Espero que esta guía te ayude y que esta búsqueda Ajax facilite a tus visitantes encontrar contenido en tu web.