Cómo agregar iconos de redes sociales al menú de WordPress

Independientemente de si tiene una empresa o un sitio personal, debe asegurarse de que los usuarios puedan compartir su contenido en las redes sociales. Es por eso que en esta publicación, le mostraremos cómo agregar íconos de redes sociales a su menú de WordPress .

¿Por qué agregar iconos de redes sociales al menú de WordPress?

Según estudios recientes, casi el 50% de la población mundial utiliza al menos una red social. Conectar su sitio con Facebook o agregar feeds de Instagram a su sitio web son buenas opciones, pero hay algo más que puede hacer para aumentar su presencia en las redes sociales. El menú es uno de los elementos más destacados de su sitio. Además, es una de las primeras cosas que ven los usuarios cuando visitan su sitio. Por ejemplo, eche un vistazo al menú principal de nuestro sitio web.

Entonces, para personalizar su sitio y aprovechar al máximo sus canales de redes sociales, puede agregar íconos de redes sociales a su menú de WordPress. Además de eso, puede mostrar íconos en otras áreas de su sitio que admitan widgets como el pie de página, la barra lateral, etc.

Aunque algunos temas como Divi incluyen algunas opciones para agregar íconos de redes sociales al menú, la mayoría de los temas no vienen con esta función. Y WordPress tampoco incluye una función nativa para incluir iconos en el menú.

Entonces, en esta publicación, le mostraremos tres métodos para agregar fácilmente íconos de redes sociales a su menú de WordPress .

Cómo agregar íconos de redes sociales a su menú de WordPress

Hay tres formas principales de agregar íconos de redes sociales a su menú de WordPress:

1. Con complementos
   1. Menú cuádruple
   2. Iconos sociales de WP
2. Desde el personalizador de temas
3. Usando manualmente los íconos de FontAwesome

En esta guía, describiremos cada método paso a paso para que puedas elegir el que más te guste.

1) complementos

El uso de complementos es la forma más fácil de incluir íconos de redes sociales en su menú. Existen varias opciones, por lo que, para facilitarle la vida, hemos enumerado dos de los mejores complementos que puede usar.

1.1) Menú cuádruple

QuadMenu es la mejor herramienta para personalizar fácilmente y llevar tus menús de WordPress al siguiente nivel. Este es un complemento gratuito. Hay una versión gratuita con funciones básicas y tres planes premium que vienen con funciones más avanzadas y soporte prioritario.

Para agregar íconos de redes sociales a su menú, necesita la versión premium. Entonces, veamos cómo instalarlo y activar el complemento en su sitio.

Instalación y Activación

Primero, debe comprar el complemento y descargar los archivos a su escritorio. Luego, antes de instalarlo, debe instalar la versión gratuita en su sitio. Para hacer eso, vaya a su tablero de WP> Complementos> Agregar nuevo . Luego, usa la barra de búsqueda y busca QuadMenu. Después de eso, presione Instalar y luego Activar .

Después de la activación, use los archivos de la versión premium que descargó antes e instálelos en su sitio.

Una vez que haya activado el complemento, deberá verificar su clave de licencia. Desde el panel de tu cuenta QuadMenu, verás la opción de licencias.

Copie la clave desde allí y péguela en el campo de licencias con su dirección de correo electrónico registrada para verificar su clave.

El complemento está disponible en nuestra tienda, Envato y Elegant Marketplace, así que use el menú desplegable para seleccionar la opción adecuada para su compra. Después de verificarlo, está listo para comenzar.

Agregue íconos de redes sociales a su menú de WordPress con QuadMenu

QuadMenu funciona con cualquier tema gratuito o premium. Para esta demostración, usaremos GeneratePress pero el proceso es similar a cualquier otro tema. Primero, vayamos a la configuración del complemento yendo a QuadMenu > Opciones .

Allí verás varias opciones de personalización como:

• Menú Primaria
• Sensible
• Tema predeterminado
• personalizar
• Social
• Importación y exportación

Configurar opciones sociales

En nuestro caso, necesitamos agregar íconos de redes sociales a nuestro menú principal. Entonces, seleccionaremos la opción Social .

Verás varias opciones predeterminadas que puedes editar o eliminar según los canales que tengas. Ya tienen iconos asignados con perfiles de redes sociales.

Sin embargo, también puede personalizarlos haciendo clic en el botón + Agregar icono . Además, puede agregar nuevos canales de redes sociales presionando el botón + .

Digamos que quieres cambiar el ícono de Facebook. Presione + Agregar ícono y verá una ventana emergente con muchos íconos entre los que puede elegir.

Hay muchos iconos, por lo que le recomendamos que utilice la función de búsqueda para filtrar los resultados.

Como puedes ver, hemos buscado iconos de Facebook. Le mostrará todos los iconos disponibles relacionados con su consulta de búsqueda, así que seleccione el que le guste y guárdelo. También puede cambiar los títulos y las URL. Una vez que haya realizado todos los cambios que desea en QuadMenu, guarde la configuración.

Después de eso, ve a los menús de WordPress. Allí verás todos los menús disponibles. Para usar las opciones de QuadMenu en su menú, debe marcarlo como QuadMenu Dev en la configuración del menú . Después de eso, guarde el menú.

En la siguiente carga de la página, verá las opciones de QuadMenu.

Debajo de los elementos de QuadMenu, verá la lista de iconos sociales . Selecciónelos y presione Agregar al menú .

Después de eso, verá la sección Social en las opciones del Menú principal. Pase el mouse por encima y verá las opciones de personalización de QuadMenu.

Si necesita personalización adicional, seleccione esa opción. De lo contrario, presione el botón Guardar menú y estará listo para comenzar.

Iconos en el menú (Frontend)

Ahora, es el momento de comprobar los resultados. Entonces, vaya a la página de inicio de su sitio web y verá los íconos sociales. Y cuando pasas el cursor sobre ellos, los íconos se renderizarán.

¡Eso es! Ha agregado con éxito íconos de redes sociales a sus menús de WordPress con QuadMenu .

1.2) Iconos del menú de WP

Si no puede pagar ningún complemento premium, no se preocupe. Tenemos una solución gratuita para usted. En esta sección, le mostraremos cómo agregar íconos de redes sociales a su WordPress con un complemento gratuito llamado WP Menu Icons.

Instalación y Activación

Primero, instale y active los iconos de menú de WP en su sitio.

Esta herramienta es muy fácil de usar y no requiere ninguna personalización adicional.

Personalización de iconos de menú

Si no tiene un menú en su sitio, puede crear uno desde la sección de configuración.

Asigne una ubicación a su menú y luego estará listo para agregarle elementos. Para agregar sus perfiles de redes sociales al menú, elija el elemento Enlaces personalizados . Deberá ingresar la URL de la página que desea vincular y una etiqueta. Luego, presione Agregar al menú .

Después de agregar el ícono al menú, la página de configuración se verá así.

Del mismo modo, puede agregar otros íconos de redes sociales. En este caso, hemos agregado íconos de Twitter, Pinterest e Instagram a nuestro menú.

En los elementos del menú, hay un botón + . Esa es la configuración que debe usar para agregar íconos a los elementos del menú, así que haga clic en ella.

Luego, verá una gran selección de artículos para elegir.

Hay docenas de íconos, así que use la función de búsqueda para filtrar los resultados que desea. En este caso, hemos seleccionado el elemento del menú de Facebook, por lo que buscaremos el icono de Facebook. Después de seleccionar el que te gusta, verás la configuración del icono en la columna de la derecha. Aquí puede mostrar u ocultar la etiqueta, personalizar la posición, el tamaño y la alineación. En este caso, vamos a ocultar la etiqueta. Una vez que haya terminado con la personalización, haga clic en Guardar .

Puede personalizar los íconos de Pinterest, Twitter e Instagram de la misma manera. Después de agregar los iconos necesarios, guarde el menú.

Ahora es el momento de comprobar el resultado. Vaya a la interfaz de su sitio web y verá los nuevos íconos.

Así es como puede agregar íconos de redes sociales a sus menús de encabezado en WordPress con WP Menu Icons . Finalmente, también puede diseñar sus íconos desde la página de configuración de los íconos del menú WP.

2) Agregue iconos de redes sociales con el personalizador de temas

Si no desea instalar ningún complemento, puede incluir íconos de redes sociales en sus menús usando su personalizador de temas. Algunos temas premium como Divi, Newspaper o Avada vienen con paneles temáticos integrados que le permiten personalizar el tema y agregar íconos de redes sociales.

Si no está seguro de si su tema viene con la opción de agregar íconos de redes sociales, en su tablero de WordPress, vaya a Apariencia> Personalizar> Menús> Ver ubicaciones y verifique si hay una opción de menú social o ícono social.

Para nuestra demostración, vamos a utilizar el tema Divi de Elegant Themes. Primero, ve a tu panel de WP > Apariencia > Personalizar .

Luego, vaya a la personalización del encabezado y los elementos del encabezado. Allí, verá una opción para habilitar los íconos sociales del encabezado.

Habilite esa opción y luego la verá en el encabezado de su sitio web.

Además, puede personalizarlos yendo a Divi > Opciones de tema .

Allí, puede habilitar los íconos que desee e ingresar la URL de sus perfiles de redes sociales. Los íconos de las redes sociales aparecerán en el encabezado y el pie de página de su sitio de forma predeterminada.

Sin embargo, puede optar por ocultarlos a través de la configuración del personalizador.

Otros temas como Newspaper y Newsmag tienen sus propias opciones de personalización, por lo que puede habilitar/deshabilitar íconos y mostrarlos directamente a través del panel de temas dedicado. Si no puede encontrar la sección de íconos de redes sociales en el panel o personalizador de temas, no dude en dejar un comentario a continuación e intentaremos ayudarlo.

3) Usando FontAwesome

Finalmente, puede agregar íconos de redes sociales a sus menús en WordPress manualmente. Incluso si no es un desarrollador o no tiene habilidades de codificación, puede mostrar íconos de redes sociales con un poco de codificación HTML. Para hacer eso, usaremos los íconos de FontAwesome.

Entonces, lo primero que debe hacer es ir al sitio web de FontAwesome.

Utilice la función de búsqueda para encontrar los iconos que necesita. Para esta demostración, vamos a buscar íconos de Twitter .

En la página siguiente, el sitio web le mostrará los resultados de la búsqueda. Elige el que más te guste.

En la página siguiente, verá los detalles del ícono que seleccionó, así que simplemente copie el código HTML del ícono.

Agregar iconos de Font Awesome a WordPress

Luego, vaya a la sección de menús en su sitio de WordPress. En el lado izquierdo, verá la sección de enlaces personalizados. Deberá ingresar la URL de su perfil de Twitter y pegar el código HTML que acaba de copiar en el campo Texto del enlace . Una vez que hagas eso, presiona Agregar al menú .

Después de eso, guarde los cambios. Luego, ve a la interfaz de tu sitio y verás el ícono.

De esta manera, podrá agregar cualquier ícono de redes sociales a su menú .

El código HTML no funciona

Si ha seguido todos los pasos de este tutorial pero el HTML no funciona, intente esto. Si el código fab no funciona, intente cambiar el código HTML quitando la b del fab .

Entonces, por ejemplo, en nuestro caso, el código HTML final se verá así <i class=”fa fa-twitter”></i> en lugar de <i class=”fab fa-twitter”></i> . Ejemplo:

Agregue iconos de redes sociales al encabezado de WordPress

El encabezado es uno de los lugares más populares donde es posible que desee agregar íconos de redes sociales, así que veamos rápidamente cómo hacerlo usando el Personalizador de temas.

Tenga en cuenta que necesitará un tema que le brinde la opción de agregar íconos de redes sociales al menú. Además, tenga en cuenta que los pasos pueden ser ligeramente diferentes según su tema, pero debería poder seguir los pasos sin problemas en la mayoría de los temas.

Echemos un vistazo a dos opciones: crear un nuevo menú y editar uno existente.

Agregar íconos de redes sociales al encabezado en un nuevo menú

1. En su tablero de WordPress, vaya a Apariencia> Menús
2. Presione el enlace crear un nuevo menú al lado del botón Seleccionar y asígnele un nombre
3. Ahora puedes agregarle los íconos. Seleccione el nuevo menú e ingrese las redes sociales y las URL que desea incluir (Instagram, Facebook, YouTube, etc.) y presione Agregar al menú
4. Guardar los cambios
5. Después de eso, coloque el menú que acaba de crear en la sección de encabezado
6. Guarda los cambios y ¡listo! ¡Así es como agregas íconos de redes sociales al encabezado de WordPress!

Agregar íconos de redes sociales al encabezado en un menú existente

1. En su tablero de WordPress, vaya a Apariencia> Personalizar> Menús
2. Vaya a la sección Encabezado y presione el botón Agregar elementos
3. Luego seleccione el ícono de la plataforma de redes sociales que desea agregar, ingrese la URL y presione Agregar al menú . Debe hacer lo mismo para cada red social que desee agregar.
4. Seleccione la ubicación del menú donde desea mostrar los iconos. Las opciones que tienes dependerán de tu tema.
5. Guarde los cambios. ¡Eso es!

Alternativamente, si desea agregar los iconos al pie de página, por ejemplo, siga el mismo proceso pero seleccione el pie de página como la ubicación de los iconos.

Bonificación: abre íconos de redes sociales en una nueva pestaña

Agregar íconos de redes sociales a su menú de WordPress lo ayudará a aumentar su presencia en las redes sociales. Sin embargo, el problema es que cuando un usuario hace clic en el icono de su menú, la página de la red social se cargará en la misma ventana y el usuario abandonará su sitio. La solución es hacer que el ícono de redes sociales cargue la página en una nueva pestaña. Veamos cómo hacerlo.

En su tablero de WordPress, vaya a Apariencia > Menús , abra las Opciones de pantalla en la parte superior derecha y habilite la opción Enlace de destino . Luego, vaya a cada elemento del menú y marque la casilla Abrir enlace en una nueva pestaña . Alternativamente, puede establecer cada objetivo en _blank.

Finalmente, guarda los cambios y ¡listo!

Cómo agregar feeds sociales a su sitio

Además de agregar íconos de redes sociales a su menú, también puede agregar fuentes sociales a su sitio para aumentar el compromiso con sus usuarios. En la sección, le mostraremos cómo conectar Instagram y TikTok a su sitio web.

Agregar un feed de Instagram a WordPress

La forma más fácil de conectar Instagram con su sitio es usar el complemento Social Feed Gallery. Es una herramienta freemium que te permite mostrar tu feed de Instagram con unos pocos clics.

Primero, instale y active el complemento desde este enlace. Luego, vaya a la Galería de fuentes sociales e inicie sesión en su cuenta de Instagram.

Después de eso, ve a Galería de fuentes sociales > Cuentas y tendrás la opción de iniciar sesión en tu cuenta personal o comercial (ten en cuenta que la cuenta comercial tiene más opciones). Luego, agregue una cuenta, inicie sesión y otorgue a la aplicación los permisos necesarios para conectar su cuenta a WordPress.

Una vez hecho esto, vaya a la pestaña Fuentes , presione +Feed y agregue la fuente que desea mostrar. Finalmente, personalice su feed y, una vez que termine, verá que el complemento le proporciona un código corto que puede pegar en cualquier página o publicación para mostrar su feed.

Para obtener más información, consulte nuestra guía sobre cómo integrar Instagram con WordPress.

Agregue un feed de TikTok a WordPress

Del mismo modo, también puede conectar su sitio con TikTok. Para mostrar los feeds de TikTok, usaremos un complemento dedicado llamado WP TikTok Feed. Este es el complemento TikTok más popular para WordPress y tiene una versión gratuita y algunos planes premium.

Después de instalar y activar el complemento, en su panel de WordPress , debe vincular su cuenta de TikTok y luego ir a Tiktok Feed > Feeds . Allí, presione +Feed y agregue el feed que desea mostrar. Además, verá varias opciones para personalizar la forma en que muestra el feed en su sitio.

Para obtener más información al respecto, consulte nuestro tutorial sobre cómo incrustar videos de TikTok en WordPress.

Conclusión

Con todo, agregar íconos de redes sociales a sus menús de WordPress es una excelente manera de aumentar su presencia en las redes sociales. En esta guía, hemos visto 3 formas diferentes de hacerlo:

1. Con complementos
2. Desde el personalizador de temas
3. A mano

Si su tema le permite agregar íconos de forma predeterminada, no necesita usar complementos adicionales ni código HTML. Si prefiere un complemento, le recomendamos que use QuadMenu. Le permitirá obtener el control total de toda la personalización de su menú de WordPress y también viene con muchas características poderosas.

Sin embargo, si prefiere una solución gratuita, eche un vistazo a los iconos de menú de WP. Es una herramienta simple que te ayudará a incluir íconos sociales en muy poco tiempo.

Por otro lado, si no desea instalar ningún complemento, puede agregar íconos de redes sociales usando un poco de HTML y los íconos de FontAwesome. Esta opción también le permite personalizar los íconos con un poco de CSS o puede evitar la parte de diseño y usar los íconos predeterminados.

¿Te ha resultado útil este artículo? Si lo hiciste, déjanos un comentario a continuación y comparte esta publicación en las redes sociales. Para obtener más tutoriales relacionados, consulte las siguientes guías:

• Los mejores complementos para agregar feeds de redes sociales a WordPress
• Cómo agregar feeds de grupos de Facebook a WordPress