Integración del formulario de búsqueda modal y la prioridad del archivo de términos
La Extensión de Formulario de Búsqueda Modal de SearchWP te permite integrar rápida y fácilmente un formulario de búsqueda modal en tu sitio.
La Extensión de Prioridad de Archivo de Términos de SearchWP te permite incluir enlaces de archivo de términos de taxonomía en los resultados de búsqueda cuando sea aplicable.
Por defecto, la Prioridad de Archivo de Términos no es compatible con el Motor Predeterminado de SearchWP. Esto se debe a que el Motor Predeterminado está diseñado para interactuar directamente con la funcionalidad de búsqueda nativa de WordPress al mostrar los resultados de búsqueda. WordPress no espera archivos de términos de taxonomía en los resultados de búsqueda.
Debido a esa limitación, se debe usar un Motor Suplementario de SearchWP al configurar la Prioridad de Archivo de Términos.
Además, también se debe usar una Plantilla de Formulario de Búsqueda Modal personalizada. La plantilla predeterminada del Formulario de Búsqueda Modal está configurada para utilizar el Motor Predeterminado, pero eso no funcionará debido a la razón descrita anteriormente.
Configuración
Comenzaremos instalando y activando SearchWP, el Formulario de Búsqueda Modal de SearchWP y la Prioridad de Archivo de Términos de SearchWP.
El siguiente paso es crear y configurar un Motor Suplementario.
Plantilla de resultados del motor suplementario
A continuación, seguiremos la documentación sobre la configuración de resultados del motor suplementario para finalizar la visualización de nuestros resultados de búsqueda.
La documentación de la Prioridad de Archivo de Términos tiene una plantilla de resultados suplementaria que podemos (¡y usaremos!) aquí: https://searchwp.com/extensions/term-archive-priority/#gist105037258
Esa plantilla de resultados se puede guardar como un archivo llamado template-my-searchwp-supplemental.php en el directorio de tu tema. Hacerlo la hará disponible como una Plantilla de Página.
Según la documentación de resultados del Motor Suplementario, crearemos una nueva Página en nuestro sitio utilizando la Plantilla de Página que acabamos de crear.
Tenga en cuenta que la Plantilla que estamos utilizando es la que acabamos de crear. También tenga en cuenta la URL de los resultados, que utilizaremos en los siguientes pasos.
Creación de una plantilla de formulario modal funcional
Con nuestra plantilla de resultados del Motor Suplementario en su lugar y enlazada, el siguiente paso es asegurarnos de que nuestro Formulario Modal esté configurado para activar nuestro Motor Suplementario e integrar así con la Prioridad de Archivo de Términos.
De manera similar a la configuración de la plantilla de resultados del Motor Suplementario, vamos a crear una plantilla de Formulario Modal basada en la plantilla predeterminada del Formulario Modal según la documentación.
Este paso es crítico porque actualizará el formulario modal existente que estamos utilizando para redirigir las búsquedas a la plantilla de resultados del Motor Suplementario que acabamos de crear.
Usando la plantilla predeterminada existente como punto de partida, editaremos el marcado del formulario de búsqueda para enviar el formulario modal a nuestra página de resultados del Motor Suplementario en lugar de activar una búsqueda nativa de WordPress.
También necesitamos actualizar el name de nuestro campo de búsqueda para que coincida con lo que espera la plantilla de resultados del Motor Suplementario, en este caso lo hemos llamado searchwp.
Aquí está la plantilla completa del Formulario Modal. Presta especial atención a:
- Línea 11 que apunta a nuestra plantilla de resultados del Motor Suplementario
- Línea 14 que establece nuestro
namede entrada
| <?php | |
| /** | |
| * SearchWP Modal Form Name: Term Archive | |
| */ | |
| // @link https://searchwp.com/documentation/knowledge-base/integrating-modal-search-form-and-term-archive-priority/ | |
| ?> | |
| <div class="searchwp-modal-form-default"> | |
| <div class="searchwp-modal-form__overlay" tabindex="-1" data-searchwp-modal-form-close> | |
| <div class="searchwp-modal-form__container" role="dialog" aria-modal="true"> | |
| <main class="searchwp-modal-form__content"> | |
| <form role="search" method="get" class="search-form" action="/search-results/"> | |
| <label> | |
| <span class="screen-reader-text">Search for:</span> | |
| <input name="searchwp" type="search" class="search-field" placeholder="Search..." value=""> | |
| </label> | |
| <input type="submit" class="search-submit screen-reader-text" value="Search"> | |
| </form> | |
| </main> | |
| <footer class="searchwp-modal-form__footer"> | |
| <button class="searchwp-modal-form__close button" aria-label="Close" data-searchwp-modal-form-close></button> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| <style type="text/css"> | |
| .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| background: rgba(45, 45, 45 ,0.6); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999990; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__container { | |
| width: 100%; | |
| max-width: 500px; | |
| max-height: 100vh; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content { | |
| background-color: #fff; | |
| padding: 2em; | |
| border-radius: 2px; | |
| overflow-y: auto; | |
| box-sizing: border-box; | |
| position: relative; | |
| z-index: 9999998; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form label { | |
| flex: 1; | |
| padding-right: 0.75em; /* This may cause issues depending on your theme styles. */ | |
| /* Some common resets */ | |
| float: none; | |
| margin: 0; | |
| width: auto; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form label input { | |
| display: block; | |
| width: 100%; | |
| margin-left: 0.75em; | |
| /* Some common resets */ | |
| float: none; | |
| margin: 0; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__footer { | |
| padding-top: 1em; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__close { | |
| line-height: 1; | |
| display: block; | |
| margin: 0 auto; | |
| background: transparent; | |
| border: 0; | |
| padding: 0.4em 0.5em; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__close:before { | |
| content: "\00d7"; | |
| font-size: 2em; | |
| } | |
| @keyframes searchwpModalFadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes searchwpModalFadeOut { | |
| from { opacity: 1; } | |
| to { opacity: 0; } | |
| } | |
| @keyframes searchwpModalSlideIn { | |
| from { transform: translateY(15%); } | |
| to { transform: translateY(0); } | |
| } | |
| @keyframes searchwpModalSlideOut { | |
| from { transform: translateY(0); } | |
| to { transform: translateY(-10%); } | |
| } | |
| .searchwp-modal-form { | |
| display: none; | |
| } | |
| .searchwp-modal-form.is-open { | |
| display: block; | |
| } | |
| .searchwp-modal-form[aria-hidden="false"] .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| animation: searchwpModalFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="false"] .searchwp-modal-form-default .searchwp-modal-form__container { | |
| animation: searchwpModalSlideIn .3s cubic-bezier(0, 0, .2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="true"] .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| animation: searchwpModalFadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="true"] .searchwp-modal-form-default .searchwp-modal-form__container { | |
| animation: searchwpModalSlideOut .3s cubic-bezier(0, 0, .2, 1); | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__container, | |
| .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| will-change: transform; | |
| } | |
| </style> |
El resto de la plantilla coincide con la plantilla predeterminada y se puede personalizar como desees.
Configuración del disparador del Formulario Modal
En esta configuración, utilizaremos un Elemento de Menú para disparar nuestro Formulario de Búsqueda Modal, asegurándonos de usar el Motor Suplementario que acabamos de crear:
Ahora tenemos nuestro disparador Modal en el Menú de nuestro sitio:
Con nuestra plantilla de Formulario Modal redirigiendo a nuestra Página de Resultados Suplementarios, que a su vez ha sido personalizada para integrar los resultados de Prioridad de Archivo de Términos, ¡ahora tenemos un flujo de trabajo que permite que un Formulario Modal se integre con Prioridad de Archivo de Términos! ?
