WordPress Yazısında İçindekiler Tablosu Nasıl Oluşturulur

İçindekiler, WordPress gönderilerinin, özellikle de birçok başlığı olan uzun gönderilerin gerekli bir parçasıdır. İçindekiler tablosu oluşturmak, okuyucuların fikri kolayca ve hızlı bir şekilde takip etmesine ve kavramasına yardımcı olur. Ayrıca, SEO için çok iyi olan gönderilere daha fazla anahtar kelime eklemenize yardımcı olur.

İçindekiler Tablosu Oluşturma Yöntemleri

Bir WordPress gönderisinde içindekiler tablosu oluşturmanın 2 yöntemi vardır.

İlk yöntem bir eklenti kullanmaktır. Bu, hem kod uzmanları hem de WordPress'teki yeni başlayanlar için basit, hızlı ve ücretsizdir .

İkincisi kod kullanmaktır. Bu, içindekiler tablosunu, en küçük ayrıntıları bile özelleştirmenize olanak tanır, ancak kodlayıcı olmayanlar için oldukça karmaşıktır. Bu gönderide bir içindekiler tablosu oluşturmak için kodu yazacağız. Sadece kopyalayıp yapıştırın!

Önce bir eklenti ile içindekiler tablosu oluşturma sürecini inceleyelim:

Yöntem 1: İçindekiler Tablosu Oluşturmak için Bir Eklenti Kullanın

Adım 1: İçindekiler İçin İçerik Oluşturun ve Ayarlayın

WordPress'te içindekiler tablosu oluşturmak için birçok ücretsiz eklenti vardır. Bize son derece özelleştirilebilir ve güzel bir sonuç sağladığı için LuckyWP İçindekiler Tablosunu seçiyoruz. Bununla birlikte, bu eklenti, ilk başta kafanızı karıştırabilecek oldukça fazla ayara sahiptir. Bu nedenle, zamandan tasarruf etmek için talimatlarımızı izleyin.

LuckyWP İçindekiler , ücretsiz bir eklentidir ve wordpress.org'da mevcuttur. Eklentiyi Dashboard'a kurun ve etkinleştirin.

Ardından Ayarlar > İçindekiler bölümüne gidin, ayarlar ekranını göreceksiniz.

Burada dikkat etmeniz gereken 4 sekme var: Genel, Görünüm, Otomatik Ekleme, İşleme başlıkları . İçindekiler tablosunun görüntüsünü ayarlamak ve özelleştirmek için kullanılan sekmelerdir. Çeşitli karmaşık ve önemsiz ayarlara sahip bir sekmedir, bu yüzden onu görmezden gelebilirsiniz.

Bu adımda, sadece Genel sekmesinde çalışırsınız.

Bu bölümde birçok ayar var. Zaman kazanmak için aşağıdaki önemli kısımlara odaklanmalısınız:

• Numaralandırma: Başlıkları numaralandırmak için. Şu seçeneklerden birini seçmelisiniz: Numaralandırmasız, Ondalık sayılar (iç içe), Roma rakamları (iç içe) .

Ondalık sayıları (iç içe) seçiyorum, bu nedenle TOC'm şöyle görünüyor:

• Başlık: İçindekiler tablosunun başlığı. Bu varsayılan içeriği olduğunu.

Kalan ayarları varsayılan olarak bırakalım, çünkü bu TOC'nizi fazla etkilemez.

Bitirmek için Değişiklikleri Kaydet'e tıklayın. Böylece TOC'nin genel ayarlarını yaptık. Bir sonraki adıma geçelim.

Adım 2: İçindekiler Tablosunu Gönderiye Ekleyin

Gönderinize içindekiler tablosu eklemenin 2 yöntemi vardır: otomatik ve manuel olarak ekleme.

Otomatik olarak ekleme, tüm gönderilere otomatik olarak bir içindekiler tablosu eklendiği anlamına gelir. Bu yol çok zaman ve emek tasarrufu sağlar, ancak yalnızca bazı gönderilere bir İçindekiler eklemek istiyorsanız işe yaramaz.

Manuel olarak eklemek, bir gönderide bir TOC'ye sahip olmak istiyorsanız, onu o gönderiye kendiniz eklemeniz gerekir. Bu daha fazla zaman alabilir ve hatalar yapabilir.

Her iki yöntemi de ayrıntılı olarak tanıtacağız. Size uygun olan seçeneği seçebilirsiniz.

Otomatik Ekleme

Otomatik Ekle > Etkinleştir sekmesine gidin. Eklenti varsayılan olarak Yayınla seçer. İstemiyorsanız, başka bir gönderi türüne geçebilirsiniz.

Konum bölümünde, içindekiler tablosunu nereye eklemek istediğinizi seçin. Değişiklikleri Kaydet'e tıklamayı unutmayın!

Bu nedenle, seçilen gönderi türündeki tüm gönderilerin içindekiler tablosu bulunur.

Elle Ekleme

Sesleri manuel olarak eklemek karmaşıktır, ancak aslında çok basittir. İşleme Başlıkları sekmesine gidin. Orada, gönderi türünü de seçin, ardından Değişiklikleri Kaydet 'i tıklayın .

Ardından, seçtiğiniz gönderi türündeki bir gönderinin gönderi düzenleyicisine gidin, İçindekileri Etkinleştir 'i tıklayın.

Şimdi, TOC'niz temelde tamamlandı. Ayrıca, daha güzel hale getirmek için rengini, yazı tipini, öğelerin boyutunu bile biçimlendirebiliriz. Sonraki adımı izleyin.

3. Adım: İçindekiler Ekranını Özelleştirin

Ayrıca içindekiler tablosunu özelleştirmek için 2 yöntem vardır: tek seferde tüm gönderilerde özelleştirin ve her gönderide ayrı ayrı özelleştirin.

Tüm Gönderilerdeki İçindekiler Tablosunu Özelleştirin

Görünüm sekmesine giderek tüm içindekileri ayrıntılı olarak özelleştirebilirsiniz. Başlık Yazı Tipi Boyutu, Öğeler Yazı Boyutu, Bağlantı Rengi gibi birçok ayar vardır…

Tüm ayarları fark etmenize gerek yok, sadece ne istediğinize odaklanın.

Örneğin, maviyi ve mevcut başlık yazı tipi boyutunu sevmiyorum. Yazıyla daha iyi görünmeleri için rengi koyu gri ve daha küçük boyuta değiştirmek istiyorum. Bu yüzden Başlık Yazı Tipi Boyutunu, Öğe Yazı Tipi Boyutunu, Bağlantı Rengini özelleştireceğim ve geri kalan ayarları aşağıdaki resim gibi tutacağım:

Özelleştirmeden sonra TOC'm şöyle görünür:

Şimdi çok daha uyumlu görünüyor.

Ancak, farklı gönderilerde farklı içindekiler tablosuna sahip olmak isteyebilirsiniz, her gönderide nasıl özelleştirileceğini okumak için aşağı kaydırmanız yeterlidir.

Her Gönderideki İçindekiler Tablosunu Özelleştirin

Bu çalışma da basit ve hızlıdır. İlk önce gönderi düzenleyiciye gidin , İçindekiler > Özelleştir öğesini seçin .

İçindekileri Özelleştir Açılır Penceresi görünür. Yukarıdaki gibi bazı tanıdık sekmeler göreceksiniz. Bunlar Genel, Görünüm ve Çeşitli'dir. .

Görünüm sekmesine gidin ve aynı şekilde eklentinin Kontrol Panelinde düzenleme yaparak bazı ayarları değiştirin. Bitirmek için Kaydet'e tıklayın!

Şimdi, içindekiler tablosunu özelleştirmenin nihai sonucunu görelim.

Her iki özelleştirme yöntemi de çok güzel ve ayrıntılı içindekiler tablosu getiriyor. Yani istediğiniz yolu seçmekte özgürsünüz.

Şimdi gidip bir içindekiler tablosu oluşturmak için kodun nasıl kullanılacağını görelim.

Yöntem 2: İçindekiler Tablosu Oluşturmak için Kodu Kullanın.

Adım 1: Gönderi İçin İçindekiler Tablosunu Oluşturun

Görünüm > Tema > Düzenleyici > function.php'ye gidin .

Ardından, gönderilere içindekiler tablosu eklemek için functions.php dosyasına aşağıdaki kodu ekleyin.

Not: Bu kod, içindekiler tablosuna yalnızca 2 başlık düzeyi eklemek içindir .

 function create_toc($html) {
    $toc = '';
    if (is_single()) {
        if (!$html) $html döndürürse;
        $dom = yeni DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bağlı">
            <div class="toc-ctr">
                içindekiler
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $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') {
                if(!$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();
    }
    $toc döndür. $html;
}
add_filter('the_content', 'create_toc');

Açıklama:

Kodu ekledikten sonra Güncelle dosyasına tıklamayı unutmayın.

Ardından, işte sonuç:

Tabii biraz da stil yapmamız gerekiyor. Tüm kodlayıcıların favori aracı olan CSS'yi kullanacağız.

2. Adım: Özelleştirmek için CSS Kullanın

CSS ile özelleştirmek için Tema Düzenleyici'de style.css dosyasına gidin. Orada, TOC'yi istediğiniz gibi özelleştirmek için kendi yazdığınız kodu girmeniz gerekir.

Örneğin, içindekiler tablosunun rengini ve yoğunluğunu özelleştirmek istiyorum, bu yüzden aşağıdaki kodu ekleyeceğim:

 .toc-bağlı {
    arka plan rengi: #619162;
    renk: #fff;
}
.toc-ctr {
    sınır-alt: 1 piksel düz #fff;
    dolgu: 10 piksel;
    yazı tipi boyutu: 20 piksel;
    metin dönüştürme: büyük harf;
}
ul.toc {
    liste stili türü: yok;
    dolgu: 10 piksel;
    sol dolgu: 25 piksel;
}
.toc li bir {
    renk: #fff;
}
ul.toc > li {
    yazı tipi boyutu: 18 piksel;
    yazı tipi ağırlığı: 700;
    dolgu: 5 piksel 0;
}
ul.toc-sub {
    liste stili türü: yok;
}
ul.toc-sub li bir {
    yazı tipi ağırlığı: 200;
}

Kaydetmek için Güncelle dosyasına tıklamayı unutmayın.

Nihai sonuç şöyle görünür:

Sonuç olarak, hem bir eklenti kullanmak hem de kodlama bize aynı güzel içindekiler tablosunu verir. Memnun kaldığınız sürece herhangi bir seçeneği seçebilirsiniz.

Son sözler

Gördüğünüz gibi, WordPress gönderilerinde içindekiler tablosu oluşturmak hiç de karmaşık değil. Öğreticimizi takip edin ve güzel içindekiler tablosuna sahip olacaksınız. İyi bir içindekiler, gönderinizi daha net ve daha profesyonel hale getirir. Böylece, izleyicileriniz blogunuzu okurken daha dostça deneyimler yaşayabilir.

Herhangi bir sorunuz varsa, lütfen bunları aşağıdaki yorum kutusuna iletin.