Pada tutorial ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita buat sebelumnya,tutorial ini merupakan sambungan dari tutorial-tutorial sebelumnya :
- Bagian 1 : Intro & Registering Template
- Bagian 2 : Frontpage, Header & Footer
- Bagian 3 : Single Page
- Bagian 4 : Menu Navigasi & Sidebar (Widget)
- Bagian 5 : Styling Template
Menu Navigasi
Untuk membuat dan menampilkan Navigasi halaman caranya sangat mudah, silahkan buka kembali file header.php yang sudah kita buat pada tutorial sebelumnya, lalu ubah baris perintah berikut :
<div class="navigasi">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
Menjadi seperti berikut :
<div class="navigasi">
<?php wp_nav_menu(); ?>
</div>
Baris perintah di atas kita menggunakan fungsi ‘wp_nav_menu()‘ yang berfungsi untuk menampilkan daftar halaman yang kita buat pada menu ‘Pages > All Pages‘ untuk dijadikan sebagai menu Navigasi, jadi ketika kita selesai mengganti kode di atas, langkah selanjutnya tinggal kita masuk ke halaman Administrator WordPress kita masing-masing, lalu buat halaman-halaman website seperti Home, About, Contact, dan lain-lain.
Dari pembuatan halaman tersebut maka hasilnya akan jadi seperti berikut ini :
Pada gambar di atas, jika cursor mouse diarahkan ke salah satu menu maka akan tampil alamat URL-nya, menandakan bahwa navigasi menu tersebut sudah berjalan dengan baik.
Pembuatan menu Navigasi halaman template WordPress sudah selesai kita lakukan dengan memasukan kode simpel seperti di atas, selanjutnya kita akan lanjut pembuatan Sidebar.
Sidebar (Widget)
Sidebar merupakan jendela tambahan yang di dalamnya terdapat beberapa fitur, dimana pada fitur-fitur tersebut di fungsikan untuk memudahkan navigasi para pembaca di dalam website.
Sebagai salah satu contoh penggunaan Sidebar kita dapat memasukan 10 daftar artikel terbaru ke dalam Sidebar tersebut, jadi ketika pembaca selesai membaca salah satu artikel, maka mereka tidak perlu lagi kembali ke halaman Frontpage atau Home untuk melihat dan memilih artikel lain, melainkan cukup memilih artikel terbaru yang ada pada Sidebar.
Secara umum, Sidebar dapat digunakan untuk menaruh elemen-elemen atau fitur website salah satunya sebagai berikut :
- Latest Articles
- Popular Articles
- Recomended Articles
- Most Commented Articles
- Related Articles
- Social Media
- Categories
- Archives
- Calendar
- Banners
- Search Form
- Dan lain-lain
Pada WordPress, Sidebar umumnya dimanfaatkan untuk penempatan Widget yang terdapat di menu ‘Appearance > Widgets‘, jadi kita bisa lebih berkreasi sendiri kira-kira ingin menempatkan apa saja di dalam Sidebar tersebut karena WordPress menyediakan banyak sekali widget untuk di jadikan Sidebar.
Namanya saja Sidebar, jadi posisinya bisa kita tempatkan sesuai selera kita asalkan ukurannya tidak melebihi dari section utama tempat ditampilkannya konten atau isi artikel.
sidebar.php
Untuk membuat Sidebar terlebih dahulu kita buat file baru bernama ‘sidebar.php‘ di dalam folder template atau satu folder dengan file index.php, selanjutnya buka file tersebut lalu masukan baris perintah berikut :
<div class="sidebar">
<h3>Ini Sidebar</h3>
<p>Sidebar difungsikan untuk memudahkan navigasi para pembaca di dalam website</p>
<?php if (!dynamic_sidebar('widget_sidebar'))
{
print 'Tidak ada Widget';
}
?>
</div>
Pada baris perintah di atas kita menambahkan fungsi ‘dynamic_sidebar(‘NAMA_WIDGET’)‘ yang berfungsi untuk menampilkan semua widget-widget yang kita masukan di halaman Widgets, di fungsi tersebut kita juga menyertakan kondisi dengan menambahkan fungsi ‘IF‘ di dalamnya, jadi jika tidak ada Widget yang kita masukan pada halaman Widgets, maka akan menampilkan tulisan ‘Tidak ada Widget‘.
functions.php
Setelah selesai, terakhir kita buat file baru dengan nama ‘functions.php‘ di dalam folder template kita atau satu folder dengan file index.php, setelah itu masukan kode berikut ke dalam file tersebut :
<?php
register_sidebar( array
(
'name' => 'Widget Sidebar Ku',
'id' => 'widget_sidebar',
'description' => 'Type your text here',
'before_widget' => '<ul><li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li></ul>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
?>
Kode di atas berfungsi mendaftarkan fungsi dynamic_sidebar(‘NAMA_WIDGET’) yang terdapat pada file sidebar.php di atas agar dapat menampilkan kolom widget yang terdapat pada halaman Widgets, jadi kita bisa memasukan widget-widget WordPress ke dalam kolom tersebut. Jika sudah selesai jangan lupa untuk menyimpan semua perubahan yang sudah kita lakukan pada file functions.php.
Penempatan Widget
Pada tutorial ini akan menampilkan Sidebar yang sudah kita buat di atas agar tampil di halaman Frontpage atau Home dan halaman Single Post, untuk melakukannya silahkan buka kembali file index.php dan file single.php, lalu masukan baris perintah berikut di dalam section MAIN BODY, tepatnya di bawah section Konten :
<main>
<!--Section MAIN BODY-->
<div class="konten">
...........
...........
</div>
<?php get_sidebar(); ?>
</main>
Jika penempatan kode di atas sudah benar, maka kurang lebih tampilannya akan seperti pada gambar berikut ini :
Sampai disini pembuatan Menu Navigasi dan Sidebar untuk menampilkan Widget sudah selesai. Pada artikel berikutnya kita akan melakukan Styling elemen-elemen pada template yang sudah kita buat dengan menggunakan kode CSS agar tampilan layout website-nya dapat terlihat rapih dan tidak acak-acakan seperti sekarang ini.
REVISI :
Pada halaman statis seperti halaman About, Contact, dll. pada saat kita akses jika ternyata kontennya masih terpotong dimana seharusnya tampil secara penuh seperti pada halaman artikel, cara mengakalinya cukup mudah. Silahkan ikuti langkah-langkah berikut :
- Salin file index.php lalu file salinannya beri nama ‘home.php‘.
- Buka kembali file index.php lalu ubah baris perintah berikut :
<p><?php print get_the_excerpt(); ?></p>
Menjadi seperti berikut :
<p><?php the_content(); ?></p>
Disini kita membuat file home.php agar halaman Frontpage atau Home website dioverride atau dipaksa menggunakan template dari file home.php tersebut, sedangkan file index.php sendiri secara otomatis akan di gunakan untuk membuka halaman-halaman statis seperti halaman About, Contact, Gallery, dan lain-lain.
