Insertar código en plugin code snippets
Código
<div class="bsm-slider-outer">
<div class="bsm-slider"
id="bsm_cc8f1c38"
style="border-radius:10px"
data-total="3"
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://ariapsa.com/diseno-de-paginas-web/" target="_blank" rel="noopener" class="bsm-slide__img-link">
<img src="https://ariapsa.com/wp-content/uploads/2026/08/ads-diseno-de-disitios-web-rotativo-01.jpg"
alt="Diseño de sitios y páginas web"
class="bsm-slide__img"
loading="lazy" width="350" height="190">
</a>
</div>
<div class="bsm-slide__body">
<h2 class="bsm-slide__title">Diseño de sitios y páginas web</h2> <p class="bsm-slide__desc">Desde landing page hasta tiendas online, incluye dominio y hosting <a href="https://ariapsa.com/diseno-de-paginas-web/" 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;">
Ver planes y precios </a>
</div>
</div>
<div class="bsm-slide" style="border-radius:10px">
<div class="bsm-slide__img-wrap">
<a href="https://ariapsa.com/mkt" target="_blank" rel="noopener" class="bsm-slide__img-link">
<img src="https://ariapsa.com/wp-content/uploads/2026/08/ads-banner-rotativo-marketing-digital-ariapsa.jpg"
alt="¿Necesitas marketing digital para tu negocio?"
class="bsm-slide__img"
loading="lazy" width="350" height="190">
</a>
</div>
<div class="bsm-slide__body">
<h2 class="bsm-slide__title">¿Necesitas marketing digital para tu negocio?</h2> <p class="bsm-slide__desc">Planes desde posicionamiento SEO, redes sociales, Google y ChatGPT ADS. <a href="https://ariapsa.com/mkt" target="_blank" rel="noopener"
class="bsm-slide__btn"
style="background-color:#c70a78 !important;color:#ffffff !important;display:inline-block !important;padding:9px 20px !important;border-radius:5px !important;text-decoration:none !important;font-weight:700 !important;">
Ver planes </a>
</div>
</div>
<div class="bsm-slide" style="border-radius:10px">
<div class="bsm-slide__img-wrap">
<a href="https://ariapsa.com/dossier" target="_blank" rel="noopener" class="bsm-slide__img-link">
<img src="https://ariapsa.com/wp-content/uploads/2026/08/ads-diseno-de-dossier.jpg"
alt="Dossier de ventas"
class="bsm-slide__img"
loading="lazy" width="350" height="190">
</a>
</div>
<div class="bsm-slide__body">
<h2 class="bsm-slide__title">Dossier de ventas</h2> <p class="bsm-slide__desc">Convertimos tu presentación PPT en una herramienta de prospección optimizada para móviles. <a href="https://ariapsa.com/dossier" target="_blank" rel="noopener"
class="bsm-slide__btn"
style="background-color:#af1854 !important;color:#ffffff !important;display:inline-block !important;padding:9px 20px !important;border-radius:5px !important;text-decoration:none !important;font-weight:700 !important;">
Cotizar ahora </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>
</div>
</div>
</div>
<script>
(function(){
var el=document.getElementById('bsm_cc8f1c38');
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>
/**
* Plugin Name: Botón Volver Arriba
* Description: Añade un botón flotante para volver al inicio de la página
* Version: 1.0
* Author: Ariapsa Mexico
*/
// Evitar acceso directo al archivo
if (!defined('ABSPATH')) {
exit;
}
/**
* Función para agregar el HTML y CSS del botón
*/
function agregar_boton_volver_arriba() {
?>
<style>
#btn-volver-arriba {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
background-color: #5aa23f;
color: #ffffff;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
#btn-volver-arriba.mostrar {
opacity: 1;
visibility: visible;
}
#btn-volver-arriba:hover {
background-color: #4c8835;
transform: translateY(-3px);
}
#btn-volver-arriba svg {
width: 24px;
height: 24px;
}
@media (max-width: 768px) {
#btn-volver-arriba {
width: 40px;
height: 40px;
line-height: 40px;
bottom: 15px;
left: 15px;
}
#btn-volver-arriba svg {
width: 18px;
height: 18px;
}
}
</style>
<div id="btn-volver-arriba" title="Volver arriba">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</div>
<script>
(function() {
// Esperar a que el DOM esté completamente cargado
document.addEventListener('DOMContentLoaded', function() {
var botonVolverArriba = document.getElementById('btn-volver-arriba');
// Mostrar/ocultar el botón según la posición de desplazamiento
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
botonVolverArriba.classList.add('mostrar');
} else {
botonVolverArriba.classList.remove('mostrar');
}
});
// Funcionalidad para volver arriba al hacer clic
botonVolverArriba.addEventListener('click', function(e) {
e.preventDefault();
// Animación suave para desplazarse hacia arriba
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
})();
</script>
<?php
}
// Agregar el botón al pie de página en todas las páginas del sitio
add_action('wp_footer', 'agregar_boton_volver_arriba');