Insertar código en code snippets
Código
<div class="bsm-slider-outer">
<div class="bsm-slider"
id="bsm_20c10c6b"
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_20c10c6b');
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>
// Crear el shortcode para la caja de comentarios con estilos personalizados
function custom_comment_box_shortcode() {
if (post_password_required()) {
return 'Este contenido está protegido por contraseña.';
}
ob_start();
echo '<div id="custom-comment-box">';
// Mostrar los comentarios y el formulario de comentarios
if (comments_open() || get_comments_number()) {
comments_template();
}
echo '</div>';
return ob_get_clean();
}
// Filtrar el formulario de comentarios para cambiar el texto y ocultar el número de comentarios
function custom_comment_form_defaults($defaults) {
$defaults['title_reply'] = 'Iniciar conversación'; // Cambiar el título
return $defaults;
}
add_filter('comment_form_defaults', 'custom_comment_form_defaults');
// Filtrar los comentarios visibles según el rol del usuario y la propiedad de los comentarios
function private_comments_for_subscribers($comments, $post_id) {
if (!is_user_logged_in()) {
// Si el usuario no está logueado, no mostrar comentarios
return array();
}
$current_user = wp_get_current_user();
// Si el usuario es administrador, mostrar todos los comentarios
if (in_array('administrator', $current_user->roles)) {
return $comments;
}
// Para los suscriptores, mostrar solo sus propios comentarios y las respuestas del administrador
$filtered_comments = array();
foreach ($comments as $comment) {
// Mostrar comentarios propios o respuestas del administrador a sus comentarios
if ($comment->user_id == $current_user->ID || (user_can($comment->user_id, 'administrator') && $comment->comment_parent != 0 && get_comment($comment->comment_parent)->user_id == $current_user->ID)) {
$filtered_comments[] = $comment;
}
}
return $filtered_comments;
}
add_filter('comments_array', 'private_comments_for_subscribers', 10, 2);
// Filtrar los comentarios para estilizar las respuestas del administrador
function custom_comment_list($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
$add_below = 'comment';
// Detectar si el comentario es del administrador
$admin_class = '';
if (user_can($comment->user_id, 'administrator')) {
$admin_class = ' admin-comment';
}
echo '<' . $tag . ' ' . comment_class(empty($args['has_children']) ? '' : 'parent' . $admin_class, null, null, false) . ' id="comment-' . get_comment_ID() . '">';
echo '<div class="comment-body' . $admin_class . '">';
// Mostrar el avatar del usuario
echo get_avatar($comment, 64);
echo '<div class="comment-meta">';
echo '<div class="comment-author vcard">';
printf(__('<cite class="fn">%s</cite>'), get_comment_author_link());
echo '</div>';
echo '<div class="comment-metadata"><a href="' . esc_url(get_comment_link($comment->comment_ID)) . '">' . sprintf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) . '</a></div>';
echo '</div>';
if ($comment->comment_approved == '0') {
echo '<em class="comment-awaiting-moderation">' . __('Your comment is awaiting moderation.') . '</em>';
}
comment_text();
echo '<div class="reply">';
comment_reply_link(array_merge($args, array('add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'])));
echo '</div>';
echo '</div>';
echo '</' . $tag . '>';
}
// Añadir los filtros y acciones
add_shortcode('comment_box', 'custom_comment_box_shortcode');
add_filter('wp_list_comments_args', function($args) {
$args['callback'] = 'custom_comment_list'; // Usar la función personalizada para los comentarios
return $args;
});
Insertar estilos en code snippets
Código
add_action( 'wp_head', function () { ?>
<style>
/* Ocultar el número de comentarios */
#comments h2 {
display: none;
}
/* Estilo personalizado para la caja de comentarios */
#custom-comment-box {
margin-top: 20px;
}
/* Estilo para la respuesta del administrador */
.comment-body.admin-comment {
background-color: #f8e39b;
padding: 15px;
border-radius: 5px;
text-align: right; /* Alinear el comentario del administrador a la derecha */
}
/* Alinear el avatar del administrador a la derecha */
.comment-body.admin-comment .avatar {
float: right;
margin-left: 10px;
}
/* Alinear el avatar del suscriptor a la izquierda */
.comment-body .avatar {
float: left;
margin-right: 10px;
}
/* Aumentar el tamaño y negrita del nombre de usuario */
.comment-author.cite.fn {
font-size: 18px;
font-weight: 600;
}
</style>
<?php } );
Añadir shortcode en cualquier parte de tu sitio web, considere ajustar corchetes.
[ comment_box ]