Cómo agregar Live Ajax Search a su WordPress sin un complemento

Publicado: 2022-08-01

¿Está buscando una manera de agregar una búsqueda Ajax en vivo a su sitio de WordPress sin un complemento?

Le permitirá entregar instantáneamente resultados de búsqueda a sus visitantes y mejorar su experiencia de usuario.

En esta guía, hablaremos sobre cómo puede agregar búsqueda en vivo a su sitio sin un complemento y las desventajas de este método.

Aquí hay una tabla de contenido para ayudarlo a navegar:

  • Por qué agregar la búsqueda en vivo a su sitio
  • Inconvenientes de agregar Live Ajax Search sin un complemento
  • El método más fácil para agregar Live Ajax Search a su sitio
  • Cómo agregar Live Ajax Search a su WordPress sin un complemento

¡Vamos a empezar!

Por qué agregar la búsqueda en vivo a su sitio

Agregar búsqueda en vivo a su sitio es útil por varias razones.

Primero, es mucho más conveniente para sus visitantes obtener resultados de búsqueda instantáneos en lugar de verlos en una nueva página separada donde WordPress los muestra de manera predeterminada.

Les permite ahorrar tiempo y determinar más rápido si el contenido que buscan está en su sitio o no.

live search on a site

En segundo lugar, lo ayuda a aumentar las páginas vistas, ya que es más probable que los visitantes que han tenido una experiencia de búsqueda positiva en su sitio lo usen nuevamente.

También es una excelente manera de atraer más tráfico de los motores de búsqueda, ya que Google presta mucha atención a la duración promedio de la sesión en un sitio.

Pero agregar una búsqueda en vivo sin un complemento puede ser un objetivo desafiante. Echemos un vistazo más de cerca a por qué esta no es la mejor opción.

Inconvenientes de agregar Live Ajax Search sin un complemento

El principal problema de agregar búsqueda en vivo a su sitio sin un complemento es que implica editar el código de su tema.

Este enfoque tiene un par de serias desventajas que debe tener en cuenta:

  • Requiere habilidades de codificación . Debe tener experiencia en codificación y una comprensión profunda de cómo funciona WordPress para editar el código de su tema con éxito.
  • Se necesita más tiempo . En contraste con el uso de un complemento, editar el código de su tema lleva bastante tiempo para averiguar qué cambios necesita hacer y dónde colocarlos.
  • No es confiable . Puede perder fácilmente todas las personalizaciones de su código si actualiza su tema o la versión de WordPress.
  • No es conveniente . Un complemento le brinda mucha más flexibilidad, ya que puede habilitar y deshabilitar rápidamente las funciones que necesita de acuerdo con sus necesidades.

Por lo tanto, si no es un usuario experimentado de WordPress o un desarrollador web, es mejor que use otra forma de agregar búsqueda en vivo a su sitio.

Una vez que hayamos resuelto eso, veamos cómo puede agregar búsqueda en vivo a su sitio sin editar los archivos de su tema usando un complemento.

El método más fácil para agregar Live Ajax Search a su sitio

La forma más fácil de agregar una búsqueda Ajax en vivo a su sitio es usar un complemento como SearchWP.

SearchWP logo

SearchWP es el mejor complemento de búsqueda de WordPress en el mercado, con más de 30,000 instalaciones activas.

Con él, puede habilitar y deshabilitar la búsqueda en vivo en su sitio con solo unos pocos clics, sin necesidad de codificación.

Y esa es solo una de las muchas otras características de SearchWP. El objetivo principal de este complemento es brindarle un control completo sobre la búsqueda en su sitio.

Por ejemplo, al usarlo, puede cambiar el orden de los resultados de búsqueda, hacer que se puedan buscar etiquetas de publicaciones, categorías y campos personalizados, crear formularios de búsqueda personalizados y mucho más.

Aquí hay algunas otras características de SearchWP que ayudarán a hacer crecer su negocio:

  • Habilitar la búsqueda difusa . De esta manera, sus visitantes pueden encontrar los resultados de búsqueda correctos, incluso si cometen un error tipográfico en una consulta de búsqueda.
  • Rastree las búsquedas de sus visitantes . Reúna datos completos sobre la actividad de búsqueda en su sitio, incluidas las búsquedas más populares, la cantidad de clics y más.
  • Excluye páginas específicas de los resultados de búsqueda . Oculte páginas innecesarias de los resultados de búsqueda en su sitio para ayudar a los visitantes a encontrar el contenido que buscan más rápido.
  • Incluya archivos PDF en los resultados de búsqueda . Permita que sus visitantes encuentren archivos PDF y documentos de oficina usando la barra de búsqueda en su sitio.

Con eso, veamos cómo puede habilitar la búsqueda en vivo en su sitio usando SearchWP.

Paso 1: Instale y active SearchWP en su sitio

Para comenzar, deberá obtener su copia de SearchWP.

Una vez hecho esto, vaya a su panel de SearchWP y haga clic en Descargas .

go to the Downloads tab

Luego, presione el botón Descargar SearchWP y guarde el archivo ZIP del complemento en su computadora.

click Download SearchWP

Después de la descarga, copie su clave de licencia de SearchWP en la misma página. Lo necesitará más para activar el complemento en su sitio.

copy your license key

Ahora deberá cargar el archivo ZIP de SearchWP en su sitio e instalar el complemento. Consulte el tutorial sobre cómo instalar un complemento de WordPress si necesita un recordatorio sobre cómo hacerlo,

Después de la instalación de SearchWP, deberá activar la copia de su complemento con su clave de licencia.

Para hacerlo, coloque el cursor sobre el botón SearchWP en el panel superior de su panel de control de WordPress y haga clic en Activar licencia .

click Activate License

Después de llegar a la página de Licencia , pegue su clave de licencia de SearchWP en el campo Licencia y haga clic en Activar .

press Activate

Una vez que active su licencia, estará listo para pasar al siguiente paso e instalar la extensión Live Search.

Paso 2: instale la extensión SearchWP Live Search

La instalación de esta extensión SearchWP le permite habilitar la búsqueda Ajax en vivo en su sitio con unos pocos clics sin escribir una sola línea de código.

Para comenzar, vaya a SearchWP » Extensiones en el lado izquierdo de su tablero de WordPress.

go SearchWP Extensions

Luego, busque la extensión Live Search y haga clic en Instalar en su sección.

click Install Live search

Eso es todo. Acaba de agregar con éxito una búsqueda Ajax en vivo a su sitio.

Vamos a ver cómo funciona.

Paso 3: prueba tu nueva búsqueda

Para hacer eso, vaya a su sitio y realice una búsqueda.

Por ejemplo, así es como se ve una búsqueda en vivo de SearchWP Ajax en nuestro sitio de prueba:

how to add live search to your WordPress site without a plugin

Ahora, veamos cómo puede agregar una búsqueda en vivo a su sitio sin un complemento.

Cómo agregar Live Ajax Search a su WordPress sin un complemento

Para agregar una búsqueda Ajax en vivo a su sitio sin usar un complemento, deberá realizar cambios en los archivos de su tema.

Para comenzar, cree un tema secundario de su tema actual que usa en su sitio.

Le permitirá cambiar rápidamente a su tema principal si hace algo mal y bloquea su sitio.

También es una buena práctica hacer una copia de seguridad de su sitio antes de comenzar a editarlo, por si acaso.

Puede consultar este tutorial sobre cómo crear un tema secundario de WordPress si necesita ayuda con eso.

Una vez que haya creado un tema secundario, vaya a su panel de control de WordPress y navegue hasta Apariencia » Editor de archivos de temas .

go to the Theme Files Editor

Luego busque el archivo functions.php y haga clic en él para abrirlo en el editor de archivos.

open the Theme Functions file

A continuación, pegue el siguiente código en su archivo functions.php :

<?php 
/*
 ==================
 Ajax Search
======================	 
*/
// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20fetch()%7B%0A%0A%20%20%20%20jQuery.ajax(%7B%0A%20%20%20%20%20%20%20%20url%3A%20'%3C%3Fphp%20echo%20admin_url('admin-ajax.php')%3B%20%3F%3E'%2C%0A%20%20%20%20%20%20%20%20type%3A%20'post'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%20action%3A%20'data_fetch'%2C%20keyword%3A%20jQuery('%23keyword').val()%20%7D%2C%0A%20%20%20%20%20%20%20%20success%3A%20function(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20jQuery('%23datafetch').html(%20data%20)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<?php
}

// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('page','post') ) );
    if( $the_query->have_posts() ) :
        echo '<ul>';
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

            <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>

        <?php endwhile;
       echo '</ul>';
        wp_reset_postdata();  
    endif;

    die();
}

Una vez que haya terminado, presione Actualizar archivo para guardar los cambios.

press Update File

Eso es todo. Ha agregado con éxito la búsqueda Ajax en vivo a su sitio de WordPress sin un complemento.

Permitirá a sus visitantes obtener instantáneamente resultados de búsqueda y aumentar el número de páginas vistas.

¿Quiere agregar búsqueda en vivo a su sitio en unos pocos clics sin codificación? Puede comenzar con SearchWP aquí.

¿Se pregunta cómo habilitar la búsqueda por etiquetas de publicación? Consulte nuestro tutorial detallado sobre cómo buscar publicaciones por etiquetas en WordPress.

¿Quieres ocultar algunas categorías de publicaciones de la búsqueda? Siga la guía de cómo excluir una categoría de la búsqueda de WordPress.