Cómo crear una alternancia de comentarios para su plantilla de publicación de blog Divi

Los comentarios son una parte importante de cualquier plantilla de publicación de blog. Sin embargo, para algunos visitantes, una sección de comentarios extensa puede convertirse en un problema cuando intentan desplazarse por el resto del contenido de la publicación. Crear un botón de comentarios es una gran solución a este problema. Al brindarles a los usuarios la capacidad de alternar (mostrar u ocultar) los comentarios, puede mejorar la experiencia del usuario al entregar una versión más concisa de su publicación inicialmente y brindarles la capacidad de mostrar u ocultar los comentarios cuando lo deseen.

En este tutorial, le mostraremos cómo crear un conmutador de comentarios para los comentarios de la plantilla de publicación de su blog Divi. Una vez que construimos la barra de alternancia de comentarios usando Divi Builder, agregaremos el código necesario para mostrar / ocultar el área de comentarios al hacer clic en la barra de alternancia.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga la plantilla GRATIS

Para poner sus manos en la plantilla de publicación de alternancia de comentarios de este tutorial, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Cómo cargar la plantilla de descarga gratuita

Ir a Divi Theme Builder

Para cargar la plantilla, navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.

Cargar plantilla de sitio web

Luego, en la esquina superior derecha, verá un ícono con dos flechas. Haga clic en el icono.

Vaya a la pestaña de importación, cargue el archivo JSON que pudo descargar en esta publicación y haga clic en 'Importar plantillas Divi Theme Builder'.

Guardar cambios en Divi Theme Builder

Una vez que haya cargado el archivo, notará una nueva plantilla con una nueva área del cuerpo que se ha asignado a Todas las publicaciones. Guarde los cambios de Divi Theme Builder tan pronto como desee que se active la plantilla.

Vayamos al tutorial para que podamos aprender a construir esto desde cero, ¿de acuerdo?

Cómo crear una alternancia de comentarios para su plantilla de publicación de blog Divi

Carga de la plantilla de publicación de blog Theme Builder Pack 5

Para comenzar, vamos a impulsar el diseño agregando una de nuestras plantillas de publicaciones de blog prefabricadas. Para importar la plantilla del Theme Builder, deberá hacer lo siguiente:

1. Navega hasta Divi Theme Builder
2. Haga clic en el icono de portabilidad en la parte superior derecha de la página.
3. Seleccione la pestaña Importar en la ventana emergente Portabilidad.
4. Descargue e importe el archivo de plantilla de producto Divi Divi Theme Builder 5. Una vez que descargue el paquete aquí, descomprima el archivo y encontrará el archivo “divi-theme-builder-pack-5-post-template.json” que necesitará importar.
5. Haga clic en el botón Importar
6. Una vez que se haya importado la plantilla, haga clic en el icono de edición en el área del cuerpo personalizado de la plantilla para editar el diseño de la plantilla.

Creación de la barra de alternancia de comentarios

Nuestro primer paso es crear la barra de alternancia de comentarios que eventualmente mostrará / ocultará los comentarios. Para hacer esto, crearemos una nueva fila encima de la fila que contiene el módulo / contenido de comentarios. Luego, llenaremos la fila con el título y el ícono de alternar para completar el diseño.

Añadir fila

Continúe y desplácese hasta la parte inferior del diseño prefabricado y agregue una nueva fila directamente debajo de la fila que contiene el módulo de comentarios.

Arrastre la nueva fila encima de la fila de comentarios.

Luego agregue la etiqueta, "Barra de alternancia de comentarios", a la fila dentro de la vista de capas para una fácil identificación más adelante.

Configuración de filas

Abra la configuración de la nueva fila y agregue el siguiente fondo:

• Color de fondo: # 624de3

En la pestaña de diseño, actualice lo siguiente:

• Esquinas redondeadas: 10px

• Ancho de la canaleta: 1
• Ancho máximo: 1180px
• Relleno: 10 píxeles en la parte superior, 10 píxeles en la parte inferior, 5% a la izquierda, 5% a la derecha

En la pestaña avanzada, agregue la siguiente clase CSS a la fila:

• Clase CSS: et-comment-toggle

Luego agregue el siguiente CSS personalizado al elemento principal:

display:flex;
align-items:center;

El título de alternancia de comentarios

Para agregar el título de alternancia de comentarios, agregue un nuevo módulo de texto en la columna de la izquierda.

Elimina el contenido del cuerpo simulado y selecciona el ícono "Usar contenido dinámico" al pasar el cursor sobre el cuadro de contenido del cuerpo.

En la lista desplegable, seleccione "Publicar comentario recuento".

En la configuración de Contador de comentarios de publicaciones, actualice lo siguiente:

En el cuadro de entrada Antes, pega el siguiente HTML:

Show/Hide Comments <span style="font-size:0.7em">(

En el cuadro de entrada Después, pegue el siguiente HTML:

 comments)</span>

Seleccione NO en la opción Enlace al área de comentarios.

Luego guarde la configuración.

En la pestaña de diseño, actualice lo siguiente:

• Fuente de texto: Rubik
• Peso de la fuente del texto: Medio
• Estilo de fuente de texto: TT
• Texto Tamaño del texto: 24 px (escritorio), 18 px (tableta), 16 px (teléfono)
• Altura de la línea de texto: 1em
• Alineación de texto: izquierda
• Color del texto: claro

El icono de la barra de alternancia de comentarios

Para crear el ícono de la barra de alternancia de comentarios, usaremos un módulo de propaganda que muestra solo el ícono que queremos usar.

Agregue un nuevo módulo de propaganda a la columna derecha de la fila.

Saque el título simulado y el contenido del cuerpo y luego seleccione para usar el ícono más.

En la pestaña de diseño, actualice lo siguiente:

• Color del icono: #ffffff
• Tamaño de fuente del icono: 40px

• Ancho: 50px
• Alineación del módulo: derecha
• Alto: 50px
• Animación de imagen / icono: sin animación

En la pestaña Avanzado, agregue el siguiente CSS personalizado al elemento principal:

display:flex;
align-items:center;

Luego agregue un fragmento de CSS más a la imagen de Blurb:

margin-bottom: 0px !important;

Optimización de la fila con el módulo / contenido de comentarios

Ahora que la barra de alternancia de comentarios está completa, necesitamos optimizar la fila existente que contiene el módulo / contenido de comentarios para que tenga la clase CSS y el espaciado necesarios.

Primero, puede agregar la etiqueta, "Comentarios Alternar contenido", a la fila. Luego abra la configuración de la fila y actualice el relleno de la siguiente manera:

• Relleno 4% arriba, 4% abajo, 4% izquierda, 4% derecha

En la pestaña avanzada, agregue la siguiente clase CSS a la fila:

• Clase CSS: et-comment-toggle-content

Luego guarde y salga del editor de diseño.

Y también guarde los cambios en el generador de temas.

Agregar el código personalizado

El código que necesitamos para agregar la funcionalidad de alternancia para los comentarios se puede agregar a un módulo de código.

Agregue un nuevo módulo de código debajo del módulo de propaganda en la fila de la barra de alternancia de comentarios que creamos anteriormente.

Luego pegue el siguiente CSS asegurándose de envolver el código en las etiquetas de estilo .

.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;
  }

Debajo del CSS envuelto en Luego pegue el siguiente CSS asegurándose de envolver el código en las etiquetas de estilo , agregue el siguiente código JQuery asegurándose de envolverlo en Luego pegue el siguiente CSS asegurándose de envolver el código en el script etiquetas.

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');
    }
});

Acerca de la funcionalidad de alternancia de comentarios

Este conmutador de comentarios tiene jQuery que recordará el estado del conmutador (abierto o cerrado) durante 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 abrirán / 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 un desplazamiento a su envío. De hecho, la alternancia de comentarios se abrirá / mostrará automáticamente cada vez que se utilice un enlace de anclaje en la página, en caso de que desee enlazar a un determinado comentario de otra página.

Resultado final

Para ver el resultado final, simplemente abra cualquier publicación de blog en vivo en su sitio.

Pensamientos finales

Con suerte, esta opción de comentarios será útil para simplificar el diseño de las publicaciones de su blog Divi para que los usuarios puedan disfrutar de un diseño más conciso de la publicación si así lo desean. Y, dado que el código proporcionado le brinda una funcionalidad adicional para mantener los comentarios visibles cuando sea necesario, tiene una buena opción para agregar cambios de comentarios a cualquier plantilla de publicación de blog Divi sin tener que usar un complemento.

Espero tener noticias tuyas en los comentarios.

¡Salud!