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 cada vez que intentan desplazarse por el resto del contenido de la publicación. Crear un conmutador 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 entregando inicialmente una versión más concisa de su publicación y brindándoles 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 su plantilla de publicación de 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!
Aquí hay un vistazo rápido al diseño que construiremos 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Cómo cargar la plantilla de descarga gratuita
Ir al Creador de temas Divi
Para cargar la plantilla, navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.
Subir plantilla de sitio web
Luego, en la esquina superior derecha, verás 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 de Divi Theme Builder ‘.
Guardar los cambios del generador de temas Divi
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 esta cosa desde cero, ¿de acuerdo?
Cómo crear un conmutador de comentarios para su plantilla de publicación de blog Divi
Carga de la plantilla de publicación de blog de Theme Builder Pack 5
Para comenzar, vamos a comenzar con el diseño agregando una de nuestras plantillas de publicación de blog prefabricadas. Para importar la plantilla de Theme Builder, deberá hacer lo siguiente:
- Navega hasta Divi Theme Builder
- Haga clic en el icono de portabilidad en la parte superior derecha de la página.
- Seleccione la pestaña Importar en la ventana emergente Portabilidad.
- 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 deberá importar.
- Haga clic en el botón Importar
- 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, vamos a crear una nueva fila encima de la fila que contiene el módulo/contenido de comentarios. Luego, completaremos 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 sobre 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 fila
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 del canalón: 1
- Ancho máximo: 1180px
- Relleno: 10 px arriba, 10 px abajo, 5 % a la izquierda, 5 % a la derecha
En la pestaña avanzada, agregue la siguiente clase CSS a la fila:
- Clase CSS: et-comentario-alternar
Luego agregue el siguiente CSS personalizado al elemento principal:
|
01
02
|
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 a la columna izquierda.
Elimine el contenido del cuerpo simulado y seleccione el icono «Usar contenido dinámico» al pasar el cursor sobre el cuadro de contenido del cuerpo.
En la lista desplegable, seleccione «Publicar recuento de comentarios».
En la configuración de Recuento de comentarios de publicaciones, actualice lo siguiente:
En el cuadro de entrada Antes, pegue el siguiente código HTML:
|
01
|
Show/Hide Comments <span style="font-size:0.7em">( |
En el cuadro de entrada Después, pegue el siguiente código HTML:
|
01
|
comments)</span> |
Seleccione NO en la opción Enlace al área de comentarios.
A continuación, guarde la configuración.
En la pestaña de diseño, actualice lo siguiente:
- Fuente del texto: Rubik
- Peso de fuente de 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 línea de texto: 1em
- Alineación de texto: Izquierda
- Color del texto: Claro
El icono de la barra de cambios de comentarios
Para crear el ícono de la barra de alternancia de comentarios, vamos a usar un módulo publicitario 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
- Altura: 50px
- Animación de imagen/icono: sin animación
En la pestaña Avanzado, agregue el siguiente CSS personalizado al elemento principal:
|
01
02
|
display:flex;align-items:center; |
Luego agregue un fragmento de CSS más a la imagen de Blurb:
|
01
|
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 espacio 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-comentario-alternar-contenido
Luego guarde y salga del editor de diseño.
Y guarde los cambios en el generador de temas también.
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 .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
|
.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 el 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 el Luego pegue el siguiente CSS asegurándose de envolver el código en el script etiquetas
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
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 función Alternar comentarios
Este conmutador de comentarios tiene jQuery que 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 abrirán/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 un desplazamiento a su envío. De hecho, la opción de comentarios se abrirá/se mostrará automáticamente cada vez que se utilice un enlace ancla en la página, en caso de que desee enlazar a un comentario determinado desde 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 provisto 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 escuchar de usted en los comentarios.
¡Salud!