Come creare un sommario in un post di WordPress

Un sommario è una parte necessaria dei post di WordPress, in particolare i post lunghi con molte intestazioni. La creazione di un sommario aiuta i lettori a seguire e afferrare l'idea in modo facile e veloce. Inoltre, ti aiuta anche ad aggiungere più parole chiave nei post, il che è molto utile per la SEO.

Metodi per creare un sommario

Esistono 2 metodi per creare un sommario in un post di WordPress.

Il primo metodo è usare un plugin. È semplice, veloce e gratuito sia per gli esperti di codice che per i neofiti in WordPress.

Il secondo sta usando il codice. Ciò ti consente di personalizzare il tuo sommario, anche i più piccoli dettagli, ma è piuttosto complicato per i non programmatori. Scriveremo il codice per creare un sommario in questo post. Basta copiarlo e incollarlo!

Esaminiamo prima il processo di creazione di un sommario con un plug-in:

Metodo 1: utilizzare un plug-in per creare un sommario

Passaggio 1: creare e impostare i contenuti per il sommario

Esistono molti plugin gratuiti per creare un sommario in WordPress. Scegliamo LuckyWP Table of Contents perché ci fornisce un risultato altamente personalizzabile e bello. Tuttavia, questo plugin ha molte impostazioni, che all'inizio potrebbero confonderti. Quindi, segui le nostre istruzioni per risparmiare tempo.

LuckyWP Table of Contents è un plugin gratuito e disponibile su wordpress.org. Devi solo installare e attivare il plugin su Dashboard .

Quindi, vai su Impostazioni > Sommario , vedrai la schermata delle impostazioni.

Qui ci sono 4 schede a cui devi prestare attenzione: Generale, Aspetto, Inserimento automatico, Elaborazione intestazioni . Sono schede utilizzate per impostare e personalizzare la visualizzazione del sommario. Varie è una scheda con impostazioni complesse e non importanti, quindi puoi ignorarla.

In questo passaggio, lavori semplicemente sulla scheda Generale .

Ci sono molte impostazioni in questa sezione. Per risparmiare tempo, dovresti concentrarti sulle parti importanti di seguito:

• Numerazione: per numerare le intestazioni. Dovresti sceglierne una tra queste opzioni: Senza numerazione, Numeri decimali (nidificati), Numeri romani (nidificati) .

Scelgo i numeri decimali (nidificati) , quindi il mio sommario è simile a questo:

• Titolo: titolo del sommario. È Contenuto in default.

Lasciamo il resto delle impostazioni come predefinito, perché ciò non influisce molto sul tuo sommario.

Fare clic su Salva modifiche per terminare. Quindi, abbiamo fatto le impostazioni generali del TOC. Passiamo al passaggio successivo.

Passaggio 2: inserire il sommario nel post

Ci sono 2 metodi per inserire un sommario nel tuo post: inserimento automatico e manuale.

L'inserimento automatico significa che un sommario viene aggiunto automaticamente in tutti i post. In questo modo si risparmia molto tempo e fatica, ma non funziona se si desidera inserire un sommario solo in alcuni post.

L'inserimento manuale significa che se vuoi avere un sommario in un post, devi inserirlo tu stesso in quel post. Questo potrebbe richiedere più tempo e potrebbe commettere errori.

Introdurremo entrambi i metodi in dettaglio. Puoi scegliere l'opzione che fa per te.

Inserimento automatico

Vai alla scheda Inserimento automatico > Abilita . Il plugin sceglie Post come predefinito. Se non lo desideri, puoi passare a un altro tipo di post.

Nella sezione Posizione , scegli dove vuoi inserire il sommario. Non dimenticare di fare clic su Salva modifiche !

Quindi, tutti i post nel tipo di post scelto hanno i sommari.

Inserimento manuale

L'inserimento manuale dei suoni è complicato, ma in realtà è molto semplice. Vai alla scheda Intestazioni di elaborazione . Lì, scegli anche il tipo di post, quindi fai clic su Salva modifiche .

Quindi, vai all'editor dei post di un post nel tipo di post che hai scelto, fai clic su Abilita sommario .

Ora, il tuo sommario è praticamente finito. Inoltre, possiamo persino modellare il suo colore, carattere, dimensione degli elementi, ... per renderlo più carino. Segui il passaggio successivo.

Passaggio 3: personalizzare la visualizzazione del sommario

Esistono anche 2 metodi per personalizzare la visualizzazione del sommario: personalizzarlo in tutti i post contemporaneamente e personalizzarlo individualmente in ogni post.

Personalizza il sommario in Tutti i post

Puoi personalizzare tutti i sommari in dettaglio andando sulla scheda Aspetto . Ci sono molte impostazioni come Dimensione carattere titolo, Dimensione carattere elementi, Colore collegamento ,...

Non è necessario notare tutte le impostazioni, concentrati solo su ciò che desideri.

Ad esempio, non mi piace il blu e la dimensione del carattere del titolo corrente. Voglio cambiare il colore in grigio scuro e taglia più piccola in modo che appaiano meglio con il post. Quindi, personalizzerò la dimensione del carattere del titolo, la dimensione del carattere degli elementi, il colore del collegamento e manterrò le altre impostazioni come l'immagine qui sotto:

Il mio sommario dopo la personalizzazione è simile a questo:

Ora sembra molto più armonioso.

Tuttavia, forse vuoi avere diversi sommari in diversi post, scorri verso il basso per leggere come personalizzarlo in ogni post.

Personalizza il sommario in ogni post

Anche questo lavoro è semplice e veloce. Per prima cosa, vai all'editor dei post, scegli Sommario > Personalizza .

Viene visualizzato un popup Personalizza sommario . Vedrai alcune schede familiari come sopra. Sono Generale, Aspetto e Varie. .

Vai alla scheda Aspetto e modifica alcune impostazioni analogamente alla modifica su Dashboard del plug-in. Fare clic su Salva per finire!

Ora, vediamo il risultato finale della personalizzazione del sommario.

Entrambi i metodi di personalizzazione portano sommari molto carini e dettagliati. Quindi sei libero di scegliere come preferisci.

Ora andiamo a vedere come utilizzare il codice per creare un sommario.

Metodo 2: utilizzare il codice per creare un sommario.

Passaggio 1: crea il sommario per il post

Vai su Aspetto > Tema > Editor > functions.php .

Quindi, aggiungi il seguente codice nel file functions.php per inserire i sommari nei post.

Nota: questo codice serve per aggiungere solo 2 livelli di intestazione nel sommario .

 funzione create_toc($html) {
    $toc = '';
    if (is_single()) {
        if (!$html) restituisce $html;
        $dom = new DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                sommario
            </div>
            <ul class="toc">';
        $h2_stato = 0;
        $h3_stato = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($elemento->tagName == 'h2') {
                if($h3_stato){
                    $toc .= '</ul>';
                    $h3_stato = 0;
                    }
                 if($h2_stato){
                    $toc .= '</li>';
                    $h2_stato = 0;
                  }
                  $h2_stato = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $elemento->textContent . '</a>';
                  $elemento->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($elemento->tagName == 'h3') {
                if(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_stato = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $elemento->textContent . '</a></li>';
                $elemento->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        if($h3_stato){
            $toc .= '</ul>';
        }
        if($h2_stato){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    ritorna $toc . $html;
}
add_filter('the_content', 'create_toc');

Spiegazione:

Non dimenticare di fare clic sul file Aggiorna dopo aver inserito il codice.

Allora, ecco il risultato:

Certo, dobbiamo modellarlo un po'. Useremo i CSS, uno strumento preferito da tutti i programmatori.

Passaggio 2: usa CSS per personalizzare

Per personalizzare tramite CSS, vai al file style.css nell'editor dei temi . Lì, devi inserire il codice che scrivi da solo per personalizzare il sommario come preferisci.

Ad esempio, voglio personalizzare il colore e l'intensità del sommario, quindi inserirò il seguente codice:

 .toc-bound {
    colore di sfondo: #619162;
    colore: #fff;
}
.toc-ctr {
    bordo-basso: 1px solido #fff;
    imbottitura: 10px;
    dimensione del carattere: 20px;
    text-transform: maiuscolo;
}
ul.toc {
    list-style-type: nessuno;
    imbottitura: 10px;
    padding-left: 25px;
}
.toc li a {
    colore: #fff;
}
ul.toc > li {
    dimensione del carattere: 18px;
    peso del carattere: 700;
    imbottitura: 5px 0;
}
ul.toc-sub {
    list-style-type: nessuno;
}
ul.toc-sub li a {
    peso del carattere: 200;
}

Non dimenticare di fare clic sul file Aggiorna per salvarlo.

Il risultato finale assomiglia a questo:

In conclusione, sia l'utilizzo di un plug-in che la codifica ci danno gli stessi bei sommari. Puoi scegliere qualsiasi opzione purché tu sia soddisfatto.

Ultime parole

Come puoi vedere, la creazione di un sommario nei post di WordPress non è affatto complessa. Segui il nostro tutorial e avrai bellissimi sommari. Un buon sommario rende il tuo post più chiaro e professionale. Pertanto, i tuoi spettatori potrebbero avere esperienze più amichevoli durante la lettura del tuo blog.

Se hai domande, ti preghiamo di fornirle nella casella dei commenti qui sotto.