Cómo crear una plantilla de búsqueda avanzada personalizada en WordPress
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.
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_posts
y manipular el wp_query
objeto. 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_query
objeto 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 book
con 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.php
o 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í:
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.php
y page.php
cá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:
- Almacene todas las variables previamente enviadas por el formulario, usando
get_query_var()
. También es necesario almacenar la página actual - Representar el formulario de búsqueda con un botón de envío para realizar una búsqueda
- Restablecer el
wp_query
objeto - Configure los argumentos para un nuevo
WP_Query()
según los parámetros buscados y ejecute la consulta. Asigne la consulta personalizada alwp_query
objeto - Recorra los resultados y muéstrelos. También renderizar enlaces de paginación.
- Restablecer el
wp_query
objeto 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_query
objeto 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=benjamin
en 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_query
objeto. 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 paged
es un parámetro estándar de WordPress, no necesitamos agregarlo paged
al query_vars
filtro.
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 $post
objeto 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 name
atributos; son lo que aparecerá en la URL cuando se envíe el formulario. ¡Deben corresponder a los query_vars
y 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 value
a 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 taxonomy
se establezca en nuestra taxonomía personalizada, el name
atributo es correcto y selected
se 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=fiction
en 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_query
en alguna variable y luego la configuramos en null
. Posteriormente, en el paso 6 lo reseteamos desde la $tmp_wpquery
variable.
$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_Query
con parámetros. La página de documentación de WP_Query
es 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 paged
variable 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_query
variable.
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.php
para 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_query
objeto a lo que almacenamos anteriormente en el paso 3. Lo configuramos null
primero 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í:
Aquí está el código final; la functions.php
pieza y la plantilla: