Menambah css, javascipt, widget dan menampilkan artikel pada wordpress

cover-4

Hai jumpa lagi dengan onphpid di sesi keempat dari tutorial membuat theme wordpress. Pada sesi ini kita akan menambahkan css, javascript, bootstrap, mengaktifkan fitur widget dan menampilkan artikel pada wordpress.

Pada sesi yang lalu kita sempat menunda pemasangan sidebar.php bukan…  sebenarnya hal ini berhubungan dengan layouting yang tentunya berkaitan juga dengan CSS dan JS (JavaScript). Selain itu Sidebar.php ini juga erat hubungannya dengan widget area atau tempat meletakkan widget. Sehingga kita juga perlu mengaktifkan fitur widget sebelum dipasang di sidebar.php.

MEMASANG CSS,  JS DAN BOOTSTRAP PADA WORDPRESS

Nah yang pertama kita akan memasang CSS dan JS apa saja yang akan kita pasang ?

  1. style.css
  2. bootstrap bisa kalian unduh di getbootstrap.com
  3. custom.js

Pertama : buat direktori / folder dengan nama CSS dan masukan bootstrap css kedalamnya. lalu buat direktori atau folder dengan nama JS lalu masukan bootstrap js dan custom.js ke dalamnya. kemudian buat folder fonts untuk meletakkan bootstrap fonts, kurang lebih struktur direktorinya akan tampak seperti gambar berikut.

direktori theme wp

Kedua : pada tahap kedua ini kita akan mendaftakan css dan js. buka file functions.php letakkan code dibawah ini pada baris paling bawah di file functions.php.

wp_enqueue_style() adalah functions yang dibuat agar kita bisa mendaftarkan atau menambah file CSS baru.

penjelasan:

$handle  – nama atau id dari file css dan harus unik agar tidak  ter-rename.

$scr – alamat URI file css. nilai defaultnya adalah false

$deps – mode ketergantungan css (seperti bootstrap.js yang hanya akan bekerja apabila ada jquery). nilai defaultnya adalah array().

$ver – versi atau keluaran keberapa file CSS tersebut. nilai defaultnya adalah false.

$media – media atau tempat valuenya all’, ‘aural’, ‘braille’, ‘handheld’, ‘projection’, ‘print’, ‘screen’, ‘tty’, atau ‘tv’. secara default adalah all.

get_template_directory_uri() adalah fungsi yang tugas men-generate alamat theme yang pada kasus ini adalah http://localhost/theme-wp/wp-content/themes/theme-wp.

get_stylesheet_uri() adalah fungsi yang sama dengan get_template_directory_uri() namun get_stylesheet_uri() khusus merujuk ke style.css dalam kasus ini

http://localhost/theme-wp/wp-content/themes/theme-wp/style.css

wp_enqueue_script() adalah fungsi yang dibuat untuk menangani penambahan javascript.

kurang lebih penjelasan untuk parameter wp_enqueue_script() sama seperti wp_enqueue_style() hanya saja ada $in_footer. parameter ini hanya bernilai TRUE dan FALSE, jika TRUE maka javascript akan diletakkan di dekat tag "</body>" dan FALSE akan diletakkan sebelum tag "</head>". nilai defaultnya adalah FALSE.

wp_enqueue_script('comment-reply') adalah js bawaan wordpress yang digunakan untuk menangani komentar pada halaman single atau page.

Baiklah dengan script di atas kita sudah mendaftarkan bootstrap di theme kita, kalian sekarang sudah bisa menggunakan seluruh komponene, css atau javascript yang dimiliki bootstrap.

Sebagai buktinya kita akan menggunakan gridsystem bootstrap untuk membuat layout ditheme kita, buka file index.php dan buat kode seperti berikut:

kemudian pada header.php kita ubah menjadi seperti ini :

lalu pada footer.php

MENDAFTARKAN WIDGET PADA THEME WORDPRESS

Nah kita sudah berhasil menerapkan gridsystem bootstrap pada theme wordpress kita. selanjutnya kita akan membuat theme wordpress kita bisa dipasangi widget.

pertama cari kode berikut di file index.php

lalu Cut dan ganti dengan <?php get_sidebar();?>

kemudian pastekan di sidebar.php

jika sudah masukan kode berikut pada baris paling bawah di file functions.php:

dan untuk menggunakannya silahkan buka sidebar.php dan tambahkan kode berikut dibawah “<!– sidebar –>”

silahkan masuk ke menu Appearance > Widgets dan tambahkan widget dari sana. lalu refresh halaman depan situs.

MENAMPILKAN POSTING PADA THEME WORDPRESS

Baiklah step terakhir sesi ini adalah menggunakan Looping, Looping atau Loop atau perulangan di wordpress digunakan untuk menampilkan posting atau artikel. nah pada bagian ini kita akan menambahkan looping pada file index.php agar halaman depan situs kita tidak nampak kosong lagi.

langsung saja buka file index.php dan tambahkan kode berikut setelah “<!– artikel –>”.

oke setelah kode diatas kita tambahkan di file index.php maka halaman situs kita sudah menampilkan list artikel. nah mari kita uraikan satu persatu

  • have_posts() adalah fungsi yang memuat semua artikel yang sudah kita miliki dan jika kita tidak punya artikel maka fungsi tersebut akan bernilai FALSE yang artinya akan mengarahkan kita pada halaman 404 atau menampilkan “Oops!! Artikel Tidak Ditemukan“.
  • the_post() adalah index of iterate atau penghitung, yang tujuannya untuk membatasi berapa jumlah artikel yang ditampilkan dalam sekali Loop (setting bisa dilakukan di Setting > Reading).
  • the_permalink() adalah fungsi yang memuat link tiap-tiap artikel.
  • the_title() adalah fungsi yang memuat judul tiap-tiap artikel.
  •  the_date() adalah tanggal .
  • the_author() adalah penulis atau penerbit.
  • the_category() adalah Kategori
  • the_excerpt() merupakan cuplikan Artikel

Nah Mungkin itu dulu yang onphpid sampaikan pada sesi ini. Seperti biasa apabila ada pertanyaan silahkan sampaikan melalui kolom komentar dan pada sesi berikutnya memodifikasi halaman depan pada theme wordpress jangan lupa membaca artikel disesi berikutnya ya…

Adblocker Detected : Dukung ONPHPID dengan menonaktifkan Adblock-mu (^_^) Terima Kasih.