Menambah css, javascipt, widget dan menampilkan artikel pada wordpress

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.

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…

Melakukan Setup & Pembagian File Theme WordPress
Kostumisasi Halaman Depan (home) WordPress

  • Yaskuri Yamuri Nasution

    Oiya mas. Kalo boleh tau costum.js nya nyari dmn ya?

    • Custom.js itu kita buat sendiri

  • andri setia

    mas pada tahap ini yang tampil yakni menu navigasi dan list artikel dari looping sementara untuk grid layout dan sidebar tidak ada perubahan alias belum muncul, mohon pencerahannya mas, terima kasih.

    • Belum bagaimana maksudnya?? Atau bisa di screenshoot dan diupload disini

    • Maksud dari belum muncul itu seperti apa? Apakah blank putih? Coba di screenshoot dan diupload disini biar mudah.

    • andri setia

      ini mas tampilan akhir dari langkah 1-6 point no.4 masih belum maksimal, terkait grid-layout dan sidebar yang belum terlihat.

      terima kasih mas,.. ditunggu pencerahannya.

    • Apakah widget sudah ditambahkan dari menu Appearance > widget ?

    • andri setia

      setelah widget saya tambahkan sebanyak 4, yakni (1)search , (2)calendar, (3)categories, (4)search lagi….

      hasilnya search yang pertama tertutup navigasi, calendar masih acak2kan, dan batasan layout belum terlihat.

      Mohon pencerahannya
      * https://uploads.disquscdn.com/images/f8a958e8af13b18d567f7b08318dd82b38e7397b1232960f35b530f5a21d7ef2.png gambar dilampirkan

    • Coba kamu bandingin dengan kode yang ini https://github.com/wichaksono/theme-onphpid

    • andri setia

      file style.css sudah saya tambahin yang dari mas, dan terlihat perbedaannya menjadi lebih rapih, hanya tombol search dan kalender yang masih harus diperbaiki,..

      untuk sementara saya menyimpulkan style.css yang harus di edit lagi.

      ditunggu mas tutorial berikutnya & terima kasih,..

    • Untuk styling form search dan calender bisa di cek disini

      diythemes.com/thesis/rtfm/styling-wordpress-search-form/

      Dan

      http://www.wpexplorer.com/wordpres-calendar-style/

      Doakan saja pertengahan bulan juli rilis tutorial wordpress yang baru… 🙂

    • andri setia

      ok mas,..

      sip..

      ditunggu aja.. TErima kasih sebelumnya.