Plantillas de búsqueda
Tabla de contenidos
LaPlantilla de SearchWPse utiliza junto conFormularios de búsquedapara mostrar los resultados de la búsqueda en una página de resultados personalizada. Con las Opciones de plantilla, puedes controlar completamente el aspecto de tus resultados, asegurando que coincidan con el diseño de tu sitio web y proporcionen una excelente experiencia de usuario.
Esta documentación explica cómo usar la página de Opciones de Plantilla, elegir temas de diseño, aplicar estilos personalizados e incrustar tu plantilla de SearchWP en cualquier lugar de tu sitio web.
Nota: La personalización de plantillas solo se puede usar con la opción Plantilla de SearchWP en Formularios de Búsqueda. Si deseas personalizar la plantilla Predeterminada del Sitio, necesitarás editar la plantilla de búsqueda predeterminada de tu tema.
Primeros pasos con las plantillas
Para crear una nueva plantilla para mostrar los resultados de SearchWP:
- Ve a tu Panel de WordPress.
- Navega aSearchWP > Plantillas.
- Haz clic en elbotón “Añadir nueva”para crear un nuevo diseño de plantilla.
En la siguiente pantalla, encontrarás dos secciones principales para la personalización:
- Elige un tema de diseño
- Estilo personalizado
Repasemos lo que ofrece cada sección.
1. Elige un tema de diseño
Esta sección te permite elegir el estilo de diseño para cómo aparecerán tus resultados de búsqueda en el frontend de tu sitio web. Puedes cambiar fácilmente entre diferentes temas de diseño y previsualizar cada uno antes de guardar.
Temas de diseño disponibles:
- Minimalista:Un diseño de lista limpio y simple que muestra solo el título y la descripción de cada resultado.
- Compacto:Un diseño de lista con título, descripción y una pequeña miniatura de imagen.
- Columnas:Un diseño de cuadrícula que muestra los resultados en varias columnas, con título, descripción y una pequeña imagen.
- Mediano:Un diseño de lista con una imagen de tamaño mediano, junto con el título y la descripción.
- Enriquecido:Un diseño de lista visualmente atractivo con una imagen grande, título y descripción.
- Combinado:Esta opción te permite diseñar un diseño totalmente personalizado mezclando y combinando configuraciones de la sección Estilo personalizado.
Elegir un tema es un buen punto de partida, y puedes ajustar el diseño aún más usando las opciones de estilo descritas a continuación.
2. Estilo personalizado
Una vez que hayas seleccionado un tema de diseño, utiliza laEstilo personalizadosección para ajustar el aspecto y el comportamiento de tus resultados de búsqueda.
Estilo de diseño:Puedes elegir cómo se organizan los resultados:
- Cuadrícula: Muestra los resultados en un diseño de varias columnas.
- Lista: Muestra cada resultado uno debajo del otro en formato de lista.
Opciones de Estilo Básico
Las Opciones de Estilo Básico te permiten ajustar la apariencia visual de tus resultados de búsqueda para que encajen mejor con el diseño de tu sitio web. Estas opciones ofrecen flexibilidad para controlar cómo se muestra cada resultado, asegurando un aspecto profesional y coherente.
Descripción: Puedes habilitar o deshabilitar el campo de descripción en los resultados de búsqueda, según tu preferencia. Si está habilitado, la descripción mostrará un breve extracto del contenido. Además, tienes la opción de resaltar las palabras clave de la búsqueda dentro del extracto. Para generar un extracto personalizado que contenga las palabras clave resaltadas, simplemente habilita la opción Resaltado en la configuración de SearchWP.
Imagen: La opción Imagen te permite elegir el tamaño de la imagen que se muestra junto al resultado de la búsqueda. Puedes seleccionar entre varios tamaños predefinidos como pequeño, mediano y grande.
Título: Puedes personalizar el color y el tamaño de fuente del título de los resultados para que coincidan con la tipografía de tu sitio.
Precio: La opción Precio estará disponible si un plugin de comercio electrónico, como WooCommerce o Easy Digital Downloads, está activo en tu sitio. Te permite personalizar el color y el tamaño de fuente del precio del producto que se muestra en los resultados de búsqueda.
Estilo del Botón: La sección Estilo del Botón te permite personalizar la apariencia del botón “Leer más”, que aparece al final del extracto de cada resultado.
Puedes personalizar el texto de la etiqueta del botón para que sea algo más contextual o atractivo, como “Ver más” o “Aprender más”. Además, puedes cambiar el color de fondo, el color de fuente y el tamaño de fuente del botón para que destaque o se integre perfectamente con el diseño de tus resultados.
Resultados por Página: Esta configuración te permite especificar el número máximo de resultados de búsqueda que se muestran en una sola página.
Nota: También puedes establecer el número de resultados por página mediante programación utilizando el filtro searchwp\results\per_page. Esto es útil si deseas ajustar dinámicamente el recuento de resultados según criterios específicos o tipos de página.
Estilo de Paginación: La opción Estilo de Paginación te permite controlar cómo los usuarios navegan por varias páginas de resultados de búsqueda.
Tipos de Paginación Disponibles:
- Carga más AJAX
Esta opción carga dinámicamente resultados de búsqueda adicionales sin actualizar la página. Este método proporciona una experiencia de navegación fluida, ya que los usuarios pueden ver más resultados sin salir de la página actual. Puedes personalizar la etiqueta y el estilo del botón (color de fondo, fuente y tamaño). - Paginación predeterminada (basada en números)
El método de paginación predeterminado muestra números de página tradicionales, lo que permite a los usuarios navegar por las páginas de resultados manualmente. Puedes seleccionar entre los siguientes estilos:- Sin caja: Este estilo presenta los números de página junto con los enlaces anterior/siguiente sin ningún estilo de caja o circular. También tienes la opción de personalizar las etiquetas de los botones Anterior y Siguiente.
- Con caja: Muestra los números de página con estilo de caja.
- Circular: Muestra los números de página con estilo de borde circular.
Incrustar su plantilla
Al igual que los formularios de búsqueda, su plantilla de SearchWP se puede incrustar en cualquier página de su sitio de WordPress utilizando uno de los siguientes métodos:
1. Bloque de Gutenberg
El método de bloque de Gutenberg le permite incrustar fácilmente los resultados de SearchWP directamente en cualquier publicación o página de su sitio de WordPress. Este método es particularmente útil para los usuarios que prefieren trabajar con el editor de Gutenberg y desean colocar los resultados de la búsqueda dentro de su contenido sin problemas.
- Mientras editas cualquier entrada o página, busca el“Resultados de SearchWP”bloque.
- Inserte el bloque donde desee que aparezcan sus resultados.
- Los resultados se muestran según el motor y la plantilla asignados en labloque Formulario de Búsquedaconfiguración. En la configuración del bloque, tienes la opción de elegir una plantilla y un motor diferentes para mostrar los resultados. Esto no suele ser necesario y solo debe usarse si es necesario para anular la configuración establecida por el formulario de búsqueda.
2. Código corto:Cada plantilla proporciona un shortcode único. Cópialo y pégalo en cualquier página, entrada o área de widget para mostrar los resultados.
3. Código PHP:Utiliza el fragmento de código PHP proporcionado para insertar tus resultados de búsqueda directamente en los archivos de tu tema o a través de un plugin de fragmentos de código.
4. Incrustar términos: Puede agregar fácilmente un bloque de plantilla de resultados a una página existente eligiéndolo del menú desplegable, o puede optar por crear una nueva página específicamente para el bloque.
Consejos para usar plantillas
- Puedes crearmúltiples plantillaspara diferentes secciones de tu sitio web. Por ejemplo, un diseño para la búsqueda de tu blog y otro para la búsqueda de tus productos.
- También puedesreutilizaruna sola plantilla en varias páginas.
- Cada plantilla es completamente personalizable, lo que le brinda control total sobre el diseño, los colores, los estilos y la visualización del contenido.
