WordPress'e Kenar Çubuğu Nasıl Eklenir » Adım Adım Nihai Kılavuz

WordPress sitenizi oluştururken, WordPress sitenizin düzen bölümlerinden biri olarak bir kenar çubuğu eklemelisiniz. Temel HTML sitesinde bir kenar çubuğu oluşturmak basittir, çünkü yalnızca <aside> </aside> kenar çubuğu etiketlerini kullanmanız gerekir, ancak WordPress'e bir kenar çubuğu eklemek için farklı bir yaklaşıma ihtiyacınız vardır.

Kenar Çubuğu Şablon Etiketi: WordPress'te Kenar Çubuğu Nasıl Görüntülenir?

WordPress'in şablon etiketleriyle çalıştığını ve üstbilginin get_header() işleviyle çağrıldığını ve altbilginin get_footer() işleviyle çağrıldığını hatırlamanız önemlidir. Kenar çubuğu için get_sidebar() şablon etiketiyle görüntülenir.

Bu şablon etiketi, WordPress kenar çubuğunu eklemek istediğiniz herhangi bir yere eklenebilir. Ancak WordPress kenar çubuğunu görüntülemeye başlamadan önce, onu şablonlarda çağırmadan önce tema kodunuzda var olacak şekilde nasıl oluşturulduğunu öğrenmemiz gerekir.

WordPress'te bir kenar çubuğu eklemek için izlemeniz gereken iki önemli adım vardır; bu adımlar şunları içerir: kenar çubuğunu kaydetme, kenar çubuğunu çağırma

Adım Adım WordPress'e Kenar Çubuğu Nasıl Eklenir

Yeni kenar çubuğunu WordPress'e başarıyla eklemek veya WordPress'te özel bir kenar çubuğu oluşturmak için aşağıdaki adımları uygulamanız gerekir:

1. İlk olarak, WordPress temanızın yedek bir kopyasını oluşturun
2. Ana WordPress temanızdan bir alt tema oluşturun ve alt tema, functions.php dosyasına sahip olmalıdır.
3. Alt temanızın bu functions.php dosyasının içinde , kenar çubuğunu oluşturmak için register_sidebar() işlevini kullanacaksınız.
4. sidebar.php dosyasını oluşturun ve bu dosyaya dynamic_sidebar() işlevini kenar çubuğunun adıyla şu şekilde ekleyin – dynamic_sidebar( 'sidebar-1' ) burada kenar çubuğu-1, kenar çubuğunu kaydederken eklediğiniz kenar çubuğunun kimliğidir.
5. Tema şablon dosyalarınızda , artık get_sidebar() şablon etiketini kullanarak kenar çubuğunu çağırabilirsiniz .
6. Özel bir kenar çubuğu oluşturduysanız, özel kenar çubuğunu görüntülemek için dynamic_sidebar() işlevini kullanabilirsiniz .

WordPress Kenar Çubuğunun Anatomisi

WordPress'teki kenar çubuğunun nasıl çalıştığını derinlemesine anlamak için kenar çubuğu kodunun farklı WordPress tema dosyalarına nasıl yayıldığını öğrenmeniz gerekir.

WordPress Kenar Çubuğu İşlevleri

WordPress kenar çubuğu eklemeyle ilgili üç WordPress işlevinin şunlar olduğunu bilmek önemlidir:

• Kenar Çubuğunu Kaydet – register_sidebar()
• Dinamik Kenar Çubuğu – dynamic_sidebar()
• Kenar Çubuğunu Alın – get_sidebar()

Kenar Çubuğunu Kaydedin – Birinci Adım

Bu register_sidebar() işlevi, kenar çubuğunu oluşturan ilk işlevdir ve temanızın functions.php dosyasında bulunur.

Theme functions.php dosyanızı açtığınızda, bu register_sidebar() fonksiyonunun temanızda görüntülenen çeşitli kenar çubuklarını kaydettiğini görmelisiniz.

Varsayılan Yirmi Onyedi WordPress temasında olduğu gibi, aşağıdaki resimde o temadaki kenar çubuklarını kaydeden kodu görebilirsiniz:

Temel olarak, bu işlev her şeyi başlatan işlevdir.

Kenar Çubuğu Parametrelerini Kaydet

Kayıt kenar çubuğu işlevi, bir dizi veya dizenin veri biçiminde olabilen çeşitli argümanları alan bir işlev olarak ifade edilir. Genel olarak şu şekilde ifade edilebilir:

register_sidebar( array|string $args = array() )

Aşağıda, işlev çağrısı içinde iletilen diziye farklı parametrelerin eklendiği bir WordPress temasında kullanılan register_sidebar işlevinin bir görüntüsü verilmiştir:

Bu WordPress işlevinin kabul edebileceği, PHP Dizesi veya PHP dizisi olabilecek çeşitli argümanları vardır. Argümanlar şunları içerir:

• Ad – bu, kenar çubuğunun adı veya başlığıdır, bir dize olmalıdır.
• Kimlik – bu, kenar çubuğunu çağırmak için dynamic_sidebar () işlevini kullanacağınız kenar çubuğunun benzersiz bir tanımlayıcısıdır.
• Açıklama – bu, Pencere Öğeleri arabiriminde görüntülenen kenar çubuğunun açıklamasıdır ve bir dizedir.
• Class Bu, kenar çubuğu için stil oluşturmanıza yardımcı olacak fazladan bir CSS sınıfı eklemek için bir argümandır.
• Before_widget – bu, kenar çubuklarının her birinin çıkışından önce eklenen HTML içeriğidir.
• After_widget – bu, kenar çubuklarının her biri çıktıktan sonra eklenen HTML içeriğidir.
• Before_title bu, görüntülendiğinde kenar çubuğu başlığına eklenecek HTML içeriğidir ve varsayılan genellikle <h2> açılış HTML etiketidir.
• After_title bu, görüntülendiğinde kenar çubuğu başlığına eklenecek HTML içeriğidir ve varsayılan, genellikle <h2> açılış HTML etiketidir.

Bu işlev, function.php dosyasına eklenir ve aşağıda paylaşılana benzer bir eylem kancası kullanarak WordPress kenar çubuklarını kaydeder:

add_action( 'widgets_init', ' njengah_tutorial_sidebars' ' );

Bir kenar çubuğu kaydetmek için, widgets_init olayına bağlanmamız gerekiyor ve bu durumda geri çağırma işlevini 'njengah_tutorial_sidebars' olarak adlandırdığımız gibi, seçtiğimiz bir adla geri arama işlevine sahibiz.

Kenar çubuğunu kaydetmek için function.php dosyanıza eklemeniz gereken kodun tamamı aşağıdaki gibidir:

 <?php

//Geri arama işlevi 

function njengah_register_sidebar_tutorial() {
	
	// Kenar Çubuğu işlevini kaydedin - https://developer.wordpress.org/reference/functions/register_sidebar/
	register_sidebar(
		sıralamak(
			'name' => __( 'Kenar Çubuğu Örneği', 'textdomain' ),
			'id' => 'kenar çubuğu-1',
			'description' => __( 'Blog gönderilerinde ve arşiv sayfalarında kenar çubuğunuzda görünmesi için buraya widget ekleyin.', 'textdomain' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget' => '</section>',
			'before_title' => '<h2 class="widget-title">',
			'after_title' => '</h2>',
		)
	);
	
} 

// Eylem kancası 

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

Dinamik Kenar Çubuğu – İkinci Adım

Bu fonksiyon dynamic_sidebar() şimdi yukarıdaki birinci adımda kaydettiğimiz kenar çubuğunu çağırıyor ve kod, kenar çubuğu.php dosyasına veya ilk adımda oluşturduğumuz kenar çubuğunu görüntülemek istediğimiz başka bir dosyaya yerleştiriliyor.

dynamic_sidebar() işlevinin genel ifadesi aşağıdaki gibidir:

dynamic_sidebar( int|string $index = 1 )

Bu işlev bir tamsayı veya bir dize argümanı alır ve bu, ilk adımda kenar çubuğunu kaydederken kullanılan ad veya kimlik parametreleri olabilir.

Varsayılan yirmi yedi WordPress temasında sidebar.php dosyasını açtığınızda, aşağıdaki resimde gösterildiği gibi dynamic_sidebar() işlevini göreceksiniz:

Bu durumda, bu kenar çubuğunu varsayılan kenar çubuğu olarak görüntüleyebilmemiz için register_sidebar işlevinin id parametresini dynamic_sidebar işlevine aktardığımızı görebilirsiniz. Aşağıdaki resimde gösterildiği gibi:

Bu kenar çubuğunu özel bir kenar çubuğu olarak kaydettiysek, aşağıdakileri içerebilecek herhangi bir tema şablonu dosyasında göstermek için yukarıdaki kodu kullanırdık; üstbilgi, altbilgi, gövde vb. Bu nedenle, kenar çubuğunu gösterecek kod aşağıdaki gibi olmalıdır:

 <?php if ( is_active_sidebar( 'özel' ) ) : ?>
  <div id="kenar çubuğu">
    <?php dynamic_sidebar( 'özel'); ?>
   </div>
<?php endif; ?>

Gördüğünüz gibi, kenar çubuğunun etkin olup olmadığını doğrulamak için bir if ifadesi kullanıyoruz ve burada kullandığımız işlev is_active_sidebar() . Bu işlev, yalnızca dynamic_sidebar() 'da iletilen kenar çubuğunun kullanımda olup olmadığını öğrenir. Bu, WordPress koşullu etiketlerinden biridir.

Kenar Çubuğunu Alın – Üçüncü Adım

Bir temada varsayılan WordPress kenar çubuğunu oluştururken kaydolmanız , sidebar.php dosyasını oluşturmanız ve son olarak kenar çubuğunu şablona yüklemek için get_sidebar() t emplate etiketini kullanmanız gerekir.

get_sidebar, farklı sayfalarda farklı kenar çubuklarını görüntülemek için kullanılabilir, çünkü işlev varsayılan olarak kenar çubuğunun adına eşdeğer bir dize argümanı alır. Kenar çubuğunu veya ID parametresini yukarıdaki adımda belirtildiği gibi kaydetmek için kullandığınız ad.

get_sidebar( string $name = null )

Dolayısıyla, ' cool-sidebar ' adında bir kenar çubuğunuz varsa, özel bir sayfa şablonundaki kenar çubuğunu aşağıdaki gibi çağırabilirsiniz:

get_sidebar('cool-sidebar');

Ayrıca her sayfa için birkaç kenar çubuğuna sahip olabilirsiniz ve kenar çubuklarının her birini koşullu olarak farklı sayfalarda görüntülemek için bir if/else ifadesi kullanabilirsiniz, burada üç kenar çubuğumuz olan bu kodda olduğu gibi; biri ana sayfa, diğeri 404 ve varsayılan kenar çubuğu için:

 if ( is_home() ) :

      get_sidebar('ev');

   aksi takdirde ( is_404() ) :

      get_sidebar('404');

   Başka :

     get_sidebar();

endif;

WordPress Kenar Çubuğu Dosyaları

Kenar çubuğu kodunun eklendiği yedi yaygın WordPress tema dosyasının şunlar olduğunu bilmek de aynı derecede önemlidir:

• functions.php File
• sidebar.php File
• Pages Files
• Posts Files
• Custom Posts Type Files
• footer.php File
• header.php File

Kod, en yaygın WordPress widget eklentilerinden bazıları gibi kenar çubuğu widget'larını kaydettiğiniz ve görüntülediğiniz eklentilere de eklenebilir.

Bir WordPress geliştiricisi veya WordPress'in nasıl çalıştığını öğrenen bir WordPress acemi iseniz, bu dosyaların WordPress kenar çubuğunu ekleme ve görüntüleme ile ilgili şeklini anlamak, profesyonel olma yolunda büyük bir adım olacaktır.

Kenar Çubuğu Kodu Her Tema WordPress Dosyasında Nasıl Çalışır?

Hızlı bir özette, WordPress'e kenar çubuğu eklemenin üç işlevi, sırasıyla aşağıdaki tabloda gösterilen bu dosyaların her birine yerleştirilmiştir:

WordPress'e kenar çubuğu eklemek için, aşağıdakileri içeren bu WordPress geliştirme eğitiminde ana hatlarıyla belirttiğimiz üç adımı izlemelisiniz:

• Register – Kenar çubuğunu function.php dosyasına register_sidebar() kullanarak kaydedin
• Varsayılan Kenar Çubuğunu Çağır/ Özel Kenar Çubuğu – Varsayılan kenar çubuğu için sidebar.php dosyasındaki kenar çubuğunu çağırın, ancak veya özel kenar çubuğu, dynamic_sidebar() kullanarak herhangi bir şablon dosyasında çağırabilirsiniz.
• Kenar Çubuğunu WP Gönderi Şablonlarında Görüntüle – Sayfada, gönderide ve özel sayfa şablonunda ve özel gönderi şablonunda get_sidebar() şablon etiketini kullanarak kenar çubuğunu çağırabilirsiniz.

WordPress Kod Örneğine Kenar Çubuğu Nasıl Eklenir

Aşağıda, Njengah Eğitimi Kenar Çubuğu olarak adlandıracağımız bir WordPress temasına varsayılan bir kenar çubuğunu nasıl ekleyeceğinizi gösteren kod örneği verilmiştir.

Kenar Çubuğunu Kaydet

İlk adım olarak onu aşağıdaki gibi kaydederiz:

 /**
* Widget alanını kaydedin.
*
* @link https://Gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

function njengah_register_sidebar_tutorial() {

  // Kenar Çubuğu işlevini kaydedin - https://developer.wordpress.org/reference/functions/register_sidebar/

  register_sidebar(

        sıralamak(
                  'name' => __( 'Njengah Öğretici Kenar Çubuğu', 'textdomain'),
                   'id' => 'njengah-kenar çubuğu-varsayılan',
                   'description' => __( 'Blog gönderilerinde ve arşiv sayfalarında kenar çubuğunuzda görünmesi için buraya widget ekleyin.', 'textdomain' ),
                   'before_widget' => '<section id="%1$s" class="widget %2$s">',
                   'after_widget' => '</section>',
                   'before_title' => '<h2 class="widget-title">',
                   'after_title' => '</h2>',
                  )
             );
    
        }

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

Sonuç, aşağıdaki resimde gösterildiği gibi görünüm > Widget'lar altındaki WordPress panomuzda görülecektir:

Sidebar.php Dosyasında Varsayılan Kenar Çubuğunu Çağır

Sidebar.php veya dizin dosyalarında kenar çubuğunu aşağıdaki gibi çağırmamalıyız:

 if ( ! is_active_sidebar('njengah-sidebar-default') ) {
   dönüş;
}

  dynamic_sidebar('njengah-kenar çubuğu-varsayılan');

Kenar Çubuğunu Görüntüle

Son olarak, sayfa şablonlarımızda, aşağıdaki kodu kullanarak kenar çubuğunu basitçe çağırırdık.

get_sidebar();

toparlamak

Bu yazıda, WordPress temasına kenar çubuğunun nasıl ekleneceğine ilişkin adım adım yaklaşımı kapsamlı bir şekilde özetledik. Kısa bir özet olarak, yalnızca 2 veya üç adım olduğunu hatırlamanız gerekir; WordPress'e varsayılan kenar çubuğunu eklemek için , kenar çubuğunu functions.php içine kaydetmeniz, birinci adımda kaydettiğiniz kenar çubuğunu çağırdığınız bir sidebar.php dosyası oluşturmanız ve sayfa veya gönderi şablonlarında varsayılanı çağırmak için get_sidebar işlevini kullanmanız gerekir. kenar çubuğu .

Özel kenar çubukları ekliyorsanız, son kısma ihtiyacınız yoktur, çünkü dynamic_sidebar() kodunu doğrudan şablona veya kenar çubuğunu görüntülemek istediğiniz dosyaya yerleştirirsiniz. Örneğin, altbilgide, genellikle bu işlev dynamic_sidebar() kullanılarak görüntülenen altbilgi pencere öğelerini görürsünüz.

Umarım bu eğitimden yeni bir şeyler öğrenmişsinizdir veya function.php dosyanıza kodu kopyalayıp yapıştırmadan WordPress temasına nasıl kenar çubuğu ekleyeceğinizi daha iyi anlamışsınızdır. Bu alanda daha fazla yardım istiyorsanız veya profesyonel bir WordPress geliştiricisinden tavsiye istiyorsanız, benimle iletişime geçmekten çekinmeyin.