Agregar íconos de redes sociales a tu menú de WordPress es una forma inteligente de promocionar tus perfiles sin saturar tu sitio. Estos pequeños logotipos reconocibles pueden animar a los visitantes a seguirte en varias plataformas, lo que potencialmente aumenta tu presencia y participación en línea.
Hemos descubierto que en WordPress, la forma de agregar íconos de redes sociales a tu menú depende de si estás utilizando un tema clásico o de bloques. Pero hemos encontrado formas efectivas de hacer esto para ambos tipos de temas.
En este artículo, te mostraremos cómo agregar íconos de redes sociales a los menús de WordPress, utilizando métodos que funcionan tanto para temas clásicos como de bloques.
¿Por qué agregar íconos de redes sociales a los menús en WordPress?
Al agregar íconos de redes sociales a tus menús de WordPress, a menudo puedes obtener más clics, participación y seguidores en todos tus perfiles de redes sociales.
Los íconos de redes sociales también pueden captar la atención del visitante sin agregar texto adicional a tus menús. Esto te permite promocionar muchos perfiles diferentes en un espacio pequeño.
El proceso para agregar íconos de redes sociales es diferente de insertar íconos de imagen en tu menú de WordPress. Esto se debe a que estas imágenes deben estar vinculadas a tus perfiles sociales, y a menudo requieren un estilo especial para mantener su apariencia en diferentes dispositivos y tamaños de pantalla.
Además, querrás asegurarte de que estos íconos sean reconocibles y tengan un tamaño consistente, lo que puede ser un desafío al usar archivos de imagen normales.
Dicho esto, veamos 2 formas sencillas para principiantes de agregar íconos de redes sociales a los menús de WordPress.
Tutorial en video
Si prefieres instrucciones escritas, sigue leyendo. Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas usar:
- Método 1: Usando el plugin Menu Image (Solo temas clásicos)
- Method 2: Using the Full Site Editor (Block Themes Only)
Método 1: Usando el plugin Menu Image (Solo temas clásicos)
La forma más fácil de agregar íconos de redes sociales a los menús de WordPress es usando Menu Image.
Al crear tus íconos sociales, puedes usar cualquier imagen que hayas subido a la biblioteca de medios de WordPress.
Por ejemplo, muchas de las principales empresas de redes sociales proporcionan logotipos que puedes usar en tu sitio web, como el kit de marca de Twitter. También puedes descargar íconos de bibliotecas en línea como el sitio web de Font Awesome.
Menu Image también se integra con el plugin Font Awesome. Esto te permite buscar e importar todos los íconos de Font Awesome directamente desde el panel de WordPress, incluyendo íconos para todas las principales redes sociales.
Recomendamos instalar primero el plugin Font Awesome antes de continuar con el tutorial. Para obtener instrucciones detalladas sobre cómo configurar Font Awesome, consulta nuestra guía sobre cómo agregar fácilmente fuentes de íconos a tu tema de WordPress.
Sin importar cómo planees proporcionar los íconos de redes sociales, necesitarás instalar y activar el plugin Menu Image. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Al activarlo, es posible que desees revisar los tamaños de los íconos y cambiarlos si es necesario. Para hacer esto, necesitas ir a Menu Image » Menu Image.
Al crear tus íconos sociales, puedes usar cualquiera de los tamaños de imagen predeterminados de WordPress, como miniatura, imagen o grande. Menu Image también te permite elegir entre tres tamaños únicos que están configurados por defecto en 24×24, 36×36 y 48×48 píxeles.
Estos tamaños deberían funcionar bien para la mayoría de los sitios web de WordPress, pero puedes cambiarlos escribiendo diferentes números en los campos 1°, 2° o 3° de Menu Image.
Hecho esto, haz clic en 'Guardar Cambios' para almacenar tu configuración.
Para agregar iconos a un menú de navegación, dirígete a Apariencia » Menús. Por defecto, WordPress mostrará el menú principal de tu sitio.
Si deseas agregar iconos de redes sociales a una ubicación de menú diferente, como un menú flotante fijo, simplemente abre el menú desplegable 'Selecciona un menú para editar'.
Luego, puedes elegir un menú de la lista y hacer clic en 'Seleccionar'.
Para obtener instrucciones paso a paso sobre cómo crear un nuevo menú, consulta nuestra guía sobre cómo agregar un menú de navegación en WordPress.
Para empezar, necesitarás agregar cada perfil social a tu menú como un nuevo enlace.
Cuando estés listo, haz clic para expandir la sección 'Enlaces personalizados' y luego escribe la dirección de la página de red social que deseas usar. Por ejemplo, podrías ingresar la URL de tu grupo de Facebook o canal de YouTube.
También necesitarás escribir un 'Texto del enlace'. En un paso posterior, tendrás la opción de cambiar dónde aparece este título en el menú o incluso ocultarlo por completo.
Con eso hecho, haz clic en 'Añadir al menú'.
Este elemento ahora aparecerá en la columna de la derecha.
Para agregar un icono de red social, simplemente pasa el cursor sobre el nuevo elemento del menú.
Luego, haz clic en el botón 'Imagen del menú' cuando aparezca.
Nota: Si no ves un botón 'Imagen del menú', haz clic en 'Guardar cambios'. Ahora, el botón 'Imagen del menú' debería aparecer cuando pases el cursor sobre cualquier elemento del menú.
Ahora puedes decidir si usar una imagen de tu biblioteca de medios de WordPress o un icono proporcionado por Font Awesome.
Para usar un ícono de Font Awesome listo para usar, haz clic en el botón de opción junto a ‘Icono’.
Luego, selecciona ‘Fontawesome’.
Después, puedes hacer clic en ‘Marcas’.
Ahora verás todos los íconos de marcas, incluyendo íconos para todas las redes sociales principales, desde Facebook hasta LinkedIn. Cuando veas la imagen que quieres usar, solo haz clic en ella.
Otra opción es usar tu propio ícono de la biblioteca de medios de WordPress seleccionando el botón de opción ‘Imagen’. Luego, haz clic en el enlace ‘Establecer imagen’.
Ahora puedes elegir una imagen de la biblioteca de medios de WordPress o subir un nuevo archivo desde tu computadora.
No importa de dónde obtengas el ícono, Menu Image mostrará una vista previa a la derecha.
Ahora puedes cambiar si el título del enlace aparece arriba, abajo, antes o después del ícono de redes sociales usando la configuración de ‘Posición del título’.
Muchos íconos de redes sociales son instantáneamente reconocibles, por lo que el título del enlace puede ser innecesario. Si estás agregando muchos íconos sociales a un menú de navegación, los títulos pueden incluso hacer que tu menú se vea más desordenado y complicado.
Dicho esto, es posible que desees ocultar el título seleccionando el botón de opción ‘Ocultar’.
A medida que realices cambios, la vista previa en vivo se actualizará automáticamente, para que puedas probar diferentes configuraciones y ver qué se ve mejor.
Finalmente, si estás usando tu propia imagen, puedes cambiar el tamaño de los íconos de redes sociales usando el menú desplegable ‘Tamaño de imagen’.
Los íconos más grandes captarán la atención del visitante, pero también pueden ser una distracción. Teniendo esto en cuenta, es posible que desees probar diferentes tamaños para ver qué funciona mejor en tu blog de WordPress.
Cuando estés satisfecho con la configuración del ícono de redes sociales, simplemente haz clic en ‘Guardar cambios’.
Simplemente repite estos pasos para agregar más íconos a tu menú de WordPress.
Incluso puedes agregar íconos a otros elementos importantes en el menú de navegación, y resaltar estos elementos del menú para atraer la atención de tus usuarios.
Cuando estés satisfecho con la configuración del menú, simplemente haz clic en ‘Guardar menú’.
Ahora, puedes visitar tu sitio web para ver los nuevos íconos de redes sociales en acción.
Así es como se veía en nuestro sitio web de demostración.
Método 2: Usando el Editor de Sitio Completo (Solo temas de bloques)
WordPress tiene un bloque integrado de Íconos Sociales que te permite crear un menú que contiene íconos de redes sociales y luego mostrarlos en un diseño agradable.
Este bloque viene con íconos integrados para todas las redes sociales principales, por lo que no necesitas instalar un plugin como Font Awesome o subir íconos a tu biblioteca de medios.
Sin embargo, solo puedes agregar íconos y enlaces de redes sociales al bloque de Íconos Sociales, por lo que no es tan flexible como el plugin Menu Image.
Si estás utilizando un tema de bloques, entonces puedes agregar un bloque de Íconos Sociales a cualquier parte de tu sitio web, como el encabezado o el pie de página. De esta manera, puedes mostrar un menú de redes sociales en todo tu sitio web.
Para empezar, dirígete a Apariencia » Editor en el panel de WordPress.
Desde aquí, verás algunos menús para personalizar el diseño de tu tema de bloques.
Para agregar íconos de redes sociales a tu menú, haz clic en ‘Navegación’.
El siguiente paso es hacer clic en el ícono del lápiz ‘Editar’.
Esto abrirá el Editor de Sitio Completo de WordPress.
Con eso hecho, ahora podrás editar y estilizar tu menú de navegación, que es parte de tu plantilla de encabezado de WordPress.
Para empezar, haz clic en el ícono azul ‘+’ en la esquina superior izquierda. En la barra de búsqueda, debes escribir ‘Íconos Sociales’.
Cuando aparezca el bloque correcto, arrástralo y suéltalo en la plantilla del tema.
Para agregar el primer ícono, simplemente haz clic en el ícono ‘+’ dentro del bloque.
En la ventana emergente que aparece, escribe el ícono que deseas agregar, como ‘Twitter’ o ‘Facebook’.
Cuando aparezca el ícono correcto, simplemente haz clic para agregarlo a tu blog de WordPress.
Ahora, haz clic en el nuevo ícono de redes sociales.
Esto abre una pequeña barra donde puedes escribir la URL a la que quieres enlazar, como tu página de Facebook.
Para agregar más íconos sociales a WordPress, simplemente haz clic en el ícono ‘+’ y repite el mismo proceso descrito anteriormente.
Después de agregar todas las plataformas de redes sociales, es posible que desees personalizar el bloque. Para hacer esto, haz clic para seleccionar el bloque de Íconos Sociales y luego haz clic en la pestaña ‘Bloque’.
Puedes cambiar la justificación, alineación y orientación del ícono usando la configuración de ‘Diseño’.
Por defecto, todos los enlaces de redes sociales se abrirán en la misma pestaña. Para mantener a los visitantes en tu sitio web, es posible que desees hacer clic para habilitar el interruptor ‘Abrir enlaces en una nueva pestaña’.
Por defecto, WordPress muestra solo los íconos sociales, sin ningún texto.
Si deseas mostrar texto junto a cada ícono, haz clic para habilitar el interruptor ‘Mostrar etiquetas’.
A continuación, haz clic en la pestaña ‘Estilos’.
Aquí, puedes cambiar el estilo del botón haciendo clic en ‘Por defecto’, ‘Solo logos’ o ‘Forma de píldora’.
Finalmente, puedes cambiar el espacio entre los íconos sociales usando la configuración en ‘Espaciado de bloque’.
Cuando estés satisfecho con la apariencia del menú, haz clic en el botón ‘Guardar’.
Ahora, si visitas tu sitio web, verás los íconos de redes sociales en vivo.
Consejo extra: Incrusta fuentes sociales en tu sitio de WordPress
Agregar íconos de redes sociales a los menús de WordPress es una excelente manera de obtener más seguidores y participación en tus diferentes cuentas. Sin embargo, hay muchas más formas de promocionar tu Twitter, Facebook y otros perfiles sociales.
La mejor manera de obtener más seguidores y participación es incrustando una fuente social en vivo en tu sitio web. Esto te permite mostrar las últimas publicaciones de tus sitios de redes sociales, junto con botones que los visitantes pueden usar para interactuar con tus publicaciones o seguirte en redes sociales.
La mejor manera de agregar fuentes de redes sociales a tu sitio web es usando Smash Balloon. Es el mejor plugin de fuentes de redes sociales para WordPress y te permite incrustar fuentes en vivo de Twitter, Instagram, Facebook y más.
Para más información, por favor consulta nuestro tutorial de WordPress sobre cómo agregar fuentes de redes sociales a WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo agregar iconos de redes sociales a los menús de WordPress. También te puede interesar nuestro artículo sobre cómo crear un menú desplegable en WordPress y nuestra guía definitiva sobre agregar una barra de búsqueda a tu menú de navegación.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
De hecho, los usuarios lo encuentran más fácil cuando ven iconos sociales para compartir fácilmente la publicación que consideran beneficiosa para sus amigos. Además, también se puede usar el plugin Sassy Social Share, también tiene muchas funciones, gracias.
Jiří Vaněk
El plugin Menu Image es fantástico. De hecho, escribí un artículo sobre él cuando estaba lidiando con el mismo problema. Crear una carpeta principal de 'Contacto' en el menú y agregar un submenú con enlaces a redes sociales junto con iconos, funciona como magia. Anteriormente, usaba Font Awesome, y era bastante poco práctico. Esta es una solución mucho más elegante.
Mrteesurez
Bien hecho, Jirí. Gracias por tu recomendación y por compartir lo que te funciona. Aún no he practicado la creación de una carpeta principal de 'Contacto' en el menú con submenús enlazados a redes sociales. Intentaré implementarlos. Gracias.
Jiří Vaněk
Hola Mrteesurez,
Sí, este plugin es realmente útil. Básicamente me ayudó a mejorar el diseño gráfico del menú. Definitivamente deberías probarlo. Solo ten cuidado, porque la forma en que configuré el menú y describí en mi artículo anterior resultó no ser la mejor solución según Google. Tenía un elemento principal de “Contacto” con un submenú, pero en mi caso, el elemento de “Contacto” en sí no era clicable. Solo contenía un # en lugar de un enlace. Recomiendo, si quieres usar el mismo enfoque que yo, hacer que todos los elementos sean clicables y que lleven a una página. De esta manera, puedes evitar el mismo error que cometí y la crítica de Page Speed Insight de que el elemento “Contacto” no es un enlace que lleve a alguna parte.
Mrteesurez
¡Gracias por la preocupación! Aprecio que compartas tu experiencia con el plugin y la recomendación de Google. Definitivamente tomaré tu consejo de hacer que todos los elementos del menú sean clicables para evitar cualquier problema. Tu perspectiva es realmente útil y la tendré en cuenta al configurar mis menús.
Ralph
Como me encantan tus tutoriales en artículos, esta vez solo vi el video y ¡fue genial! Corto, sin relleno y directo al grano. Deberían incluir más tutoriales en video. Son geniales en eso y ahora tengo nuevos iconos en mi menú (no solo para mis redes sociales). ¡Muchas gracias!
Jonas
¡Gracias por este artículo, me ayudó mucho!
Soporte de WPBeginner
¡Nos alegra que nuestro artículo haya sido útil!
Administrador
Farhad
¿Hay alguna forma de que las publicaciones del blog se envíen automáticamente a los sitios de redes sociales?
Gracias.
Soporte de WPBeginner
Hay varias opciones diferentes para eso, deberías empezar por echar un vistazo a nuestro artículo a continuación:
https://www.wpbeginner.com/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
Administrador
Jimmy Ekisa
¡¡¡Artículo brillante!!! Me ahorraste tiempo para crear menús sociales y agregarlos en el encabezado del tema NewsPack, muchas gracias.
Shyam
¿Cómo mostrar los íconos de los perfiles sociales en el pie de página?
Soporte de WPBeginner
Si tu sitio tiene un área de widget para tu pie de página, podrías usar uno de los complementos de nuestra lista a continuación:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Administrador
Kerry
Ya tengo los íconos de redes sociales en mi sitio web. ¿Cómo vinculo esos íconos a mis perfiles de redes sociales?
Soporte de WPBeginner
Los elementos del menú serían URL personalizadas
Administrador
Vicki
Gracias por esto, he logrado agregar el logo de Goodreads a mi Menú Social y también elegí la ubicación del Menú Social. Sin embargo, cuando veo la página, aparece la lupa junto al nuevo logo de Goodreads, en lugar de solo el logo por sí solo. ¿Por qué es esto y cómo puedo deshacerme de él?
Soporte de WPBeginner
Deberías consultar con el soporte de tu tema para ver si esto se debe al diseño del tema en sí.
Administrador
Danielle
Agregué el menú de redes sociales pero no se muestra en mi sitio. ¿Qué puedo hacer?
Soporte de WPBeginner
Primero te recomendaríamos que te pongas en contacto con el soporte del plugin para que lo revisen y se aseguren de que no sea un problema con el plugin.
Administrador
Lisa Jackson
Me encanta esto, pero los íconos se muestran en una columna en lugar de uno al lado del otro. ¿Cómo puedo solucionar esto?
Soporte de WPBeginner
Dependería de tu tema específico, primero querrías consultar con el soporte de tu tema para asegurarte de que no sea un problema con la forma en que está estilizado su menú que podría estar causando eso.
Administrador
andi moss
¿Qué? ¿Sin íconos? ¿Los buscamos nosotros?
Soporte de WPBeginner
No tenemos un conjunto específico que recomendaríamos en este momento, pero hay muchas opciones diferentes disponibles según el estilo que busques.
Administrador
Bob Wright
La configuración de un enlace social en mi sitio no coincide con las imágenes de este artículo (quizás los bloques de personalización de la organización matriz lo hicieron).
Soporte de WPBeginner
Deberías asegurarte de ser un usuario administrador y que el sitio esté en WordPress.org para las razones más probables. Puedes ver nuestra comparación en nuestra guía a continuación:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrador
Ankit
Hola,
Una vez más, un tutorial genial y útil. Sin embargo, me encuentro con un problema. Para el último paso, cuando intento seleccionar la opción de ubicación del menú, solo veo la opción del menú principal allí. ¿Cómo obtengo también la opción del menú social?
Soporte de WPBeginner
Es posible que tu tema específico no tenga una ubicación de menú social específica. Si te pones en contacto con el soporte de tu tema, ellos podrán aclarar y ayudarte.
Administrador
Jonathan
Estoy tratando de entender cómo agregar cuentas de redes sociales a mi blog de WordPress. Cualquier ayuda es apreciada. Si me he saltado algún paso anterior en la configuración del sitio, ¡mis disculpas de antemano por un comentario tonto!
Soporte de WPBeginner
No te preocupes, depende de lo que estés buscando. Como punto de partida, te recomendamos echar un vistazo a nuestros plugins recomendados a continuación:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Administrador
Diseñador Mayor
increíble tutorial, sigue así
Soporte de WPBeginner
Glad you found our guide helpful
Administrador
Stephanie Strand
¡Gracias! Instrucciones muy claras. Ayudó enormemente a este novato.
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Rupali Tripathi
Muchas gracias por este video.
Soporte de WPBeginner
You’re welcome
Administrador
Debbie Serjeant
Los iconos aparecen sin color... ¿me pregunto qué hice mal?
Soporte de WPBeginner
Es posible que desees consultar con el soporte de tu tema específico para asegurarte de que no haya CSS específico del tema que esté cambiando tus colores.
Administrador
Isaac
Hola, ¿hay alguna forma de espaciar más los iconos entre sí? Los míos parecen estar demasiado cerca... Gracias
Soporte de WPBeginner
Eso normalmente requeriría cambiar el CSS, como punto de partida, quizás quieras echar un vistazo a nuestro artículo aquí:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Sam Simson
Intenté ocultar el título para que no se mostrara en el menú. Parece que esa función no funcionó. El título todavía es visible.
Soporte de WPBeginner
Deberías consultar con el soporte de tu tema específico para ver si eso estaría anulando tus personalizaciones.
Administrador
Tracy
¡Hola! Intenté usar este método pero no me apareció la parte de "seleccionar imagen". Solo me deja introducir la URL y la Etiqueta de Navegación... ¿alguna idea?
Soporte de WPBeginner
Es posible que desees asegurarte de que el plugin se instaló y activó completamente para que aparezca la imagen seleccionada
Administrador
Lea
¡Gracias! Parece ser una solución que funciona mejor que con Font Awesome. ¿Pero está permitido usar una imagen, por ejemplo, un ícono de Facebook de Google Imágenes, para la imagen que subo?
Soporte de WPBeginner
Deberías asegurarte de verificar los derechos de uso de la imagen si tomas una imagen de Google, pero si tienes permiso para usarla, podrías subirla a tu sitio.
Administrador
Larry Hilton
Seguí las instrucciones para agregar imágenes sociales a mi área de pie de página y las imágenes de Google & Yelp no son visibles. Las hice de la misma manera que las que se muestran. Esto no parece estar relacionado con el navegador. ¿Alguna sugerencia?
Soporte de WPBeginner
Comienza por contactar al soporte del plugin para asegurarte de que no haya problemas conocidos con esos íconos o con la forma en que se está agregando el menú.
Administrador
Michele A
¡Gracias por este maravilloso tutorial! Me ha ayudado enormemente. ¡Gracias!
Soporte de WPBeginner
Glad our guide could help
Administrador
Muneeb
Los íconos están actualmente en el sitio pero no funcionan, incluso si se agrega el enlace. ¿Cuál es la razón?
Soporte de WPBeginner
Si las URL están estructuradas correctamente, entonces deberías informar al soporte del plugin sobre tu error para que revisen si el error es del propio plugin.
Administrador
Mr. Debtsmith
Hola chicos,
Instalé el plugin. Agregué 3 cuentas sociales y marqué la casilla de ubicación "Main Nav". El widget reemplazó el menú principal existente en lugar de agregarse a él, y en lugar de mostrarse los íconos, se muestran los títulos de las cuentas sociales. Espero los beneficios de este plugin. Espero que puedan ayudar.
¡Gracias!
Soporte de WPBeginner
Deberías contactar al soporte del plugin: https://wordpress.org/support/plugin/menu-image y ellos deberían poder ver si esto es un error del propio plugin.
Administrador
ARPIT
Muchas gracias por la información esencial que buscaba en internet.
Muy apreciado.
Soporte de WPBeginner
Nos alegra que nuestro artículo te haya sido útil.
Administrador
Dan
Mi tema actual tiene íconos de redes sociales en el encabezado principal superior en la versión de escritorio, pero al cambiar a la versión móvil, los íconos sociales desaparecen. ¿Cómo puedo hacer que permanezcan y, posiblemente, mis enlaces del encabezado también?
Soporte de WPBeginner
Hola Dan,
Parece que tu tema los oculta en la versión móvil. Por favor, contacta al autor de tu tema y él podrá ayudarte con esto.
Administrador
David Cornish
Gracias por el consejo, ahora uso Simple Social Icons y me gustan mucho. ¿Algún consejo sobre qué plugin usar para mostrar un botón de “compartir en Twitter” o “compartir en Facebook” arriba y/o debajo de una publicación, similar a lo que tienes debajo del título de este artículo?
Soporte de WPBeginner
Hola David,
Por favor, consulta nuestra lista de los mejores plugins de redes sociales para WordPress.
Administrador
Rob Lilley
¿Hay alguna forma de agregar un atributo target, para que la página social se abra en una nueva pestaña/ventana?
Personal editorial
Sí, puedes abrir fácilmente los enlaces en una nueva ventana. Si no ves la opción en tus Enlaces personalizados por defecto, entonces tendrás que hacer clic en la pestaña "Opciones de pantalla" en la parte superior derecha de la pantalla y asegurarte de que la opción "Destino del enlace" esté marcada.
Administrador
Umarbhatti
Hola,
Este plugin se ve increíble. ¡Gracias!
Aman Singh
Hola,
¿Puedo obtener el código personalizado para que el widget se vea similar a lo que está en WPbeginner?
Me gusta el aspecto del widget para los íconos de redes sociales en WPBeginner, ¿puedo obtener el código?
Gracias.
Soporte de WPBeginner
Hola Aman,
Puedes usar la herramienta Inspeccionar de tu navegador para copiar el código HTML y CSS.
Administrador