BU DERSİN BAŞLIKLARI
Sidebar Nedir?
Adının sayfa yanı olduğuna bakmayın. İlk defa, sayfaların yan taraflarında kullanıldıkları için bu adı almışlardır. Kullanışlı oldukları için, günümüzde, sayfaların her yerinde kullanılmaktadırlar.
Sidebar denilen kısımlar, bileşen (Widget) eklemek için kullanılan sayfa bölümleridir. WordPress temanızda sidebar kullanmak zorunda değilsiniz, aynı şekilde, bir sayfada istediğiniz sayıda sidebar kullanabilirsiniz.
Temanızda bir sidebar kullanmak demek, temanızı kullanan kişinin, dilediği bileşeni bu sidebara ekleyerek, sayfalarında bileşenlerin içeriklerini sergileyebilmesi demektir. Bir sidebara, dilediğiniz sayıda, bileşen ekleyebilirsiniz. Bileşen eklenebilme özellikleri sayesinde, sidebarlar, sitenizde, çok çeşitli içeriklerin sergilendiği bölümler haline gelebilmektedirler. WordPress temaları için üretilmiş on binlerce bileşenin var olduğu düşünülürse, sidebarların ne kadar önemli şablon parçaları olduğu anlaşılacaktır.
Temanıza eklenmiş bir sidebara, yönetim panelinden, bileşen eklemenin iki yolu vardır:
- Görünüm->Bileşenler sayfasından
- Görünüm->Özelleştir->Bileşenler sayfasından
Temaya Bir Sidebar Ekleme
Temanıza bir sidebar eklemenin iki aşaması vardır. İlk aşamada, sidebarın kaydı yapılmalıdır. Bir sidebarı kaydetmek için, register_sidebar() fonksiyonu kullanılır ve bu işlem functions.php dosyasında yapılır. register_sidebar() fonksiyonunun çalışabilmesi için, widgets_inits kancası ile tetiklenmesi gerekir. İkinci aşamada, kaydı yapılan sidebar, şablon dosyalarına eklenir. Sidebarı, şablon dosyalarına eklemek için, dynamic_sidebar('sidebarin-id-degeri veya adı') fonksiyonu kullanılır. Bu aşamaları detaylı olarak inceleyelim:
Sidebarı Kaydetme
Temanıza bir sidebar eklemenin ilk aşaması, functions.php dosyasına bu sidebarı kaydetmektir. Sidebar kaydetmek için kullanılan fonksiyon register_sidebar($argumanlar) fonksiyonudur. Bu fonksiyon, bir çok argümanı olan, dizi şeklinde bir parametre ile çalışır. Bu parametrenin argümanları şunlardır:
$argumanlar = array(
'name' => __( 'Sidebarın Adı', 'textdomain' ),
'id' => "sidebarin-id-degeri",
'description' => 'Sidebarın açıklaması. Bu açıklama, sadece yönetim panelinde bileşen sayfasında görünür',
'class' => '', // Yönetim panelindeki bileşenler sayfasında, bileşeni saran div elemanına bir CSS sınıfı oluşturur. Sadece yönetim panelinde kullanılır
'before_widget' => '<section id="%1$s" class="widget %2$s">', // bileşeni saran eleman
'after_widget' => "</section>\n",
'before_title' => '<h2 class="widgettitle">', // bileşenin başlığını saran eleman
'after_title' => "</h2>\n",
);Argümanları daha yakından incelersek:
‘name’
(string) Sidebarın adıdır. Bu isim, temanızda görünmez, yönetim panelinde, bileşenler sayfasında görünür.
‘id’
(string) Sidebarın kimliğidir. Türkçe karakter ve boşluk içermemelidir ve başka bir sidebarın kimliği ile aynı olmamalıdır. Sidebarı, tema içinde kullanacağımız zaman, bu kimlik bilgisi ile çağıracağız.
‘description’
(string) Sidebar ile ilgili bir açıklamadır. Bu açıklama, temanızda görünmez, yönetim panelinde, bileşenler sayfasında görünür.
‘class’
(string) Yönetim panelinde, bileşenler sayfasında, sidebarı saran div elemanı için bir CSS sınıfı belirler.
‘before_widget’
(string) Temanızda, sidebarı saracak olan HTML elemanını belirlemenizi sağlar.
‘after_widget’
(string) Sidebarı saran HTML elemanının kapanışıdır.
‘before_title’
(string) Sidebarın başlığını saran HTML elemanını belirlemenizi sağlar.
‘after_title’
(string) Sidebarın başlığını saran HTML elemanının kapanışıdır.
Görüldüğü gibi, argümanlar genelde, sidebarın HTML yapısını düzenlemek için kullanılıyor. Sidebar eklerken, bu argümanlar sayesinde, temanızın yapısına uyan herhangi bir HTML yapısını ve CSS sınıflarını kullanabilirsiniz.
Örnek Bir Sidebar Kaydetme Kodu
Aşağıdaki kodda, iki sidebar aynı anda kaydedilmiştir.
function ilktemam_sidebar_ekle() {
register_sidebar( array(
'name' => __( 'Sayfa Yanı Sidebarı', 'textdomain' ),
'id' => 'sidebar-1',
'description' => 'Eklediğiniz bileşenler, sayfalarınızın yan tarafında görünecektir.',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Üst Sidebar', 'textdomain' ),
'id' => 'sidebar-2',
'description' => 'Bu sidebar, ana menünün üstüne, reklam koymak için tasarlanmıştır.',
'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',
'after_widget' => '</li></ul>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'ilktemam_sidebar_ekle' );Bu kodlar, yönetim paneli : Görünüm->Bileşenler sayfasında iki adet sidebar oluşturacaktır.
functions.php dosyasına sidebar kaydı yaptığınızda, bu sidebarlar, yönetim panelindeki, Bileşenler sayfasında yayınlanır, burada bu sidebarlara bileşen eklenebilir. Fakat, bu sidebarlar, henüz temanızda görünmez.
Kaydedilen Sidebarları Temada Kullanma
Kaydettiğiniz sidebarın temanızda görünmesi için aşağıdaki adımları izlemelisiniz:
- Temanızın ana dizininde,
sidebar.phpadında bir şablon parçası dosyası oluşturmalısınız ve bu dosyada,dynamic_sidebar()fonksiyonu ile kaydettiğiniz bir sidebarı çağırmalısınız. - Temanızın, uygun gördüğünüz şablon dosyasında,
get_sidebar()fonksiyonu ile bu şablon parçasını çağırmalısınız.
Aşağıda örnek bir sidebar.php dosyası verilmiştir.
<div id="sidebar-bir-icin" class="sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<!-- Sidebara en az bir tane bileşen eklenmiş -->
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php else : ?>
<!-- Henüz bir bileşen eklenmemiş -->
<?php endif; ?>
</div>Bu şablon parçasını, bir şablon dosyasında kullanmak için aşağıdaki kod ile çağırırız.
<?php get_sidebar(); // ana dizindeki sidebar.php dosyasını getirir ?>Eklediğimiz sidebarı, temada göstermenin başka bir yolu da, sidebar.php dosyasındaki kodları, yani dynamic_sidebar( 'sidebarin-adi' ) fonksiyonunu, doğrudan, sidebarı göstereceğimiz şablon dosyasında kullanmaktır. Bu şekilde, sidebar.php dosyasına ihtiyaç duymadan, dilediğimiz sidebarı, şablon dosyalarımıza yerleştirebiliriz.
Birden Çok Sidebar Şablonu Kullanma
Birden çok sidebar kullanmak için, öncelikle, functions.php dosyasında birden çok sidebar kaydetmek gerekir.
Kaydedilen bu sidebarların her biri için, farklı bir şablon parçası dosyası oluşturabilir: sidebar-{ozel-sablonum-1}.php, sidebar-{ozel-sablonum-2}.php…
Bu şablon parçalarını, dilediğimiz şablon dosyasında, ayrı ayrı çağırabiliriz: get_sidebar('ozel-sablonum-1'), get_sidebar('ozel-sablonum-2')…
Birden çok sidebar kullanmanın bir başka yolu da, dynamic_sidebar( 'sidebarin-adi' ) fonksiyonunu, her bir sidebar için ayrı ayrı olmak üzere, doğrudan şablon dosyalarında kullanmaktır. Örneğin, ‘id‘ değeri ‘sidebar-1‘ olarak kaydedilmiş bir sidebarı, front-page.php şablonunda kullanmak isteyelim. Bunun için, bu şablon dosyasına, şu kodu doğrudan eklemek yeterlidir:
<div id="sidebar-bir-icin" class="sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<!-- Sidebara en az bir tane bileşen eklenmiş -->
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php else : ?>
<!-- Henüz bir bileşen eklenmemiş -->
<?php endif; ?>
</div>Yukarıdaki örneğe devam ederek, yine front-page.php şablonunda, bu defa ‘id‘ değeri ‘sidebar-2′ olarak kaydedilmiş bir başka sidebarı kullanmak isteyelim. Bunun için, bu şablon dosyasına, şu kodu doğrudan eklemek yeterlidir:
<div id="sidebar-iki-icin" class="sidebar">
<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
<!-- Sidebara en az bir tane bileşen eklenmiş -->
<?php dynamic_sidebar( 'sidebar-2' ); ?>
<?php else : ?>
<!-- Henüz bir bileşen eklenmemiş -->
<?php endif; ?>
</div>Sidebara Varsayılan Bileşenler Yerleştirme
Kullanıcınız, temanızı ilk defa yüklediğinde, sidebarlarınızın boş görünmesini istemiyorsanız, yer tutucu gibi, bazı bileşenleri varsayılan olarak ekleyebilirsiniz. Aşağıda buna örnek bir kod verilmiştir:
<div id="primary" class="sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<!-- Kullanıcı Sidebara en az bir tane bileşen eklenmiş -->
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php else : ?>
<!-- Kullanıcı sidebara henüz bileşen eklememiş -->
<aside id="search" class="widget widget_search">
<?php
// Arama formu bileşeni
get_search_form();
?>
</aside>
<aside id="archives" class"widget">
<h3 class="widget-title"><?php _e( 'Yıllık Arşiv', 'shape' ); ?></h3>
<ul>
<?php
// Yıllık bazda arşiv bileşeni
wp_get_archives( array( 'type' => 'yearly' ) );
?>
</ul>
</aside>
<aside id="meta" class="widget">
<h3 class="widget-title"><?php _e( 'Giriş/Çıkış', 'shape' ); ?></h3>
<ul>
<!-- Kullanıcı kontrolleri -->
<?php wp_register(); // Üye kaydı ?>
<li><?php wp_loginout(); // Üye girişi-çıkışı ?></li>
<?php wp_meta(); // Genel amaç için yer tutucu fonksiyon ?>
</ul>
</aside>
<?php endif; ?>
</div>Bir şablon dosyasında, yukarıdaki kodlar ile oluşturulan sidebar şablonu, kullanıcınız bir bileşen eklemediği müddetçe, temanızda şu şekilde görünecektir:
Birden çok sidebarı bir defada eklemek kullanılır.
İki parametre ile çalışır.
register_sidebars($sidebar_sayısı, $sidebarların_argümanları);Parametreler ve kullanımları şöyledir:
(int) Zorunlu değildir. Eklemek istediğiniz sidebar sayısıdır.
(array) Zorunlu değildir. Eklemek istediğiniz sidebarların argümanlarıdır. Aşağıda bu argümanların neler olduğunu görebilirsiniz.
‘id’
(string) Sidebarların id değerleridir. Birden çok sidebar kaydı yaparken, ikinci sidebardan başlayarak, burada belirttiğiniz id değerinin sonunu, sırasıyla -2, -3… sayıları getirilecektir. Mesela, 3 tane sidebar kaydı yaparsanız ve id değerine “benim-sidebarim” derseniz, oluşacak sidebarların id değerleri; “benim-sidebarim”, “benim-sidebarim -2”, “benim-sidebarim-3” şeklinde olacaktır. Varsayılan değeri ‘sidebar‘ dır.
‘name’
(string) Sidebarların isimleridir. Eğer birden çok sidebar kaydı yapıyorsanız, girdiğiniz değerin sonuna “%d” ifadesi bırakarak, her bir sidebar için girdiğiniz ismin sonuna bir sayı eklenmesini sağlayabilirsiniz. Mesela, 3 tane sidebar kaydı yaparsanız ve name değerine “Kenar %d” derseniz, oluşacak sidebarların isimleri; ” Kenar 1″, “ Kenar 2″, “ Kenar 3” şeklinde olacaktır. Varsayılan değeri ‘Sidebar %d‘ dir.
Diğer argümanlar, register_sidebar() fonksiyonunun argümanları ile aynı şekilde oluşturulur.
function ilktemam_sidebarlar() {
register_sidebars( 2, array(
'id' => 'ornek-sidebar-idleri',
'name' => 'Örnek Sidebar İsimi %d',
'description' => 'Örnek bir açıklama',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h2>',
'after_title' => '</h3>',
));
}
add_action( 'widgets_init', 'ilktemam_sidebarlar' );Yukarıda verilen kod, yönetim panelinin, Görünüm->Bileşenler sayfasında, aşağıdaki sidebarları oluşturacaktır:
1 yorum: “4.8 Sidebar (Sayfa Yanı)”