Has querido alguna vez querer poner en tu menú un botón personalizado, o unos botones de redes sociales, quizás tu web es multidiomas y quieres poner las banderas de los idiomas o simplemente una herramienta para buscar contenido en tu página web y ya sea porque la plantilla no tiene asignada un área de widget en el menú o por falta de conocimientos de programación te has visto limitados para llevar a cabo esta tarea.
Hoy te vamos a explicar como conseguirlo de varias formas, con la ayuda de los plugin Widget in menu for WordPress y WP Widget in Navigation, también si estas creando tu web con las plantillas genesis o astra.
Índice de contenidos
Instalando el plugin
En la barra del navegador seguimos la ruta plugins/anadir nuevo. Una vez nos cargue el repositorio de wordpress realizamos la búsqueda. Instalamos, activamos y ya podemos añadir nuestro primer widget al area de menú. El plugin no necesita ningún tipo de configuración.
Añadiendo el widget al área de widget
Accedemos al área de widget siguiendo la ruta apariencia/widget y veremos que a toda la lista de áreas de widget que tiene por defecto la plantilla se ha añadido una nueva con el nombre Widgets in menu.
En nuestro caso como queremos añadir una barra de búsqueda seleccionamos el widget y lo arrastramos al interior de esta área y lo guardamos.
Insertamos el área de widget en el menú
Vamos a apariencia/menú y aquí también veremos que se nos ha añadido una nueva categoría de elementos que podemos añadir al menú. Si desplegamos la categoría widgets encontraremos el widget que hemos insertado en esta área en el paso anterior. Seleccionamos y añadimos al menú.
Podemos modificar el orden de nuestra área de widget arrastrándola hasta el nivel del menú que nos interese. En nuestro caso como nos interesa que aparezca al final del menú lo dejaremos como lo inserta por defecto.
Accedemos al frontend de nuestra página web para inspeccionar nuestra barra de menú y ver como se aplican los cambios….e voilá!!, ya tenemos nuestra barra de búsqueda.
Añadir widget en el menú con WP Widget in Navigation
Su funcionamiento es muy parecido al anterior plugin, con la diferencia que este nos permite insertar los widgets no solo como último elemento del menú, si no que nos permite poner en cualquier lugar de la estructura.
Vamos a apariencia/widgets y en el módulo Widgets in navigation menu insertamos el el widget pertinente. Una vez asociado el widget con el módulo aquí reside la gran diferencia, si antes lo insertábamos desde la columna de añadir al menú, en este deberemos clicar sobre el elemento del menú, clicar sobre el botón widget y el widget se añadirá a detras.
Repasamos todos los pasos en este vídeo.
Añadir widget en el menú para Genesis
Si estás creando tu página web con Genesis el tema es algo más complejo.
Primero deberás crear un child theme. Si no sabes como crearlo visita nuestra entrada «Cómo crear un child theme en 3 minutos«.
Desde el Cpanel de tu hosting debes crear una cuenta FTP y guardarte los datos para la conexión.
También necesitaras un gestor de archivos vía FTP. Los más populares son Filezilla y WinSCP, que son programas gratuitos.
Creamos la conexión con el servidor y acto seguido seguiremos esta ruta:/public_html/wp-content/themes/el-nombre-de-vuestro-child-theme. Buscamos el archivo functions.php, lo editamos, pegamos el código que aparece bajo estas lineas y volvemos a subir el archivo al servidor.
Solo nos faltara repetir el primer paso de este tutorial, acceder apariencia/widgets y poner en la nueva área creada el widget que necesitemos.
Insertar widget en el menú principal con Astra Pro
Entre todas las infinitas opciones de personalización que ofrece la plantilla Astra está la de añadir widget como elemento final del menú principal de nuestra página web.
Desde nuestro panel de administración seguiremos accederemos a Apariencia/personalizar/cabecera/ Menú primario y en el selector último elemento de menú seleccionaremos Widget.
Ahora simplemente nos faltara cargar el widget en el área de widget «Cabecera». Para ello retrocedemos hasta la raiz del personalizador, clicamos sobre widget y arrastramos el widget que necesitemos a el contenedor antes comentado.
