¿Quieres crear una llamada a la acción en forma de popups y no sabes como hacerlo. Hoy te explicamos Cómo hacer popups en WordPress con Elementor.
Índice de contenidos
En este tutorial, aprenderemos a agregar botones fijos de redes sociales en WordPress sin necesidad de editar directamente el archivo header.php. Utilizaremos el plugin code snippets de nuestro tema para incorporar de manera sencilla y eficiente botones de Facebook, Instagram y TikTok en todas las páginas de nuestro sitio web. ¡Sigue estos pasos para darle un toque social a tu página!
Pasos para Agregar Botones de Redes Sociales en WordPress
Paso 1: Acceder al Archivo functions.php
Dirígete al panel de administración de WordPress y crea un nuevo snippets
Paso 2: Añadir el Código HTML y CSS
Añade el siguiente código. Este código incluye estilos CSS y enlaces a las redes sociales que deseas destacar.
function agregar_botones_redes_sociales() {
?>
<style>
/* Estilos para los botones de redes sociales */
.social-buttons {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 999;
margin-right:10px;
}
.social-button {
display: block;
margin-bottom: 10px;
padding: 10px;
background-color: #fff;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 5px;
}
.social-button i {
color:#000;
font-size:30px;
}
.social-button i:hover {
color:green;
color:#000;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="social-buttons">
<!-- Botón de Facebook -->
<a class="social-button" target="_blank" href="https://www.facebook.com/TuPaginaDeFacebook" target="_blank">
<i class="fab fa-facebook"></i>
</a>
<!-- Botón de Instagram -->
<a class="social-button" target="_blank" href="https://www.instagram.com/TuCuentaDeInstagram" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<!-- Botón de TikTok -->
<a class="social-button" target="_blank" href="https://www.tiktok.com/@TuUsuarioDeTikTok" target="_blank">
<i class="fab fa-tiktok"></i>
</a>
<!-- Botón de Twitter -->
<a class="social-button" target="_blank" href="https://www.tiktok.com/@TuUsuarioDeTikTok" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</div>
<?php
}
add_action('wp_footer', 'agregar_botones_redes_sociales');
Asegúrate de personalizar las URL con las de tus propias cuentas en redes sociales.
Paso 3: Guardar los Cambios
Guarda los cambios en el archivo functions.php y observa cómo los botones de redes sociales aparecen en todas las páginas de tu sitio web.
¡Felicidades! Ahora tienes botones de redes sociales fijos en tu sitio WordPress sin tener que editar directamente el archivo header.php. Este método garantiza una integración fácil y efectiva, proporcionando a tus visitantes acceso rápido a tus perfiles de Facebook, Instagram y TikTok. ¡Disfruta de tus nuevos botones sociales!