Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Cara Membuat Template WordPress – Part 4
Oct 20th, 2017

Tutorial : Cara Membuat Template WordPress – Part 4

Category : Wordpress | Posted by G-admin at at October 20th, 2017 14:10 pm
431 | 0

Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita buat sebelumnya, sesi ini merupakan sambungan dari artikel-artikel berikut :

  1. Intro & Registering Template – Part 1
  2. Frontpage, Header & Footer – Part 2
  3. Single Page – Part 3
  4. Menu Navigasi & Sidebar (Widget)- Part 4
  5. Styling Template – Part 5 (Complete)

 

Menu Navigasi

Untuk membuat dan menampilkan Navigasi halaman caranya sangat mudah, silahkan kalian buka kembali file header.php yang sudah kalian buat di artikel pertama, lalu ubah baris perintah berikut :

<div class="navigasi">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">BLOGS</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 di jadikan sebagai menu Navigasi, jadi ketika kalian selesai mengganti kode di atas langkah selanjutnya tinggal kalian masuk ke halaman Administrator WordPress kalian masing-masing lalu buat halaman-halaman website seperti Home, About, Contact, dll.

Dalam praktik pembuatan menu Navigasi ini penulis membuat halaman Home, Contact dan Sitemap, alhasil menu Navigasi berhasil di tampilkan.

Pada gambar di atas, jika cursor mouse di arahkan 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. Cukup mudah bukan?? Selanjutnya kita akan lanjut pembuatan Sidebar.

 

Sidebar (Widget)

Sidebar kalau menurut penulis bisa di katakan sebagai 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 di gunakan 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
  • Dll.

Seperti pada website Gaswad.com ini, penulis menambahkan fitur Popular Posts dan Recomended Posts pada Sidebar yang berada di sebelah kanan halaman website.

Pada WordPress, Sidebar umumnya di manfaatkan untuk penempatan Widget yang terdapat di menu ‘Appearance > Widgets‘, jadi kalian 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 kalian tempatkan sesuai selera kalian asalkan ukurannya tidak melebihi dari section utama tempat di tampilkannya konten atau isi artikel.

Sidebar.php

Untuk membuat Sidebar terlebih dahulu kalian 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 di fungsikan 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 silahkan kalian buat file baru dengan nama ‘functions.php‘ di dalam folder template kalian atau satu folder dengan file index.php, setelah itu masukan kode berikut ke dalam file tersebut :

<?php
register_sidebar( array(  
  'name' => 'Widget Sidebar Akoh',  
  '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 diatas agar dapat menampilkan kolom widget yang terdapat pada halaman Widgets, jadi kalian bisa memasukan widget-widget WordPress ke dalam kolom tersebut. Jika sudah selesai jangan lupa untuk menyimpan semua perubahan yang sudah kalian lakukan pada file functions.php.

Penempatan Widget

Pada artikel ini penulis akan menampilkan Sidebar yang sudah kita buat di atas agar tampil di halaman Frontpage atau Home dan halaman Single Post, untuk melakukannya silahkan kalian 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 sini pembuatan Menu Navigasi dan Sidebar untuk menampilkan Widget sudah selesai.

Bagaimana? Kalian tidak bingung khan?? Kalau kalian bingung berarti wajar, itu tandanya kalian bukan sekedar copy-paste kode di atas tapi di situ kalian juga berfikir dan berkreasi bagaimana menyusun elemen-elemen di dalam template WordPress.

Pembuatan template WordPress untuk sesi Menu Navigasi dan Sidebar penulis sudahi sampai disini dulu, akan penulis sambung lagi pada artikel berikutnya.

Pada artikel berikutnya yang mana merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, 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 kalian akses jika ternyata kontennya masih terpotong dimana seharusnya tampil secara penuh seperti pada halaman artikel, cara mengakalinya cukup mudah. Silahkan kalian ikuti langkah-langkah berikut :

  1. Salin file index.php lalu file salinannya beri nama ‘home.php‘.
  2. 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>
  3. Selesai.

Disini kita membuat file home.php agar halaman Frontpage atau Home website di override atau di paksa 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, dll.

Share :


Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Tutorial : Cara Membuat Template WordPress – Part 3
Tutorial : Cara Membuat Template WordPress – Part 3
Category : Wordpress | October 20th, 2017
360 | 0
Tutorial : Cara Membuat Template WordPress – Part 2
Tutorial : Cara Membuat Template WordPress – Part 2
Category : Wordpress | October 13th, 2017
389 | 0
11 Cara Meningkatkan Keamanan Pada WordPress
11 Cara Meningkatkan Keamanan Pada WordPress
Category : Wordpress | October 10th, 2017
479 | 0
Tutorial : Cara Membuat Template WordPress – Part 1
Tutorial : Cara Membuat Template WordPress – Part 1
Category : Wordpress | October 9th, 2017
583 | 0
Tutorial : Instalasi WordPress
Tutorial : Instalasi WordPress
Category : Wordpress | September 20th, 2017
471 | 0
Selalu Ke Jendela Login Saat Update WordPress?
Selalu Ke Jendela Login Saat Update WordPress?
Category : Wordpress | June 24th, 2015
349 | 0
Help…! Minta Login FTP Saat Update WordPress??
Help…! Minta Login FTP Saat Update WordPress??
Category : Wordpress | April 6th, 2015
326 | 0
Cara Reset Password Admin WordPress
Cara Reset Password Admin WordPress
Category : Wordpress | June 27th, 2014
269 | 0
Latest Posts

Tutorial : Cara Membuat Template WordPress – Part 2
Tutorial : Cara Membuat Template WordPress – Part 2
Category : Wordpress | October 13th, 2017
389 | 0

Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membahas bagaimana cara mendaftarkan template kita agar terbaca oleh aplikasi WordPress tepatnya di halaman Themes. Jadi bagi kalian yang belum membaca artikel t...

Continue reading
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Category : Tutorials | October 12th, 2017
708 | 2

Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tentang bagaimana cara medaftarkan dan melakukan verifikasi domain kalian di Google Search Console. Bagi kalian yang masih bingung dan tidak tahu bagaimana car...

Continue reading
11 Cara Meningkatkan Keamanan Pada WordPress
11 Cara Meningkatkan Keamanan Pada WordPress
Category : Wordpress | October 10th, 2017
479 | 0

Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website WordPress, yang kebetulan penulis dapat dari hasil searching-searching di Om’ Google. Seperti yang kalian ketahui saat ini WordPress merupakan salah satu...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 1
Tutorial : Cara Membuat Template WordPress – Part 1
Category : Wordpress | October 9th, 2017
583 | 0

Halo para pembaca Gaswad, pada artikel ini penulis ingin membahas tentang bagaimana cara membuat template WordPress. Kenapa penulis membuat artikel ini tidak lain karena ingin berbagi pengetahuan kepada kalian khususnya para pengguna CMS WordPress se...

Continue reading
Pengertian Page View, Visitor Dan Bounce Rate
Pengertian Page View, Visitor Dan Bounce Rate
Category : Others | October 9th, 2017
386 | 0

Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template WordPress, menimbang WordPress merupakan salah satu CMS yang paling banyak di gunakan saat ini. Tapi berhubung tutorialnya agak panjang dan belum rampung ...

Continue reading
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Category : Tutorials | October 5th, 2017
952 | 0

Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jelek halo juga deh… Setelah beribu-ribu menit dan detik berlalu, jam demi jam telah kita lewati, dari pagi hari sampai sore hari, akhirnya… sampai...

Continue reading
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Category : Tutorials | September 30th, 2017
1197 | 0

Bootstrap merupakan salah satu CSS Framework yang paling banyak di gunakan oleh para pengembang web saat ini, bagi kalian yang masih belum tau dan mengerti apa yang di maksud dengan Web Framework, maka silahkan kalian merujuk ke link berikut : Apa It...

Continue reading
Cara Mengetahui Kecepatan Page Load Website
Cara Mengetahui Kecepatan Page Load Website
Category : Programmings | September 29th, 2017
472 | 0

Pada artikel kali ini penulis ingin memberikan trick bagaimana cara mengetahui kecepatan Page-Load website kalian, mungkin beberapa dari kalian masih belum tahu seberapa cepat kecepatan website yang kalian miliki pada saat website tersebut di akses a...

Continue reading
​Apa Itu Web Framework?
​Apa Itu Web Framework?
Category : Others | September 29th, 2017
676 | 0

Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awam betul dengan yang namanya Framework. Framework menurut Wikipedia merupakan sebuah aplikasi yang di desain untuk mendukung pengembangan dalam membangun se...

Continue reading
Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Category : Tutorials | September 28th, 2017
6337 | 2

Kali ini kita akan membuat website statis sederhana, kenapa statis? Karena ketika selesai dalam pembuatannya maka konten website yang sudah kita masukan tidak bisa di ubah lagi alias fixed. Loh’, kalo gitu ngga bisa update isi website donk?? Ka...

Continue reading
Tutorial : Menggunakan Font-Awesome Pada Website
Tutorial : Menggunakan Font-Awesome Pada Website
Category : Tutorials | September 26th, 2017
451 | 0

Berikut cara instalasi salah satu simbol ligature yang paling banyak di gunakan oleh para pengembang website, yaitu Font-Awesome. Bagi kalian yang masih belum mengenal apa itu simbol ligature bisa merujuk ke link berikut untuk menambah wawasan dan re...

Continue reading
Tutorial : Instalasi WordPress
Tutorial : Instalasi WordPress
Category : Wordpress | September 20th, 2017
471 | 0

Untuk kalian yang ingin belajar bagaimana cara instlasai CMS WordPress kali ini penulis sengaja membuat artikel ini agar kalian mendapatkan referensi tambahan sebelum menggunakan CMS WordPress. Untuk instalasi CMS WordPress sama sekali tidak susah, m...

Continue reading

Wordpress

  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • Oct
    10
    2017
    11 Cara Meningkatkan Keamanan Pada WordPress
    Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website Word...
    Read more
  • More articles
Tips & Tricks

  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • Oct
    24
    2017
    Panduan SEO ala Google
    Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kali...
    Read more
  • Sep
    15
    2017
    Cara Mudah Download Video Youtube
    Bagi kita-kita yang suka menonton video dari Youtube pasti sering tiba-tiba terbesit seperti in...
    Read more
  • Oct
    29
    2015
    5 Cara Mempercepat Loading Website
    Berbagai macam cara dan usaha yang kita lakukan untuk membuat website kita menjadi benar-benar ...
    Read more
  • Feb
    03
    2015
    Nih! 3 Cara Redirek Domain Yang Baik Dan Benar
    Redirek domain secara definisi berarti mengarahkan domain satu ke domain yang lain. Emang bisa?...
    Read more
  • More articles
Tutorials

  • Nov
    13
    2017
    Cara Menambah Ads Unit Atau Blok Iklan Adsense
    Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. ...
    Read more
  • Oct
    16
    2017
    Cara Mendapatkan Uang Dengan Google Adsense
    Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Goo...
    Read more
  • Oct
    12
    2017
    Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
    Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tent...
    Read more
  • Oct
    05
    2017
    Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
    Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jele...
    Read more
  • Sep
    30
    2017
    Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
    Bootstrap merupakan salah satu CSS Framework yang paling banyak di gunakan oleh para pengembang...
    Read more
  • More articles
Others

  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • Feb
    25
    2015
    Cara Memasang Robots.txt Di Website
    Yups! Di jamin pasti banyak yang bingung dengan file robot ini, bagi yang masih awam pasti bera...
    Read more
  • Nov
    26
    2014
    DIY – Lampu Indikator Super KIPS Kawasaki Ninja 150 SS/R/RR
    Bagi kalian pengguna motor Kawasaki Ninja 150 SS/R/RR pasti pernah ngerasain yang namanya ̵...
    Read more
  • More articles
Page generated in : 675.59 ms