Cara Menambahkan Bilah Sisi ke WordPress »Panduan Langkah demi Langkah Utama

Saat membuat situs WordPress Anda, Anda harus menambahkan bilah sisi sebagai salah satu bagian tata letak situs WordPress Anda. Membuat sidebar di situs HTML dasar sederhana karena Anda hanya perlu menggunakan tag sidebar <aside> </aside> tetapi untuk menambahkan sidebar ke WordPress Anda memerlukan pendekatan yang berbeda.

Tag Template Sidebar: Bagaimana Sidebar di Ditampilkan di WordPress

Penting untuk diingat bahwa WordPress bekerja dengan tag template dan header dipanggil dengan fungsi get_header() sedangkan footer dipanggil dengan fungsi get_footer(). Untuk sidebar, ditampilkan dengan tag template get_sidebar().

Tag template ini dapat ditambahkan di mana pun Anda ingin menambahkan sidebar WordPress. Tetapi sebelum Anda mulai menampilkan sidebar WordPress, kita perlu mempelajari cara pembuatannya agar ada dalam kode tema Anda sebelum Anda dapat memanggilnya di template.

Ada dua langkah utama yang harus Anda ikuti untuk menambahkan sidebar di WordPress; langkah-langkah ini meliputi: mendaftarkan bilah sisi, memanggil bilah sisi

Cara Menambahkan Sidebar ke WordPress Langkah demi Langkah

Agar Anda berhasil menambahkan sidebar baru ke WordPress atau membuat sidebar kustom di WordPress, Anda harus mengikuti langkah-langkah berikut:

1. Pertama, buat salinan cadangan tema WordPress Anda
2. Buat tema anak dari tema WordPress induk Anda dan tema anak harus memiliki file functions.php
3. Di dalam file functions.php dari tema anak Anda, Anda akan menggunakan fungsi register_sidebar() untuk membuat sidebar.
4. Buat file sidebar.php dan tambahkan fungsi dynamic_sidebar() ke file ini dengan nama sidebar seperti ini – dynamic_sidebar( 'sidebar-1' ) di mana sidebar-1 adalah id dari sidebar yang Anda tambahkan saat mendaftarkan sidebar.
5. Dalam file template tema Anda, sekarang Anda dapat memanggil sidebar menggunakan tag template get_sidebar() .
6. Jika Anda telah membuat bilah sisi khusus , Anda dapat menggunakan fungsi dynamic_sidebar() untuk menampilkan bilah sisi khusus.

Anatomi Bilah Sisi WordPress

Untuk memahami secara mendalam cara kerja sidebar di WordPress, Anda perlu mempelajari bagaimana kode sidebar tersebar di berbagai file tema WordPress.

Fungsi Bilah Sisi WordPress

Penting untuk diketahui bahwa tiga fungsi WordPress yang terkait dengan penambahan sidebar WordPress adalah:

• Daftar Sidebar – register_sidebar()
• Sidebar Dinamis – dynamic_sidebar()
• Dapatkan Bilah Sisi – get_sidebar()

Daftar Sidebar – Langkah Pertama

Fungsi ini register_sidebar() adalah fungsi pertama yang membuat sidebar dan terletak di file functions.php tema Anda.

Saat Anda membuka file functions.php tema Anda, Anda akan melihat fungsi register_sidebar() ini mendaftarkan berbagai sidebar yang ditampilkan pada tema Anda.

Seperti untuk kasus tema default Twenty seventeen WordPress, Anda dapat melihat pada gambar di bawah kode yang mendaftarkan sidebars pada tema tersebut:

Pada dasarnya, fungsi ini adalah yang memulai segalanya

Daftarkan Parameter Bilah Sisi

Fungsi bilah sisi register dinyatakan sebagai fungsi yang mengambil berbagai argumen yang dapat berupa data berupa array atau string. Secara umum dapat dinyatakan sebagai berikut:

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

Berikut ini adalah gambar fungsi register_sidebar seperti yang digunakan dalam tema WordPress di mana parameter yang berbeda ditambahkan ke larik yang dilewatkan di dalam pemanggilan fungsi:

Fungsi WordPress ini memiliki berbagai argumen yang dapat diterima yang dapat berupa String PHP atau array PHP. Argumen tersebut antara lain:

• Nama – ini adalah nama atau judul bilah sisi yang harus berupa string.
• ID – ini adalah pengidentifikasi unik bilah sisi yang akan Anda gunakan fungsi dynamic_sidebar () untuk memanggil bilah sisi.
• Deskripsi – ini adalah deskripsi bilah sisi yang ditampilkan di antarmuka Widget dan berupa string.
• Kelas ini adalah argumen untuk menambahkan kelas CSS tambahan untuk bilah sisi yang akan membantu Anda dalam penataan.
• Before_widget – ini adalah konten HTML yang ditambahkan sebelum setiap sidebars dikeluarkan
• After_widget – ini adalah konten HTML yang ditambahkan setelah masing-masing sidebars keluar
• Before_title ini adalah konten HTML yang akan ditambahkan ke judul sidebar saat ditampilkan dan defaultnya biasanya tag HTML pembuka <h2>.
• After_title ini adalah konten HTML yang akan ditambahkan ke judul sidebar saat ditampilkan dan defaultnya biasanya tag HTML pembuka <h2>.

Fungsi ini ditambahkan ke file functions.php dan mendaftarkan sidebar WordPress menggunakan action hook seperti yang dibagikan di bawah ini:

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

Untuk mendaftarkan sidebar kita perlu menghubungkan ke widgets_init event dan kita memiliki fungsi callback dengan nama pilihan kita seperti dalam hal ini kita menamakan fungsi callback sebagai 'njengah_tutorial_sidebars'

Kode lengkap yang harus Anda tambahkan ke file functions.php Anda untuk mendaftarkan sidebar adalah sebagai berikut:

 <?php

//fungsi panggilan balik 

fungsi njengah_register_sidebar_tutorial() {
	
	// Daftarkan fungsi Sidebar - https://developer.wordpress.org/reference/functions/register_sidebar/
	register_sidebar(
		Himpunan(
			'name' => __( 'Contoh Sidebar', 'textdomain' ),
			'id' => 'bilah sisi-1',
			'description' => __( 'Tambahkan widget di sini untuk muncul di sidebar Anda pada posting blog dan halaman arsip.', 'textdomain' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget' => '</section>',
			'before_title' => '<h2 class="widget-title">',
			'after_title' => '</h2>',
		)
	);
	
} 

// Kait aksi 

add_action( 'widget_init', 'njengah_register_sidebar_tutorial' );

Sidebar Dinamis – Langkah Kedua

Fungsi dynamic_sidebar() sekarang memanggil sidebar yang telah kita daftarkan pada langkah pertama di atas dan kode tersebut ditempatkan di file sidebar.php atau file lain di mana kita ingin menampilkan sidebar yang telah kita buat pada langkah pertama.

Ekspresi umum fungsi dynamic_sidebar() adalah sebagai berikut:

dynamic_sidebar( int|string $index = 1 )

Fungsi ini mengambil argumen integer atau string dan ini bisa berupa nama atau parameter ID yang digunakan saat mendaftarkan bilah sisi di langkah pertama.

Dalam dua puluh tujuh belas tema WordPress default saat Anda membuka file sidebar.php, Anda akan melihat fungsi dynamic_sidebar() seperti yang ditunjukkan pada gambar di bawah ini:

Dalam hal ini, Anda dapat melihat bahwa kami meneruskan parameter id dari fungsi register_sidebar ke fungsi dynamic_sidebar sehingga kami dapat menampilkan sidebar tersebut sebagai sidebar default. Seperti yang ditunjukkan pada gambar di bawah ini:

Jika kami mendaftarkan bilah sisi ini sebagai bilah sisi khusus, kami akan menggunakan kode di atas untuk ditampilkan di file templat tema apa pun yang mungkin termasuk; header, footer, body, dan lain-lain. Jadi kode untuk menampilkan sidebar harus sebagai berikut:

 <?php if ( is_active_sidebar( 'custom' ) ) : ?>
  <div id="bilah sisi">
    <?php dynamic_sidebar( 'kustom' ); ?>
   </div>
<?php endif; ?>

Seperti yang Anda lihat, kami menggunakan pernyataan if untuk memvalidasi apakah bilah sisi aktif dan fungsi yang kami gunakan di sini adalah is_active_sidebar() . Fungsi ini hanya mengetahui apakah sidebar yang diteruskan di dynamic_sidebar() sedang digunakan. Ini adalah salah satu tag kondisional WordPress.

Dapatkan Bilah Sisi – Langkah Ketiga

Saat membuat sidebar WordPress default dalam tema yang perlu Anda daftarkan , buat file sidebar.php dan terakhir gunakan tag template get_sidebar() t untuk memuat sidebar di template.

Get_sidebar dapat digunakan untuk menampilkan sidebar yang berbeda di halaman yang berbeda karena secara default fungsi mengambil satu argumen string yang setara dengan nama sidebar. Nama yang Anda gunakan untuk mendaftarkan bilah sisi atau parameter ID seperti yang diuraikan pada langkah di atas.

get_sidebar( string $name = null )

Jadi jika Anda memiliki sidebar bernama ' cool-sidebar ', Anda dapat memanggil sidebar di template halaman kustom sebagai berikut:

get_sidebar('cool-sidebar');

Anda juga dapat memiliki beberapa bilah sisi untuk setiap halaman dan Anda dapat menggunakan pernyataan if/else untuk menampilkan setiap bilah sisi di halaman yang berbeda secara kondisional seperti dalam kode ini di mana kami memiliki tiga bilah sisi; satu untuk beranda, satu lagi untuk 404 dan bilah sisi default:

 jika ( is_home() ):

      get_sidebar('rumah');

   elseif ( is_404() ):

      get_sidebar('404');

   kalau tidak :

     get_sidebar();

berakhir jika;

File Bilah Sisi WordPress

Sama pentingnya untuk mengetahui bahwa tujuh file tema WordPress umum di mana kode sidebar ditambahkan adalah:

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

Kode juga dapat ditambahkan ke plugin tempat Anda mendaftar dan menampilkan widget bilah sisi seperti beberapa plugin widget WordPress yang paling umum.

Jika Anda adalah pengembang WordPress atau pemula WordPress yang mempelajari cara kerja WordPress , memahami cara file-file ini terkait dengan menambahkan dan menampilkan sidebar WordPress akan menjadi langkah bagus untuk menjadi seorang profesional.

Bagaimana Kode Sidebar Bekerja di Setiap File WordPress Tema

Singkatnya, tiga fungsi menambahkan sidebar di WordPress ditempatkan di masing-masing file ini yang diilustrasikan dalam tabel di bawah ini:

Untuk menambahkan sidebar di WordPress Anda harus mengikuti tiga langkah yang kami uraikan dalam tutorial pengembangan WordPress ini yang meliputi:

• Register – Daftarkan sidebar di functions.php menggunakan register_sidebar()
• Panggil Default Sidebar/ Custom Sidebar – Panggil sidebar di file sidebar.php untuk sidebar default tetapi atau sidebar kustom Anda dapat memanggilnya di file template apa pun menggunakan dynamic_sidebar()
• Tampilkan Sidebar di WP Post Templates – Di halaman, posting dan template halaman kustom dan template posting kustom, Anda dapat memanggil sidebar menggunakan tag template get_sidebar().

Cara Menambahkan Bilah Sisi ke Contoh Kode WordPress

Berikut ini adalah contoh kode bagaimana Anda akan menambahkan sidebar default di tema WordPress yang akan kami beri nama Njengah Tutorial Sidebar

Daftar Sidebar

Langkah pertama kita akan mendaftarkannya sebagai berikut:

 /**
* Daftarkan area widget.
*
* @link https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

fungsi njengah_register_sidebar_tutorial() {

  // Daftarkan fungsi Sidebar - https://developer.wordpress.org/reference/functions/register_sidebar/

  register_sidebar(

        Himpunan(
                  'name' => __( 'Njengah Tutorial Sidebar ', 'textdomain' ),
                   'id' => 'njengah-sidebar-default',
                   'description' => __( 'Tambahkan widget di sini untuk muncul di sidebar Anda pada posting blog dan halaman arsip.', '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( 'widget_init', 'njengah_register_sidebar_tutorial' );

Hasilnya akan terlihat di dashboard WordPress kami di bawah tampilan> Widget seperti yang ditunjukkan pada gambar di bawah ini:

Panggil Sidebar Default di File Sidebar.php

Di sidebar.php atau file indeks kita tidak boleh memanggil sidebar sebagai berikut:

 if ( ! is_active_sidebar('njengah-sidebar-default') ) {
   kembali;
}

  dynamic_sidebar('njengah-sidebar-default');

Tampilan Bilah Sisi

Akhirnya, di templat halaman kami, kami cukup memanggil bilah sisi menggunakan kode berikut:

get_sidebar();

Membungkus

Dalam posting ini, kami telah menguraikan secara komprehensif pendekatan langkah demi langkah tentang cara menambahkan sidebar di tema WordPress. Singkatnya, Anda perlu mengingat hanya ada 2 atau tiga langkah; untuk menambahkan sidebar default di WordPress Anda perlu mendaftarkan sidebar di functions.php , buat file sidebar.php di mana Anda memanggil sidebar yang Anda daftarkan pada langkah pertama dan di halaman atau templat posting Anda menggunakan fungsi get_sidebar untuk memanggil default bilah sisi .

Jika Anda menambahkan bilah sisi khusus, Anda tidak memerlukan bagian terakhir karena Anda akan langsung menempatkan kode dynamic_sidebar() di templat atau file tempat Anda ingin menampilkan bilah sisi. Misalnya, di footer, Anda biasanya akan melihat widget footer ditampilkan menggunakan fungsi ini dynamic_sidebar().

Saya harap Anda telah mempelajari sesuatu yang baru dari tutorial ini atau Anda telah memperoleh pemahaman yang lebih baik tentang cara menambahkan bilah sisi ke tema WordPress tanpa harus menyalin-menempelkan kode di file functions.php Anda. Jika Anda ingin bantuan lebih lanjut di bidang ini atau memerlukan saran dari pengembang WordPress profesional, jangan ragu untuk menghubungi saya.