Uso de Elementor para Motores Suplementarios
Usar Elementor para diseñar y construir formularios y resultados de búsqueda suplementarios requiere unos pocos pasos, ¡pero se puede hacer!
Empieza creando una nueva página
Mientras estás conectado al panel de administración de WordPress, empieza creando una nueva página usando Elementor.
Arrastra un widget de Formulario de búsqueda:
IMPORTANTE: Edita el ID CSS en el panel Avanzado para el Formulario de búsqueda y asígnale un ID único. Para este artículo usaremos searchwp-supplemental-form:
Debajo del widget de Formulario de búsqueda, añade un widget de Entradas:
IMPORTANTE: Se debe establecer un ID de consulta para que podamos marcarlo en un hook. Expande el panel de Consulta para el widget de Entradas e introduce un ID de consulta único. Para este artículo usaremos searchwp-supplemental:
Estos dos widgets facilitarán la búsqueda en tu motor suplementario.
Añade los hooks necesarios
Se requieren algunos hooks para que todo funcione. Puedes añadirlos al archivo functions.php de tu tema:
| <?php | |
| // @link https://searchwp.com/documentation/knowledge-base/using-elementor-for-supplemental-engines/ | |
| // We need to flag the search form. | |
| add_action( 'elementor_pro/search_form/after_input', function( $form ) { | |
| // Check to see if this is the right Search Form. | |
| $settings = $form->get_data( 'settings' ); | |
| if ( isset( $settings['_element_id'] ) && 'searchwp-supplemental-form' == $settings['_element_id'] ) { | |
| ?> | |
| <input type="hidden" name="searchwp" value="supplemental" /> | |
| <?php | |
| } | |
| } ); | |
| // Redirect when applicable. | |
| add_action( 'template_redirect', function() { | |
| if ( is_search() && ! empty( $_GET['searchwp'] ) && 'supplemental' === $_GET['searchwp'] ) { | |
| wp_safe_redirect( add_query_arg( array( | |
| 'swpquery' => get_search_query(), | |
| ), get_permalink( 18 ) ) ); | |
| exit(); | |
| } | |
| } ); | |
| // Provide Search results. | |
| add_filter( 'elementor/query/query_args', function( $query_vars, $widget ) { | |
| // Check to see if this is the right Widget. | |
| $settings = $widget->get_data( 'settings' ); | |
| if ( is_admin() | |
| || ! isset( $settings['posts_query_id'] ) | |
| || ( ! empty( $settings['posts_query_id'] ) && 'searchwp-supplemental' !== $settings['posts_query_id'] ) ) { | |
| return $query_vars; | |
| } | |
| // This form field was set up in Elementor. | |
| $query = isset( $_GET['swpquery'] ) ? sanitize_text_field( $_GET['swpquery'] ) : ''; | |
| if ( ! empty( $query ) ) { | |
| // Perform the search. | |
| $searchwp = new SWP_Query( array( | |
| 's' => $query, | |
| 'engine' => 'supplemental', // Engine to search. | |
| 'fields' => 'ids', | |
| 'posts_per_page' => -1, | |
| ) ); | |
| if ( empty( $searchwp->posts ) ) { | |
| $searchwp->posts = array( 0 ); | |
| } | |
| // Override the query vars with SearchWP results. | |
| $query_vars['post__in'] = $searchwp->posts; | |
| $query_vars['post_type'] = 'any'; // Restricted by post__in. | |
| $query_vars['post_status'] = 'any'; // Restricted by post__in. | |
| $query_vars['orderby'] = 'post__in'; // Order by post__in. | |
| $query_vars['order'] = 'DESC'; // Order descending. | |
| } else { | |
| // Force no results. | |
| $query_vars['post__in'] = array( 0 ); | |
| } | |
| return $query_vars; | |
| }, 10, 2 ); |
El primer hook (líneas 7-18) añade un input oculto al formulario de búsqueda.
El segundo hook (líneas 20-28) busca ese input oculto y, si lo encuentra, redirigirá a nuestra página de motor Suplementario.
NOTA: El ID de la página en este artículo es 18, debes actualizar el ID (ver línea 22) al ID de tu página recién creada con la que estamos trabajando.
El tercer y último hook (líneas 30-68) son responsables de sobrescribir el contenido del widget de Entradas que añadimos con los resultados de SearchWP.
NOTA: El nombre del motor suplementario debe actualizarse (ver línea 45) para que coincida con el nombre del motor suplementario que deseas buscar.
