🔎¿Cómo crear un Buscador para una Página Web?🚀

Hola amigos de Marieú Technology Corporation, ¡Cómo crear un buscador en una página web! De hecho, en esta guía, paso a paso, aprenderás a crear una plantilla de archivo, configurar un widget, agregar estilos y cambiar idioma para resultados del buscador. Como complemento, te enseñaremos a agregar un header y footer, para que mejores el diseño de tu buscador. 🔎🚀

Elementor es un maquetador de páginas  web o «page builde». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

¿Cómo crear un buscador en una página web?

En el caso de Wordpress, tenemos que actualizar el plugin de Elementor, para evitar algunos errores que podríamos tener dentro de la configuración. Ya para Elementor, vamos a crear una plantilla de archivo. Con la plantilla creada, nosotros vamos a agregar un widget de «archive title» otro widget de «archive post». Vamos a configurar el contenido, vamos a entrar a la parte de estilo, vamos a hacer algunos artificios para poder cambiar ese idioma.

Seguidamente, vamos a agregar algunas condiciones. ¿Cuando nosotros queremos que aparezca ese buscador?, si van a ser en todas las páginas o, de repente, va a ser solamente una página de Blog. Finalmente, vamos a asignar un header y un footer, cuando aparezca estos resultados.

Diagrama Arquitectura - ¿Cómo crear un buscador interno en página web?
Fuente: Elaboración Propia.

Ya dentro de Wordpress, nos vamos a dirigir a plantillas y vamos a crear una nueva plantilla. El tipo de plantilla, en este caso, es «archive» o archivo. Nombre de la plantilla, vamos a colocar «buscador», crear plantilla. En el caso que tengamos Elementor Pro, ya son plantillas configuradas previamente. Vamos a cerrar la pestaña. Se llama «archive title», ¡ahí está!, el siguiente widget «archive post», seleccionamos, arrastramos y soltamos.

Por defecto, se están agregando todas las entradas que tenemos dentro de Wordpress. También, recuerden que vamos a agregar el widget del botón y esto lo vamos a agregar en una nueva sección. Adicionalmente a ello, nosotros vamos a agregar dos espaciadores, seleccionamos, arrastramos y soltamos. Vamos a colocar unos 30 píxeles. Lo mismo para el final, vamos a agregar un espaciador aquí, ponemos unos 30.

Dentro del widget de «archive title», tamaño de XL. Vamos al segundo widget de «archive post». Dentro del contenido, nosotros vamos a modificar el estilo. En vez de «classic», le vamos a colocar un estilo «card», vemos que ha cambiado el «layout». Notamos, un poco, que la imagen de la miniatura no nos permite leer claramente el texto. Para eso, nosotros vamos a cambiar el tamaño de imagen, colocamos lleno y vamos a reducir un poco el radio a 0.45. Eliminamos «comments», nos quedamos solamente con el «date», que es la fecha. Tenemos «read more», podemos colocar leer más. Además, vamos a Deshabilitar el «avatar», lo escondemos, «hide».

Respecto a la paginación, nosotros queremos que, en la parte final, aparezca una numeración. Después de paginación, vamos a entrar a «Advanced», es el mensaje, en el caso que no encontremos el post, que el usuario está buscando: «No encontramos lo que buscabas», y, estamos colocando, un emoji. ¿Cómo podemos visualizar dicho mensaje?, nos vamos a «settings» y, en «settings», nosotros vamos a cambiar «preview settings» a «search results», ponemos aplicar, ahí lo tenemos.

Ahora nos vamos con el botón y vamos a ir a «contenido», vamos a colocar «volver». El enlace o la ruta tiene que ser una página donde encuentres todos tus posts. En este caso, lo vamos a colocar dentro de nuestra página de Blog. Dentro de nuestra página de Blog, vamos a colocar el botón al centro y, vamos a colocar, un icono en la parte final. Vamos a abrir la biblioteca de iconos, colocar un icono de «play», al final, después el texto.

Para el primer widget, el «archive title», en el estilo lo vamos a dejar como está, por defecto. Las modificaciones van a ser ya respecto al segundo widget, es de «archive post». Dentro del «layout», nosotros vamos a dejarlo tal cual, nos vamos a centrar dentro de «card». Entonces, para estas esquinas, nosotros vamos a colocar un radio de 20 píxeles. Nos vamos con «image», por cada uno de los posts, tenemos las categorías. Esas categorías están señaladas en la parte superior derecha. Seleccionamos en «normal», el background color vamos a colocar un color verde. Ya para el texto, en blanco. Dentro de «image», las demás configuraciones lo vamos a dejar por defecto.

Entramos a «content», este «content» es para modificar el texto. Vamos a cambiar el color, un color lila oscuro. Vamos a poner «color secundario» y, para la parte de meta, le vamos a cambiar un color completamente negro. Vamos con la paginación, cuando está en un estado normal, vamos a colocarle negro. El espaciado entre el post y la enumeración, vamos a colocar 20. En modo «hover», lo vamos a colocar en el «color secondary», que es un color lila más oscuro y, para el caso de «active», un color primario. Ya con el Nothing Found Message, lo dejamos por defecto. Para el tercer widget, en estilo, lo vamos a dejar por defecto.

Para los tres widget, dentro avanzado nosotros solamente vamos a cambiar en archive post. Como relleno, vamos a colocar 35, ponemos «settings». ¿Cómo sería la ventana de resultados?, ponemos aplicar y, actualmente, lo tenemos así: «los resultados de búsqueda para». Nos va a salir en inglés el «search result for», podemos hacer el siguiente artificio. ariencia, colocamos «editor de archivos de temas». Dentro del editor de temas, vamos a buscar la sección de «template parts». Nosotros desplegamos y vamos a encontrar el search.php. Inicialmente te va a aparecer inglés, lo traducimos, ponemos «actualizar archivo» y revisamos que ya se actualizó.

En nuestro caso, a pesar de cambiar aquí, dentro del editor de archivos de temas, no se llegó a cambiar; por lo que, tuvimos que entrar dentro del «administrador de archivos». Vamos a «administrador de archivos», accedemos a todos los archivos business web Hosting, accedemos a nuestro dominio. En este caso, vamos a ingresar a «staging», ya dentro de «staging», vamos a colocar utils.php. Vamos a buscar un archivo llamado «Core utils.php. Si solamente tenemos la versión de Elementor, entramos aquí. Nosotros vamos a cambiar el texto, que es el texto que está en inglés lo vamos a cambiar a español.

Dentro de publicar, nosotros vamos a colocar «display conditions» o condiciones de visualización. Agregamos la condición, va a estar incluido siempre y cuando tengamos el «Search results», los resultados de busca, y ponemos «save and Close».

Buscador Interno Marieú Technology Corporation.
Fuente: Elaboración Propia.

Resultados Finales

No tiene un header y no tiene un footer, para crear el header el footer vamos a plantillas y «Team builder». Se habilita el siguiente maquetador de tema. Ya cuando terminemos de crear este header y este footer, nosotros vamos a agregar las condiciones, ponemos «edit conditions». Vamos a incluir la condición de que el header y el footer se muestren cada vez que ingresamos a la sección de archives o archivos. Ponemos incluir archives y, en todos los archives, «save and close».

«Elaborar Carrusel», ponemos Enter y ¡ahí está! Los resultados incluyen ya tanto header como el footer. Seleccionamos el botón «regresar» y, nuevamente, estamos en la página de Blog. ¡Listo, gracias amigos de Marieú Technology Corporation!