Seguro que has visto muchos sitios con los iconos de redes sociales en la cabecera o junto al menú y te gustaría conseguir esto al crear tu página web.
Aunque en ocasiones pueden ser un punto de fuga, es cierto que resultan atractivos visualmente y dependiendo del sector, puede interesar que un usuario acuda a ver tus perfiles sociales nada mas acceder a tu Web.
Existen varias formas de insertar iconos de redes sociales en el menú y la cabecera en Wordpress, voy explicarte como hacerlo de las manera más fácil sin necesidad de editar el código.
Vas a ver como conseguir un buen diseño e insertar esos iconos fácilmente y adaptarlos al sitio que quieras mediante el uso de plugins y también de forma manual sin necesidad de ellos.
Si quieres ver como insertar los iconos de facebook, twitter, google+, linkedin, instagram, youtube etc… en la cabecera o dentro del menú de tu WordPress, te lo enseño paso a paso en este Tutorial con Videos de cada caso.
Vamos a ello.
Vas a ver como insertar iconos sociales en la cabecera de tu web a través de dos maneras.
- Usando un plugin como Lightweight social icons
- A través de un shortcode generado con un maquetador.
〉〉 1. Cómo insertar iconos con el Plugin Lightweight Social Icons
Se trata de un plugin para WordPress que permite usar un widget para habilitar esos iconos sociales en cualquier parte de la web, pero también en la cabecera que es donde nos interesa ahora mismo.
Es un plugin muy bueno del mismo creador de la plantilla GeneratePress (plantilla que uso y recomiendo siempre)
Si quieres vivir de internet ¡Suscríbete!
¿No quieres?, no lo hagas
Te interesa leer
- Tutorial Generatepress
- Los 23 mejores temas para WordPress premium y gratis
- Las mejores plantillas para Woocommerce
Para usar esta forma de insertar iconos de redes sociales debes instalar el plugin, para ello, accede en el escritorio de WordPress a Plugins>añadir nuevo.
Busca «Lightweight Social Icons«, instálalo y actívalo.
Ahora sólo tienes que acceder a Apariencia>Widgets y una vez dentro arrastrar el widgets de lightweight Social icons al lado derecho «widgets de cabecera»
Puedes ver un ejemplo en esta imagen:
Una vez dentro podrás usar las siguientes opciones:
- Asignar color a los iconos.
- Ajustar su tamaño.
- Dotar de color de fondo.
- Dar más o menos redondez o forma a los distintos logos.
- Usar colores para añadir efecto hover(cambia de color al situar el ratón encima)
- Elige la red Social que quieras entre su enorme lista de redes sociales.
- Elige posición.
- Haz que se abra en otra pestaña nueva del navegador.
- Elige si quieres usar la opción de tooltips (muestra el nombre de la red social al situar el ratón encima del icono)
- Añade tantas redes sociales como quieras…
Una vez hayas configurado todo.haz clic en guardar y ¡listo!
Puedes personalizar este widgets de redes sociales también directamente(si tu plantilla lo ofrece) desde las opciones de personalización de la plantilla, de esta manera podrás ver los cambios en directo
Otros plugins similares que tiene prácticamente las mismas funciones que este son:
- Simple Social icons: Con opciones muy casi idénticas a Lightweight Social icons.
- Easy Social icons: Con él, vas a poder usar aparte de los logos de redes sociales, múltiples iconos ya que usa fontawesome(más abajo verás como funciona)
Además permite no sólo insertarlos a través de widgets, también mediante el uso de un shortcode o mediante código php(si tienes conocimientos)
Otra manera de insertar iconos de redes sociales en la parte de arriba de tu WordPress es usando un shortcode dentro del widget de cabecera.
Para ello necesitas un maquetador que tenga la opción de crear plantillas.
En mi caso yo uso Elementor Page Builder pro que te da está y mil opciones de diseño más.
Para poder usar esta opción necesitas Elementor Pro (plan de pago)
Te gustará leer:
Contar con un constructor web como Elementor para tu blog, te da la opción de guardar cada diseño personalizado que quieras y adaptarla a cualquier sitio de tu web usando un Shortcode.
Para este caso que estamos viendo, queremos insertar un paquete de iconos en la cabecera que ya hemos creado con ese maquetador y ya tenemos guardados.
Puedes ver una muestra en la imagen de una plantilla guardada con Elementor Page builder:
Para hacerlo sólo tenemos que copiar el shortcode generado por esa plantilla en un widget html dentro del widget de cabecera.
¿No te has enterado de nada verdad? 🙂 Espera que en la imagen lo verás mejor, si no en el video de arriba te lo explico mejor y te vas a enterar perfectamente.
Es muy sencillo como ves, una vez has copiado ese shortcode con los logos de facebook, twitter… , guarda los cambios y ya tendrás los iconos en la cabecera sin necesidad de usar un plugin como en el apartado anterior.
Si quieres insertar los iconos en la barra superior(top bar) en vez de la cabecera sólo tienes que seguir el mismo proceso pero eligiendo el widgets «barra superior»
¿Quieres insertar iconos en redes sociales dentro del menú de WordPress?, es muy fácil
Si lo que quieres es que los iconos de redes sociales se muestren dentro del menú de navegación de tu sitio web, en WordPress puedes hacerlo de tres maneras sencillas:
- A través de un plugin como Shorcode in menú
- Usando IconAwesome
- Insertando imágenes descargadas previamente
Para añadir los imágenes de redes sociales dentro del menú de navegación podemos hacerlo optando por el shortcode generado a través de una plantilla creada por un maquetador como Elementor Page builder(exlicado en el apartado anterior).
Para hacer uso de ese shortcode y que los iconos se inserten dentro del menú tienes que descargar un plugin como Shortcode in menus.
Una vez descargado y activo sólo tienes que ir a Apariencia>Menús y copiar ese shortcode generado en el campo nuevo adaptado para ello «Shortcode»
Puedes ver en la imagen como es para entenderlo mejor:
Asegúrate que en las opciones de pantalla de la parte de arriba, está marcada la opción Shortcode, en caso contrario ese campo nuevo no aparecerá
Una vez has insertado el shortcode, haz clic en añadir al menú y listo, ya tendrás los iconos de esa plantilla creada previamente en el menú de navegación.
¿Problema? Poca cosa.
El incoveniente es que los iconos se insertarán muy pegados a los distintos elementos de la barra de menú y lo normal es que estén más a la derecha.
Si esa es tu idea, es muy fácil si añades una linea de Css.
Te voy a mostrar un ejemplo muy sencillo.
Es muy fácil insertar esa linea de CSS ya que sólo queremos desplazarlo hacia la derecha.
Para ello lo primero que tenemos que hacer es localizar la id o class que tienen esos iconos
Esto se hace de manera muy sencilla(ya visto en otros artículos), haz clic en el botón derecho de ratón y selecciona inspeccionar.
Una vez aparezca la barra con la codificación haz clic en el puntero de la esquina superior izquierda.
Acto seguido sitúa el puntero encima de los símbolos sociales y copia la linea que muestra(será el que necesitarás para añadir la linea CSS)
En el video de arriba te indico como se hace, de todas formas de dejo la imagen para que lo entiendas:
Una vez copiada la linea de código accede al escritorio de tu WordPress y en personalizar CSS tendrás que insertar un código parecido al siguiente:
.elementor-widget-wrap { padding-left:300px }Elige los pixeles que necesites para indicar más o menos distancia de separación.
Si tu plantilla no dispone de personalizador de CSS puedes descargar un plugin como Simple CSS
Hasta aquí una forma sencilla de añdir simbolos sociales en el menú.
Vamos a ver más formas.
〉〉 2. Usar FontAwesome para insertar iconos
La plantilla Generatepress trae por defecto FontAwesome integrado, en caso contrario necesitas instalar en tu WordPress el plugin Better Font Awesome
Fontawesome no solo te permite insertar iconos sociales, también puedes insertar cualquier tipo de imagen delante de cada apartado del menú o en las partes de la web que necesites.
Este plugin te permite insertar iconos de redes sociales gratis y de manera sencilla en el menú
Para ello, accede a la pagína de FontAwesome.
Una vez dentro selecciona, escoge la opción «Icons» y selecciona el que necesites.
Puedes buscar el que quieras a través del buscador (search icons)
Para el caso que estamos tratando busca: facebook, twitter, linkedin, Google +…
Una vez seleccionado, es tan fácil como copiar el código que muestra.
¿Que hacemos con ese código? Muy sencillo
Accede dentro del escritorio de WordPress a Apariencia>Menús
Copia el código en el campo Enlaces Personalizados>Texto de enlace y en el campo Url introduce tu perfil de la red social que has insertado mediante el icono.
Haz clic en añadir al menú y ya está todo hecho.
Haz lo mismo con cada red social que quieres añadir.
Para ajustarlo a la derecha se hace usando una pequeña linea de código CSS de la misma manera que hemos hecho en el apartado anterior.Si quieres puedes usar el mismo procedimiento (si tu plantilla lo permite) y adaptar cada icono social dentro de un menú secundario.
Otra opción que tienes si no quieres instalar ningún plugin, es usar imágenes propias.
Para ello es importante que las imágenes tengan el tamaño, color y peso adecuado antes de subirla para que se adapten perfectamente al tamaño de las letras del menú.
Te puede resultar útil leer:
Aunque puede dar algo más de trabajo es una forma personalizada y simple de crear tus propios iconos y evitar un plugin de instalación.
Una vez tengas todas las imágenes de las redes sociales elegidas, es necesario que crees una entrada de WordPress que luego podrás borrar una vez veas la linea de código de html para redes sociales que se ha generado.
Para ello una vez creada la entrada(de la misma manera que hacemos para crear un post) inserta la imagen y selecciona la versión Html (este será la linea de código que necesitas, copiala)
El siguiente paso será copiar esa línea de código accediendo Apariencia>menú y luego en enlaces personalizados>texto del enlace que será donde copiaremos el código de la misma manera que hicimos en el apartado anterior.
Asigna la url del perfil social que vayas a insertar y ya está.
Como ves en la imagen no cuadra mucho, por eso la importancia de subir imágenes adecuadas en tamaño, forma y color.
Para desplazarlo a la derecha puedes usar los ejemplos de CSS de la misma manera que en los apartados anteriores.
Optando por esta última opción prescindirás de instalar plugins en tu WordPress y subir los logos que hayas descargado o creado.
Conclusión
Estas son algunas de las formas de insertar iconos de redes sociales en la cabecera y menús de tu WordPress.
Has visto que son muy sencillas y prácticas de usar, escoge la que más te guste para tu blog y haz que conozcan tus perfiles sociales.
¿Tú cual usas? ¿Conoces otros métodos más sencillos?¿Usas estos iconos en tu web o consideras que desvían la atención? Déjame un comentario y si te ha gustado el post agradezco que puntues el artículo y si lo compartes mejor aún 😉
