Jak utworzyć spis treści w poście WordPress

Spis treści jest niezbędną częścią postów WordPress, zwłaszcza długich postów z wieloma nagłówkami. Stworzenie spisu treści pomaga czytelnikom łatwo i szybko śledzić i zrozumieć pomysł. Poza tym pomaga również dodawać więcej słów kluczowych w postach, co jest bardzo dobre dla SEO.

Metody tworzenia spisu treści

Istnieją 2 metody tworzenia spisu treści w poście WordPress.

Pierwsza metoda to użycie wtyczki. Jest to proste, szybkie i bezpłatne zarówno dla ekspertów kodu, jak i nowicjuszy w WordPressie.

Drugi używa kodu. To pozwala dostosować spis treści, nawet najdrobniejsze szczegóły, ale jest to dość skomplikowane dla osób niebędących koderami. W tym poście napiszemy kod do stworzenia spisu treści. Po prostu skopiuj i wklej!

Przeanalizujmy najpierw proces tworzenia spisu treści za pomocą wtyczki:

Metoda 1: Użyj wtyczki do utworzenia spisu treści

Krok 1: Utwórz i skonfiguruj zawartość spisu treści

Istnieje wiele darmowych wtyczek do tworzenia spisu treści w WordPress. Wybieramy Spis treści LuckyWP, ponieważ zapewnia nam wysoce konfigurowalny i piękny wynik. Jednak ta wtyczka ma dość wiele ustawień, które na początku mogą cię zmylić. Postępuj zgodnie z naszymi instrukcjami, aby zaoszczędzić czas.

Spis treści LuckyWP to darmowa wtyczka dostępna na wordpress.org. Wystarczy zainstalować i aktywować wtyczkę na pulpicie nawigacyjnym .

Następnie przejdź do Ustawienia > Spis treści , zobaczysz ekran ustawień.

Tutaj znajdują się 4 zakładki, na które należy zwrócić uwagę: Ogólne, Wygląd, Automatyczne wstawianie, Przetwarzanie nagłówków . Są to zakładki służące do konfigurowania i dostosowywania wyświetlania spisu treści. Różne to karta ze złożonymi i nieistotnymi ustawieniami, więc możesz ją zignorować.

W tym kroku po prostu pracujesz na karcie Ogólne .

W tej sekcji jest wiele ustawień. Aby zaoszczędzić czas, powinieneś skupić się na poniższych ważnych częściach:

• Numeracja: do numerowania nagłówków. Należy wybrać jedną z następujących opcji: Bez numeracji, Liczby dziesiętne (zagnieżdżone), Liczby rzymskie (zagnieżdżone) .

Wybieram liczby dziesiętne (zagnieżdżone) , więc mój spis treści wygląda tak:

• Tytuł: Tytuł spisu treści. Jest to zawartość domyślna.

Pozostałe ustawienia zostawmy jako domyślne, ponieważ nie ma to dużego wpływu na spis treści.

Kliknij Zapisz zmiany, aby zakończyć. Tak więc wykonaliśmy ogólne ustawienia spisu treści. Przejdźmy do następnego kroku.

Krok 2: Wstaw spis treści do postu

Istnieją 2 metody wstawiania spisu treści do posta: wstawianie automatyczne i ręczne.

Automatyczne wstawianie oznacza, że ​​spis treści jest dodawany automatycznie do wszystkich postów. W ten sposób oszczędzasz dużo czasu i wysiłku, ale nie działa, jeśli chcesz wstawić spis treści tylko do niektórych postów.

Wstawianie ręczne oznacza, że ​​jeśli chcesz mieć spis treści w poście, musisz go wstawić samodzielnie. Może to zająć więcej czasu i spowodować błędy.

Obie metody przedstawimy szczegółowo. Możesz wybrać opcję, która Ci odpowiada.

Automatyczne wstawianie

Przejdź do zakładki Automatyczne wstawianie > Włącz . Wtyczka domyślnie wybiera Post . Jeśli tego nie chcesz, możesz zmienić typ posta na inny.

W sekcji Pozycja wybierz miejsce, w którym chcesz wstawić spis treści. Nie zapomnij kliknąć Zapisz zmiany !

Tak więc wszystkie posty w wybranym typie postów mają spisy treści.

Wkładanie ręczne

Ręczne wstawianie brzmi skomplikowanie, ale w rzeczywistości jest bardzo proste. Przejdź do zakładki Przetwarzanie nagłówków . Tam również wybierz typ posta, a następnie kliknij Zapisz zmiany .

Następnie przejdź do edytora postów w wybranym typie posta i kliknij Włącz spis treści .

Teraz twój spis treści jest w zasadzie skończony. Ponadto możemy nawet stylizować jego kolor, czcionkę, rozmiar przedmiotów,… aby było ładniej. Wykonaj następny krok.

Krok 3: Dostosuj wyświetlanie spisu treści

Istnieją również 2 metody dostosowywania wyświetlania spisu treści: dostosuj go we wszystkich postach jednocześnie i indywidualnie dostosuj go w każdym poście.

Dostosuj spis treści we wszystkich postach

Możesz szczegółowo dostosować wszystkie spisy treści, przechodząc na kartę Wygląd . Istnieje wiele ustawień, takich jak rozmiar czcionki tytułu, rozmiar czcionki elementów, kolor łącza ,…

Nie trzeba zwracać uwagi na wszystkie ustawienia, po prostu skup się na tym, czego chcesz.

Na przykład nie lubię koloru niebieskiego i obecnego rozmiaru czcionki tytułu. Chcę zmienić kolor na ciemnoszary i mniejszy rozmiar, aby wyglądały lepiej z postem. Dostosuję więc rozmiar czcionki tytułu, rozmiar czcionki elementów, kolor łącza i zachowam pozostałe ustawienia, takie jak na poniższym obrazku:

Mój spis treści po dostosowaniu wygląda tak:

Teraz wygląda o wiele bardziej harmonijnie.

Być może jednak chcesz mieć różne spisy treści w różnych postach, po prostu przewiń w dół, aby przeczytać, jak dostosować go w każdym poście.

Dostosuj spis treści w każdym poście

Ta praca również jest prosta i szybka. Najpierw przejdź do edytora postów, wybierz Spis treści > Dostosuj .

Pojawi się wyskakujące okienko Dostosuj spis treści . Zobaczysz kilka znanych zakładek, jak powyżej. Są to Ogólne, Wygląd i Różne. .

Przejdź do zakładki Wygląd i zmień niektóre ustawienia, podobnie jak edycję na pulpicie nawigacyjnym wtyczki. Kliknij Zapisz, aby zakończyć!

Zobaczmy teraz końcowy efekt dostosowywania spisu treści.

Obie metody dostosowywania zapewniają bardzo ładne i szczegółowe spisy treści. Możesz więc wybrać sposób, w jaki lubisz.

Przejdźmy teraz i zobaczmy, jak używać kodu do tworzenia spisu treści.

Metoda 2: Użyj kodu, aby utworzyć spis treści.

Krok 1: Utwórz spis treści do posta

Przejdź do Wygląd > Motyw > Edytor > functions.php .

Następnie dodaj następujący kod do pliku functions.php aby wstawić spisy treści do postów.

Uwaga: ten kod ma na celu dodanie tylko 2 poziomów nagłówków do spisu treści .

 function create_toc($html) {
    $toc = '';
    jeśli (jest_single()) {
        if (!$html) zwraca $html;
        $dom = nowy DOMDocument();
        libxml_use_internal_errors (prawda);
        $dom->loadHTML(mb_convert_encoding($html, 'ELEMENTY-HTML', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                spis treści
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($element->tagName == 'h2') {
                jeśli($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0;
                    }
                 jeśli($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') {
                jeśli(!$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++;
            }
        }
        jeśli($h3_status){
            $toc .= '</ul>';
        }
        jeśli($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->zapiszHTML();
    }
    zwróć $toc . $html;
}
add_filter('the_content', 'create_toc');

Wyjaśnienie:

Nie zapomnij kliknąć pliku Update po wstawieniu kodu.

Oto wynik:

Oczywiście musimy go nieco wystylizować. Użyjemy CSS – ulubionego narzędzia wszystkich programistów.

Krok 2: Użyj CSS do dostosowania

Aby dostosować za pomocą CSS, przejdź do pliku style.css w edytorze motywów . Tam musisz wstawić kod, który sam napisałeś, aby dostosować spis treści, jak chcesz.

Na przykład chcę dostosować kolor i intensywność spisu treści, więc wstawię następujący kod:

 .toc powiązane {
    kolor tła: #619162;
    kolor: #fff;
}
.toc-ctr {
    border-bottom: 1px solid #fff;
    wypełnienie: 10px;
    rozmiar czcionki: 20px;
    transformacja tekstu: wielkie litery;
}
ul.toc {
    typ-listy: brak;
    wypełnienie: 10px;
    dopełnienie lewe: 25px;
}
.toc li a {
    kolor: #fff;
}
ul.toc > li {
    rozmiar czcionki: 18px;
    grubość czcionki: 700;
    dopełnienie: 5px 0;
}
ul.toc-sub {
    typ-listy: brak;
}
ul.toc-sub li a {
    grubość czcionki: 200;
}

Nie zapomnij kliknąć pliku aktualizacji, aby go zapisać.

Ostateczny wynik wygląda tak:

Podsumowując, zarówno używanie wtyczki, jak i kodowanie dają nam te same ładne spisy treści. Możesz wybrać dowolną opcję, o ile jesteś zadowolony.

Ostatnie słowa

Jak widać, tworzenie spisu treści w postach WordPress wcale nie jest skomplikowane. Postępuj zgodnie z naszym samouczkiem, a będziesz mieć piękne spisy treści. Dobry spis treści sprawi, że Twój post będzie bardziej przejrzysty i profesjonalny. Dzięki temu Twoi widzowie mogą mieć bardziej przyjazne wrażenia podczas czytania Twojego bloga.

Jeśli masz jakieś pytania, podaj je w poniższym polu komentarza.