Mintik posted
4 month ago

WordPress’te menüler için schema.org markup kullanmanın en basit yolu


Merhaba arkadaşlar bugün sizlere kendi uyguladığım bir yöntemi anlatmak istiyorum ve neden böyle bir yöntem kullandığımı da ayrıca anlatacağım sizlere. Biliyorsunuz ki WordPress’te schema.org standartlarında web işaretlemesi yapabilmek her zaman mümkün olmuyor ve hemen hemen her bölüm için ayrı ayrı fonksiyonlar ekleyerek kullanmanız gerekebiliyor eğer bir web işaretleme eklentisi kullanmıyorsanız ve benim gibi, her özellik için eklenti kurmaya karşı iseniz.

Bütün eklentilere karşı olmasam da çoğu eklentiye inanılmaz derecede karşı birisiyim. Eklentiler artık eskisi gibi değil maalesef, siz web işaretlemesi için eklenti kurmak istersiniz, kurduğunuz eklenti beraberinde farklı özellikler de sunmaya çalışıp durur sizin için. Bazı insanların işine yarıyor olabilir bu durum ancak işe yarar tarafı çok düşük bir olasılık.  Ayrıca bu eklentilerin sitenize kurduğu js ve css dosyaları da işin diğer bir kötü tarafı. Bu aralar bu konulara çok fazla değinmem gerektiğini düşünüyorum hatta her blog yazarının benim gibi bir şekilde sesini çıkarması gerektiğini de artık düşünüyorum. Themeforest gibi eklenti satışı yapan siteler var. Para kazanmak istiyorsanız oradan satabilirsiniz demek geliyor içimden. Herkesin kullandığı sistemi kendiniz için reklam malzemesi yapmaya hakkınız yok maalesef. He birde kurduğunuz her eklentinin veritabanınızı şişirdiği gerçeği ayrı bir konu ki neredeyse unutuyordum. Özellikle wp_options tablosunu 1mb boyutun altında tutmaya çalıştıkça bu tarz eklentiler sayesinde sürekli 2-3mb gibi boyutlara çıkabiliyor ve site açılış hızınızı aşırı derecede etkileyebiliyorlar, wp_post tablosundan bahsetmiyorum bile.

Neden eklenti kullanmaya karşı olduğumu söyledim, şimdi gelelim işin fonksiyon tarafına.  Konunun başında belirttiğim gibi, bir özelliği eklemek için çoğu zaman fonksiyon kullanmak zorunda kalabiliyorsunuz ve functions.php dosyasına yüklediğiniz fonksiyonlar, bütün sitedeki sorgularda devreye giriyor ve ister istemez sayfa açılış hızlarını da etkileyebiliyor. Mesela en çok ziyaretçi aldığımız sayflara tekil yazı sayfaları olduğu halde kategori sayfaları için kullandığım fonksiyonlar da bütün tekil yazı sayfalarında devreye girebiliyor. Tabi ki fonksiyonları is_category içinde kullanararak sadece kategori sayfalarında çalışmasını sağlayabilirsiniz, ancak sonuçta bu da bir sorguya neden olacaktır. Sonuçta bir engel kullanıyorsunuz ve sayfa yükleme esnasında bu engellerin hepsi tek tek  kontrol ediliyor. Kullandığım fonksiyonları, functions.php yerine asıl çalışacak dosya içinde kullanabiliyorsam eğer o şekilde devam ediyorum ancak functions.php içinde kullanmak zorunda kalıyorsam da functions.php dosyasının da çok şişmemesi için bir şekilde bunlardan kurtulmaya çalışıyorum.

Bu sebeplerden dolayı websitedemdeki sorguları minimum seviyeye düşürmek için bazı doğal yöntemler kullanıyorum ve bu yöntemler ile bazen bir yerine iki ayrı fonksiyondan da kurtulmuş oluyorum. Bu da sitenin daha hızlı açılması için bir yol oluyor benim için. WordPress’te menü ekleme olayını bilirsiniz. Functions.php ile eklenmiş menü fonksiyonu sayesinde “Görünüm” sekmesi altında menüler diye bir bölüm çıkıyor ve bütün tema geliştiricileri de bu özelliği kullanıyor. Menü linkleri için web işaretleme yapmak için ağır fonksiyonlar kullanmak zorunda da kalabiliyorsunuz.

Şimdi gelelim bunu nasıl daha hafif hale getireceğimize. Öncelikle nav menüleride web işaretlemesi yapmak için fonksiyon kullanmıyoruz. Görünüm > Menüler sekmesine gidip menümüzü oluşturduktan sonra sayfanın kaynak kodlarında html olarak menülerin sıralandığını görebilirsiniz.  İlk yapmanız gereken kaynak kodlarından html olarak görünen menü kodlarını alıp header dosyasına html olarak ekleyip functions.php dosyasından gerekli menü kodlarını kaldırmak. Bu şekilde her sayfa için menü sorgusunu kullanmak zorunda olmadığınız için bir tutam sitenizin açılışı hızlanacaktır.  Bu aşamadan sonrası en kolay kısmı. Artık html olarak hazırlanmış bir menüye sahip olduğunuz için herhangi bir fonksiyon kullanmadan manuel olarak menülerinize web işaretlemesi yapabilirsiniz.

Nav menülerde schema.org yapısını kullanarak web işaretlemeye başlamak için ilk kullanacağınız kodlar bunlar:
Bu kodu men üst menü çerçevesine eklemeniz gerekiyor.

itemscope="" itemtype="http://schema.org/SiteNavigationElement"

Menüdeki her link için de iki ayrı işaretleme kullanmanız gerekir. Üstte verdiğimiz kod genel menü çerçevesini işaretlerken, altta verdiğim kodlar da linkler ve linklerin isimleri için geçerli olan işaretlemeler.
Linkler için:

itemprop="url" 

Link isimleri için:

itemprop="name" 

Bu aşamaları yaptığınızda SiteNavigationElement için gerekli düzenlemeleri bitirmiş olacaksınız. Kodlarda hata olup olmadığını kontrol etmek için de buradan Schema Markup Validator aracını kullanarak test edebilirsiniz.

Örnek olarak aşağıdaki kodları alıp doğrulama aracında test ederek nasıl göründüğüne bakabilirsiniz.

<ul role="navigation" itemscope="" itemtype="http://schema.org/SiteNavigationElement" id="menu" class="ul">
<li id="menu-item-41912" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-41912 df alg bb pad"><a href="https://www.mintik.com/category/webmaster"><span class="clrw pad w100" itemprop="name">Webmaster</span></a></li>
<li id="menu-item-41913" class="menu-item"><a itemprop="url" href="https://www.mintik.com/category/webmaster/jquery"><span class="clrw pad w100" itemprop="name">jQuery</span></a></li>
<li id="menu-item-41914" class="menu-item"><a itemprop="url" href="https://www.mintik.com/category/webmaster/css"><span class="clrw pad w100" itemprop="name">Css</span></a></li>
<li id="menu-item-41916" class="menu-item"><a itemprop="url" href="https://www.mintik.com/category/wp-arsivi"><span class="clrw pad w100" itemprop="name">WordPress</span></a></li>
<li id="menu-item-42823" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42823 df alg bb pad"><a href="https://www.mintik.com/category/wp-arsivi/ucretsiz-wordpress-temalari"><span class="clrw pad w100" itemprop="name">WordPress Temaları</span></a></li>
<li id="menu-item-41918" class="menu-item"><a itemprop="url" href="https://www.mintik.com/category/wp-arsivi/ders"><span class="clrw pad w100" itemprop="name">Ders</span></a></li>
<li id="menu-item-41919" class="menu-item"><a itemprop="url" href="https://www.mintik.com/category/wp-arsivi/eklenti"><span class="clrw pad w100" itemprop="name">Eklenti</span></a></li>
<li id="menu-item-41920" class="menu-item"><a itemprop="url" href="https://www.mintik.com/category/genel"><span class="clrw pad w100" itemprop="name">Genel</span></a></li>
<li id="menu-item-41921" class="menu-item"><a itemprop="url" href="https://www.mintik.com/category/adobe-photoshop-dersleri"><span class="clrw pad w100" itemprop="name">Photoshop</span></a></li>
<li id="menu-item-42137" class="menu-item"><a itemprop="url" href="https://www.mintik.com/online-css-sikistirma-css-compressor"><span class="clrw pad w100" itemprop="name">Online Css Sıkıştırma</span></a></li>
</ul>

Bu yöntemi kullanarak hem sitenizdeki sorgu sayısını azaltabilir hem de daha kolay bir şekilde web işaretlemesi gerçekleştirebilirsiniz.

Mintik is curious about your thoughts. Add a comment
Did you know that members who log in don't see ads?
Sign in with E-mail