WordPress Tema HTML Yapısı Oluşturma

Şimdi öze inmeye başlıyoruz.

Herhangi bir HTML Yapısının Hedefleri

Bir siteyi kodlarken iki amacı aklınızda tutmanız gerekir: Yalın kod ve anlamlı kod. Yani  (HTML tags/html etiketler) kullanırken mümkün oldukça az ve bu işaretlemenin anlamsal sınıf kullanırken (semantic class) anlamlı ve ID isimleri içeriklerlerle ilgili olmalıdır, onların nasıl göründüğü ile ilgili değildir.. Örneğin class=”bilesen-alani” içeriği class=”sol-bilesen”  nerede göründüğünü belirtiyor.

WordPress tema kodlarken (ya da herhangi bir içerik yönetim sistemi şablonu) çok yalın, yağsız tutsuz bir kodlama ile gereksiz çok sayıda div elemanları ile kodu doldurmamak gerekir.(Ayrıca kodlamanın SEO’ya uygunluğu hem kod yapısının gereksiz öğeden arınmış, iyi anlaşılır, arama motorları tarafından kolay ve düzgün okunur olması ve ayrıca CSS ve Javascript ile ilgili tarayıcı okuma sıralamalarının site açılış hızına etkisi unutulmamalıdır. ) Daha önce bir sitenin koduna baktıysanız div etiketini görmüşsünüzdür. Bunları HTML kod konteynerları (containers) olarak düşünün, bu konyteynirlar HTML kodu CSS ile idare etmede çok kullanışlıdırlar. Özetle gereksiz kodlamadan kaçının.

HTML5 ile header, nav, footer vb. gibi etiketlerle daha kolay, daha anlamlı işaretleme geliştirildi. Bu elementler div etiket ile benzerlikleri vardır çünki bunlarda HTML kodlara konteynerlar gibi hizmet ediyorlar. Aynı zamanda  HTML kodlamamız için bize daha açıklayıcı anahat sunuyorlar.

Kodlamamızı başka site yapımlarında da kullanabileceğimizi düşünerek yapılandırıyoruz. Böylelikle tekrar tekrar bize lazım olan kodları alıp kullanabiliriz.

WordPress temanın HTML yapısı

Bir WordPress temasının body kısmında kullandığımız HTML yapısına bir bakabilirsiniz.

Gerçekte bu backbone of_s ‘nin (bir x-ray ışını gibi davranır) HTML formudur. Bu kodu metin editörüne yapıştırıp kaydedin. Temamızın dosya yapısını inşa ederken ilerde bunu kullanacağız. Bunu yapmadan önce birkaç şeye daha bakalım.

WordPress temanızın HTML’ne hızlı bir tur

Örnek bir HTML yapısı uygulamasının görüntüsü. Resmi büyütmek için tıklayın

Örnek bir HTML yapısı uygulamasının görüntüsü. Resmi büyütmek için tıklayın

Yukarda örnek bir HTML yapısını inceleyin. Daha koyu renkli olan bloklardır. Bu blokların düzenlenmesi büyük oranda CSS ile yapılır. İlerki dersler bunu biraz daha açacağız.

HTML yapısını istediğiniz şekilde, gereksinimlerinize uygun şekilde değiştirebilirsiniz.

Şimdi bir parça bu resmi inceleyelim:

Birinci olarak sayfanın yukarısında sınıf özniteliği içinde (class attribute) hfeed yazan bir yer görüyorsunuz. Hfeed hatom microformar schema‘nın bir parçasıdır. Basit dille dersek hfeed sınıfını eklediğimizde sayfamız sitemizi okuyan herhangi bir makinaya sizin blog yazıları gibi besleme ile içerik yayınladığını bildirir (rss, atom, feed ne anlama geldiğini biliyorsanız hemen anlamışsınızdır).

Yukarda yine sınıflar (class) larda header ve footer görüyorsunuz, bunlar HTML yapısal etiketleridir. Bu etiketler belgenin geniş kısımlarını açıklar. Gazeteceilik dünyasından sınıf isimlerini almış oluyoruz böylece.

Sonra ortada main area (ana alan) bulunuyor. Bileşen (widget) alanları içerik alanından (class=content-area) sonra sağında yer alıyor. Dikkatinizi çekmiştir içeriğimiz content-area içinde konteynir div’indedir( clas=”site-content”). Bu nokta önemlidir. Ana içeriğimiz sidebarlardan önce hem kullanıcılar hem arama motorlarının önüne geliyor. Hem de negatif kenar boşluklarını hesaplayan CSS tekniği kullanarak bir kaç satır CSS kodu ile 1 ya da 2 sütunlu tema oluşturabiliriz.