Cum se creează un tabel de conținut în WordPress Post

Un cuprins este o parte necesară a postărilor WordPress, în special a postărilor lungi cu multe titluri. Crearea unui cuprins îi ajută pe cititori să urmărească și să înțeleagă ideea ușor și rapid. În plus, vă ajută să adăugați mai multe cuvinte cheie în postări, ceea ce este foarte bun pentru SEO.

Metode de creare a unui cuprins

Există 2 metode de a crea un cuprins într-o postare WordPress.

Prima metodă este utilizarea unui plugin. Acest lucru este simplu, rapid și gratuit atât pentru experții în cod, cât și pentru începătorii din WordPress.

Al doilea folosește codul. Asta vă permite să vă personalizați cuprinsul, chiar și cele mai mici detalii, dar este destul de complicat pentru non-coder. Vom nota codul pentru a crea un cuprins în această postare. Doar copiați și lipiți-l!

Să parcurgem mai întâi procesul de creare a unui cuprins cu un plugin:

Metoda 1: Utilizați un plugin pentru a crea un cuprins

Pasul 1: Creați și configurați conținutul pentru Cuprins

Există multe plugin-uri gratuite pentru crearea unui cuprins în WordPress. Alegem LuckyWP Cuprins pentru că ne oferă un rezultat extrem de personalizabil și frumos. Cu toate acestea, acest plugin are destul de multe setări, ceea ce vă poate deruta la început. Deci, urmați instrucțiunile noastre pentru a vă economisi timp.

Cuprins LuckyWP este un plugin gratuit și disponibil pe wordpress.org. Doar instalați și activați pluginul pe Dashboard .

Apoi, accesați Setări > Cuprins , veți vedea ecranul de setări.

Aici, există 4 file cărora trebuie să le acordați atenție: General, Aspect, Inserare automată, Procesare titluri . Sunt file folosite pentru a configura și personaliza afișarea cuprinsului. Diverse este o filă cu setări complexe și neimportante, așa că o puteți ignora.

În acest pas, lucrezi doar la fila General .

Există o mulțime de setări în această secțiune. Pentru a economisi timp, ar trebui să vă concentrați pe următoarele părți importante:

• Numerare: Pentru a numerota titlurile. Ar trebui să alegeți una dintre aceste opțiuni: Fără numerație, Numere zecimale (imbricate), Numere romane (imbricate) .

Aleg Numere zecimale (imbricate) , deci TOC arată astfel:

• Titlu: Titlul cuprinsului. Este Conținut în mod implicit.

Să lăsăm restul setărilor ca implicite, pentru că asta nu vă afectează prea mult TOC.

Faceți clic pe Salvați modificările pentru a finaliza. Deci, am făcut setări generale ale TOC. Să trecem la pasul următor.

Pasul 2: Introduceți Cuprinsul în Postare

Există 2 metode de a insera un cuprins în postarea dvs.: inserarea automată și manuală.

Inserarea automată înseamnă că un cuprins este adăugat automat în toate postările. În acest fel, economisește mult timp și efort, dar nu funcționează dacă vrei să inserezi un TOC doar în unele postări.

Inserarea manuală înseamnă că dacă doriți să aveți un TOC într-o postare, trebuie să îl introduceți singur în acea postare. Acest lucru poate dura mai mult timp și poate face greșeli.

Vom introduce ambele metode în detaliu. Poti alege varianta care ti se potriveste.

Se introduce automat

Accesați fila Inserare automată > Activare . Pluginul alege Postare ca prestabilit. Dacă nu doriți, puteți trece la alt tip de postare.

În secțiunea Poziție , alegeți unde doriți să inserați cuprinsul. Nu uitați să faceți clic pe Salvați modificările !

Deci, toate postările din tipul de postare ales au cuprins.

Introducere manuală

Introducerea manuală a sunetelor pare complicată, dar de fapt este foarte simplă. Accesați fila Procesare titluri . Acolo, alegeți și tipul postării, apoi faceți clic pe Salvați modificările .

Apoi, accesați editorul de postări al unei postări din tipul de postare pe care l-ați ales, faceți clic pe Activare TOC .

Acum, TOC-ul tău este practic gata. În plus, îi putem stila chiar și culoarea, fontul, dimensiunea articolelor,... pentru a-l face mai frumos. Urmați pasul următor.

Pasul 3: Personalizați afișarea cuprinsului

Există, de asemenea, 2 metode de a personaliza afișarea cuprinsului: personalizați-l în toate postările simultan și personalizați-l individual în fiecare postare.

Personalizați cuprinsul în Toate postările

Puteți personaliza toate cuprinsul în detaliu accesând fila Aspect . Există multe setări, cum ar fi Dimensiunea fontului titlului, Dimensiunea fontului articolelor, Culoarea linkului ,...

Este inutil să observați toate setările, concentrați-vă doar pe ceea ce doriți.

De exemplu, nu-mi place albastrul și dimensiunea actuală a fontului titlului. Vreau să schimb culoarea în gri închis și dimensiuni mai mici, astfel încât să arate mai bine cu post. Deci, voi personaliza dimensiunea fontului titlului, dimensiunea fontului articolelor, culoarea linkului și voi păstra restul setărilor ca în imaginea de mai jos:

TOC-ul meu după personalizare arată astfel:

Acum, pare mult mai armonios.

Cu toate acestea, poate doriți să aveți diferite cuprinsuri în diferite postări, derulați în jos pentru a citi cum să le personalizați în fiecare postare.

Personalizați cuprinsul fiecărei postări

Această lucrare este, de asemenea, simplă și rapidă. Mai întâi, accesați editorul de postări, alegeți Cuprins > Personalizare .

Apare o fereastră pop-up Personalizare cuprins . Veți vedea câteva file familiare ca mai sus. Sunt General, Aspect și Diverse. .

Accesați fila Aspect și modificați unele setări, de asemenea, editând pe tabloul de bord al pluginului. Faceți clic pe Salvați pentru a finaliza!

Acum, să vedem rezultatul final al personalizării cuprinsului.

Ambele metode de personalizare aduc un cuprins foarte frumos și detaliat. Așa că ești liber să alegi cum îți place.

Acum, haideți să vedem cum să folosiți codul pentru a crea un cuprins.

Metoda 2: Utilizați codul pentru a crea un cuprins.

Pasul 1: Creați Cuprinsul pentru Postare

Accesați Aspect > Tema > Editor > functions.php .

Apoi, adăugați următorul cod în fișierul functions.php pentru a insera cuprins în postări.

Notă: acest cod este pentru a adăuga doar 2 niveluri de titlu în cuprinsul .

 funcția create_toc($html) {
    $toc = '';
    dacă (este_singure()) {
        dacă (!$html) returnează $html;
        $dom = nou DOMDocument();
        libxml_use_internal_errors(adevărat);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                cuprins
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') ca $element) {
            if($element->tagName == 'h2') {
                if($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0;
                    }
                 if($h2_status){
                    $toc .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . „</a>”;
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                dacă(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        if($h3_status){
            $toc .= '</ul>';
        }
        if($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    return $toc . $html;
}
add_filter('the_content', 'create_toc');

Explicaţie:

Nu uitați să faceți clic pe Actualizare fișier după introducerea codului.

Apoi, iată rezultatul:

Desigur, trebuie să-l stilăm puțin. Vom folosi CSS – un instrument preferat al tuturor codificatorilor.

Pasul 2: Utilizați CSS pentru a personaliza

Pentru a personaliza prin CSS, accesați fișierul style.css în Editorul de teme . Acolo, trebuie să inserați codul pe care îl scrieți singur pentru a personaliza TOC după cum doriți.

De exemplu, vreau să personalizez culoarea și intensitatea cuprinsului, așa că voi introduce următorul cod:

 .toc-bound {
    culoare de fundal: #619162;
    culoare: #fff;
}
.toc-ctr {
    chenar-jos: 1px solid #fff;
    umplutură: 10px;
    dimensiunea fontului: 20px;
    text-transform: majuscule;
}
ul.toc {
    list-style-type: niciunul;
    umplutură: 10px;
    padding-stânga: 25px;
}
.toc li a {
    culoare: #fff;
}
ul.toc > li {
    dimensiunea fontului: 18px;
    greutate font: 700;
    umplutură: 5px 0;
}
ul.toc-sub {
    list-style-type: niciunul;
}
ul.toc-sub li a {
    greutate font: 200;
}

Nu uitați să faceți clic pe Actualizare fișier pentru a-l salva.

Rezultatul final arată astfel:

În concluzie, atât utilizarea unui plugin, cât și codarea ne oferă aceleași cuprinsuri frumoase. Puteți alege orice opțiune atâta timp cât sunteți mulțumit.

Ultimele Cuvinte

După cum puteți vedea, crearea unui cuprins în postările WordPress nu este deloc complexă. Urmați tutorialul nostru și veți avea un cuprins frumos. Un cuprins bun vă face postarea mai clară și mai profesionistă. Astfel, spectatorii pot avea experiențe mai prietenoase atunci când vă citesc blogul.

Dacă aveți întrebări, vă rugăm să le trimiteți în caseta de comentarii de mai jos.