Ne tür bir web sitesi çalıştırıyor olursanız olun, ziyaretçilerinizin etrafta dolaşırken kolay vakit geçirmesini istersiniz. Gezinme kolaylığı, web sitenizi iyi tasarladığınız ve ziyaretçilerinizin istedikleri içeriği nerede bulacaklarını bildikleri anlamına gelir, bu da genel olarak daha iyi bir kullanıcı deneyimi sağlar. Fakat bazen harika bir tasarım bile bazı kullanıcıların kafasını karıştırabilir veya karmaşık içerik daha fazla açıklama gerektirir. Bu durum WordPress araç ipuçlarının kullanışlı olabileceği zamandır.
Bu yazıda, WordPress web sitenize nasıl araç ipuçları ekleyeceğinizi göstereceğiz. WordPress araç ipuçlarını iki şekilde ekleyeceğiz: CSS kodunu kullanarak ve bir araç ipucu eklentisi kullanarak. Fakat eğitimin temel detaylarına inmeden önce araç ipuçlarını incelemek istiyoruz: WordPress’te araç ipuçları nelerdir ve araç ipuçları eklemek web sitenizi nasıl geliştirebilir? Bunu zaten bildiğinizi düşünüyorsanız, istediğiniz öğreticiye gitmekten çekinmeyin.
İşte tartışacaklarımız:
-
İpuçları Nedir?
-
Kod Kullanarak WordPress Araç İpuçları Nasıl Eklenir?
-
Eklenti Kullanarak WordPress Araç İpuçları Nasıl Eklenir?
İpuçları Nedir?
Araç ipuçları, bir kullanıcı faresini etkin bir alanın üzerine getirdiğinde görünen ek açıklamalardır. Genellikle kısa bir açıklama veya söz konusu alana tıklamanın ne yapacağına dair bir gösterge içerirler. Fakat bununla sınırlı değildirler. Araç ipuçları hiçbir şekilde WordPress’e özgü değildir. Fakat WordPress bağlamında içeriğinizi daha erişilebilir hale getirmenin yararlı bir yoludur.
Düğmelerin ve diğer tıklanabilir öğelerin eylemini açıklamak için kullanılmadıklarında, çoğunlukla dipnot veya bildirim şeklini alırlar. Bunları, daha belirsiz terimlerden bazılarını açıklamak veya web sitesinde kullanılan grafikler ve diğer resimler hakkında ek bilgi sağlamak için kullanabilirsiniz.
WordPress araç ipuçları söz konusu olduğunda, resimler ve metin içerebilen ve web sitenize en uygun şekilde biçimlendirilebilen bir açılır kutu şeklini alırlar. Araç ipuçlarını WordPress web sitenizde kullanabileceğinizi düşünüyorsanız, bunun nasıl yapıldığını sonraki iki bölümde açıklayacağız.
Kod Kullanarak WordPress Araç İpuçları Nasıl Eklenir?
Daha gelişmiş bir WordPress kullanıcısıysanız, araç ipucu kutularınız üzerinde tam kontrol sağlamayı deneyebilirsiniz. Bunu, WordPress tema özelleştiriciyi kullanarak temanızın kodunu değiştirerek yapabilirsiniz.
Bununla birlikte temanızın kodunu doğrudan değiştirmenin, özellikle güncellemelere karşı savunmasız olması nedeniyle birçok dezavantajı vardır. Tema dosyalarınız yeni sürümleriyle değiştirildiğinden, bir tema veya WordPress güncellemesi tüm sıkı çalışmanızı geri alabilir. Bu yüzden özel kodunuzu eklemek için bir alt tema veya eklenti kullanmanızı ve her ihtimale karşı web sitenizin bir yedeğini oluşturmanızı öneririz.
Gerekli tüm önlemleri aldıktan sonra kodunuzu eklemeniz gerekir. Bunu yapmak için, WordPress panonuzdan Görünüm/Özelleştir’e gidin.
Özelleştiriciyi açtıktan sonra sol taraftaki menüden Ek CSS’yi seçin.
Son olarak aşağıdaki kodu kutucuğa yapıştırmanız ve Update veya Publish butonuna tıklamanız gerekmektedir.
.tooltip { position: relative; display: inline-block; } .tooltip .tooltip-text { visibility: hidden; width: 100px; background-color: #26c1cd; color: #ffffff; text-align: center; padding: 4px 0; position: absolute; z-index: 1; } .tooltip:hover .tooltip-text { visibility: visible; }
Bu kod, araç ipucu kutusu ve araç ipucu metni için CSS sınıfları oluşturan ve öğeleri yalnızca fareyle üzerine gelindiğinde gösteren üç bölümden oluşur. Kodun, metin rengini veya yazı tipini değiştirme, süslemeler ve efektler ve benzerleri gibi tercihinize göre özelleştirebileceğiniz parametreler içerdiğini unutmayın. Bu durumda CSS’nin yeteneklerinin tam olarak gösterilmesi bu eğitimin kapsamı dışındadır, bu nedenle acemi kullanıcılar için önermiyoruz.
Bir araç ipucunu gerçekten göstermek için, onu HTML kullanarak bir öğeye eklemeniz gerekir. Bunu göstermek için bir gönderi oluşturduk ve ona bazı yer tutucu metinler ekledik.
Bir araç ipucu oluşturmak için HTML olarak eklemek istediğiniz bloğu düzenleyin.
Metinde araç ipucu eklemek istediğiniz yeri bulun ve bu kod parçasıyla değiştirin:
<span class="tooltip">ONHOVER <span class="tooltip-text">TOOLTIP</span> </span>
Elbette, aşağıdaki örnekte olduğu gibi ONHOVER’ı araç ipucunu atamak istediğiniz metinle ve TOOLTIP’i asıl araç ipucu metniyle değiştirin.
Ve görebileceğiniz gibi, söz konusu metnin üzerine geldiğimizde, kodda yapılandırıldığı gibi araç ipucu kutusu açılır.
Eklenti Kullanarak WordPress Araç İpuçları Nasıl Eklenir?
Muhtemelen WordPress web sitenize araç ipuçları eklemenin en kolay yolu, bir eklenti kullanarak gerekli işlevselliği eklemektir. WordPress Araç İpuçları adlı ücretsiz ve kullanıcı dostu bir eklenti kullanacağız. Eklentiyi kurup etkinleştirdikten sonra, WordPress panonuzdan Araç İpuçları/Yeni Ekle’ye giderek bir araç ipucu ekleyebilirsiniz.
Basit bir araç ipucu eklemek için ona bir başlık, fareyle üzerine gelindiğinde görünecek bazı içerikler ve araç ipucu işlevini tetikleyecek bir eş anlamlı veya anahtar kelime verin. Araç ipucunuza resimler veya video gibi ortamlar ekleyebilir veya onu tetiklemek için birden fazla anahtar kelime ekleyebilirsiniz (bunları dikey çubuk (|) işareti kullanarak ayırmanız gerekse de). Fakat bu tanıtım için yalnızca metin kullanacağız. Araç ipucunuzu ayarladıktan sonra Yayınla düğmesini tıklayın.
Bu araç ipucunu çalışırken görmek için, araç ipucunun anahtar kelimesinin bir örneğini içerdiğinden emin olmak için bir gönderi ve bazı yer tutucu metinlerle başlayacağız. Anahtar kelimenin altı noktalı bir çizgi ile çizilir.
Faremizi üzerine getirdiğimizde araç ipucu açılır. Bu araç ipucu, web sitenizdeki anahtar kelimenin her bir örneğinde görünecektir.
Bununla birlikte bir araç ipucunun yalnızca tek bir örnekte görünmesini istiyorsanız, bu eklenti size tam da bunu yapmak için kullanabileceğiniz bir kısa kod da sağlar. Yine bir gönderi ve bazı yer tutucu metinlerle başlayacağız. Aslında, yukarıdaki örnekte kullanılanla aynı gönderiyi düzenleyeceğiz.
Tek seferlik bir araç ipucu eklemek için metni HTML olarak düzenlemeniz gerekir. Bloğu seçin ve açılır menüyü HTML Olarak Düzenle olarak değiştirin.
Oradayken, metnin araç ipucu eklemek istediğiniz bölümünü aşağıdaki kısa kodla değiştirin:
[tooltips keyword="KEYWORD" content="TOOLTIP"]
Elbette, kısa koddaki KEYWORD’ü metnin bir araç ipucu eklemek istediğiniz kısmıyla ve TOOLTIP’i araç ipucu metniyle değiştirmeniz gerekir. Bittiğinde, Güncelle düğmesini tıklayın.
Ve işte karşınızda, önizlemede yeni araç ipucu görünüyor. Bu kısa kodla, istediğiniz kadar tek seferlik araç ipucu ekleyebilirsiniz.
Konu Özeti
Gördüğünüz gibi, WordPress web sitenize araç ipuçları eklemek biraz zaman ve çaba gerektirir. Fakat sonunda bir eklenti kullansanız bile size bir kuruşa mal olması gerekmez. Web sitenizin belirli anahtar kelimeler veya konular hakkında bazı ek bilgilerden yararlanabileceğini düşünüyorsanız, artık bunları nasıl ekleyeceğinizi biliyorsunuz.