Comentarios de WordPress que se Muestran y Ocultan

En este video vamos a crear una barra que mantiene ocultos los comentarios de una entrada hasta que el usuario hace clic sobre ella y se despliegan.
  1. Inicio
  2. Divi
  3. Guías Divi
  4. Comentarios de WordPress que se Muestran y Ocultan

WordPress es Mejor con Divi

Para crear una barra que oculte y muestre los comentarios de una entrada con Divi necesitamos los siguientes recursos:

Cómo hacer una barra que oculte y muestre los comentarios con Divi

Los comentarios son una parte importante de cualquier entrada de blog. Sin embargo, para algunos lectores, una sección de comentarios extensa puede convertirse en un problema cada vez que intentan desplazarse por el resto del contenido de la entrada.

Crear un conmutador de comentarios es una gran solución a este problema. Al brindarles a los usuarios la capacidad de mostrar u ocultar los comentarios, puede mejorar la experiencia del usuario entregando inicialmente una versión más concisa de la entrada y brindándoles la capacidad de mostrar u ocultar los comentarios cuando lo deseen.

En este tutorial, te muestro cómo crear un conmutador de comentarios para tu plantilla de entradas Divi. Una vez que construimos la barra de alternancia de comentarios usando Divi, agregamos el código necesario para mostrar/ocultar el área de comentarios al hacer clic en la barra del conmutador.

Códigos utilizados en el video para Mostrar / Ocultar comentarios

A continuación paso a detallar los códigos y otros valores utilizados en el video para que puedas directamente copiar y pegar.

Fila del conmutador de comentarios

Nuestro primer paso es crear la barra conmutadora de comentarios que eventualmente mostrará y ocultará los comentarios. Para hacer esto, vamos a crear una nueva fila encima de la fila que contiene el módulo de comentarios.

Luego, completaremos la fila con el título y el ícono de alternar para completar el diseño.

Luego de añadir la fila que va a conformar el conmutador de comentarios tenemos que asignarle una clase CSS para ser utilizada por el código que se ocupará que todo ésto funcione.

  • Clase CSS: et-comment-toggle
  • CSS Personalizado > Elemento principal:

display: flex;
align-items: center;

Módulo Texto para el título de la barra

Este módulo de texto va a mostrar la leyenda Mostrar / Ocultar los comentarios seguido del número de comentarios. Por este motivo, para que quede mejor, añado una etiqueta span que me permite reducir el tamaño del número de comentarios. Pero es totalmente opcional.

  • Contenido dinámico: Recuento de comentarios.
  • Antes: Mostrar/Ocultar Comentarios <span style=»font-size:0.7em»>(
  • Después: comentario/s)</span>

Módulo Anuncio para la cruz de abrir / cerrar

Para crear el ícono de la barra de alternancia de comentarios, vamos a usar un módulo Anuncio que muestre solo el ícono que queremos usar.

Este módulo lo usamos simplemente para colocar la cruz de abrir y cerrar los comentarios. Quizás se pueda reemplazar por el nuevo módulo de Iconos de Divi.

  • CSS Personalizado > Elemento principal:

display:flex;
align-items:center;

  • CSS Personalizado > Imagen de anuncio

margin-bottom: 0px !important;

Fila del módulo Comentarios

Ahora que la barra conmutadora de comentarios está completa, necesitamos añadir una clase CSS a la fila pre-existente que contiene al módulo de comentarios de DIvi.

  • Clase CSS: et-comment-toggle-content

Código para que todo funcione

Y en algún lugar de la plantilla tenemos que insertar un módulo de código de Divi con el siguiente CSS y Javascript.

<style>

.et-comment-toggle .et-pb-icon {
transition: all 300ms;
}
.et-comment-toggle.open .et-pb-icon { /*rotate the plus icon 45 degrees when toggle opens*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.et-comment-toggle-content { /* hide comment toggle content initially */
display:none;
}
.et-comment-toggle-content.ctc-active { /* show comment toggle content when active */
display:block;
}
.et-fb .et-comment-toggle-content {
display:block;
}
.et-comment-toggle {
cursor:pointer;
}

</style>

<script>

function isStorageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
}

jQuery(document).ready(function($) {
var isSessionStorageAvailable = window.isStorageAvailable('sessionStorage');
var $commentToggle = $('.et-comment-toggle');
var $commentToggleContent = $('.et-comment-toggle-content');

$commentToggle.on('click', function() {
// Toggle content and add 'ctc-active' class:
$commentToggleContent.slideToggle(300).toggleClass('ctc-active');

// Add class to animate toggle icon:
if ($commentToggleContent.hasClass('ctc-active')) {
$commentToggle.addClass('open');
} else {
$commentToggle.removeClass('open');
}

// If storage is available, set item in browser session storage
// (so we can know to open the toggle automatically
// when user reloads the page).
if (isSessionStorageAvailable) {
$commentToggleContent.hasClass('ctc-active') ?
sessionStorage.setItem('etCommentToggleEnabled','1'):
sessionStorage.removeItem('etCommentToggleEnabled');
}
});

// If storage is available, open toggle automatically
// on page load if item is in browser session storage.
// This allows the anchor links to work after adding
// a comment or reply in the comment form.
if (isSessionStorageAvailable) {
'1' == sessionStorage.getItem('etCommentToggleEnabled') ?
$commentToggleContent.addClass('ctc-active'):
$commentToggleContent.removeClass('ctc-active');
}

// Open toggle if url has hash tag and no session storage.
// This is will make sure the toggle is open for incoming
// anchor links (from another page) to specific comments.
if (window.location.hash) {
$commentToggleContent.addClass('ctc-active');
if (isSessionStorageAvailable) {
sessionStorage.setItem('etCommentToggleEnabled','1');
} else {
sessionStorage.removeItem('etCommentToggleEnabled');
}
}

// Add class to animate toggle icon if needed on page reload:
if ($commentToggleContent.hasClass('ctc-active')) {
$commentToggle.addClass('open');
} else {
$commentToggle.removeClass('open');
}
});

</script>

Para tener en cuenta

Este conmutador de comentarios recordará el estado del conmutador (abierto o cerrado) a lo largo de la sesión del navegador del usuario. Entonces, si el usuario elige mostrar los comentarios y actualiza la página, los comentarios permanecerán abiertos.

Además, los comentarios se mostrarán automáticamente cada vez que un usuario envíe un comentario o responda en el formulario de comentarios. Esto es importante porque cada vez que un usuario envía un comentario, la página volverá a cargar.

De hecho, la opción de comentarios se mostrará automáticamente cada vez que se haga clic en un enlace que nos lleve a un comentario determinado desde otra página.

Jorge B.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *