✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Cómo crear una plantilla de búsqueda avanzada personalizada en WordPress

24

Esta guía es para usted que tiene un tipo de publicación personalizada (CPT) y desea una página de búsqueda avanzada que busque resultados dentro de este CPT. En el formulario de búsqueda puede configurar diferentes entradas para buscar dentro de diferentes campos; título de la publicación, contenido de la publicación, cualquier tipo de meta personalizado o por taxonomía personalizada.

En esta publicación, supondremos que tenemos un tipo de publicación personalizada para libros, una taxonomía personalizada adjunta para el género de libros y un montón de metadatos personalizados; autor, año de publicación, número de ISBN y una casilla de verificación si el libro está o no en stock. El tipo de publicación personalizada y los parámetros dependen completamente de usted para adaptarse a sus necesidades, el código a continuación simplemente intentará cubrir la mayoría de las bases.

que haremos

Crearemos un tipo de publicación personalizada para libros y una taxonomía jerárquica personalizada adjunta para el género. Además, cada libro tiene campos personalizados para autor(es), año de publicación, número de ISBN y una casilla de verificación para incluir o no libros que están agotados. En cuanto a la página de búsqueda en sí, crearemos una plantilla de página donde residirá la mayor parte de nuestro código. La página comenzará mostrando un formulario personalizado al principio; mostrando todos los parámetros posibles para filtrar los resultados. Debajo de él, todos los resultados de los libros aparecerán en una lista. Decidimos un número de resultados por página y agregamos paginación en la parte inferior si el número excede esto.

Estos son los posibles parámetros de filtro que crearemos para nuestra plantilla de búsqueda avanzada:

  • Entrada de texto para buscar cualquier cadena dentro del título de la publicación y el contenido de la publicación.
  • Menú desplegable para elegir un género. Permite elegir un término o dejarlo en “Cualquiera".
  • Entrada para escribir el nombre del autor que busca en metadatos personalizados. La coincidencia aproximada, lo que significa ingresar "Marca", devolverá todos los autores cuyo nombre sea o contenga "Marca".
  • Entrada de número para ingresar el año en que se publicó el libro que busca en metadatos personalizados. Coincidencia aproximada, lo que significa ingresar, por ejemplo, "20" coincidirá con cualquier libro publicado en 1920 o cualquier año que comience con 20.
  • Entrada para ingresar ISBN (ID de libro internacional) que busca en metadatos personalizados. Devuelve solo coincidencias precisas.
  • Casilla de verificación para incluir o no libros agotados, otro meta personalizado. De manera predeterminada, esto no está marcado, lo que significa que los resultados solo muestran los libros que están en stock.

El formulario está configurado para usar el método GET, lo que significa que cualquier parámetro buscado se agregará a la página en la URL, en forma de " ?book-search=world&year-published=2016&book-author=mark". La otra opción si quieres evitar tener “URLs feas” es usar Javascript y AJAX. Pero hay algunas desventajas con esto. En primer lugar, no será posible marcar una búsqueda con parámetros de búsqueda específicos "precargados". Imagine que en otra parte de su sitio desea vincular directamente a su página de búsqueda personalizada por un autor específico. Luego, puede hacer que el enlace vaya a su página de búsqueda, agregue " ?author=mark" y, por lo tanto, hacer clic en el enlace lo llevará directamente a los resultados de ese autor. Esto no es posible de lograr con AJAX.

Los parámetros de búsqueda son mutuamente inclusivos. Esto significa que combinar, por ejemplo, el año "2011" y el autor "Algún tipo" solo arrojará libros que coincidan con AMBOS. Si también especificamos "gracioso" en la entrada de texto de búsqueda general, solo obtendremos resultados que coincidan con los tres. Dicho en diferentes palabras; Usaremos la lógica AND. Este es el método más común para filtrar los resultados de búsqueda.

Este tutorial no incluirá estilos, por lo que esta parte depende de usted. A continuación se muestra un ejemplo de cómo podría verse esto con un estilo básico.

Cómo crear una plantilla de búsqueda avanzada personalizada en WordPress

Una nota sobre la paginación con una consulta personalizada

Si desea paginación en una consulta personalizada dentro de una sola página, hay algunas cosas que debe tener en cuenta. La paginación de una consulta se puede generar con las funciones de WordPress [the_posts_pagination](https://developer.wordpress.org/reference/functions/the_posts_pagination/)(), [paginate_links](https://developer.wordpress.org/reference/functions/paginate_links/)(), o las dos [next_post_link](https://developer.wordpress.org/reference/functions/next_post_link/)()y [previous_post_link](https://developer.wordpress.org/reference/functions/previous_post_link/)(). Sin embargo, estos están codificados para funcionar con el objeto global wp_query(que para una plantilla de página es la página misma), y no una consulta personalizada.

Existen algunas soluciones, como escribir una función de paginación usted mismo. O podría usar la acción pre_get_postsy manipular el wp_queryobjeto. Desafortunadamente, este método es demasiado tarde para afectar las funciones de paginación. Otra alternativa es omitir la paginación por completo y simplemente mostrar todas las publicaciones. Esta podría ser una opción si no tiene muchas publicaciones, pero si está creando una plantilla de búsqueda personalizada avanzada, supongo que tiene bastantes publicaciones.

Lo que haremos en esta guía es una especie de método “hackish”. Dentro de la plantilla de página, anularemos el wp_queryobjeto con nuestra consulta personalizada para que las funciones de bucle y paginación funcionen como se esperaba. Este método es con el que he tenido más éxito.

Sin más preámbulos, ¡comencemos a programar!

Configuración de tipos de publicaciones personalizadas, taxonomía y metacampos

El primer paso es definir el tipo de publicación personalizada para la que queremos crear una plantilla de búsqueda avanzada. Si ya ha configurado un tipo de publicación personalizado o desea implementarlo para publicaciones o páginas, puede pasar directamente a la siguiente parte.

Estamos definiendo un tipo de publicación personalizada bookcon una taxonomía personalizada jerárquica book_category. No entraré en detalles explicando cómo crear taxonomías y tipos de publicaciones personalizados aquí. Si está interesado en obtener más información, tengo una publicación que detalla esto.

Coloque este código en cualquier parte del código de su tema functions.phpo complemento:

Esto dará como resultado un tipo de publicación personalizada con una taxonomía adjunta en admin.

La configuración de la meta de publicación personalizada depende un poco de usted: manéjela manualmente [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)()o use el complemento Campos personalizados avanzados (ACF), que es perfecto para este tipo de trabajo. Usaré ACF para configurar los campos programáticamente, así:

Por supuesto, puede configurar los campos de ACF utilizando la GUI de administración de ACF. Pero hay varios beneficios de agregarlos por código. Por ejemplo, asegúrese de mantener los mismos campos dondequiera que active su tema o complemento. Si configura los campos en el administrador, debe recordar exportarlos e importarlos si cambia el sitio de WordPress.

Tenga en cuenta los meta nombres; por ejemplo book_author, year_published, y así sucesivamente. Los consultará cuando creemos la consulta personalizada en la plantilla de búsqueda avanzada.

Con el complemento ACF y el código anterior, editar un solo libro se vería así:

Cómo crear una plantilla de búsqueda avanzada personalizada en WordPress

Con esto todos estamos bien para crear tantas publicaciones de libros como queramos. El siguiente paso es crear la plantilla de página para nuestra búsqueda.

Creación de la plantilla de página

Vamos a crear la plantilla de página donde pondremos nuestra plantilla de búsqueda avanzada. Haz una copia de tu tema single.phpy page.phpcámbiale el nombre a, por ejemplo template-booksearch.php,. El HTML depende de usted, pero la razón por la que hacemos una copia de una sola o una página es porque probablemente son la plantilla más cercana en términos de diseño.

En la parte superior de la plantilla de página, indicamos que se trata de una plantilla de página escribiendo "Nombre de la plantilla" y su nombre dentro del bloque de comentarios. Al hacer esto, nos aseguraremos de que podamos seleccionar la plantilla de página cuando editemos una página.

Las secciones que necesitamos codificar en nuestra plantilla son las siguientes, en este orden:

  1. Almacene todas las variables previamente enviadas por el formulario, usando get_query_var(). También es necesario almacenar la página actual
  2. Representar el formulario de búsqueda con un botón de envío para realizar una búsqueda
  3. Restablecer el wp_queryobjeto
  4. Configure los argumentos para un nuevo WP_Query()según los parámetros buscados y ejecute la consulta. Asigne la consulta personalizada al wp_queryobjeto
  5. Recorra los resultados y muéstrelos. También renderizar enlaces de paginación.
  6. Restablecer el wp_queryobjeto de nuevo a lo que era

La razón por la que necesitamos almacenar todas las variables buscadas y la página actual temprano es porque estas variables se perderán una vez que restablezcamos el wp_queryobjeto en el paso 3. También necesitamos las variables para nuestro formulario de búsqueda, para completar los campos.

En su plantilla, decida el lugar donde desea generar su búsqueda personalizada, y comencemos en la parte superior:

1 Obtener todas las variables buscadas

Obtenemos los parámetros GET (de la URL) con [get_query_var](https://developer.wordpress.org/reference/functions/get_query_var/)(). Por ejemplo; si tenemos un parámetro ?book-author=benjaminen la URL, usar get_query_var('book-author')devolvería la cadena ‘ benjamin‘. La obtención de todas las variables se puede hacer así:

$search_string = get_query_var('book-search'); $author = get_query_var('book-author'); $category = get_query_var('book-category'); $year = get_query_var('year-published'); $isbn = get_query_var('isbn'); $out_of_stock = get_query_var('out-of-stock');

Pero todos estos son parámetros personalizados que no forman parte de los parámetros GET estándar de WordPress. WordPress ignorará cualquier parámetro GET que no conozca, por lo que llamar a estos siempre devolverá una cadena vacía. Necesitamos decirle a WordPress que permita cada uno de estos parámetros GET. Hacemos esto filtrando query_vars. En su functions.php, agregue esto también:

add_filter('query_vars', function($vars) { $vars[] = 'book-search'; $vars[] = 'book-author'; $vars[] = 'book-category'; $vars[] = 'year-published'; $vars[] = 'isbn'; $vars[] = 'out-of-stock'; return $vars; });

Ahora nuestro get_query_var()‘s debería poder obtener los parámetros GET. Si no están configurados, devuelve una cadena vacía.

También necesitamos buscar la página actual antes de estropear el wp_queryobjeto. La página actual es un parámetro GET oculto llamado paged. Lo buscaremos de la misma manera que nuestros otros parámetros GET, pero lo configuraremos de forma predeterminada en 1 si está vacío.

$paged = (get_query_var('paged'))? get_query_var('paged'): 1;

Nota: Como pagedes un parámetro estándar de WordPress, no necesitamos agregarlo pagedal query_varsfiltro.

2 Renderizar el formulario de búsqueda

El formulario de búsqueda será simplemente un <form>con las entradas necesarias y un botón de envío de formulario. El HTML depende completamente de usted, en el siguiente ejemplo, estoy agregando las entradas en una lista simple. No incluiré ningún estilo en este tutorial, depende de ti. Puede optar por diseñar el formulario de búsqueda para que resida en la parte superior de los resultados, o al costado, verticalmente hacia abajo junto con los resultados de la búsqueda.

Nota: para acortar y modularizar la plantilla de búsqueda avanzada, puede separar la parte del formulario de búsqueda en un archivo de plantilla independiente e incluirlo con [get_template_part](https://developer.wordpress.org/reference/functions/get_template_part/)(). Pero por la simplicidad de este tutorial, incluiré todo dentro del archivo de plantilla.

El formulario en sí debe ser del método GET, y la acción debe apuntar a la página en la que estamos. Para ello accedemos al $postobjeto global y de ahí obtenemos el enlace permanente. Al final, agregamos un botón de envío que enviará el formulario.

Dentro de la lista desordenada, agregaremos una entrada adecuada para cada uno de nuestros posibles parámetros de búsqueda. Ajuste el HTML y los parámetros de búsqueda para que se ajusten a sus necesidades:

Tome nota de los nameatributos; son lo que aparecerá en la URL cuando se envíe el formulario. ¡Deben corresponder a los query_varsy get_query_var()que hemos definido anteriormente!

El código anterior comienza con la representación de una entrada de texto para la búsqueda de texto general. Establecemos el valuea la variable buscada previamente que buscamos usando get_query_var(). Esto asegura que la entrada no se borre después de que hayamos hecho una búsqueda.

El siguiente parámetro es un menú desplegable de género de nuestra taxonomía personalizada. Para representar esto utilizamos la función [wp_dropdown_categories](https://developer.wordpress.org/reference/functions/wp_dropdown_categories/)(). Eche un vistazo a la página de documentación para ver por qué agregamos todos estos parámetros para ajustar el menú desplegable a nuestras necesidades. Es importante que taxonomyse establezca en nuestra taxonomía personalizada, el nameatributo es correcto y selectedse establece en el valor de la variable buscada anteriormente. También configuramos los valores de los términos para que sean sus slugs en lugar de los ID de los términos. Se ve mejor con ?book-category=fictionen lugar de ?book-category=42. También activamos una opción de “ninguno” para agregar una opción de “Cualquier género”.

A continuación, representamos otra entrada de texto para buscar el autor, una entrada de número para el año de publicación, una entrada de texto para el número ISBN y, finalmente, una casilla de verificación que está desmarcada de forma predeterminada para incluir libros agotados.

3 Restablecer el wp_query

El siguiente paso es un pequeño truco para garantizar que la paginación funcione para nuestra consulta personalizada. Simplemente almacenamos la corriente $wp_queryen alguna variable y luego la configuramos en null. Posteriormente, en el paso 6 lo reseteamos desde la $tmp_wpqueryvariable.

$tmp_wpquery = $wp_query; $wp_query = null;

4 Configure argumentos y ejecute consultas personalizadas

Esta parte se trata de realizar una nueva consulta. Comenzamos configurando los argumentos más básicos, y luego agregamos condicionalmente parámetros dependiendo de lo que se encontró en las variables buscadas previamente (de nuestro get_query_var()s).

El código anterior básicamente está construyendo un WP_Querycon parámetros. La página de documentación de WP_Queryes un gran recurso para averiguar cómo crear una consulta.

Los primeros argumentos aseguran que solo consultemos libros y que estemos informando correctamente sobre en qué página nos encontramos actualmente, a partir de la pagedvariable que obtuvimos anteriormente. El número de publicaciones por página depende de usted, simplemente lo configuré en 20.

Tenga en cuenta que agregar ‘ compare‘ a ‘ LIKE‘ hará que WordPress busque cualquier cosa que contenga la cadena dada. No agregué esto a la búsqueda de ISBN porque para este campo quiero que encuentre resultados que coincidan perfectamente.

Lo importante está justo al final, cuando realmente realizamos la consulta y asignamos esa consulta a la wp_queryvariable.

5 Recorra los resultados de la consulta y renderice la paginación

Este paso es realmente fácil. Todo lo que necesitamos es un bucle estándar y, para cada uno, renderizamos la publicación del libro como queramos. Esta parte depende completamente de ti.

El siguiente código muestra un ejemplo básico de recorrer los resultados, llamando get_template_part()a cada publicación. After the loop the_posts_pagination()se usa para representar enlaces de paginación. Si la consulta no devolvió publicaciones, se muestra un párrafo simple con un texto.

Ajuste el HTML y la salida para satisfacer sus necesidades. El código anterior espera un archivo de plantilla en el tema nombrado content-book.phppara representar un solo libro en el ciclo. No le mostraré cómo renderizar cada publicación, ya que es algo sobre lo que probablemente ya tenga control.

6 Restablecer el wp_query de nuevo a lo que era

El paso final es restablecer el wp_queryobjeto a lo que almacenamos anteriormente en el paso 3. Lo configuramos nullprimero para asegurarnos de que se restablezca.

$wp_query = null; $wp_query = $tmp_wpquery;

Conclusión y resultado final.

¡Y eso fue todo! Ahora debería tener una plantilla de búsqueda personalizada avanzada totalmente funcional. Espero que esto haya sido de alguna ayuda para usted: el código se ha escrito de la manera más general posible para que le resulte más fácil adaptarse a sus necesidades. ¡Quizás desee diferentes tipos de parámetros, o su tipo de publicación personalizada es para películas o algo más!

Con un estilo básico, puede verse fácilmente así:

Cómo crear una plantilla de búsqueda avanzada personalizada en WordPress

Aquí está el código final; la functions.phppieza y la plantilla:

Fuente de grabación: awhitepixel.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More