WordPress widget’ları, bir WordPress sayfasının veya gönderisinin ana alanının dışına yerleştirilebilen ve bilgi iletme, alışveriş sürecinin bir parçası olma veya yalnızca web sitesinde gezinmeye yardımcı olma gibi çeşitli amaçlara hizmet edebilen web sitesi içeriğinin küçük parçalarıdır. Widget’ları kullanabilmek için, genellikle temanız tarafından oluşturulan kayıtlı widget alanlarına sahip olmanız gerekir. Çoğu durumda, kayıtlı pencere öğesi alanları üstbilgi ve altbilgi alanlarına aittir. Bu yazıda başlık alanı veya daha spesifik olarak başlıkta görüntülenen widget alanları ana odak noktamız olacak. Bu widget alanları genellikle başlıklar, arama widget’ları, alışveriş sepeti widget’ları, sosyal simgeler ve diğer eşit derecede yararlı bilgileri içerir. Bu yüzden bu gün ve yaştaki herhangi bir WordPress web sitesi için bir zorunluluktur.
Hatta widget’lar istenen alana basitçe sürükle ve bırak yöntemiyle eklenir. Bu durum kontrol panelinin Görünüm > Widget’lar bölümünde yapılır, bu nedenle web sitenizin başlığına widget ekleme işlemi çok kolaydır. Bununla birlikte mevcut temanızda belirlenmiş herhangi bir başlık pencere öğesi alanı yoksa veya bunların web sitesindeki yerleşiminden ve görüntülenmesinden memnun değilseniz, web sitenizin başlığına WordPress pencere öğeleri ekleme işlemi zahmetli bir şekilde zorlaşır. Fakat her sorunun bir çözümü vardır. Özel başlık pencere öğesi alanları oluşturarak bu özel sorunun üstesinden gelebilirsiniz. O halde, daha fazla uzatmadan başlayalım.
Özel bir widget alanına WordPress widget’ları ekleme
Özel başlık pencere öğesi alanları kavramı biraz ileri düzeyde olduğundan, bazı özel kodlar kullanılmasını gerektirecektir. Bu yüzden bu makale biraz kodlama açısından yoğun olabilir ve tüm konuşma noktalarını tam olarak kavramak için ek araştırma yapmanızı gerektirebilir. Kullandığımız tüm kodu, geniş bir kitlenin yine de özel başlık widget alanları ekleme adımlarını takip edebilmesi için ayrıntılı olarak açıklayacağız.
Başlamadan Önce
Bu makale için QodeInteractive’den Lekker temasını kullanacağız ve amacımız yeni bir widget alanı oluşturmak ve görüntülemek. Örneğimizde içeriği, mevcut başlık içeriğinden sonra, yani logo ve gezinme menüsünün altında gösterilecektir. Bu şekilde oluşturacağımız kod temaya özel olacak olsa da attığımız her adımı özenle anlatacağız. Bu şekilde, bilgiyi kodu buna göre düzenlemek ve mevcut temanıza ve başlık düzenine uygun olduğundan emin olmak için kullanabileceksiniz.
Özel bir kod snippet’inin nasıl oluşturulacağını ve ekleneceğini tartışacağımız için, önceden web sitenizin bir yedeğini almanızı kesinlikle öneririz. Bunu önlem olarak zaman zaman yapmalısınız.
Size göstereceğimiz kod, FTP kullanılarak alt temanızın functions.php dosyasına veya siteye özgü bir eklentiye eklenebilir. Makalenin ilerleyen kısımlarında, şablon dosyalarını doğrudan değiştirmek yerine web sitenize yeni özellikler eklemenin neden tercih edilen yöntemler olduğuna değineceğiz. Fakat FTP’yi nasıl kullanacağınızı bildiğinizi varsayıyoruz, bu nedenle bu kodun eklenmesiyle ilgili ayrıntılara girmeyeceğiz.
Özel bir widget alanı oluşturma
Yapmanız gereken ilk şey, register_sidebar() işlevini kullanarak yeni bir pencere öğesi alanı oluşturmaktır. Bu amaçla kullandığımız kodun bir örneğini aşağıda görebilirsiniz.
function register_custom_header_widget_area() {
register_sidebar(
array(
'id' => 'new-header-widget-area',
'name' => esc_html__( 'New Header Widget Area', 'theme-domain' ),
'description' => esc_html__( 'Custom header after widget area', 'theme-domain' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-title-holder"><h3 class="widget-title">',
'after_title' => '</h3></div>'
)
);
}
add_action( 'widgets_init', 'register_custom_header_widget_area' );
Hadi parçalayalım.
Kod, widgets_init kancasına bağlı olan register_custom_header_widget_area() adını verdiğimiz özel bir işlevi temsil eder. Bu işlevin içeriği oldukça açıktır; yeni pencere öğesi alanımızı kaydetmek için kullandığımız register_sidebar() işlevinin tek bir kullanımı. Bu widget alanının kimliği new-header-widget-area’dır ve onu görüntülerken kullanılacaktır. Daha sonra adı, adın altında gösterilecek olan widget alanından sonra Özel başlık açıklamasıyla birlikte Yeni Başlık Widget Alanı’dır. Görünüm > Widget’lar bölümünde bu widget alanına eriştiğinizde bunların her ikisi de görünür olacaktır.
Ek olarak before_widget ve after_widget niteliklerini kullanarak o widget alanına eklenen herhangi bir widget’ın görüntüsünü saran HTML yapısını belirledik. Hatta ön uçta gösterilmeleri koşuluyla widget başlıklarını saran HTML yapısını, before_title ve after_title niteliklerini kullanarak belirledik.
Örneğimizde kullanmamış olsak da, register_sidebar() işlevinin bazı ek parametreleri kabul ettiğini belirtmekte fayda var. Bu işlev hakkında daha fazla bilgi edinmek isterseniz, daha önce bağlantısını verdiğimiz kod referans sayfasına göz atabilirsiniz.
Özel widget alanınızı kaydettikten sonra, Widget’lar bölümünde görüntülenecektir. Bu yüzden bir sonraki adımınız Görünüm > Pencere Öğeleri’ne gitmek ve adını arayarak yeni özel başlık pencere öğesi alanını bulmaktır. Onu bulduktan sonra, soldaki Kullanılabilir Widget’lar listesinden ona widget ekleyebilirsiniz. Örnek başlık alanımız için, bir metin widget’ı ve bir sosyal simgeler widget’ı ekledik.
İstediğiniz widget’ları yeni oluşturduğunuz widget alanına ekledikten sonra, yapılacak tek şey widget alanını görüntüleyen kodu eklemektir. Kulağa ne kadar basit gelse de, sürecin en zor kısmını temsil ediyor. Ek olarak buna nasıl yaklaştığınız, kullandığınız temaya, koduna ve dosya ve klasör yapısına bağlı olarak büyük ölçüde farklılık gösterir. Bunun neden böyle olduğuna bir göz atalım.
Her şeyden önce, bu özel widget alanını görüntülemek için gereken kodun temelleri oldukça basittir. Aşağıda ekledik.
if ( is_active_sidebar( 'new-header-widget-area' ) ) { ?>
<div id="header-after" class="additional-header-widget-area">
<?php dynamic_sidebar( 'new-header-widget-area' ); ?>
</div>
<?php }
Gördüğünüz gibi, bu küçük kod parçacığı tek bir if ifadesini temsil ediyor. Bunun anlamı, is_active_sidebar() işlevini kullanarak, önce new-header-widget-area kimliğine sahip pencere öğesi alanına herhangi bir pencere öğesinin eklenip eklenmediğini kontrol etmemizdir. Varsa, kodun geri kalanı yürütülür, yani o widget alanı dynamic_sidebar() işlevi kullanılarak görüntülenir.
Hatta içeriği bir div öğesiyle sardık ve benzersiz bir kimlik ve özel bir sınıf ekledik. Bu durum yeni widget alanını biçimlendirmek için sonunda yazmamız gereken CSS kodu için kullanışlı olacaktır.
Bu kod oldukça basit olsa da asıl problem nereye ve nasıl yerleştirileceğini bilmektir. Geçmişte, geliştiriciler bu tür kod parçacıklarını doğrudan karşılık gelen şablon dosyalarının içine eklemişti. Bu özel durumda, karşılık gelen şablon dosyası, temanızın dizininde yer alan header.php dosyası olacaktır.
Bununla birlikte tema güncellemelerine karşı korumalı olmadığı için, yeni özellikler eklemenin bu yolu son yıllarda gözden düşmüştür. Daha doğrusu, tema güncellendiğinde şablon dosyalarının üzerine yazıldığı için, aynı özellikleri web sitenizde tutmak için her güncellemeden sonra aynı düzenlemeleri tekrarlamanız gerekir. Bu çok zaman alıcı olduğundan, önerilen uygulama bunun yerine kanca kullanmak olmuştur.
WordPress kancalarına aşina olmayanlar için en basit ifadeyle yer tutucular olarak tanımlanabilirler. Temel olarak geliştiriciler bunları temaların veya eklentilerin içinde bırakır, böylece diğer kullanıcılar bunları yeni özellikler eklemek (eylem kancaları) veya mevcut olanları düzenlemek (filtre kancaları) için kullanabilir. Bu durum daha sonra uygun kancalara bağlanan özel işlevler yazılarak yapılır. Bunu yaptığınızda, işlev kodu, doğrudan uygun şablon dosyasının içine yerleştirilmiş gibi çalışır. Bu durum şablon dosyalarını değiştirmediğinden, çalışmanızın tema güncellemelerinde geçersiz kılınacağı konusunda endişelenmenize gerek yoktur. Bu durum karşılık gelen şablon dosyası yerine alt temanızın functions.php dosyasının içine kod ekleyerek veya siteye özgü bir eklenti aracılığıyla mümkün olur. Ve bu şekilde, yalnızca bir kez eklemeniz gerekir ve tema güncellemelerinden etkilenmez.
Özel kod eklemenin önerilen (ve geliştirici tarafından onaylanan) yönteminin neden kanca kullanmak olduğunu belirlediğimize göre, bu kodun nasıl görünebileceğini keşfedelim. Bu özel durumda, kullandığımız kodun bir örneği aşağıda gösterilmiştir.
function name_of_your_custom_function() {
if ( is_active_sidebar( 'new-header-widget-area' ) ) { ?>
<div id="header-after" class="additional-header-widget-area">
<?php dynamic_sidebar( 'new-header-widget-area' ); ?>
</div>
<?php }
}
add_action( 'use_the_appropriate_action_hook_here', 'name_of_your_custom_function' );
Bunu çözmek için, yukarıda bahsedilen kodu bir fonksiyonun içine koyduk ve fonksiyonu uygun bir eylem kancasına bağlayan add_action() fonksiyonunu çağırdık. Bu şekilde kullanıldığında, işleve geri arama işlevi veya yalnızca geri arama adı verilir.
Genel olarak konuşursak, add_action() işlevi bu işlevi kancalamak için kullanılırken aynı ad kullanıldığı sürece geri aramanın adı daha az önemlidir. Çoğu zaman, geliştiriciler, kodun amacını okuyan herkes için anlaşılır hale getirmek için geri aramalar için açık adlar kullanma eğilimindedir. Size de aynısını yapmanızı tavsiye ederiz.
Geri aramanızı kancalamak istediğiniz kancanın adı, add_action() işlevinin ilk parametresidir. Bu durum kodun en önemli kısmıdır. Fakat duruma göre farklılık gösterir. Bu yüzden size tüm WordPress temalarıyla çalışacak bir kanca sağlayamıyoruz. Bunun yerine, kendinize uygun bir kanca bulmanız gerekecek. Fakat daha sonra örneğimizde kullandığımız en uygun kancayı bulmanın ardındaki süreçte size rehberlik edeceğiz.
Bunu yapmadan önce, add_action() işlevinin en fazla dört parametre kabul ettiğini bilmelisiniz. Bu dördünden yalnızca ikisini kullandık: kanca etiketi ve geri arama adı, çünkü bu özel durumda bundan fazlası gerekmiyordu. Bu işlevin kabul ettiği diğer iki parametre, geri çağırmanın kabul ettiği öncelik ve argüman sayısıdır. Bunlar ve add_action() işlevinin genel kullanımı hakkında daha fazla bilgi edinmek için yukarıda verdiğimiz bağlantıyı incelemenizi öneririz. Bunu söyledikten sonra, doğru kancayı bulma konusundaki açıklamamıza devam edelim.
Yeni bir başlık pencere öğesi alanı görüntüleme kodu, header.php dosyasına eklenmelidir (geçerli temanızın dizininde bulunur). Bu durum onu uygun bir aksiyon kancası aramaya başlamak için mükemmel bir yer yapar. Aradığınız kod satırı, kanca etiketinin parametresi olacağı do_action() işlevinin kullanımını içerecektir.
Bu şekilde birden fazla kanca etiketi bulursanız, bu kancaların her birini yukarıda oluşturduğumuz kodda birer birer değiştirerek test edebilirsiniz. Bu koddaki bir kancayı değiştirdikten sonra, kodu ya alt temanızın functions.php dosyasının içine ya da siteye özgü bir eklentinin içine doğru şekilde yerleştirin ve web sitenizdeki sonuçları inceleyin. Yer tutucunun kodda nerede olduğuna bağlı olarak yeni pencere öğesi alanınızın içeriği çeşitli konumlara yerleştirilebilir. Bunlar header.php dosyasındaki koda ve do_action() işlev çağrısının bu kod içindeki yerleşimine bağlı olarak logonun üstünü veya altını veya gezinmeyi, onun arasında veya başlığın kenarlarından birini içerir. Bu yüzden birden çok kanca varsa, uygun olanı seçmek şablon dosya kodunun yapısına ve yeni başlık pencere öğesi alanının nerede görüntülenmesini istediğinize bağlıdır.
Fakat bazı durumlarda sadece header.php dosyasını incelemek en uygun kanca etiketini bulmak için yeterli olmayacaktır. Bu durum header.php dosyasında herhangi bir yer tutucu kanca yoksa veya kodunun bazı bölümleri ayrı dosyalara konmuşsa ve bunlar kullanabileceğiniz bazı kancalar içeriyorsa olabilir. Bu yüzden başlık kodunun diğer tüm bölümlerini de incelemelisiniz.
Geçerli temanızdaki dosya ve klasörlerin yapısına bağlı olarak başlık kodu birkaç dosyaya veya hatta iç içe geçmiş bir dosya ve klasör yapısına bölünebilir. Bizim tarafımızda durum buydu. Bu ek dosyalar için \wp-content\themes\lekker\inc\header dizinine baktık. İnceledikten sonra…