Cara Membuat Daftar Isi di Postingan WordPress

Daftar isi adalah bagian penting dari posting WordPress, terutama posting panjang dengan banyak judul. Membuat daftar isi membantu pembaca mengikuti dan memahami ide dengan mudah dan cepat. Selain itu, ini juga membantu Anda menambahkan lebih banyak kata kunci dalam posting, yang sangat bagus untuk SEO.

Metode untuk Membuat Daftar Isi

Ada 2 metode untuk membuat daftar isi di postingan WordPress.

Cara pertama adalah dengan menggunakan plugin. Itu sederhana, cepat dan gratis untuk ahli kode dan pemula di WordPress.

Yang kedua menggunakan kode. Itu memungkinkan Anda menyesuaikan daftar isi Anda, bahkan detail terkecil, tetapi cukup rumit untuk non-coder. Kami akan menuliskan kode untuk membuat daftar isi di postingan ini. Cukup salin dan tempel!

Mari kita telusuri proses membuat daftar isi dengan plugin terlebih dahulu:

Metode 1: Gunakan Plugin untuk Membuat Daftar Isi

Langkah 1: Buat dan Siapkan Isi untuk Daftar Isi

Ada banyak plugin gratis untuk membuat daftar isi di WordPress. Kami memilih Daftar Isi LuckyWP karena memberikan kami hasil yang sangat dapat disesuaikan dan indah. Namun, plugin ini memiliki cukup banyak pengaturan, yang mungkin membingungkan Anda pada awalnya. Jadi, ikuti instruksi kami untuk menghemat waktu Anda.

Daftar Isi LuckyWP adalah plugin gratis dan tersedia di wordpress.org. Anda tinggal menginstal dan mengaktifkan plugin di Dashboard .

Kemudian, buka Pengaturan > Daftar Isi , Anda akan melihat layar pengaturan.

Di sini, ada 4 tab yang perlu Anda perhatikan: General, Appearance, Auto Insert, Processing headings . Mereka adalah tab yang digunakan untuk mengatur dan menyesuaikan tampilan daftar isi. Lain-lain adalah tab yang memiliki pengaturan kompleks dan tidak penting, sehingga Anda dapat mengabaikannya.

Pada langkah ini, Anda hanya bekerja pada tab Umum .

Ada banyak pengaturan di bagian ini. Untuk menghemat waktu, Anda harus fokus pada bagian-bagian penting di bawah ini:

• Penomoran: Untuk memberi nomor pada judul. Anda harus memilih salah satu dari opsi berikut: Tanpa penomoran, Angka desimal (bersarang), Angka Romawi (bersarang) .

Saya memilih angka Desimal (bersarang) , jadi TOC saya terlihat seperti ini:

• Judul : Judul daftar isi. Ini adalah Isi secara default.

Biarkan sisa pengaturan sebagai default, karena itu tidak banyak mempengaruhi TOC Anda.

Klik Simpan Perubahan untuk menyelesaikan. Jadi, kami telah melakukan pengaturan umum TOC. Mari kita lanjutkan ke langkah berikutnya.

Langkah 2: Masukkan Daftar Isi di Posting

Ada 2 metode untuk menyisipkan daftar isi dalam posting Anda: memasukkan secara otomatis dan manual.

Memasukkan secara otomatis berarti daftar isi ditambahkan di semua posting secara otomatis. Cara ini menghemat banyak waktu dan tenaga, tetapi tidak berhasil jika Anda ingin memasukkan TOC hanya ke beberapa posting.

Memasukkan secara manual berarti jika Anda ingin memiliki TOC dalam sebuah postingan, Anda harus memasukkannya sendiri ke dalam postingan tersebut. Ini mungkin membutuhkan lebih banyak waktu dan bisa membuat kesalahan.

Kami akan memperkenalkan kedua metode secara rinci. Anda dapat memilih opsi yang cocok untuk Anda.

Memasukkan Secara Otomatis

Buka tab Sisipkan Otomatis > Aktifkan . Plugin memilih Posting sebagai default. Jika Anda tidak menginginkannya, Anda dapat mengubah ke jenis posting lain.

Di bagian Posisi , pilih tempat Anda ingin menyisipkan daftar isi. Jangan lupa klik Simpan Perubahan !

Jadi, semua posting dalam jenis posting yang dipilih memiliki daftar isi.

Memasukkan Secara Manual

Memasukkan secara manual terdengar rumit, tetapi sebenarnya sangat sederhana. Buka tab Memproses Judul . Di sana, pilih juga jenis posting, lalu klik Simpan Perubahan .

Kemudian, pergi ke editor posting dari sebuah posting di jenis posting yang Anda pilih, klik Aktifkan TOC .

Sekarang, TOC Anda pada dasarnya sudah selesai. Selain itu, kita bahkan dapat menata warna, font, ukuran item,… agar lebih cantik. Ikuti langkah selanjutnya.

Langkah 3: Sesuaikan Tampilan Daftar Isi

Ada juga 2 metode untuk menyesuaikan tampilan daftar isi: menyesuaikannya di semua posting sekaligus dan menyesuaikannya secara individual di setiap posting.

Sesuaikan Daftar Isi di Semua Posting

Anda dapat menyesuaikan semua daftar isi secara detail dengan membuka tab Appearance . Ada banyak pengaturan seperti Ukuran Font Judul, Ukuran Font Item, Warna Tautan ,…

Tidak perlu memperhatikan semua pengaturan, cukup fokus pada apa yang Anda inginkan.

Misalnya, saya tidak suka warna biru dan ukuran font judul saat ini. Saya ingin mengubah warna menjadi abu-abu gelap dan ukuran yang lebih kecil agar terlihat lebih baik dengan posting. Jadi, saya akan menyesuaikan Ukuran Font Judul, Ukuran Font Item, Warna Tautan dan menyimpan pengaturan lainnya seperti gambar di bawah ini:

TOC saya setelah menyesuaikan terlihat seperti ini:

Sekarang, terlihat jauh lebih harmonis.

Namun, mungkin Anda ingin memiliki daftar isi yang berbeda di postingan yang berbeda, cukup scroll ke bawah untuk membaca cara menyesuaikannya di setiap postingan.

Sesuaikan Daftar Isi di Setiap Posting

Pekerjaan ini juga sederhana dan cepat. Pertama, buka editor posting, pilih Daftar Isi > Sesuaikan .

Popup Daftar Isi Kustomisasi muncul. Anda akan melihat beberapa tab yang familiar seperti di atas. Mereka adalah Umum, Penampilan dan Lain - lain. .

Buka tab Appearance dan ubah beberapa pengaturan seperti halnya mengedit di Dashboard plugin. Klik Simpan untuk menyelesaikan!

Sekarang, mari kita lihat hasil akhir dari kustomisasi daftar isi.

Kedua metode penyesuaian menghadirkan daftar isi yang sangat cantik dan terperinci. Jadi Anda bebas memilih cara yang Anda suka.

Sekarang, mari kita lihat bagaimana menggunakan kode untuk membuat daftar isi.

Metode 2: Gunakan Kode untuk Membuat Daftar Isi.

Langkah 1: Buat Daftar Isi untuk Posting

Pergi ke Appearance > Theme > Editor > functions.php .

Kemudian, tambahkan kode berikut ke dalam file functions.php untuk menyisipkan daftar isi ke dalam posting.

Catatan: Kode ini hanya untuk menambahkan 2 level heading ke dalam daftar isi .

 fungsi create_toc($html) {
    $tok = '';
    jika (is_single()) {
        if (!$html) mengembalikan $html;
        $dom = DOMDocument baru();
        libxml_use_internal_errors(benar);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                Daftar isi
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') sebagai $elemen) {
            if($element->tagName == 'h2') {
                jika($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0;
                    }
                 jika($h2_status){
                    $toc .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $elemen->textContent . '</a>';
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                jika(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $elemen->textContent . '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        jika($h3_status){
            $toc .= '</ul>';
        }
        jika($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    kembali $toc . $html;
}
add_filter('isi_konten', 'buat_toc');

Penjelasan:

Jangan lupa klik file Update setelah memasukkan kode.

Lalu, inilah hasilnya:

Tentu saja, kita perlu sedikit menatanya. Kami akan menggunakan CSS – alat favorit semua pembuat kode.

Langkah 2: Gunakan CSS untuk Menyesuaikan

Untuk menyesuaikan dengan CSS, buka file style.css di Editor Tema . Di sana, Anda perlu memasukkan kode yang Anda tulis sendiri untuk menyesuaikan TOC sesuka Anda.

Misalnya, saya ingin menyesuaikan warna dan intensitas daftar isi, jadi saya akan memasukkan kode berikut:

 .toc-terikat {
    warna latar: #619162;
    warna: #ff;
}
.toc-ctr {
    border-bottom: 1px solid #fff;
    bantalan: 10 piksel;
    ukuran font: 20px;
    transformasi teks: huruf besar;
}
ul.toc {
    list-style-type: tidak ada;
    bantalan: 10 piksel;
    padding-kiri: 25px;
}
.toc li a {
    warna: #ff;
}
ul.toc > li {
    ukuran font: 18px;
    font-berat: 700;
    bantalan: 5 piksel 0;
}
ul.toc-sub {
    list-style-type: tidak ada;
}
ul.toc-sub li a {
    font-berat: 200;
}

Jangan lupa klik file Update untuk menyimpannya.

Hasil akhirnya terlihat seperti ini:

Kesimpulannya, baik menggunakan plugin dan pengkodean memberi kita daftar isi cantik yang sama. Anda dapat memilih opsi apa pun selama Anda puas.

Kata-kata terakhir

Seperti yang Anda lihat, membuat daftar isi di posting WordPress tidak rumit sama sekali. Ikuti tutorial kami dan Anda akan memiliki daftar isi yang indah. Daftar isi yang baik membuat posting Anda lebih jelas dan lebih profesional. Dengan demikian, pemirsa Anda mungkin memiliki pengalaman yang lebih ramah saat membaca blog Anda.

Jika Anda memiliki pertanyaan, silakan berikan di kotak komentar di bawah.