Herkese selamlar. Son zamanlarda özellikle forum sitelerinde ve pek çok dijtial platformda sıklıkla sorulan sorulardan birisi “yazının girişinde yazı içindeki başlıkları ekleme” sorunsalı.
Bir çok platform, makaleleri daha akademik bir biçimde göstermek için bazı ufak dokunuşlar yapmaktadır. Bunlardan birisi de yazı içindeki yol haritası yani contentmap dediğimiz yazı içerisinde yer alan başlıkları sayfanın başına eklemek ve bu başlıkları tıklanabilir yapmaktır.
Tıpkı akademik bir tezin “İçindekiler” sekmesinde olduğu gibi. Bunun için çeşitli WordPress eklentileri ve alternatif pluginler hazırlanmıştır. Ancak aslında hiçbir eklenti ve script gerektirmeden bu başlıklar rahatlıkla eklenip linklenebilir. Bunun aşamalarına birlikte bakalım.
Yazı Başında Menü Nasıl Yapılır?
Öncelikle yazı içerisindeki başlıklara “ID”ler tanımlamanız gerekli. Bir WordPress editöründe veya HTML sayfada yazı yazarken, genellikle sayfa kaynağında (WordPress’de editörde yer alan “Metin” kısmı) yazı içeriğini şu şekilde görürsünüz:
<h2>Bu Yazının İlk Başlığı</h2>
<h2>Bu Yazının İkinci Başlığı</h2>
<h3>Bu Yazının Alt Başlığı</h3>
Şimdi burada yer alan başlıklarımıza ID’ler tanımlıyoruz.
Divlere ID Tanımlama
<h2 id="ilkbaslik">Bu Yazının İlk Başlığı</h2>
<h2 id="ikincibaslik">Bu Yazının İkinci Başlığı</h2>
<h3 id="ucuncubaslik">Bu Yazının Alt Başlığı</h3>
Harika! Başlıklarımıza ID tanımlayarak bir bakıma onları tanıtmış olduk. Sıra geldi yazımızın en başına “içindekiler” kısmını eklemeye ve buradan da ilgili başlıklarımıza link vermeye.
Başlıklara Link Vermek
Bu kısımda dikkat etmeniz gereken en önemli nokta bir sayfa içinde başka bir “ID” sahibi contente link çıkacaksanız, linkin başına “#” işareti eklemenizdir. Class’lar hedef gösterilirken linklemelerde “.” nokta kullanılırken ID’ler de “#” işaretini kullanıyoruz. Linkleri ister manuel yani el ile isterseniz de editörde yer alan ikonuna tıklayarak da link verebilirsiniz. Yani:
<a href="#ilkbaslik">1. Birinci Başlığımız</a>
<a href="#ikincibaslik">2. İkinci Başlığımız</a>
<a href="#ucuncubaslik">3. Alt Başlığımız</a>
Harika! Artık başlıklarımıza tıkladığımızda ilgili ID’ye sahip başlığı açacak. Burada mantığımız şu şekilde işliyor: Önce başlıklarımıza ID tanımlıyoruz. Ardından ise linklerimize diyoruz ki ID’si “#….” olan başlık senin hedefin yani sana tıklandığı zaman sayfa içinde bu id’ye sahip kısmı aç. Pek çoğumuzun kullandığı onepage/landing page sayfalar da bu şekilde hazırlanmaktadır. Ayrıca bu yöntemi sadece başlıklar için değil; <p>, <span>, <div> gibi pek çok etikete sahip alan için kullanabilir, hatta etikete sahip olmayan alanlara, kendiniz bir etiket tanımlayarak (Örneğin <p>) bu yöntemi kullanabilirsiniz. Ayrıca bu yöntem. akademik bir yol gösterici metodu olduğu için Google nezdinde de oldukça faydalı puanlar almaktadır. Özellikle uzun makalelerinizi bu şekilde paylaşabilirsiniz. Güzel çalışmalar dileriz!