WordPress Yazı / Sayfa İçi Bağlantı (Çapa Link) Nedir? Nasıl Eklenir?

Yazı / sayfa içi bağlantılar, WordPress içeriklerde kullanıcıların aynı belgenin içindeki okumak istedikleri bir bölüme veya konuma hızlıca atlamasını sağlayan bağlantılardır. Anchor (çapa) veya jump (atlama) bağlantı adıyla da bilinen ve metin içerisine eklenen bu bağlantılar (köprüler), yaygın olarak içerik tablolarında kullanılır.

Yazı / sayfa içi bağlantılar metin içerisine demir atmak gibi düşünüldüğünden “anchor” (çapa), okuyucuyu hızlıca sayfanın bir yerine götürmesi sebebiyle de “jump” (atlama / zıplama / sıçrama) bağlantı adını almışlardır. Ancak Türkçede yaygın olarak çapa, yazı içi veya sayfa içi bağlantı olarak adlandırılırlar. Bunlara bazen “bağlantı bağlantıları” adının verildiğine, bazen de orijinal “anchor link” adıyla işaret edildiğine de rastlıyoruz.

Bu yazıda, Aralık 2018’de kullanıma sunulan WordPress yeni metin düzenleyicisi Gutenberg editörü yanısıra WordPress klasik düzenleyicide (5.2.0 öncesi) eklentisiz olarak çapa link oluşturmayı, yani yazı / sayfa içi bağlantıları en kolay şekilde nasıl oluşturabileceğinizi adım adım göreceğiz.

• WordPress yeni düzenleyicide çapa bağlantı nasıl oluşturulur?
• WordPress klasik düzenleyicide çapa bağlantı nasıl oluşturulur?

Çapa (atlama) bağlantı örneği

Çapa bağlantının ne olduğunu anlamanın en iyi yolu hemen bir örnek üzerinden ona tanık olmaktır. Yukarıdaki bağlantılara veya buraya tıklayarak hemen bir çapa bağlantı deneyimi yaşayabilir ve “Sayfa içi (çapa) bağlantı nasıl çalışır?” başlıklı bölüme gidebilirsiniz.

Sayfa içi çapa bağlantı nasıl çalışır?

Örnekte gördüğünüz üzere, yazı / sayfa içi çapa linkler, bir WordPress yazı / sayfa ekranında aşağı yukarı gezinmeye ve sayfanın yeniden yüklenmesine gerek bırakmadan tıkladığınızda sizi sayfanın belirli bir yerine götürür.

Şimdi isterseniz, geldiğiniz kısma geri dönmek için tarayıcınızın geri ok tuşuna (←) tıklayın.

Sayfa içi çapa linklerden amaç, bir web sitesinde daha iyi bir kullanıcı deneyimi oluşturmaktır. Kullanıcılar, özellikle uzun yazılar söz konusu olduğunda, yazı içi zıplama bağlantılarını kullanarak ihtiyaç duydukları bölüme anında geçebilirler.

Çapa bağlantılarla neler yapılabilir?

Çapa bağlantıları kullanarak, aynı bilgileri farklı sayfalarda yinelemeden okuyucularınıza bilgi sağlayabilirsiniz.

Blog yazılarınıza çapa bağlantılar ekleyebilir ve bu şekilde okuyucularınızın aynı yazının başka bir bölümündeki bilgilere anında erişmesini sağlayabilirsiniz.

Yazı / sayfa içi çapa bağlantılar ile birçok şeyi yapmak mümkündür. Bunlardan bazılarını sıralarsak:

• Uzun bir yazının başında bir içerik tablosu konabilir ve bu tablodaki her bir konu sizi aşağılarda bir başlığa götürebilir.
• Bilgilendirici özet metinlere eklenen maddelemelere çapa bağlantılar eklenebilir.
• Sayfanın sonuna “başa dön” bağlantısı konabilir.
• Metin altındaki bir dipnot veya açıklamaya götürebilir.
• Bir blog yazısının istenen bölümüne veya bir satış sayfasında doğrudan ürünün fiyatı gibi istenen kısma götürebilir.

Okuma kolaylığı sağladığı için çapa bağlantılara özellikle uzun blog yazılarında sık rastlanır.

WordPress sayfa içi bağlantı nasıl oluşturulur?

Çapa bağlantıların özelliği, # (diyez) işareti ile başlamalarıdır.

Her iki WordPress düzenleyici sürümünde de aynı yazı veya sayfanın bir bölümünden başka bir bölümüne atlatan bir çapa bağlantı oluşturmak için temelde yapılması gereken başlıca iki işlem söz konusudur:

• Hedefi işaretlemek
• Bu hedefe bir bağlantı eklemek

Şimdi bu iki işlemi WordPress klasik ve WordPress Gutenberg düzenleyicide nasıl yapabileceğimizi görelim.

WordPress Gutenberg düzenleyicide yazı / sayfa içi bağlantı nasıl eklenir?

Gutenberg düzenleyici, yazı / sayfa içine çapa link ekleme işleminin kolaylıkla ve hızlı yapılabilmesi için hazır araçlar sunmaktadır. Gutenberg düzenleyicide bu araçları kullanarak, hiç bir manüel girişe gerek olmadan 3 adımda çapa bağlantı oluşturma işlemini tamamlayabilirsiniz.

• Başlığa kimlik atama
• Diyez (#) ile adres verme
• Bağlantınızı test etme

1. adım: Başlığa kimlik atama

Gutenberg metin editöründe, ekleyeceğiniz çapa bağlantının götürmesini istediğiniz hedef başlığa gidin. İmleci hedef başlığın yer aldığı bloka tıkladığınızan emin olun.

Sağ taraftaki yan sütunda Blok sekmes altında (en altta) Gelişmiş alanında göreceğiniz “HTML çapası” kutucuğuna (tercihen İngilizce karakterlerle) bir isim yazın.

Kutucuğun altında şu açıklamayı bulacaksınız:

“Çapa” olarak adlandırılan, yalnızca bu başlık için benzersiz bir web adresi oluşturmak için boşluksuz bir veya iki kelime girin. Ardından, doğrudan sayfanızın bu bölümüne bağlanabilirsiniz.

2. adım: Diyez (#) ile adres verme

Normalde herhangi bir bağlantı eklerken yaptığınız gibi çapa bağlantıyı eklemek istediğiniz metni seçin ve araç çubuğundan bağlantı ikonuna tıklayın.

Açılacak bağlantı kutucuğuna diyez (#) işareti ile başlayarak boşluk bırakmadan 1. adımda başlığa atadığınız ismi yazın. (örneğin: #kimlik).

Çapa bağlantınız hazır! Gutenberg editöründe bu işlemi tekrar ederek kısa sürede istediğiniz sayıda çapa bağlantı oluşturabilirsiniz.

3. adım: Bağlantınızı test etme

Çapa bağlantı eklediğiniz yazı veya sayfanızı yayınlamadan önce “Ön izleme” butonuna tıklayarak eklediğiniz çapa linki mutlaka test edin ve çalıştığından emin olun!

Eklediğiniz çapa link eğer istediğiniz başlığa götürmüyorsa veya başka bir sayfaya götürüyorsa, sorun, kullandığınız tema veya bileşenlerin bağlantıları değiştirmesinden kaynaklanıyor olabilir. Bu tür sorunların çözümünü öğrenmek için şimdi buraya tıklayarak hemen aşağıdaki “Bağlantınızı test edin ve sorun varsa çözün” başlıklı bölüme gidin.

WordPress klasik düzenleyicide yazı / sayfa içi bağlantı nasıl eklenir?

WordPress klasik editörde yazı içine (sayfa içi) bağlantı eklemek için araç çubuğunda hazır bir buton bulunmaz. Ancak eğer siz sayfanın başı yerine içindeki belirli bir bölüme çapa bağlantı vermek istiyorsanız, bunun bir yolu var.

Sayfa içi çapa bağlantı oluşturmak için yapılması gereken işlemler, önce sayfanızın metin görüntüsü içerisine burada vereceğim HTML kodunu manüel olarak ekleyerek link verilecek hedefe bir isim vermek ve ardından bu hedefe diyez (#) işaretiyle link eklemekten ibaret.

Sayfa içi (çapa) bağlantı oluşturma adımları

WordPress klasik editörde bir yazı veya sayfa içine çapa bağlantı oluşturmak için yapılması gereken işlem adımları şunlardır:

1. Bağlantının götüreceği hedef başlığı saptayın
2. Alt başlık HTML kodunuzu girin
3. Görsel sekmesinde her şeyin düzgün göründüğünden emin olun
4. Tıklanacak metne # bağlantıyı ekleyin

Şimdi bu adımları ayrıntılarıyla görelim.

Başlamadan önce: Bağlantının nereye konacağına karar verin

Uzun bir yazınız olduğunu ve okuyucularınızın sayfanın başındaki bir içerik tablosundan bir tıkla doğrudan 3. bölüme gitmesini istediğinizi varsayalım. Bunun için sayfa içi (çapa) bağlantılar oluşturmanız gerekecektir.

Sayfanızın başında, bağlantı haline dönüştüreceğiniz ve tıklayınca istenen bölüme gidilecek bir metin olması gerekir. Örneğin, şu şekilde sıralı bir listeniz olabilir:

1. Bölüm: Giriş
2. Bölüm: Gelişme
3. Bölüm: Sonuç

İçerik tablosundaki bu maddelere karşılık gelen aşağıda ana metnin içinde de “Başlık 3” sitilinde yazdığınız alt başlıklar yer almalı. Şimdi içerik tablosundaki “1. Bölüm: Giriş” maddesinden ilgili başlığa bir çapa bağlantı verelim. Bunun için işe önce alt başlıkla başlıyoruz.

1. adım: Bağlantının götüreceği hedef başlığı belirleyin

WordPress yazı kutunuzun sağ üst kısmında “Görsel” ve “Metin” adlı 2 sekme yeralıyor. Yazılarımızı normalde Görsel sekmesinde yazarız, ancak şimdi yapacağımız gibi bazen “Metin” görüntüsüne ve sayfanızın HTML koduna geçmeye ihtiyacınız olur.

Metin sekmesine tıkladığınızda, aralara bazı kodlar serpiştirilmiş durumda metninizin hâlâ orada olduğunu göreceksiniz. Yapmanız gereken şey, burada bağlantıyı vereceğiniz alt başlığı bulmak.

Görsel sekmesinde iken eğer “Başlık 3” stilini vererek bu alt başlığınızı yazdıysanız, başlığınızın HTML kodunun şu şekilde yeraldığını göreceksiniz.

<h3>1. Bölüm: Giriş</h3>

2. adım: Alt başlık HTML kodunuzu girin

Alt başlığınızı HTML koduyla bulduğunuza göre, şimdi buraya bir küçük kod daha ekleyebilirsiniz. Böylece:

<h3>1. Bölüm: Giriş</h3>

şeklindeki kısım şu şekle dönüşmeli:

<h3 id="giris">1. Bölüm: Giriş</h3>

Boşluklara dikkat edin! Yalnızca “id” yazmadan önce bir boşluk bırakıyorsunuz fakat ondan sonra tırnak ile büyüktür işareti arasına boşluk bırakmıyorsunuz.

Tırnak işaretleri arasına yazacağınız metni belirleyin —bu metin sizin bağlantı adresinizin parçası olacağı için yalnızca İngilizce harf ve rakam karakterleri kullanmalısınız, boşluk bırakmamalısınız.

3. adım: Her şeyin düzgün göründüğünden emin olun

Şimdi Görsel sekmesine geri dönün, başlığın ve devamının normal göründüğünden emin olun. Burada normalin anlamı şu: Kodu eklemeden önceki haliyle sonraki hali arasında fark olmaması gerekir.

4. adım: Tıklanacak yere bağlantıyı ekleyin

Bağlantının götüreceği noktayı belirlediğinize göre, şimdi artık WordPress “Bağlantı Ekle” penceresini kullanarak bağlantınızı her zamanki gibi oluşturabilirsiniz: Tıklanacak metni tarayın (taradığınız bu metin gidilecek alt başlığa işaret etmeli) ve araçlar menüsünde bağlantı ikonuna tıklayın. Buraya sayfa adresinin (URL) tamamı yerine numara işaretini (#) ve ardından id kısmına tırnak işaretleri arasına yazdığınız “bağlantıadı”nı girin.

Sağ alttaki mavi “Bağlantı ekle” butonuna tıklayarak kaydedin. İçerik tablosundaki maddeniz şimdi altı çizili mavi bağlantı olarak görünüyor olmalı.

Bağlantınızı test edin ve sorun varsa çözün

Bağlantıyı eklediğiniz sayfanızı yayınlamadan önce Ön izleme butonuna tıklayarak mutlaka test edin ve çapa linkin çalıştığından emin olun! Sayfa içi (çapa) link, istediğiniz kısma götürüyorsa sorun yok. Götürmüyorsa veya örneğin kendi sayfası yerine Ana sayfaya götürüyorsa, önce HTML’de yaptığınız değişikliği kontrol edin. HTML kodda sorun yoksa, kullandığınız tema veya bileşenler bağlantıları yeniden yazıyor olabilir. Bunun da çözümü şöyle: Sayfa adresi (URL) alanına yalnızca “#bağlantıadı”nı değil, tam sayfa adı ve ardından sonuna taksim (/) işaretini ve “#bağlantıadı”nı girin.

Burada kafa karıştırıcı olabilecek şu durumla karşılaşabilirsiniz:

Buradaki çapa bağlantınızı üzerinde çalıştığınız kendi sayfasında bir yere veriyorsunuz. Dolayısıyla yayınlamadığınız sürece bağlantı verirken bu sayfa kullandığınız bağlantılar penceresinde çıkacak güncel ögeler listesinde görünmeyecektir. Bu sebeple bağlantı adresini manüel olarak yazmalısınız. Sayfa adresinin sonuna taksim (/) işaretini eklediğinizden ve sonrasına “#bağlantıadı”nı yazdığınızdan emin olun.

Farklı bir sayfaya çapa bağlantı vermek

Bulunduğunuz sayfadan farklı bir yazı veya sayfaya çapa bağlantı vermek istediğinizde, WordPress “Bağlantı Ekle” penceresini kullanarak bağlantınızı her zamanki gibi oluşturabilirsiniz.

Çapa bağlantı ekleyeceğiniz metni tarayın ve araçlar menüsünde bağlantı ikonuna tıklayın. URL satırına bağlantı vermek istediğiniz sayfa adresinin tamamını ve ardından sonuna taksim (/) işaretini ve başında diyez işareti yer alacak şekilde “#bağlantıadı”nı ekleyin.

Artık blog yazılarınızda veya sayfalarınızda içerik tabloları, dipnotlar ve diğer sayfa içi çapa bağlantıları kolayca oluşturmaya başlayabilirsiniz.

Tekrar görüşünceye dek… Öğrenmeye devam edin!

—Bu bilgilerden sosyal medya çevrelerinizi haberdar etmek için aşağıdaki renkli ikonlara tıklayarak paylaşabilirsiniz.