{"type":"PARAGRAPH"

En el artículo de hoy de la serie Construir plantillas de WordPress desde cero, trabajaremos en agregar una nueva función a la plantilla de WordPress que estamos desarrollando, que es habilitar la búsqueda en el contenido del sitio y mostrar los resultados de búsqueda en una página dedicada dentro de nuestra plantilla. WordPress incluye muchas funciones listas para usar integradas en él para administrar el proceso de búsqueda de manera flexible, y hoy aprenderemos cómo aprovechar estas funciones que nos permiten agregar un formulario de búsqueda en tu plantilla personalizada para que aparezca en el encabezado del sitio o en cualquier otro lugar que desees. También aprenderás cómo personalizar la forma en que se muestran los resultados de búsqueda. Al final de este artículo, podrás crear un nuevo archivo de plantilla en tu plantilla llamado searchform.php que te permitirá crear un formulario de búsqueda personalizado en WordPress y llamarlo y formatearlo con facilidad y flexibilidad, y también crearás otro archivo de plantilla llamado search.php cuya función es personalizar la página de resultados de búsqueda y formatear la página que muestra los resultados de búsqueda en tu sitio.

Contenido del artículo

Primero. Agregar el cuadro de búsqueda al encabezado de la plantilla
Paso 1. Crear un archivo personalizado para el formulario de búsqueda searchform.php
Paso 2. Mostrar el formulario de búsqueda en el encabezado
Paso 3. Formatear el formulario de búsqueda
Segundo: Personalizar la página de visualización de resultados de búsqueda
1. Crear un archivo de plantilla search.php personalizado para la página de resultados de búsqueda
2. Formatear elementos para la página de resultados de búsqueda
Conclusión

Primero. Agregar el cuadro de búsqueda al encabezado de la plantilla

Cuadro de búsqueda

Formulario de búsqueda

El lugar habitual para agregar un bloque de cuadro de búsqueda o formulario de búsqueda (Search form) generalmente se encuentra en el encabezado del sitio o la barra lateral del sitio. En nuestro artículo actual, agregaremos el código para el cuadro de búsqueda dentro de un archivo separado dentro de la plantilla y lo llamaremos en el lugar requerido dentro del archivo de encabezado header.php. En la siguiente imagen se muestra el marco estructural que nos muestra un diseño inicial para el formulario de búsqueda y la página de resultados de búsqueda de la siguiente manera:

Marco de cuadrícula para el diseño de la página de resultados de búsqueda

Sigue los párrafos siguientes para conocer los pasos necesarios para lograr este diseño en nuestra plantilla paso a paso.

Paso 1. Crear un archivo personalizado para el formulario de búsqueda searchform.php

Antes de crear nuestro archivo de búsqueda de plantilla, debe señalarse que WordPress incluye un formulario de búsqueda predeterminado integrado, y puede usar este formulario fácilmente en cualquier archivo de plantilla que desee sin necesidad de crear un archivo de formulario separado usando la función lista para usar en WordPress get_search_form () que se encarga de mostrar el formulario de búsqueda en el sitio. Esta función muestra, como mencionamos, el formulario de búsqueda predeterminado integrado en el núcleo de WordPress (que es un código de formulario HTML5 si nuestra plantilla es compatible con HTML5, de lo contrario, muestra un formulario HTML4) en caso de que no haya agregado ningún archivo de plantilla personalizado para un formulario de búsqueda llamado searchform.php en la carpeta de su plantilla actual o en la carpeta padre de su plantilla actual. Esta función get_search_form () se define en el archivo genetal-template.php dentro del directorio wp-includes en el núcleo de WordPress, y si examinas cómo funciona la función, encontrarás como mencionamos que su salida predeterminada es un formulario HTML simple similar al siguiente:

Como se muestra en el código anterior, el formulario de búsqueda utiliza la propiedad method para especificar el método de envío de datos del formulario a la página especificada en la propiedad action. Esta propiedad toma ya sea el valor get que significa enviar datos del formulario como variables (nombre y valor) dentro del enlace URL, o el valor post que significa enviar datos del formulario dentro del texto de la solicitud HTTP y no los muestra en la dirección URL, lo que es útil para enviar datos sensibles e importantes como contraseñas. Después, WordPress crea un cuadro de texto de búsqueda en el formulario y lo llama "s", luego crea un botón de envío simple Search cuya función es enviar los datos de búsqueda a la consulta de búsqueda.

Necesitarás crear un formulario de búsqueda personalizado en caso de que desees hacer cambios en la forma en que funciona este formulario de búsqueda predeterminado o agregar tus propios campos, que es lo que haremos en nuestra plantilla actual. Queremos crear nuestro propio archivo de formulario de búsqueda y no depender del formulario predeterminado, por lo que creamos un nuevo archivo en la carpeta de la plantilla y lo llamamos searchform.php y escribimos en él el código de nuestro formulario de búsqueda. En el código que escribiremos en nuestro archivo searchform.php, agregaremos a la propiedad action una llamada a la función home_url() y le pasaremos el parámetro '/' para obtener el enlace a la página de inicio del sitio seguido por una barra oblicua http://www.example.com/ y enviarle los datos del formulario de la siguiente manera:
<?php /** * Archivo de plantilla personalizado para mostrar el formulario de búsqueda en la plantilla * * @package ola */ ?>

Nota: Hay un gancho de filtro get_search_form que se puede aplicar al formulario de búsqueda en caso de que desees editar el código HTML del formulario predeterminado, y también hay un gancho de acción que se llama cuando se ejecuta la función y antes de recuperar el formulario de búsqueda, que es el gancho pre_get_search_form, y este gancho es útil en caso de que desees ejecutar códigos de JavaScript durante una operación de búsqueda o aplicar formatos específicos.

Lee más: Explicación de los ganchos de WordPress (WordPress Hooks) y su importancia para los desarrolladores de plantillas y complementos

Paso 2. Mostrar el formulario de búsqueda en el encabezado

El siguiente paso es mostrar este cuadro de búsqueda en el encabezado del sitio, así que ve al archivo header.php en tu plantilla y llama a la función get_search_form () antes de la etiqueta de cierre

para mostrar el formulario que creaste en el paso anterior como se muestra en el siguiente código:

<!-- search Form -->

Ahora, si vemos la interfaz frontal del sitio en el navegador, el formulario de búsqueda aparecerá en el encabezado como se muestra en la siguiente imagen.

Mostrar el formulario de búsqueda en el encabezado de la plantilla de WordPress

Como puedes notar en la imagen anterior, el formulario aparece con un diseño básico y necesita algo de formato para que se vea consistente y coherente con el diseño de nuestra plantilla personalizada, y esto es lo que haremos en el siguiente paso.

Paso 3. Formatear el formulario de búsqueda

Ahora vamos a agregar algunas reglas de formato al final del archivo style.css de nuestra plantilla para mostrar el cuadro de búsqueda de la manera correcta. Abre el archivo y agrega el siguiente código al final:

/* Search forum styles */

form.search-form {

padding: 1rem;
display: flex;
justify-content: center;
gap: .5rem;
height: 80px;
box-sizing: border-box;
transition: margin .2s ease-in-out;
position: relative;
z-index: 40;
}

form.search-form input {
font-family: 'Noto Sans Arabic',Tahoma, sans-serif;
width: 100%;
max-width: 500px;
}

form.search-form button {
border-radius: 5%;
font-family: 'Noto Sans Arabic',Tahoma, sans-serif;
font-weight: 300;
font-style:italic;
border: none;
cursor: pointer;
}
form.search-form button:hover{
color: #553c9a;
background-color: #c1afd4;
}

Guarda el archivo y vuelve a ver el sitio y verás que el formulario de búsqueda ahora está formateado de una manera elegante de la siguiente manera:

Formato del formulario de búsqueda

Segundo: Personalizar la página de visualización de resultados de búsqueda

En esta etapa, necesitamos crear un archivo de plantilla personalizado responsable de mostrar los resultados de búsqueda y formatear este archivo de acuerdo con los requisitos de nuestra plantilla de la siguiente manera.

1. Crear un archivo de plantilla search.php personalizado para la página de resultados de búsqueda

Dado que especificamos a través de la propiedad action al crear el formulario de búsqueda que los resultados se enviarán a la URL de la página de inicio de nuestro sitio a través de la función home_url() y elegimos el método GET para enviarlos, esto significa que cuando se busque una palabra, digamos árbol, los resultados aparecerán en la página en el siguiente enlace en la ventana del navegador: https://yourdomin/?s=árbol. Ya sea que uses el formulario de búsqueda predeterminado de WordPress o un formulario de búsqueda personalizado para buscar algo específico en tu sitio, WordPress mostrará los resultados de búsqueda en esta página basándose en un archivo de plantilla llamado search.php en caso de que exista en la carpeta raíz del directorio de tu plantilla.

Y si aún no has creado un archivo con este nombre en tu plantilla, WordPress utilizará el archivo de plantilla base index.php como es habitual para mostrar la página de resultados de búsqueda. En nuestra plantilla, crearemos un archivo search.php y usaremos un código diferente para mostrar los resultados de búsqueda para que el diseño se vea diferente de la página del blog o la página de inicio.

De acuerdo con el marco de cuadrícula para el diseño de la página de resultados de búsqueda, debemos mostrar el título de la página en la parte superior, luego mostrar la lista de resultados devueltos por la consulta de búsqueda en forma de (título del artículo, descripción breve del artículo y enlace para leer más) y en la parte inferior de la página una lista de navegación en las páginas de resultados de la siguiente manera:

Con respecto al título de la página que mostraremos al principio del archivo search.php, será un texto fijo con un texto dinámico que incluya la frase que el usuario consultó

Para lograr esto, nos basaremos en el gancho $found_posts y lo llamaremos a través de la propiedad de la clase wp_query para obtener el número total de resultados de búsqueda, y llamaremos a la función lista para usar the_search_query() que devuelve el valor de la variable de consulta que ingresó el usuario en el cuadro de texto del formulario de búsqueda.

Recordatorio: WP_Query es una clase de programación escrita en PHP integrada en WordPress que nos ayuda a realizar consultas fácilmente desde la base de datos de WordPress sin necesidad de escribir consultas SQL detalladas, y devuelve artículos, páginas u otros objetos personalizados que nos permite mostrarlos en la página.

Después de eso, necesitamos pasar por el bucle de WordPress WordPress Loop para obtener los resultados de búsqueda de artículos o páginas y especificar la información que queremos mostrar de ellas de una manera similar a escribir el código del archivo index.php pero con algunas modificaciones en el código del bucle.

Finalmente, mostramos los enlaces de navegación (resultados siguientes y resultados anteriores) en caso de que los resultados de búsqueda se muestren en más de una página mediante las funciones listas para usar en WordPress previous_posts_link y next_posts_link.

Para que el código del archivo completo sea el siguiente:

<?php /** * Archivo de plantilla de página de resultados de búsqueda * @package ola1 * @subpackage olatheme */ ?>

<?php get_header(); ?>

<main></main>

<?php printf( esc_html( '%d resultados para la búsqueda de', (int) $wp_query->found_posts, 'olatheme'),
(int) $wp_query->found_posts);
?>
"<?php echo get_search_query() ?>"

<?php echo previous_posts_link( __( '« Resultados más recientes', 'olatheme' ) ); ?>
<?php echo next_posts_link( __( 'Resultados más antiguos »', 'olatheme' ) ); ?>

<?php get_footer(); ?>

2. Formatear elementos para la página de resultados de búsqueda

El último paso que necesitamos hacer es agregar algunos formatos CSS al archivo style.css de nuestra plantilla para mostrar los resultados de búsqueda de la manera requerida. Abre el archivo style.css y agrega el siguiente código al final:

/* Search result page styles */
h2.page-title{
color:#553c9a;
padding-bottom:0;
}

section.search-results{
margin: 20px;
padding: auto;
border-top:1px solid #b393d3;
}

Con esto hemos terminado de agregar la función de búsqueda a la plantilla de WordPress personalizada y la página de resultados aparecerá de la siguiente manera:

Página de resultados de búsqueda

En caso de encontrar resultados, y en caso de que no se encuentren resultados, aparecerá un mensaje aclaratorio para el usuario de la siguiente manera:

Página de resultados de búsqueda sin resultados

Conclusión

En el artículo de hoy aprendimos cómo agregar una función de búsqueda personalizada a nuestra plantilla de WordPress. Explicamos cómo mostrar un cuadro de búsqueda en el encabezado del sitio o en cualquier lugar que desemos mediante la función lista para usar get_search_form() que muestra un formulario de búsqueda predeterminado o personalizado que podemos crear agregando el código del formulario requerido al archivo searchform.php en nuestra plantilla y prescindir del formulario predeterminado.

También explicamos cómo personalizar el archivo de plantilla search.php para mostrar los resultados de búsqueda; de lo contrario, se utilizará el archivo predeterminado de la plantilla index.php en caso de que no exista. Finalmente, agregamos los formatos necesarios para mostrar el formulario de búsqueda y la página de resultados de acuerdo con nuestras necesidades de diseño.

Puedes descargar los archivos de la aplicación práctica (5) para desarrollar una plantilla de WordPress desde cero haciendo clic en el siguiente botón

Descargar la plantilla

#DesarrolloDeplantillaDeWordPress