Come creare un commutatore di commenti per il tuo modello di post sul blog Divi

I commenti sono una parte importante di qualsiasi modello di post di blog. Tuttavia, per alcuni visitatori, una lunga sezione di commenti può diventare un problema ogni volta che cercano di scorrere il resto del contenuto del post. La creazione di un interruttore per i commenti è un'ottima soluzione a questo problema. Dando agli utenti la possibilità di attivare (mostrare o nascondere) i commenti, puoi migliorare l'esperienza dell'utente fornendo inizialmente una versione più concisa del tuo post e fornendo loro la possibilità di mostrare o nascondere i commenti ogni volta che lo desiderano.

In questo tutorial, ti mostreremo come creare un interruttore di commento per i commenti del modello di post sul blog Divi. Una volta creata la barra di commutazione dei commenti utilizzando Divi Builder, aggiungeremo il codice necessario per mostrare/nascondere l'area dei commenti quando si fa clic sulla barra di commutazione.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il modello GRATIS

Per mettere le mani sui commenti attiva/disattiva il modello di post di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Come caricare il modello di download gratuito

Vai a Divi Theme Builder

Per caricare il modello, vai al Divi Theme Builder nel backend del tuo sito Web WordPress.

Carica modello di sito web

Quindi, nell'angolo in alto a destra, vedrai un'icona con due frecce. Fare clic sull'icona.

Passa alla scheda di importazione, carica il file JSON che sei stato in grado di scaricare in questo post e fai clic su "Importa modelli Divi Theme Builder".

Salva le modifiche al generatore di temi Divi

Una volta caricato il file, noterai un nuovo modello con una nuova area del corpo che è stata assegnata a Tutti i post. Salva le modifiche di Divi Theme Builder non appena desideri che il modello venga attivato.

Passiamo al tutorial così possiamo imparare a costruire questa cosa da zero, vero?

Come creare un commutatore di commenti per il tuo modello di post sul blog Divi

Caricamento del modello di post sul blog Theme Builder Pack 5

Per iniziare, faremo un salto nel design aggiungendo uno dei nostri modelli di post di blog predefiniti. Per importare il modello in Theme Builder, dovrai fare quanto segue:

1. Passa a Divi Theme Builder
2. Fare clic sull'icona della portabilità in alto a destra della pagina.
3. Seleziona la scheda Importa nel popup Portabilità.
4. Scarica e importa il file modello di prodotto Divi Divi Theme Builder 5. Una volta scaricato il pacchetto qui, decomprimi il file e troverai il file "divi-theme-builder-pack-5-post-template.json" che dovrai importare.
5. Fare clic sul pulsante Importa
6. Una volta che il modello è stato importato, fare clic sull'icona di modifica nell'area del corpo personalizzata del modello per modificare il layout del modello.

Creazione della barra di commutazione dei commenti

Il nostro primo passo è creare la barra dei commenti che alla fine mostrerà/nasconderà i commenti. Per fare ciò, creeremo una nuova riga sopra la riga che contiene il modulo/contenuto dei commenti. Quindi riempiremo la riga con il titolo e l'icona dell'interruttore per completare il design.

Aggiungi riga

Vai avanti e scorri fino alla fine del layout predefinito e aggiungi una nuova riga direttamente sotto la riga contenente il modulo dei commenti.

Trascina la nuova riga sopra la riga dei commenti.

Quindi aggiungi l'etichetta, "Comments Toggle Bar", alla riga all'interno della vista dei livelli per una facile identificazione in seguito.

Impostazioni riga

Apri le impostazioni per la nuova riga e aggiungi il seguente sfondo:

• Colore di sfondo: #624de3

Nella scheda Progettazione, aggiorna quanto segue:

• Angoli arrotondati: 10px

• Larghezza grondaia: 1
• Larghezza massima: 1180 px
• Imbottitura: 10px in alto, 10px in basso, 5% a sinistra, 5% a destra

Nella scheda Avanzate, aggiungi la seguente Classe CSS alla riga:

• Classe CSS: et-comment-toggle

Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

display:flex;
align-items:center;

I commenti Cambia titolo

Per aggiungere il titolo dell'interruttore dei commenti, aggiungi un nuovo modulo di testo alla colonna di sinistra.

Elimina il contenuto del corpo fittizio e seleziona l'icona "Usa contenuto dinamico" quando passi con il mouse sulla casella del contenuto del corpo.

Dall'elenco a discesa, seleziona "Conteggio commenti post".

Nelle impostazioni Conteggio commenti post, aggiorna quanto segue:

Nella casella di input Prima incolla il seguente codice HTML:

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

Nella casella di input Dopo, incolla il seguente codice HTML:

 comments)</span>

Selezionare NO sotto l'opzione Collegamento all'area commenti.

Quindi salvare le impostazioni.

Nella scheda Progettazione, aggiorna quanto segue:

• Carattere del testo: Rubik
• Peso del carattere del testo: medio
• Stile del carattere del testo: TT
• Testo Dimensioni testo: 24 px (desktop), 18 px (tablet), 16 px (telefono)
• Altezza riga di testo: 1em
• Allineamento del testo: a sinistra
• Colore del testo: chiaro

L'icona della barra di commutazione dei commenti

Per creare l'icona della barra di commutazione dei commenti, utilizzeremo un modulo blurb che visualizza solo l'icona che vogliamo usare.

Aggiungi un nuovo modulo blurb alla colonna di destra della riga.

Elimina il titolo fittizio e il contenuto del corpo, quindi seleziona per utilizzare l'icona più.

Nella scheda Progettazione, aggiorna quanto segue:

• Colore icona: #ffffff
• Dimensione carattere icona: 40px

• Larghezza: 50px
• Allineamento del modulo: a destra
• Altezza: 50 px
• Animazione immagine/icona: nessuna animazione

Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'elemento principale:

display:flex;
align-items:center;

Quindi aggiungi un altro frammento CSS all'immagine Blurb:

margin-bottom: 0px !important;

Ottimizzazione della riga con il modulo/contenuto dei commenti

Ora che la barra dei commenti è completa, dobbiamo ottimizzare la riga esistente contenente il modulo/contenuto dei commenti in modo che abbia la classe CSS e la spaziatura necessarie.

Innanzitutto, puoi aggiungere l'etichetta "Comments Toggle Content" alla riga. Quindi apri le impostazioni della riga e aggiorna il padding come segue:

• Imbottitura 4% in alto, 4% in basso, 4% a sinistra, 4% a destra

Nella scheda Avanzate, aggiungi la seguente Classe CSS alla riga:

• Classe CSS: et-comment-toggle-content

Quindi salva ed esci dall'editor di layout.

E salva anche le modifiche nel generatore di temi.

Aggiunta del codice personalizzato

Il codice di cui abbiamo bisogno per aggiungere la funzionalità di commutazione per i commenti può essere aggiunto a un modulo di codice.

Aggiungi un nuovo modulo di codice sotto il modulo blurb nella riga della barra di commutazione dei commenti che abbiamo creato in precedenza.

Quindi incolla il seguente CSS assicurandoti di racchiudere il codice nei tag di stile .

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

Sotto il CSS avvolto nel Quindi incolla il seguente CSS assicurandoti di avvolgere il codice nei tag di stile , aggiungi il seguente codice JQuery assicurandoti di avvolgerlo nel Quindi incolla il seguente CSS assicurandoti di avvolgere il codice nello script tag.

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

Informazioni sulla funzionalità di commutazione dei commenti

Questo interruttore dei commenti ha jQuery che ricorderà lo stato dell'interruttore (aperto o chiuso) durante la sessione del browser dell'utente. Quindi, se l'utente sceglie di mostrare i commenti e aggiorna la pagina, i commenti rimarranno aperti. Inoltre, i commenti si apriranno/mostrano automaticamente ogni volta che un utente invia un commento o risponde nel modulo di commento. Questo è importante perché ogni volta che un utente invia un commento, la pagina ricaricherà una pergamena al suo invio. In effetti, l'interruttore dei commenti si aprirà/mostrerà automaticamente ogni volta che viene utilizzato un collegamento di ancoraggio sulla pagina, nel caso in cui desideri collegarti a un determinato commento da un'altra pagina.

Risultato finale

Per controllare il risultato finale, apri semplicemente qualsiasi post del blog live sul tuo sito.

Pensieri finali

Si spera che questo interruttore dei commenti torni utile per semplificare il design dei post del tuo blog Divi in ​​modo che gli utenti possano godere di un layout più conciso del post, se lo desiderano. E, poiché il codice fornito ti offre funzionalità aggiuntive per mantenere i commenti visibili quando necessario, hai una bella opzione per aggiungere interruttori di commento a qualsiasi modello di post di blog Divi senza dover utilizzare un plug-in.

Non vedo l'ora di sentirti nei commenti.

Saluti!