Vamos a ver como cambiar icono de telegram en wordpress, por defecto telegram no suele estar integrado y vamos a poner el icono de telegram por CSS para sustituir al de facebook sin usar ningún plugin.
- Encontrar el widget que se encarga de las redes sociales en nuestra web wordpress
- Conseguir el icono de Telegram para wordpress
- Identificar la clase css que corresponde al icono de Telegram en wordpress
- Insertar el icono de Telegram por CSS en wordpress
Encontrar el widget que se encarga de las redes sociales en nuestra web wordpress
El lugar donde se encuentra el icono de redes sociales suele ser un widget o menu, en mi caso el icono se encuentra junto a otros de las redes sociales en el header de la página web de wordpress.
En este ejemplo estoy trabajando con el tema oshine para wordpress , tenemos que ir a:
Escritorio-> Oshine options -> Oshine top header settings
Para poder ver modificar los iconos actuales de redes sociales.
Dentro de Top Header Settings que es donde se encuentran mis iconos de redes sociales, podemos ver el apartado de la parte inferior:
Text and Code Widget Settings -> Content using Code/ Shortcode
Aquii es donde están los shortcodes de los iconos sociales que estamos usando actualmente.
Para cambiar el icono de telegram en wordpress vamos a reutilizar el icono actual de facebook, aquí os dejo el código de antes del cambio y el resultado despues de añadir icono de telegram en wordpress.
Tenemos que cambiar la parte que pone:
[tatsu_icon name = “icon-facebook” por [tatsu_icon name = “icon-telegram”
De esta manera el icono de facebook va a desaparecer y nos permitirá incluir la nueva imagen que veremos en el ultimo paso “Insertar el icono de Telegram por CSS en wordpress”
[tatsu_icon_group alignment = “left” ]
[tatsu_icon name = “icon-telegram” size = “tiny” style = “circle” bg_color = ‘{“id”:”palette:0″,”color”:”#28d1a2″}’ hover_bg_color = “” color = “rgba(255,255,255,1)” hover_color = “” border_width = “” border_color = “” hover_border_color = “” alignment = “none” href = “https://t.me/+xxxxxxxxxxxxxxxxx” new_tab = “0” lightbox = “0” image = “” video_url = “” animate = “0” animation_type = “fadeIn” animation_delay = “0” ][/tatsu_icon]
[tatsu_icon name = “icon-instagram” size = “tiny” style = “circle” bg_color = ‘{“id”:”palette:0″,”color”:”#28d1a2″}’ hover_bg_color = “” color = “rgba(255,255,255,1)” hover_color = “” border_width = “” border_color = “” hover_border_color = “” alignment = “none” href = “https://www.instagram.com/xxxxxxx/” new_tab = “0” lightbox = “0” image = “” video_url = “” animate = “0” animation_type = “fadeIn” animation_delay = “0” ][/tatsu_icon]
[tatsu_icon name = “icon-youtube” size = “tiny” style = “circle” bg_color = ‘{“id”:”palette:0″,”color”:”#28d1a2″}’ hover_bg_color = “” color = “rgba(255,255,255,1)” hover_color = “” border_width = “” border_color = “” hover_border_color = “” alignment = “none” href = “https://www.youtube.com/channel/UCZ-5xxxxxx” new_tab = “0” lightbox = “0” image = “” video_url = “” animate = “0” animation_type = “fadeIn” animation_delay = “0” ][/tatsu_icon]
[/tatsu_icon_group]
La otra parte importante de cambiar icono de telegram en wordpress es que la url de destino al presionar el icono nos lleve a nuestro Telegram, buscamos donde pone href = “https://facebook/” y lo sustituimos por nuestro enlace a Telegram, solo tenemos que cambiar lo que hay dentro de las comillas. Si tienes dudas te recomiendo que eches un vistazo a W3school un magnifico sitio donde aprender HTML entre otras cosas interesantes.
Conseguir el icono de Telegram para wordpress
Para poder cambiar icono de telegram en wordpress necesitamos una imagen, en concreto necesitamos el icono de telegram para meterlo en donde estaba el icono de facebook, es importante que sea una imagen de tamaño icono, yo puse una imagen de 50×50 pixels, os dejo dos version una con fondo gris y otra morada, el color de fondo tiene que coincidir con el color del elemento donde vais a insertar la imagen, basicamente busca una imagen de icono de Telegram y cambiale el color de fondo con algún programa de edición de imagenes.
Identificar la clase css que corresponde al icono de Telegram en wordpress
Para añadir icono de Telegram en wordpress necesitamos saber cual es la clase CSS a la que pertenece nuestro icono. Para ello nos vamos a ayudar de la consola de desarrolladores de Google Chome, abrimos nuestra web y presionamos el botón F12, se nos abrirá un panel lateral.
Tenemos que hacer clic en el icono Inspeccionar elemento de arriba a la izquierda al lado de “Elements”.
Clic Inspect Inspect o presiona Command+Shift+C (Mac) o Control+Shift+C (Windows, Linux) para entrar en modo Inspeccionar Elemento.
Después hay que hacer clic en nuestro icono de la web donde queremos insertar icono de telegram sin plugin. Veremos que en la consola de Google Chrome aparece en la pestaña de “Styles” la clase CSS del elemento seleccionado, si no aparece podemos darle al icono de “New Style Rule” que es el simbolo de más (+) que puedes ver en la siguiente imagen abajo a la derecha ( más info en este enlace de google Chome )
En mi caso la clase CSS es
i.tatsu-icon.tatsu-custom-icon.tatsu-custom-icon-class.icon-facebook.tiny.plain
Ahora tenemos que ver donde hemos subido nuestra imagen del icono de Telegram, en mi caso la ruta es:
/wp-content/uploads/2022/06/Telegram_2019_simple_logo_2.jpg
Esta ruta puedes sacarla desde Escritorio-> Biblioteca de medios , pinchas en la imagen que quieres usar de icono de Telegram y veras a la derecha la ruta.
Insertar el icono de Telegram por CSS en wordpress
Por ultimo si queremeos insertar icono de Telegram sin plugin en wordpress necesitamos usar la clase CSS que hemos visto anterioremente para aplicarle la propiedad :
Content:url
Más detalles sobre esta propiedad Css como siempre en W3School
// Le he añadido un tamaño de 16px para que encage perfectamente pero es opcional
i.tatsu-icon.tatsu-custom-icon.tatsu-custom-icon-class.icon-facebook.tiny.plain {content:url(‘/wp-content/uploads/2022/06/Telegram_2019_simple_logo_2.jpg’);
width: 16px;
}
Puede parecer complicado cambiar icono de telegram en wordpress pero basicamente usamos un icono de redes sociales normal como puede ser el de facebook que está totalmente integrado en wordpress en cualquier tema y lo sustituimos por una imagen mediante CSS, en este caso es como insertar icono de telegram en wordpress pero es valido para cualquier otro icono de redes sociales.