Añadir en funciones de tu tema o en tu code snippets
Código
// Función para generar botones de compartir en redes sociales
function social_share_buttons($atts) {
// Obtener la URL y el título del contenido actual
$url = get_permalink();
$title = get_the_title();<div class="bsm-slider-outer">
<div class="bsm-slider"
id="bsm_1da58067"
style="border-radius:10px"
data-total="4"
data-autoplay="true"
data-interval="10000"
data-pause="true">
<div class="bsm-track">
<div class="bsm-slide" style="border-radius:10px">
<div class="bsm-slide__img-wrap">
<a href="https://supremefoods.mx/product-category/hongos/kits-de-cultivo-hongos/" target="_blank" rel="noopener" class="bsm-slide__img-link">
<img src="https://edonoticias.com/wp-content/uploads/2025/02/banner-Cultivo-hongos-supremefoods.png"
alt="KITS DE CULTIVO ORGÁNICO"
class="bsm-slide__img"
loading="lazy" width="350" height="190">
</a>
</div>
<div class="bsm-slide__body">
<h2 class="bsm-slide__title">KITS DE CULTIVO ORGÁNICO</h2> <p class="bsm-slide__desc">Cosecha hongos hasta tres veces en un lapso de 6 semanas con este kit <a href="https://supremefoods.mx/product-category/hongos/kits-de-cultivo-hongos/" target="_blank" rel="noopener"
class="bsm-slide__btn"
style="background-color:#579f2f !important;color:#ffffff !important;display:inline-block !important;padding:9px 20px !important;border-radius:5px !important;text-decoration:none !important;font-weight:700 !important;">
VISITAR </a>
</div>
</div>
<div class="bsm-slide" style="border-radius:10px">
<div class="bsm-slide__img-wrap">
<a href="https://multiproductosgd.com.mx/" target="_blank" rel="noopener" class="bsm-slide__img-link">
<img src="https://edonoticias.com/wp-content/uploads/2025/02/multiproductos-GD.png"
alt="Multiproductos GD"
class="bsm-slide__img"
loading="lazy" width="350" height="190">
</a>
</div>
<div class="bsm-slide__body">
<h2 class="bsm-slide__title">Multiproductos GD</h2> <p class="bsm-slide__desc">Líder en la fabricación y comercialización de molduras plásticas <a href="https://multiproductosgd.com.mx/" target="_blank" rel="noopener"
class="bsm-slide__btn"
style="background-color:#ca0771 !important;color:#ffffff !important;display:inline-block !important;padding:9px 20px !important;border-radius:5px !important;text-decoration:none !important;font-weight:700 !important;">
VISITAR </a>
</div>
</div>
<div class="bsm-slide" style="border-radius:10px">
<div class="bsm-slide__img-wrap">
<a href="https://www.equiposforzagym.com/" target="_blank" rel="noopener" class="bsm-slide__img-link">
<img src="https://edonoticias.com/wp-content/uploads/2025/02/banner-texto-forza-gym.png"
alt="Equipo para Gimnasio"
class="bsm-slide__img"
loading="lazy" width="350" height="190">
</a>
</div>
<div class="bsm-slide__body">
<h2 class="bsm-slide__title">Equipo para Gimnasio</h2> <p class="bsm-slide__desc">Con FORZA GYM emprende, amplía o renueva tu proyecto Fitness <a href="https://www.equiposforzagym.com/" target="_blank" rel="noopener"
class="bsm-slide__btn"
style="background-color:#263a7c !important;color:#ffffff !important;display:inline-block !important;padding:9px 20px !important;border-radius:5px !important;text-decoration:none !important;font-weight:700 !important;">
VISITAR </a>
</div>
</div>
<div class="bsm-slide" style="border-radius:10px">
<div class="bsm-slide__img-wrap">
<a href="https://ariapsa.com/fb/" target="_blank" rel="noopener" class="bsm-slide__img-link">
<img src="https://edonoticias.com/wp-content/uploads/2025/02/banner-texto-e-imagen-Ariapsa-2.png"
alt="Plan inicial en Facebook"
class="bsm-slide__img"
loading="lazy" width="350" height="190">
</a>
</div>
<div class="bsm-slide__body">
<h2 class="bsm-slide__title">Plan inicial en Facebook</h2> <p class="bsm-slide__desc">30 Publicaciones orgánicas por mes + campañas Facebook ADS <a href="https://ariapsa.com/fb/" target="_blank" rel="noopener"
class="bsm-slide__btn"
style="background-color:#ca0771 !important;color:#ffffff !important;display:inline-block !important;padding:9px 20px !important;border-radius:5px !important;text-decoration:none !important;font-weight:700 !important;">
VISITAR </a>
</div>
</div>
</div><!-- /.bsm-track -->
<div class="bsm-arrows--center">
<button class="bsm-arrow bsm-arrow--prev" aria-label="Anterior">‹</button>
<button class="bsm-arrow bsm-arrow--next" aria-label="Siguiente">›</button>
</div>
<div class="bsm-dots" role="tablist">
<button class="bsm-dot bsm-dot--active"
data-index="0"
role="tab"
aria-label="Slide 1"></button>
<button class="bsm-dot"
data-index="1"
role="tab"
aria-label="Slide 2"></button>
<button class="bsm-dot"
data-index="2"
role="tab"
aria-label="Slide 3"></button>
<button class="bsm-dot"
data-index="3"
role="tab"
aria-label="Slide 4"></button>
</div>
</div>
</div>
<script>
(function(){
var el=document.getElementById('bsm_1da58067');
if(!el) return;
var track=el.querySelector('.bsm-track');
var dots=el.querySelectorAll('.bsm-dot');
var total=parseInt(el.dataset.total,10)||1;
var doAuto=el.dataset.autoplay==='true';
var ms=parseInt(el.dataset.interval,10)||10000;
var pauseH=el.dataset.pause==='true';
var cur=0,timer=null,busy=false;
function go(n,instant){
if(busy&&!instant) return;
n=((n%total)+total)%total;
if(n===cur&&!instant) return;
cur=n;
if(!instant){
busy=true;
track.classList.add('bsm-animating');
var done=function(){ track.removeEventListener('transitionend',done); track.classList.remove('bsm-animating'); busy=false; };
track.addEventListener('transitionend',done);
setTimeout(function(){ if(busy){ track.classList.remove('bsm-animating'); busy=false; } },500);
}
track.style.transform='translateX(-'+(cur*100)+'%)';
dots.forEach(function(d,i){ d.classList.toggle('bsm-dot--active',i===cur); d.setAttribute('aria-selected',i===cur?'true':'false'); });
}
function startAuto(){ if(doAuto&&total>1) timer=setInterval(function(){ go(cur+1); },ms); }
function stopAuto(){ clearInterval(timer); }
function resetAuto(){ stopAuto(); startAuto(); }
el.querySelectorAll('.bsm-arrow--prev').forEach(function(btn){ btn.addEventListener('click',function(e){ e.preventDefault(); go(cur-1); resetAuto(); }); });
el.querySelectorAll('.bsm-arrow--next').forEach(function(btn){ btn.addEventListener('click',function(e){ e.preventDefault(); go(cur+1); resetAuto(); }); });
dots.forEach(function(d){ d.addEventListener('click',function(e){ e.preventDefault(); go(parseInt(d.dataset.index,10)); resetAuto(); }); });
if(pauseH){ el.addEventListener('mouseenter',stopAuto); el.addEventListener('mouseleave',startAuto); }
var tx=null;
el.addEventListener('touchstart',function(e){ tx=e.touches[0].clientX; },{passive:true});
el.addEventListener('touchend',function(e){ if(tx===null) return; var dx=e.changedTouches[0].clientX-tx; if(Math.abs(dx)>40){ go(dx<0?cur+1:cur-1); resetAuto(); } tx=null; });
go(0,true);
startAuto();
})();
</script>
// Generar los enlaces de compartir
$facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' . urlencode($url);
$twitter_url = 'https://twitter.com/intent/tweet?text=' . urlencode($title) . '&url=' . urlencode($url);
$linkedin_url = 'https://www.linkedin.com/shareArticle?mini=true&url=' . urlencode($url) . '&title=' . urlencode($title);
$whatsapp_url = 'https://api.whatsapp.com/send?text=' . urlencode($title . ' ' . $url);
// Generar el HTML para los botones
$output = '<div class="social-share-buttons">';
$output .= '<a href="' . esc_url($facebook_url) . '" target="_blank" class="social-button facebook">Facebook</a>';
$output .= '<a href="' . esc_url($twitter_url) . '" target="_blank" class="social-button twitter">Twitter</a>';
$output .= '<a href="' . esc_url($linkedin_url) . '" target="_blank" class="social-button linkedin">LinkedIn</a>';
$output .= '<a href="' . esc_url($whatsapp_url) . '" target="_blank" class="social-button whatsapp">WhatsApp</a>';
$output .= '</div>';
return $output;
}
add_shortcode('social_share', 'social_share_buttons');
// Estilos CSS para los botones de compartir en redes sociales
function social_share_buttons_styles() {
echo '
<style>
.social-share-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.social-button {
display: inline-block;
padding: 6px;
border-radius: 5px;
color: #82527e;
text-decoration: none;
font-size: 13px;
background-color: #e9e1ea;
text-align: center;
flex: 1 1 calc(50% - 10px); /* 2 columnas con espacio entre ellos */
}
.social-button:hover {
background-color: #ca0771;
color: #ffffff;
}
@media (min-width: 769px) {
.social-button {
flex: 1 1 auto; /* Resetear para pantallas más grandes */
}
}
</style>
';
}
add_action('wp_head', 'social_share_buttons_styles');
Añadir shortcode en tu sitio web
[ social_share ]