WordPress te Anchor yada Jump link oluşturmak


wordpresste anchor link uygulaması

Anchor kelime anlamı olarak gemici çapası manasına gelir , Jump ise zıplama anlamına gelmektedir , Anchor yada Jump link ; tıklandığında bizi web sayfasının belirli bir bölümüne götüren link demektir

, peki neden buna ihtiyaç duyalım derseniz :

1. Varsayalalım uzun bir yazınız var ve 50 başlıktan oluşuyor yazının başına “içindekiler” diye bir ana başlık açıp bu 50 başlığı sıralayıp Jump link ile tıklandığında direkt bizi ilgili başlığa götüren bir linkleme sistemi kurmamıza izin verir
2. Sayfa sonunda “Başa dön” diye bir link koymamıza izin verir
3. Bir satış sayfası ise , tıklandığında aynı sayfa içinde direkt ürüne yollayan linkleme yapılabilir …

Görüldüğü gibi oldukça fazyadlı kullanım alanları mevcuttur lakin her nedense WordPress isteminde varsayılan olarak gelmemektedir , bunun için manuel olarak bazı HTML kodlarını kullanmamız gerekmektedir işte nasılı :

1. Öncelikle WordPresste Metin (HTML) görünümüne geçmemiz gerekmektedir

2. Anchor link için iki şeye ihtiyacımız var
a) Tıklandığında yollayacak hedefin kodu

<a name="1"></a>

b) Anchor bağlantıyı işaret eden bir link

http://www.siteismi.com/sayfa/#1

Üstte bir rakamı yerine herhangi bir kelime de kullanılabilir , “bir” burada Anchor ismidir , yani tıklandığında yollayacağımız yere üstteki kodu koyacağız.

Örnek Uygulama

Üstteki anlatılanlar doğrultusunda bir uygulama yapalım ben tıklandığında HTML görünüm resmine yollamak istiyorum bunun için :
1. Önce resmin hemen üstüne biryere aşağıdaki kodu koyuyorum

<a name="1"></a>

2. Tıklama linkini oluşturuyorum mesela Buraya tıklandığında resme götürür de “buraya” linkinde kullandığım kodlar aşağıda

<a href="#1">Buraya</a>

yada aşağıdaki şekilde kullanabilirdim

<a href="http://www.sordum.net/22024/wordpress-te-anchor-yada-jump-link-olusturmak/#1">Buraya</a>

Eğer tıklandığında sayfa başına gidilmesini istiyorsak sayfa başlarına biryere aşaüıdaki kodu kyalım

<a name="top"></a>

Sonrasında tıklandığında sayfa başına gönderecek linki oluşturalım mesela aşağıdakini sayfa sonunda kullanabilirsiniz

<a href="#top">En üste git</a>

Uygulama örneğini sayfa sonunda bulabilirisniz

Wordprress te Kopyalamak için seçim yapıldığında seçilen kısım farklı renkte olsun

Üstteki konuyla bağlantısı olmasada oldukça kullanışlı olabilecek bir ipucudur Wordpress tema dosyasına yapılacak küçük bir ilave ile kolayca gerçekleştirilebilir

1. Hostumuzda aşağıdaki yere gidelim

wp-content/themes/Tema isminiz

2. Burada yeralan style.css dosyasının uygun bir yerine aşağıdaki kodları yapıştıralım

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}

::selection {
    background-color: #ff6200;
    color: #fff;
}

Sonrasında seçilen text için aşağıdaki gibi bir görüntü oluşacaktır

Seçim rengi farklı

Elbette kodda yeralan #ff6200 değeri yerine hoşunuza giden başka renk kodu da kullanabilirsiniz.

üste git



Yorum Ekle

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

CAPTCHA