El código proporciona una función personalizada para WordPress que agrega una sección de compartir al final de las entradas de blog individuales.
Esta sección incluye enlaces a Facebook, Twitter, Telegram y WhatsApp, junto con estilos CSS personalizados. Los enlaces permiten a los lectores compartir fácilmente el contenido en sus redes sociales. Además, se han incorporado funciones JavaScript para abrir ventanas emergentes que facilitan la compartición en cada plataforma social.
La ventaja de no depender de plugins radica en una mayor eficiencia al evitar la carga adicional de recursos externos y permitir una personalización directa del diseño. En resumen, el código mejora la interactividad social, promoviendo la difusión orgánica del contenido y fortaleciendo la presencia en línea del blog.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Agregar al final del contenido de una entrada
function agregar_redes_sociales_al_contenido($content) {
// Verificar si estamos en una entrada de blog (is_single())
if (is_single()) {
$content .= '<div class="compartir-articulo">';
$content .= '<span class="compartir-titulo">Compartir en:</span>';
$content .= '<a class="red-social" href="#" onclick="compartirEnFacebook(); return false;"><img src="https://hungry-hamster-gwrjo.instawp.xyz/wp-content/uploads/2023/12/icons8-facebook-50-1.png" alt="Facebook"></a>';
$content .= '<a class="red-social" href="#" onclick="compartirEnTwitter(); return false;"><img src="https://hungry-hamster-gwrjo.instawp.xyz/wp-content/uploads/2023/12/icons8-twitter-50.png" alt="Twitter"></a>';
$content .= '<a class="red-social" href="#" onclick="compartirEnTelegram(); return false;"><img src="https://hungry-hamster-gwrjo.instawp.xyz/wp-content/uploads/2023/12/icons8-telegram-50.png" alt="Telegram"></a>';
$content .= '<a class="red-social" href="#" onclick="compartirEnWhatsApp(); return false;"><img src="https://hungry-hamster-gwrjo.instawp.xyz/wp-content/uploads/2023/12/icons8-whatsapp-50-2.png" alt="WhatsApp"></a>';
$content .= '</div>';
$content .= '<script>
function compartirEnFacebook() {
window.open(\'https://www.facebook.com/sharer/sharer.php?u=\' + encodeURIComponent(window.location.href), \'Compartir en Facebook\', \'width=600,height=400\');
}
function compartirEnTwitter() {
window.open(\'https://twitter.com/intent/tweet?url=\' + encodeURIComponent(window.location.href), \'Compartir en Twitter\', \'width=600,height=400\');
}
function compartirEnTelegram() {
window.open(\'https://t.me/share/url?url=\' + encodeURIComponent(window.location.href), \'Compartir en Telegram\', \'width=600,height=400\');
}
function compartirEnWhatsApp() {
window.open(\'https://api.whatsapp.com/send?text=\' + encodeURIComponent(document.title + \' \' + window.location.href), \'Compartir en WhatsApp\', \'width=600,height=400\');
}
</script>';
$content .= '<style>
.compartir-articulo {
margin-top: 20px;
text-align: center;
}
.compartir-titulo {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
.red-social {
display:inline-block;
margin: 0 5px;
width:25px;
height:auto;
}
</style>';
}
return $content;
}
add_filter('the_content', 'agregar_redes_sociales_al_contenido');
Lenguaje del código: HTML, XML (xml)Entendiendo el Código
1. Función Principal: agregar_redes_sociales_al_contenido
Esta función tiene como objetivo agregar elementos HTML al final del contenido de una entrada de blog si la condición is_single() es verdadera. Para lograr esto, utiliza el hook de WordPress the_content junto con la función add_filter.
2. Verificación de Tipo de Página: is_single()
- Verifica si la página actual es una entrada individual de blog (
is_single()). - Si es una entrada de blog, procede a agregar elementos adicionales al contenido.
3. Elementos HTML Agregados:
- División de Compartir Artículo (
<div class="compartir-articulo">):- Contiene un título («Compartir en») y enlaces a diversas redes sociales.
- Enlaces a Redes Sociales (
<a class="red-social" ...></a>):- Enlaces a Facebook, Twitter, Telegram y WhatsApp con imágenes respectivas.
- Cada enlace tiene un evento
onclickque llama a funciones JavaScript para compartir en la red social correspondiente.
4. Scripts JavaScript:
- Funciones de Compartir en Redes Sociales:
compartirEnFacebook(),compartirEnTwitter(),compartirEnTelegram(),compartirEnWhatsApp().- Cada función abre una nueva ventana con la URL de compartición correspondiente para la red social.
5. Estilos CSS Añadidos:
- Estilo para Compartir Artículo:
- Define estilos para el contenedor de compartir artículo.
- Estilo para Título de Compartir (
compartir-titulo):- Establece el formato del título «Compartir en».
- Estilo para Íconos de Redes Sociales (
red-social):- Define estilos para los íconos de redes sociales.
6. Cierre y Retorno de Contenido Modificado:
- Cierra la función con
}. - Retorna el contenido original modificado con los elementos adicionales.
7. Aplicación del Filtro:
- Utiliza
add_filter('the_content', 'agregar_redes_sociales_al_contenido')para aplicar esta función al contenido de las entradas.
Conclusión:
Este código personalizado de WordPress extiende las entradas individuales de blog al agregar un área de compartir al final del contenido. Incluye enlaces a redes sociales, funciones JavaScript para compartir y estilos CSS para mejorar la presentación. Esta implementación facilita la interacción social y la difusión del contenido en plataformas populares.
Si necesitas servicios de código personalizado o ajustes específicos para tu sitio web, estoy disponible para ayudarte. Para contactarme y discutir tus necesidades específicas, te invito a visitar este enlace. Estaré encantado de colaborar contigo y ofrecerte soluciones a medida para mejorar tu experiencia en línea.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.