≡ Menu

Sidebar’a Yazı İçindekiler Listesi Eklemek (eklentisiz)

Kullanılabilirliğe önem veren blog yazarları genelde içeriklerinin ilk paragraflarından birine konunun içinde yer alan ana ve alt başlıklara bağlantı verirler. Okuyucu bir kaç cümle okuyup içeriğin hangi amaca hizmet verdiğini öğrendikten konunun devamında neler var görsün ve istediği bölüme tek tıkla hızlıca gitsin diye. Tabi bu uygulamayı bu amaçla kullanan yüzde onluk bir kesimden bahsettim. Çoğunluk daha fazla ziyaretçi çekeceği ümidiyle kullanılıyor. Kullanmayan kişilerin bir kısmıysa sitede kalma süresinin azalacağı görüşünde. Bu görüşe sahip olanlar kişiler konularını gereksiz uzatan, içeriği kaliteli olmayan site sahipleridir. O kişiler henüz okuyucu memnuniyetinin, kullanılabilir olmanın ne kadar önemli olduğunu fark edememiş.

Biz bu uygulama için eklenti kullanmayacağız. Neredeyse bütün eklentileri inceledim. Hepsi gereksiz özelliklerle doldurulmuş. Azda olsa sitemizin hızına olumsuz etki yaratıyor. Kullanıcı memnuniyeti için en önemli konulardan biri olan sayfaların yüklenme hızından ödün vermemiz mantıksız olur. Hız kullanıcılar için en önemli unsurdur.

Bu yüzden eklenti kullanmadan, hiç bir hız kaybı yaşamadan, içindekiler özelliğini kusursuz bir şekilde WordPress sitemize ekleyeceğiz. Hatta daha kullanışlı, olması gerektiği yer olan Sidebar’a ekleyeceğiz. Bu şekilde okuyucunun her zaman sağında, gözünün önünde olacak. Çünkü uygulamanın amacına bakacak olursak okuyucu yazınızın herhangi bir yerindeyken farklı bir bölüme geçmek isteyebilir. Hatta geri dönmek bile isteyebilir. Hele bizim gibi kodlamayla ilgili içerikler için kesinlikle en doğru yer sidebar.

Farklı bir açıdan bakacak olursak bu uygulama aslında ince düşünen insanlar için bir nezaket göstergesidir. Bazıları okuyucularınıza diyorsunuz ki; sizin o değerli zamanınızı almamak için, size daha kısa sürede yardımcı olabilmek için böyle bir menüyü hizmetinize sunuyorum.

Tabi bu özelliği gereğinden fazla abartmadan, ihtiyaç olan konularda ihtiyaç kadar kullanmak çok önemlidir. Eklentiler genelde bu işlemi kafasına göre yaptığı için bize pek seçenek kalmıyor. Sizlerle paylaşacağım kodlamada nerelerde nasıl değişiklikler yaparsak daha kaliteli öz bir şekilde bu özellikten faydalanabileceğimizi anlatacağım.

Yinede eklenti kullanmayı isterseniz: WordPress of contents

Beni takip ettiği için bu konuyu okuyan, bu uygulamayı daha önce duymayanlar için; hala neyden bahsettiğimi anlamadıysanız hemen aşağıdaki bağlantıyı inceleyin. Sizin için konunun ihtiyacı olmasa da bir tane ekliyorum.

İçindekiler Listesi CSS

Kullandığınız temanın functions.php dosyasına aşağıdaki kodu ekleyin:

// Kerem WordPress İçindekiler
add_filter('the_content', function ($content) {
    global $krm;
    $krm = "<div class='h6'>İçindekiler</div>";
    $index = 1;
    $content = preg_replace_callback('#<(h[1-3])(.*?)>(.*?)</\1>#si', 
             function ($matches) use (&$index, &$krm) {
        $tag = $matches[1];
        $title = strip_tags($matches[3]);
        $hasId = preg_match('/id=(["\'])(.*?)\1[\s>]/si', $matches[2], $matchedIds);
        $id = $hasId ? $matchedIds[2] : $index++ . '-' . sanitize_title($title);
        $krm .= "<div class='krmc-$tag'><a href='#$id'>$title</a></div>";
        if ($hasId) { return $matches[0];}
        return sprintf('<%s%s id="%s">%s</%s>', $tag, $matches[2], $id, $matches[3], $tag);
    }, $content); $krm .= '</div>'; return $content;});
function kerem_icindekiler()
{   global $krm;
    return $krm;}

Sidebar’a ekle:

<?= kerem_icindekiler()?>

Sidebar’a bileşen yoluyla kod ekleyemezsiniz. Bu yüzden çalışmayacaktır. Temanızın PHP kodlarını çalıştıran bir bileşeni var mı bilmiyorum. Eğer yoksa bu eklenti işinizi görür: PHP Code Widget Bu eklentiyi gönül rahatlığıyla kullanabilirsiniz, kullandığım nadir eklentilerden biridir.

Sidebar’da içindekiler listesi sabit kalması gerekiyor. Büyük ihtimalle kullandığınız temanın bu özelliği vardır. Eğer yoksa WordPress Eklentisiz Sabit Sidebar Yapımı (Fixed Widget) bu yazımdan veya Q2W3 Fixed Widget bu eklentiden yararlanabilirsiniz.

Eğer sidebar bileşenine başlık eklemek isterseniz kodlamadaki başlığı kaldırmanız gerekecek. Bu işlem için aşağıdaki kodun sadece içindekiler yazısını silip kaydedin. Div taglarını silmeyin.

$krm = "<div class='h6'>İçindekiler</div>

Sıra en son ve en önemli konuya geldi. Kodlama yazınızda yer alan h2, h3, h4, h5 etiketlerini tarayarak içindekiler listesini oluşturacak. Bu listenin düzgün olması için yazılarınızda kullandığınız h etiketlerini değerlendirerek kodlamada değişiklik yapmanız gerekiyor. Ben yazılarımda alt başlıklarıma h2 ve h3 kullanıyorum. Nadiren altında altı başlıklarım olursa h4 kullanırım. Ben içindekiler listesi daha ön başlıklardan oluşsun diye sadece h2 ve h3’e yer verirdim. Sizin tercihiniz içeriğiniz bu listeye olan uyumuna göre değişebilir tabi.

Bu noktada tercihimizi aşağıdaki kodda değişiklik yaparak belirleyebilirsiniz.

<(h[1-5])(.*?)>(.*?)</\1>

Şuan ki haliyle h1’den h6’ya kadar bütün başlıkları listeler. Örneğin sadece h2 ve h3 için (h[2-3]) şekilnde değiştirip kaydetmeniz gerekiyor.

İçindekiler Listesi CSS

Listeye başlık alt başlık şeklinde bir görünüm vermek için aşağıdaki css komutlarını tama css dosyasına ekleyin.

.krm-h3 {padding-left: 15px;}
.krm-h4 {padding-left: 40px;}
.krm-h5 {padding-left: 60px;}

Kendinize göre düzenleyebilirsiniz. Bu haliyle h3 listede h2 başlığının altında 15px boşlukla başlayacak.

Takıldığınız yerler olursa yorum alanına yazabilirsiniz.

Yazar Hakkında: Çalışıyor, geziyor, okuyor, öğreniyor ama en çok; içerik odaklı SEO çalışmalarıyla ilgileniyor! Bu yüzdendir ki; bu blogda bu konuların ne işi var demeyin! O konular bir fikre hayat veriyor.


{ 8 comments… add one }
  • Taha 3 Haziran 2019, 23:38

    Hocam sitenizde sunucu ayarlarıyla ilgili bir araştırma yaparken bu yeni konuya denk geldim. İlk girdiğimde yoktu. Son yazınız neredeyse bir yıl önceydi. Denk gelince şaşırdım, yazmadan geçmeyeyim dedim. Yeni yazılara devam edin Hocam böyle uzun aralar vermeyin.

    • Kerem SARI 3 Haziran 2019, 23:47

      Artık yazmak için daha çok fırsat yaratmaya çalışacağım. Bu durum benim içinde şaşırtıcı oldu, böyle anında etkileşim almak çok güzelmiş.

  • Tufan 4 Haziran 2019, 03:39

    Selamlar, eskiden ara sıra yeni konu mail’leri gelirdi. Şimdi onuda kaldırdınız sanırım. Gelmiyor artık.

    • Kerem SARI 4 Haziran 2019, 23:42

      Hocam uzun zamandır yeni konu eklemiyorum, ne zamandır gelmiyor? Mail adresinizi listeden kontrol edeceğim.

  • Fehmi T. 5 Haziran 2019, 22:08

    Kerem Bey zorda olsa dediklerinizi uygulayınca oldu. Aslında çok kolaymış fakat kendi ilgili dosyaları bulmakta zorlandım biraz. Çok güzel oldu, tam istediğim gibi. Google pagespeed testinde hiçbir değişiklik olmadı, yani dediğiniz gibi hızı hiç etkilemiyor. Bu yüzden çok teşekkür ederim. Tek sorun sidebarda içindekiler listesi biraz tasarımıma uygun olmadı. Değişiklik yapmam gerekiyor. Bunun için bana yardımcı olur musunuz?

    • Kerem SARI 5 Haziran 2019, 22:10

      Fehmi Bey, işinize yaradığına sevindim. Yardımcı olurum ama öncesinde siz deneyin isterseniz. Sadece CSS kodlarıyla oynama yapmanız yeterli.

  • Serseri Code 12 Haziran 2019, 19:28

    Kerem kardeşim eline sağlık. Biliyorum yazıp geçersin ama bu sefer ilk paragraf feci olmuş. Eksik kelimeler bile var. Neyse, bu konuda daha önce senden destek istemiştim. Benim siteme benzer bir klodlama eklemiştin. O zaman teşekkür etmiştim yine ediyorum. İkinci siteme uygulayamamıştım içindekiler yazısını. Bir siteden al diğerine ekle olmuyomuş yani. Söylemeye de çekiniyordum yük olmamak için. Çok sağ ol kardeşim.

    • Kerem SARI 12 Haziran 2019, 19:29

      Haklısın, kendi yazımı okuyamadım. İlk fırsatta kontrol edeceğim, sende sağ ol.

Leave a Comment