Blogger XML Ders 2: Şablonun Anatomisi ve Widget Kuralları

 hız kesmeden serinin en kritik derslerinden birine geçiyoruz. Blogger şablonlarının yönetim paneliyle (Düzen/Layout) konuştuğu dili, yani düzen mimarisini öğreteceğimiz Ders 2 yazımızda hazır:

Blogger XML Dersleri #2: Şablonun Anatomisi – Section ve Widget Kuralları

Blogger XML serimizin ilk dersinde, şişirilmemiş ve en saf (pure) haliyle boş bir şablon iskeleti oluşturmuştuk. Şimdi bu iskeletin içini doldurma ve Blogger’ın yönetim panelindeki "Düzen" (Layout) kısmının kod tarafında nasıl inşa edildiğini çözme zamanı!

Bu derste, şablonun iskeletini oluşturan iki temel yapı taşını öğreneceğiz: <b:section> (Bölümler) ve <b:widget> (Bileşenler/Gadget'lar).

1. Bölüm Yönetimi: <b:section> Nedir?

Blogger panelinde "Düzen" sekmesine girdiğinizde gördüğünüz "Header", "Sidebar", "Footer" gibi kutuların her biri kod tarafında birer <b:section> etiketidir. Sitenizin yerleşim planını bu etiketle belirlersiniz.

Bir HTML sayfasındaki <div> veya <section> neyse, Blogger XML'de de <b:section> odur; ancak tek bir farkla: İçine yönetim panelinden dinamik olarak yeni elemanlar eklenebilir.

<b:section> Kullanım Parametreleri

Tipik bir section tanımı şu şekildedir:

<b:section id='sidebar' class='sidebar' maxwidgets='5' showaddelement='yes'>

  </b:section>

Bu etiket içerisindeki niteliklerin (attributes) ne anlama geldiğini mutlaka bilmelisiniz:

  • id (Zorunlu): Bölümün benzersiz kimliğidir. CSS ile şekillendirme yaparken veya temayı kaydederken sistem bu ID'ye bakar. Aynı sayfada iki tane aynı ID'ye sahip section olamaz.

  • class (Opsiyonel): CSS yazarken kolaylık sağlaması için standart HTML sınıfı atar.

  • maxwidgets (Opsiyonel): Bu bölümün içine yönetim panelinden en fazla kaç tane gadget eklenebileceğini sınırlar. Belirtilmezse sınırı yoktur.

  • showaddelement (Zorunlu/Tavsiye): 'yes' veya 'no' değerlerini alır. Eğer 'yes' yaparsanız, yönetim panelinde o bölümün altında "Gadget Ekle" butonu görünür. Sadece kodla yöneteceğiniz sabit alanlar için 'no' yapabilirsiniz.

 2. Bileşen Yönetimi: <b:widget> Nedir?

Bir <b:section> alanının içine yerleşen ve asıl işi yapan dinamik elemanlara (Blog yazıları, Popüler Yayınlar, Kategoriler vb.) <b:widget> denir.

Blogger şablon kurallarına göre, bir widget asla bir section dışında tek başına var olamaz. Mutlaka bir <b:section> etiketinin içine yazılmalıdır.

📝 <b:widget> Kullanım Parametreleri ve Kritik Kurallar

<b:widget id='Blog1' locked='yes' title='Blog Kayıtları' type='Blog' visible='yes'>

</b:widget>

  • id (Zorunlu): Widget'ın benzersiz kimliğidir. Sistem tarafından otomatik atansa da elle de yazılabilir.

    ⚠️ Altın Kural: Şablon içinde asla aynı Widget ID'sini (id='Header1', id='Blog1') yinelemeyin. Mükerrer ID kullanımı Blogger derleyicisinin çökmesine ve temanın kaydedilememesine neden olur.

  • type (Zorunlu): Widget'ın türünü belirler. Blogger'ın tanıdığı sabit türler vardır. Örneğin ana blog yazıları için 'Blog', popüler yayınlar için 'PopularPosts', düz HTML/JS eklemek için 'HTML' yazılır.

  • locked (Zorunlu): 'yes' veya 'no' değerini alır. Eğer 'yes' yaparsanız, kullanıcı yönetim panelinden bu widget'ı sürükleyip başka yere taşıyamaz veya silemez. Ana blog içeriği (Blog1) genellikle kilitli tutulur.

  • visible (Opsiyonel): 'yes' veya 'no' değerini alır. Widget'ın sitede görünüp görünmeyeceğini belirler.

🔍 Görsel Anatomi: Kod ve Panel İlişkisi

Şablonunuzda yazdığınız bu XML yapısının Blogger'ın yönetim panelinde (Düzen) nasıl bir hiyerarşiye dönüştüğünü şu şekilde düşünebilirsiniz:

[ b:section id='main-sidebar' ]  --> Yönetim Panelindeki "Sidebar" Kutusu

       │

       ├── [ b:widget id='Profile1' type='Profile' ]  --> Profil Gadget'ı

       │

       └── [ b:widget id='HTML1' type='HTML' ]         --> Özel Kod/Reklam Alanı

Uygulama: İlk Canlı Section ve Widget Yapımızı Kuralım

Gelin, ilk dersteki boş şablonumuzun <body> etiketleri arasını güncelleyerek hem bir ana içerik alanı (Blog) hem de yan menü (Sidebar) oluşturalım:

<body>

    

    <b:section id='main-content' class='main-content' showaddelement='no'>

      <b:widget id='Blog1' locked='yes' title='Blog Yazıları' type='Blog' visible='yes'/>

    </b:section>


    <b:section id='site-sidebar' class='site-sidebar' showaddelement='yes'>

      <b:widget id='HTML1' locked='no' title='Reklam Alanı' type='HTML' visible='yes'/>

    </b:section>


  </body>


Kod Analizi:

  • main-content alanında showaddelement='no' dedik ve Blog1 widget'ını locked='yes' ile kilitledik. Böylece kullanıcının ana yazı alanını yanlışlıkla silmesini veya buraya alakasız gadget'lar doldurmasını engelledik.

  • site-sidebar alanında ise showaddelement='yes' bırakarak, burayı panelden yeni eklenecek widget'lara açık ve esnek bir hale getirdik.


🎯 2. Dersin Özeti ve Ödev

Bu derste şablon tasarımının iskelet kurallarını öğrendik. Section ve Widget yapılarını kurarken benzersiz ID kullanımı ve kilit mekanizmaları gibi hayati kuralların üzerinden geçtik.

Bu dersin ödevi: Kendi test temanızda yukarıdaki gibi iki farklı b:section oluşturun ve paneldeki "Düzen" sekmesine giderek birinin kilitli, diğerinin ise yeni gadget eklemeye açık olduğunu doğrulayın.

Bir sonraki dersimizde, sitenizin can damarı olan, sunucudan veri çekip ekrana basmamızı sağlayan Ders 3: Data (Veri) Etiketleri ve Çağırma Yöntemleri konusuna geçeceğiz. Yazılarınızı ekrana basmaya hazırsanız takipte kalın!











Hiç yorum yok:

Yorum Gönder