14. Templat Sidebar & Footer

Tutorial 14 akan membahas templat untuk sidebar dan footer. Sidebar adalah blok yang berada di samping kiri, kanan, sedangkan footer merupakan bagian paling bawah dari struktur theme.

Mendaftarkan Sidebars

Dalam terminologi WordPress, sidebar  merujuk kepada bagian theme dimana  widget-widget akan ditempatkan. Widget sendiri merujuk pada blok mini dimana beberapa fitur sebuah theme ditempatkan. Misalnya daftar informasi terbaru, daftar komentar terakhir, daftar kategori, blok login dll. Perhatikan skema layout berikut :

template-screenshot-widget

Contoh skema sidebar dengan widget dan footer dengan widget  ditampilkan di laman Post

Theme yang sedang kita buat mempunyai dua blok widget. Kode-kode yang dibuat untuk blok widget dapat digunakan berulang baik untuk layout berkolom-2 maupun kolom-3.

Di file templat  functions.php kita sebelumnya telah mendaftarkan widget area. Maksudnya, kita memerintahkan kepada WordPress untuk membuat dua blok dimana admin dapat menempatkan widget disitu dengan cara drag and drop di menu admin  Appearance → Widgets .

Untuk itu salin kode berikut di file templat functions.php , di akhir file . Biasanya setelah  add_action( 'after_setup_theme', 'shape_setup' );,  tapi bisa ditempatkan dimana saja.

Kita mempunyai dua blok widget : Primary Widget Area (‘sidebar-1’) dan Secondary Widget Area (‘sidebar-2’). Tidak ada ketentuan mengikat menamai dengan Primary Sidebar atau Secondary Sidebar. Beberapa layout malah tidak punya sidebar, tapi tetap mempunyai blok widget area. ID masing-masing sidebar telah ditentukan , ini sangat penting karena nanti akan digunakan sebagai wadah widget ke templat sidebar   (sidebar-1 dan sidebar-2).

Selain dari nilai “ID” , fungsi  register_sidebar() memungkinkan kita untuk menentukan informasi lain mengenai blok widget :

Nama ini akan muncul sebagai widget di laman Administrasi widget ( Appearance → Widgets).


kode diatas adalah elemen  HTML pembuka yang mengandung isi widget. Disini kita bungkus setiap widget secara individual di dalam elemen yang disebut aside .
Perhatikan, biarkan parameter   “%1$s” dan “%2$s” sebagai variabel nilai  ID dan atribut  class widget. WordPress akan mengisi variabel tersebut dengan nilai ID dan nilai class yang unik dan spesifik. Penandaan demikian sangat membantu melakukan styling individual widget atau jenis widget dengan kode CSS.

 
Kode diatas menutup elemen  aside yang membungkus masing-masing widget.

 
Di kode diatas, kita tentukan bahwa tiap judul widget akan dibungkus di dalam elemen  h1  dengan nama class  “widget-title”.

 
Kode diatas menandakan kalau elemen  h1 ditutup setelah judul widget berakhir.

Kalau Anda tertarik lebih jauh mengenai fungsi register_sidebar(), silahkan kunjungi laman WordPress Codex untuk register_sidebar() .

Membuat kode untuk Templat Sidebar

Sampai disini, kita sudah yakin kalau WordPress tahu theme yang kita buat memiliki blok widget, bagaimana blok widget ini harus kita format?

Untuk “Primary Widget Area”, kita akan langsung hard-code beberapa nilai default widget seperti : widget Search, Archives, dan Meta . Jika admin tidak meletakkan widget apapun di dalam  “Primary Widget Area” yang ada di Dashboard, maka yang akan tampil adalah widget default.

template-screenshot-sidebar-wptutorial-1

Contoh gambar tampilan widget default 

“Secondary Widget Area” tidak mengandung widget default. Jadi kalau tak diisi widget tidak  akan tampil, ia akan muncul jika diisi widget.

Mari kita buat templat sidebar dan pertama kali membuat Primary Widget Area. Di file sidebar.php, tambahkan kode berikut :

Primary Widget Area dibungkus didalam div  #secondary . Dalam bahasa sehari-hari kode diatas menjelaskan bahwa  “Jika ‘sidebar-1’ (“Primary Widget Area”) tidak mengandung widget aktif, tampilkan widget default. Selain itu, tampilkan widget yang ditambahkan melalui laman admin  Appearance → Widgets.

template-screenshot-sidebar-wptutorial-4

Gambar menu widget dengan kotak primary dan secondary di laman admin

Sekarang kita buat markup untuk  Secondary Widget Area. Salin kode dibawah ini dan tempatkan persis setelah kode  </div><!-- #secondary .widget-area --<

Sederhana bukan, seluruh blok sidebar dibungkus dan statemen kondisional yang menampilkan markup untuk sidebar tertentu saja hanya jika ia mempunyai widget. Jika kita masuk dari laman admin dan membuka menu widget dan kita keluarkan widget-widget yang dipilih dari “Secondary Widget Area”, maka statemen kondisional menjaga jangan sampai markup gagal dengan menampilkan nilai default-nya. Kalau di tahap ini kita aktifkan theme wptutorial maka sidebar tampil di bagian bawah karena belum diformat dengan bagus. Lalu bagaimana untuk menampilkan sidebar kiri dan kanan?

Mari kita lanjutkan tutorial kita dengan menu penutup Tempat Footer yang akan membuat tampilan theme wptutorial lebih rigid.

Templat Footer

Templat footer merupakan penutup dari keseluruhan skema layout theme kita .

Footer mengandung :

  • Penutup div  #main content yang membungkus seluruh isi (content)
  • Bagian footer paling bawah yang mencetak nama theme dan teks untuk copyright serta kredit  “Powered by WordPress” .
  • Kaitan atau hook ke fungsi wp_footer() dimana beberapaplugin menggunakannya.
  • Menutup pembungkus div, tag body, dan tag html .

Bentuk akhir kode di tempat footer dapat dilihat dibawah, silahkan salin ke file footer.php:

Tampilan saat ini, copyright dan catatan di bagian footer ditampilkan di sisi kiri bawah.

template-screenshot-sidebar-wptutorial-5

Contoh tampilan footer wptutorial

Ok, dengan berakhirnya tutorial ini sebenarnya theme wptutorial telah mencapai bagian akhir, kita akan melakukan beberapa sentuhan akhir di tutorial selanjutnya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *