Comment créer une bascule pour les commentaires dans votre blog post template Divi

Les commentaires sont une partie importante de tout modèle d’article de blog. Cependant, pour certains visiteurs, une longue section de commentaires peut devenir un problème lorsqu’ils essaient de faire défiler le reste du contenu de l’article. La création d’un bouton de basculement des commentaires est une excellente solution à ce problème. En donnant aux utilisateurs la possibilité de basculer (afficher ou masquer) les commentaires, vous pouvez améliorer l’expérience de l’utilisateur en lui fournissant une version plus concise de votre article au départ et en lui donnant la possibilité d’afficher ou de masquer les commentaires quand il le souhaite.

Dans ce tutoriel, nous allons vous montrer comment créer une bascule de commentaires pour les commentaires de votre modèle d’article de blog Divi. Une fois que nous aurons construit la barre de basculement des commentaires à l’aide du Divi Builder, nous ajouterons le code nécessaire pour afficher/masquer la zone des commentaires en cliquant sur la barre de basculement.

C’est parti !

Coup d’œil rapide

Voici un aperçu du design que nous allons créer dans ce tutoriel.

 

Allez sur Divi Theme Builder

Pour télécharger le modèle, accédez à Divi Theme Builder dans le backend de votre site WordPress.

Télécharger le modèle de site Web

Ensuite, dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l’icône.

Naviguez vers l’onglet d’importation, téléchargez le fichier JSON que vous avez pu télécharger dans cet article, et cliquez sur  » Importer les modèles de Divi Theme Builder « .

Enregistrer les modifications apportées à Divi Theme Builder

Une fois que vous avez téléchargé le fichier, vous remarquerez un nouveau modèle avec une nouvelle zone de corps qui a été attribuée à All Posts. Enregistrez les modifications apportées par Divi Theme Builder dès que vous souhaitez activer le modèle.

Passons au tutoriel afin d’apprendre à construire cette chose à partir de zéro, d’accord ?

Comment créer un Toggle de commentaires pour votre modèle de blog Divi

Téléchargement du modèle de billet de blog du Theme Builder Pack 5

Pour commencer, nous allons donner un coup de pouce à la conception en ajoutant l’un de nos modèles d’articles de blog préfabriqués. Pour importer le modèle dans le Créateur de thème, vous devez procéder comme suit :

1. Naviguez vers le Créateur de thèmes de Divi
2. Cliquez sur l’icône de portabilité en haut à droite de la page.
3. Sélectionnez l’onglet Importation dans la fenêtre popup de portabilité.
4. Téléchargez et importez le fichier de modèle de produit Divi Divi Theme Builder 5. Une fois que vous avez téléchargé le pack ici, décompressez le fichier et vous trouverez le fichier « divi-theme-builder-pack-5-post-template.json » que vous devrez importer.
5. Cliquez sur le bouton d’importation
6. Une fois le modèle importé, cliquez sur l’icône d’édition dans la zone du corps personnalisé du modèle pour modifier la mise en page du modèle.

Création de la barre à bascule des commentaires

La première étape consiste à créer la barre à bascule des commentaires qui permettra d’afficher ou de masquer les commentaires. Pour ce faire, nous allons créer une nouvelle ligne au-dessus de la ligne qui contient le module/contenu des commentaires. Ensuite, nous allons remplir la rangée avec le titre et l’icône de la bascule pour compléter le design.

Ajouter une rangée

Allez-y, faites défiler jusqu’au bas de la mise en page préétablie et ajoutez une nouvelle rangée directement sous la rangée contenant le module de commentaires.

Faites glisser la nouvelle rangée au-dessus de la rangée des commentaires.

Ajoutez ensuite l’étiquette « Barre de basculement des commentaires » à la rangée dans la vue en couches pour faciliter son identification ultérieure.

Paramètres de la rangée

Ouvrez les paramètres de la nouvelle rangée et ajoutez l’arrière-plan suivant :

• Couleur d’arrière-plan : #624de3

Sous l’onglet Design, mettez à jour les éléments suivants :

• Largeur de la gouttière : 1
• Largeur maximale : 1180px
• Rembourrage : 10px haut, 10px bas, 5% gauche, 5% droite

Sous l’onglet avancé, ajoutez la classe CSS suivante à la ligne :

• Classe CSS : et-comment-toggle

Ajoutez ensuite le CSS personnalisé suivant à l’élément principal :

display:flex ;
align-items:center ;

Le titre de la bascule des commentaires

Pour ajouter le titre du basculement des commentaires, ajoutez un nouveau module de texte dans la colonne de gauche.

Supprimez le faux contenu du corps et sélectionnez l’icône « Utiliser le contenu dynamique » lorsque vous passez la souris sur la zone de contenu du corps.

Dans la liste déroulante, sélectionnez « Post Comment Count ».

Dans les paramètres de « Post Comment Count », mettez à jour les éléments suivants :

Dans la zone de saisie Before, collez le HTML suivant :

Afficher/masquer les commentaires (

Dans la zone de saisie After, collez le HTML suivant :

 commentaires)

Sélectionnez NON sous l’option Lien vers la zone des commentaires.

Enregistrez ensuite les paramètres.

Sous l’onglet design, mettez à jour les éléments suivants :

• Police du texte : Rubik
• Poids de la police de texte : Medium
• Style de la police de texte : TT
• Taille du texte : 24px (ordinateur de bureau), 18px (tablette), 16px (téléphone)
• Hauteur de la ligne de texte : 1em
• Alignement du texte : Gauche
• Couleur du texte : clair

L’icône de la barre de basculement des commentaires

Pour créer l’icône de la barre de basculement des commentaires, nous allons utiliser un module de présentation qui affiche uniquement l’icône que nous souhaitons utiliser.

Ajoutez un nouveau module de présentation à la colonne de droite de la rangée.

Retirez le titre fictif et le contenu du corps, puis sélectionnez l’utilisation de l’icône plus.

Sous l’onglet design, mettez à jour les éléments suivants :

• Couleur de l’icône : #ffffff
• Taille de la police de l’icône : 40px

• Largeur : 50px
• Alignement du module : Droite
• Hauteur : 50px
• Animation des images/icônes : Aucune animation

Sous l’onglet Avancé, ajoutez le CSS personnalisé suivant à l’élément principal :

display:flex ;
align-items:center ;

Ajoutez ensuite un autre extrait CSS à l’image de présentation :

margin-bottom : 0px !important ;

Optimisation de la rangée contenant le module/contenu de commentaires

Maintenant que la barre de basculement des commentaires est complète, nous devons optimiser la rangée existante contenant le module/contenu de commentaires afin qu’elle ait la classe et l’espacement CSS nécessaires.

Tout d’abord, vous pouvez ajouter l’étiquette « Comments Toggle Content » à la rangée. Ensuite, ouvrez les paramètres de la rangée et mettez à jour l’espacement comme suit :

• Remplissage : 4 % en haut, 4 % en bas, 4 % à gauche, 4 % à droite

Sous l’onglet avancé, ajoutez la classe CSS suivante à la ligne :

• Classe CSS : et-comment-toggle-content

Ensuite, enregistrez et quittez l’éditeur de mise en page.

Et enregistrez également les modifications dans le constructeur de thème.

Ajout du code personnalisé

Le code dont nous avons besoin pour ajouter la fonctionnalité de basculement des commentaires peut être ajouté à un module de code.

Ajoutez un nouveau module de code sous le module blurb dans la rangée de la barre de basculement des commentaires que nous avons créée précédemment.

Collez ensuite le code CSS suivant en veillant à l’insérer dans les balises de style.

.et-comment-toggle .et-pb-icon {
  transition : all 300ms ;
  } 
.et-comment-toggle.open .et-pb-icon { /*Faites pivoter l'icône plus de 45 degrés lorsque la bascule s'ouvre*/
  -webkit-transform : rotate(45deg) ;
  -moz-transform : rotate(45deg) ;
  -o-transform : rotate(45deg) ;
  transform : rotate(45deg) ;
  }
.et-comment-toggle-content { /* cacher initialement le contenu de la bascule des commentaires */
  display:none ;
  }
.et-comment-toggle-content.ctc-active { /* afficher le contenu du basculement des commentaires lorsqu'il est actif */
    display:block ;
  }  
.et-fb .et-comment-toggle-content {
  display:block ;
  }
.et-comment-toggle {
  cursor:pointer ;
  }

Sous le CSS enveloppé dans les balises Puis collez le CSS suivant en veillant à envelopper le code dans les balises de style, ajoutez le code JQuery suivant en veillant à l’envelopper dans les balises Puis collez le CSS suivant en veillant à envelopper le code dans les balises de script.

function isStorageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__' ;
        storage.setItem(x, x) ;
        storage.removeItem(x) ;
        retourne vrai ;
    }
    catch(e) {
        return e instanceof DOMException && (
            // tout sauf Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // testez également le champ du nom, car le code peut ne pas être présent
            // tout sauf Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // Ne reconnaissez QuotaExceededError que si quelque chose est déjà stocké
            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() {
        // Basculez le contenu et ajoutez la classe 'ctc-active' :
        $commentToggleContent.slideToggle(300).toggleClass('ctc-active') ;

        // Ajoutez une classe pour animer l'icône de basculement :
        if ($commentToggleContent.hasClass('ctc-active')) {
            $commentToggle.addClass('open') ;
        } else {
            $commentToggle.removeClass('open') ;
        }

        // Si le stockage est disponible, définir l'élément dans le stockage de la session du navigateur
        // (pour que nous sachions qu'il faut ouvrir le bouton à bascule automatiquement
        // lorsque l'utilisateur recharge la page).
        if (isSessionStorageAvailable) {
            $commentToggleContent.hasClass('ctc-active') ?
            sessionStorage.setItem('etCommentToggleEnabled', '1') :
            sessionStorage.removeItem('etCommentToggleEnabled') ;
        }
    }) ;

    // Si le stockage est disponible, ouvrir automatiquement la bascule
    // au chargement de la page si l'élément se trouve dans la mémoire de session du navigateur.
    // Cela permet aux liens d'ancrage de fonctionner après l'ajout de
    // un commentaire ou une réponse dans le formulaire de commentaire.
    if (isSessionStorageAvailable) {
        1' == sessionStorage.getItem('etCommentToggleEnabled') ?
        $commentToggleContent.addClass('ctc-active') :
        $commentToggleContent.removeClass('ctc-active') ;
    }

    // Ouvrez le toggle si l'url a une balise de hachage et pas de stockage de session.
    // Ceci permet de s'assurer que la bascule est ouverte pour les liens entrants
    // liens d'ancrage entrants (d'une autre page) vers des commentaires spécifiques.
    if (window.location.hash) {
        $commentToggleContent.addClass('ctc-active') ;
        if (isSessionStorageAvailable) {
            sessionStorage.setItem('etCommentToggleEnabled', '1') ;
        } else {
            sessionStorage.removeItem('etCommentToggleEnabled') ;
        }
    }

    // Ajoutez une classe pour animer l'icône de basculement si nécessaire lors du rechargement de la page :
    if ($commentToggleContent.hasClass('ctc-active')) {
        $commentToggle.addClass('open') ;
    } else {
        $commentToggle.removeClass('open') ;
    }
}) ;

À propos de la fonctionnalité de basculement des commentaires

Cette fonction de basculement des commentaires est dotée de jQuery qui mémorise l’état du basculement (ouvert ou fermé) tout au long de la session de navigation de l’utilisateur. Ainsi, si l’utilisateur choisit d’afficher les commentaires et rafraîchit la page, les commentaires resteront ouverts. De même, les commentaires s’ouvriront/se montreront automatiquement lorsqu’un utilisateur soumettra un commentaire ou une réponse dans le formulaire de commentaire. C’est important, car chaque fois qu’un utilisateur soumet un commentaire, la page se recharge en fonction de sa soumission. En fait, la bascule des commentaires s’ouvrira/affichera automatiquement dès qu’un lien d’ancrage sera utilisé sur la page, au cas où vous voudriez créer un lien vers un certain commentaire à partir d’une autre page.

Résultat final

Pour voir le résultat final, il suffit d’ouvrir n’importe quel article de blog en direct sur votre site.

Réflexions finales

Nous espérons que cette fonction de basculement des commentaires sera utile pour rationaliser la conception de vos articles de blog Divi afin que les utilisateurs puissent profiter d’une présentation plus concise de l’article s’ils le souhaitent. Et, puisque le code fourni vous donne une fonctionnalité supplémentaire pour garder les commentaires visibles lorsque cela est nécessaire, vous avez une option intéressante pour ajouter des boutons de commentaires à n’importe quel modèle d’article de blog Divi sans avoir à utiliser un plugin.

J’ai hâte de lire vos commentaires.

À la vôtre !