Cara Membuat Theme WordPress

48
Cara Membuat Theme WordPress Ini akan jadi tulisan bersambung karena saya pikir akan sulit menjelaskan cara membuat theme WordPress hanya dalam satu postingan. Kita akan mencoba membangun sebuah theme sederhana, tanpa gambar sama sekali. Untuk gambar, anda bikin sendiri ya? hehehe… Sebelum kita memulai ngurusin coding, saya akan coba share dulu struktur berkas themes. Karena anda harus paham soal ini dulu sebelum beranjak mengutak-atik kode nanti. Berkas Utama Theme Sejatinya, ada 2 berkas penting yang harus dimiliki sebuah themes, yaitu: - style.css - index.php Dengan dua berkas ini, kita sudah bisa membangun sebuah themes WordPress. Tapi, untuk menampilkan hasil yang lebih fantastis, kita membutuhkan beberapa berkas lain untuk mendukung themes kita. Berkas Tambahan Inilah berkas-berkas yang bisa dipakai sekalian dengan fungsi-fungsinya: - home.php : digunakan untuk menampilkan halaman depan blog - header.php : Digunakan untuk menampilkan bagian header blog - sidebar.php : digunakan untuk menampilkan bagian sidebar blog - footer.php : digunakan untuk menampilkan bagian footer blog - single.php : digunakan untuk menampilkan artikel. - page.php : digunakan untuk menampilkan page. - search.php : digunakan untuk menampilkan hasil pencarian. - archive.php : digunakan untuk menampilkan arsip blog (arsip tanggal, bulan, dll). - functions.php : digunakan untuk mengatur fungsi-fungsi yang berlaku di blog. - 404.php : digunakan untuk menampilkan halaman error 404  Nah, untuk sementara itu dulu ya. Minta komentarnya dong, biar semangat gitu lho.. hehehe Membangun Theme WP: Style.css Oke, sekarang kita mulai dengan membangun style dulu. Sebenarnya sih cara kerjanya  bergantian antara file index.php dan style.css. Tapi karena informasi theme ada di file style.css, maka file inilah yang pertama kali kita buat.

Transcript of Cara Membuat Theme WordPress

  • Cara Membuat Theme WordPress

    Ini akan jadi tulisan bersambung karena saya pikir akan sulit menjelaskan cara membuat theme

    WordPress hanya dalam satu postingan. Kita akan mencoba membangun sebuah theme

    sederhana, tanpa gambar sama sekali. Untuk gambar, anda bikin sendiri ya? hehehe

    Sebelum kita memulai ngurusin coding, saya akan coba share dulu struktur berkas themes.

    Karena anda harus paham soal ini dulu sebelum beranjak mengutak-atik kode nanti.

    Berkas Utama Theme

    Sejatinya, ada 2 berkas penting yang harus dimiliki sebuah themes, yaitu:

    - style.css

    - index.php

    Dengan dua berkas ini, kita sudah bisa membangun sebuah themes WordPress. Tapi, untuk

    menampilkan hasil yang lebih fantastis, kita membutuhkan beberapa berkas lain untuk

    mendukung themes kita.

    Berkas Tambahan

    Inilah berkas-berkas yang bisa dipakai sekalian dengan fungsi-fungsinya:

    - home.php : digunakan untuk menampilkan halaman depan blog

    - header.php : Digunakan untuk menampilkan bagian header blog

    - sidebar.php : digunakan untuk menampilkan bagian sidebar blog

    - footer.php : digunakan untuk menampilkan bagian footer blog

    - single.php : digunakan untuk menampilkan artikel.

    - page.php : digunakan untuk menampilkan page.

    - search.php : digunakan untuk menampilkan hasil pencarian.

    - archive.php : digunakan untuk menampilkan arsip blog (arsip tanggal, bulan, dll).

    - functions.php : digunakan untuk mengatur fungsi-fungsi yang berlaku di blog.

    - 404.php : digunakan untuk menampilkan halaman error 404

    Nah, untuk sementara itu dulu ya. Minta komentarnya dong, biar semangat gitu lho.. hehehe

    Membangun Theme WP: Style.css

    Oke, sekarang kita mulai dengan membangun style dulu. Sebenarnya sih cara kerjanya

    bergantian antara file index.php dan style.css. Tapi karena informasi theme ada di file style.css,

    maka file inilah yang pertama kali kita buat.

  • Sebelum bicara terlalu banyak, untuk membuat theme WordPress anda membutuhkan sebuah

    server lokal (localhost). Anda bisa pakai AppServ, XAMPP atau yang lainnya untuk membangun

    server lokal di komputer pribadi. Sangat tidak bijaksana kalau anda membangun langsung di

    hosting. Selain boros bandwidth juga boros waktu. Saya anggap anda sudah tahu soal instalasi

    WordPress di localhost dan cara mengaktifkan themes. Kalau belum bisa, sebaiknya anda belajar

    dulu

    Saya juga menganggap anda tahu bagaimana cara membuat file PHP. Kalau ini juga belum bisa,

    silahkan pelajari dulu ya? Oke, jika sudah siap, kita buat dulu folder tempat theme kita. Kita

    akan namakan theme ini dengan: themegue. Jadi, silahkan buat folder /themegue/ di wp-

    content/themes.

    Berikutnya semua file yang kita buat harus masuk di folder ini. Siap?

    File pertama yang kita buat adalah style.css. File ini akan menangani semua tampilan theme kita.

    Untuk kustomisasi style, anda bisa baca referensi soal CSS. Tapi disini kita akan langsung pakai

    perintah-perintah CSS yang kita terapkan di theme.

    Pertama, kita isi file style.css dengan keterangan seperti ini:

    /*

    Theme Name: Theme Gue

    Theme URI: http://wordpress.or.id/

    Description: Theme Pertama yang Gue Buat untuk Bangsa Indonesia Tercinta

    Author: Lutvi Avandi

    Author URI: http://lutviavandi.com/

    Version: 1.0

    */

    Theme Name: isilah dengan nama theme yang ingin anda buat

    Theme URI: isilah dengan tempat mendownload theme ini

    Description: isilah dengan diskripsi singkat theme anda. Jika mau diupload ke wordpress.org

    anda harus mengisinya dalam bahasa Inggris

    Author: isilah dengan nama anda (mau pakai nama saya boleh hehehe)

    Author URI: isilah dengan URL blog pribadi anda (kalau punya)

    Version: isi dengan versi themesnya. Idealnya sih dimulai dari 1.0

    Simpanlah file tersebut dan sekarang coba anda cek di bagian Appearance Themes. Themes-nya belum muncul kan? hehehe itu karena 1 file lagi belum ada yaitu index.php. Nah, bikin deh file index.php di dalam folder themegue tadi. Tidak perlu diisi dulu, kosongan aja.

    Sekarang seharusnya di menu Appearance Themes sudah ada sebuah theme baru dengan nama Theme Gue. Silahkan aktifkan.

    DIGITTextbox

  • Jika anda nekat mau melihat blog anda. Saya jamin isinya cuma blank doang. hehehe.. Namanya

    juga theme belum jadi. Insya Allah besok kita akan belajar bagaimana cara mengisinya. Untuk

    saat ini kita tinggalkan dulu file style.css

    Membangun WP Theme: index.php

    Oke, inilah pertemuan ketiga kita dalam sharing cara membangun theme WordPress sendiri. Ini

    masih tingkat basic sehingga kita sama sekali belum mengutak-atik design sama sekali.

    Setelah sebelumnya kita bahas soal pembuatan folder, dan penamaan theme melalui style.css,

    kita akan melangkah ke bagian yang lebih rumit sedikit yaitu file index.php. File ini bekerja

    sebagai pengatur apa saja yang ingin kita tampilkan di blog. Jadi ibaratnya gini, index.php itu

    mengatur pasukannya, dan style.css mengatur seragamnya. Paham kan?

    Semua file theme menggunakan bahasa PHP, dan tentu saja bisa disusupi tag HTML mengingat

    hasil akhirnya nanti juga berupa HTML setelah diproses di server. Anda bisa pelajari lebih dalam

    soal PHP di http://www.php.net. Kita akan langsung saja mengisi file index.php yang sudah kita

    buat kemarin tapi masih kosong.

    Untuk awalnya, kita isi dengan standart HTML biasa seperti ini:

    Judul Blog

  • Judul Artikel

    Artikel yang ingin dimunculkan

    Simpan dan coba buka blog anda. Seharusnya sekarang sudah muncul tulisan kan? Nah, itulah

    caranya memunculkan tulisan di blog melalui theme. Anda bisa gunakan perintah PHP dan tag

    HTML apapun disini. Suka-suka aja.

    Bikin Theme WP: Designing

    Nah, akhirnya sekarang kita melangkah pada tingkat yang lebih serius. Di artikel sebelumnya

    kita sudah bahas tentang index.php dan bagaimana mengimplementasikan halaman HTML ke

    dalam themes. Nah, sebelum kita mulai memasukkan kode-kode PHP serta fungsi WordPress,

    kita perlu mendesign theme dulu.

    Untuk panduan sederhana kita nanti, kita akan buat sebuah theme seperti ini:

  • Contoh Design Theme

    1. Header Blog

    2. Content

    3a. Sidebar lebar atas: Cocok untuk adsense atau iklan kotak besar

    3b. Sidebar kiri: Kita pakai untuk menampilkan recent post, category, dll

    3c. Sidebar kanan: Kita pakai untuk menampilkan banner iklan atau blogroll.

    4. Bagian footer untuk menampilkan credit buat kita.

    Bagaimana membuatnya?

    Tahap awal yang kita lakukan adalah menentukan dulu bagian-bagiannya dalam file index.php.

    Dengan design seperti itu, maka kode HTML di file index.php akan seperti ini:

    Theme Ujicoba

    Lokasi header ada disini

    Artikel akan muncul disini

    Iklan kotak ada disini

    Menu-menu sidebar kiri ada disini

    Menu-menu sidebar kanan ada disini

    Footer ada disini

    Udah mulai puyeng? hehehe.. Mudah-mudahan ndak ya? Saya kasih penjelasan dikit aja biar

    mudeng. Dalam HTML, semua yang ada diantara tag dan akan dimunculkan di

    browser. Jadi sekarang kita fokus dulu pada kode-kode diantara dua tag itu. Oke?

  • Nah, di deretan kode diatas, saya menempatkan beberapa tag . Tag ini kita pakai untuk

    menandai suatu wilayah. Nantinya, kita bisa mengatur tinggi, lebar background, warna dan

    apapun yang ada di wilayah tersebut. Jadi, biar gampang, div dipakai untuk menamai suatu

    wilayah.

    Seperti di kode atas, saya menamakan beberapa wilayah sesuai fungsinya yaitu header, sidebar,

    content, footer, dll. Nah, sekarang mulai paham?

    Oke, itu baru membuat design dan menamai wilayah sesuai design yang kita buat. Sekarang

    kalau anda nekat mencoba melihat hasil kerja keras anda, biasanya masih amat jauh dari design. Hehehe. Ndak usah khawatir, insya Allah besok kita mulai mengatur tata letaknya sehingga anda bisa senyum-senyum sendiri nantinya.. hahaha

    Bikin Tema WP: Layout

    Jika kemarin anda sudah belajar menentukan zona-zona di blog termasuk juga membuat desain

    sementara blog. Saat-nya kita mengatur wilayah tiap zona. Seperti diketahui, kemarin kita cuma

    memberi nama saja zona-zona yang ada menggunakan tag DIV. Nah, hari ini kita akan

    menentukan lebar masing-masing zona lengkap dengan tata letaknya sehingga tampilannya nanti

    akan mendekati design awal kita.

    Untuk itu, kita akan buka kembali file index.php dan meminta file tersebut untuk mengakses file

    style.css yang akan menjadi pemandu dalam tata letak dan tampilan blog nanti. caranya gimana?

    Perhatikan baris 1 -4 di file index.php yang sudah kita buat kemarin. Disana terlihat kode seperti

    ini:

    Theme Ujicoba

    Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag

    :

  • wrap yang sudah kita tentukan di atas tadi. Kemudian perintah background adalah menentukan

    latar belakang zona header ini. Dalam contoh ini saya buat warna abu-abu. Untuk kode-kode

    warna lain, anda bisa lihat di: html-color-codes.com

    Harusnya sekarang kalau direfresh blog anda, maka akan ada box abu-abu di bagian headernya.

    Tidak usah screen shot ya? Udah bisa bayangkan kan? Kalau belum ya lihat aja blog anda

    sendiri.. xixixi..

    Berikutnya adalah bagian content. Untuk maincontent kita cuma akan berikan perintah untuk

    mengambil jarak 10px dari header sehingga kelihatan putih wilayahnya nanti akan mengikuti

    isinya yaitu content dan sidebar. Kita langsung kerjakan ketiganya ya di style.css

    #maincontent {

    margin-top:10px;

    }

    #content {

    width:590px;

    background:#FFCC00;

    float:left;

    }

    #sidebar {

    width:300px;

    background:#FF9900;

    float:left;

    margin-left:10px;

    }

    Ada satu perintah tambahan lagi yaitu float:left;. Perintah ini dipakai untuk membuat elemen

    dibawahnya mengalir ke sebelah kanan. Maksudnya left adalah elemen yang bersangkutan ada di

    kiri dan yang lain ada di kanan

    Jika lihat blog anda sekarang, harusnya bagian tengah sudah terpecah jadi dua bagian. Untuk

    content dan untuk sidebar. Yuk, kita terusin lagi menambahkan style untuk zona lebar, kiri dan

    kanan yang ada di dalam sidebar

    #lebar {

    background:#FF3300;

    margin-bottom:10px;

    }

    #kiri {

    background:#660000;

    width:145px;

    float:left;

    margin-right:10px;

    }

    #kanan {

    background:#660000;

    width:145px;

    float:left;

    }

  • Perintahnya udah ngerti semua kan? Gak ada yang baru Kalau dilihat sekarang, mustinya

    sudah mulai mirip deh desain blog kita. Cuma masih warna-warni.. hehehe.. Gpp, ini biar anda

    lebih mudah melihat elemen-elemennya. Untuk footernya kita biarkan aja gitu ya? Dan inilah

    hasil akhirnya sampai pelajaran ini

    Oke, biar ada waktu untuk praktek, silahkan deh dicoba dulu di rumah. Insya Allah besok kita

    lanjutin dengan perintah-perintah yang lebih keren lagi.

    Membuat Theme: Heading

    Ini adalah pertemuan keenam dalam seri panduan membangun theme WordPress. Anda bisa

    membaca artikel-artikel sebelumnya dengan melihat daftar isi di bawah artikel ini.

    Setelah kita melakukan tata letak layout di artikel sebelumnya, saatnya sekarang kita mengutak-

    atik bagian headernya. Disini kita akan mulai mencoba memasukkan fungsi-fungsi WordPress ke

    dalam theme blog kita. Yuk kita mulai!

  • wp_head();

    ?>

    Hehehe jangan pingsan dulu gan. Ane jelasin dah satu per satu Kode diatas untuk

    menggantikan kode di index.php sebelumnya. Cari tag hingga lalu ganti dengan

    kode diatas. Apa aja sih fungsinya? Kita urut dari atas sampai bawah ya?

  • artikel cara membuat theme WordPress dari awal sampai akhir. Anda bisa membaca-baca lagi

    artikel sebelumnya di bagian bawah tulisan ini:

    Yang akan kita bahas nanti adalah bagian header blog. Saya punya gambaran headernya nanti

    bisa diganti-ganti kayak Twenty Ten gitu, tapi nanti ajalah kalau kita sudah membahas soal

    fungsi. Untuk saat ini kita bikin standart dulu. Namanya juga belajar. Tul nggak?

    Kita akan pasang judul blog ukuran besar di bagian header. Kemudian kita tambahkan juga

    description dengan font lebih kecil di bawahnya dan nanti dekat dengan batas bawah header kita

    pasang menu navigasi. Untuk sementara menu navigasinya pakai list page saja. Nanti kita akan

    merubahnya menjadi custom menu. Keren kan?

    Yuk, langsung buka file index.php lalu fokus pada zona header yaitu baris antara tag hingga . Yuk kita lihat lagi kodenya:

    Lokasi header ada disini

    Sekarang kita ganti tulisan Lokasi header ada disini dengan nama blog dan sekaligus diskripsi

    di bawahnya lalu kita pasang juga list page. Kode lengkapnya seperti ini:

  • .blogtitle {

    font-size:30px;

    padding:30px 0 0 30px;

    margin:0;

    }

    .description {

    font-size:14px;

    padding-left: 30px;

    margin:0;

    }

    #menu {

    margin-top:10px;

    padding:0;

    background:#000;

    height:30px;

    }

    #menu ul {

    margin: 0;

    padding: 5px 0 0 15px;

    list-style: none;

    display: block;

    }

    #menu li , #menu li a{

    float: left;

    position: relative;

    margin-right:10px;

    color:#ffffff;

    text-decoration: none;

    }

    Ada beberapa perintah CSS baru yang kita masukkan: font-size (untuk mengatur ukuran font),

    list-style (untuk mengatur style list page), display (untuk mengatur bagaimana list ditampilkan.

    Dalam contoh ini kita buat mendatar) dan text-decoration (untuk mengatur dekorasi link. Dalam

    contoh ini kita pilih none karena kita gak mau ada garis bawah di link-nya).

    Agar mudah mengaturnya, kita tempatkan kode tersebut tepat diatas kode #maincontent biar urut

    gitu ini setingan untuk header.

    Oh iya, ada yang terlupa kemarin. Kita belum mengatur font-nya kan? Nah, silahkan tambahin

    juga deh di bagian atas deretan setingan CSS kode ini:

    body {

    font-family: Georgia, "Bitstream Charter", serif;

    }

    Nah, sekarang harusnya blog anda sudah muncul seperti ini:

  • Mudah-mudahan masih bisa diikuti ya? Insya Allah besok kita beranjak ke bagian konten-nya.

    Doakan aja moga sehat dan punya banyak kesempatan

    Buat Theme WP: Konten

    Bukan blog namanya kalau ndak memunculkan konten. Nah, tutorial membuat theme WP kali

    ini akan beranjak turun ke bawah yaitu ke bagian konten. Disini nanti akan kita munculkan

    artikel-artikel blog yang sudah susah payah dan berpeluh serta berderai air mata kita tulis dengan

    tinta emas kita *lebay*

    Untuk itu mari fokus lagi ke index.php dan kita akan mengutak-atik kode ini:

    Artikel akan muncul disini

    Looping

    Stop dulu! sebelum kita beranjak ke kode, saya perlu jelaskan dulu soal istilah looping. Looping

    artinya perulangan. Dalam WordPress pengulangan ini dilakukan untuk menampilkan artikel.

    Misalnya di halaman depan kita setting untuk tampil 10 artikel, maka looping akan melakukan

    pengulangan perintah menampilkan artikel hingga 10 kali.

    Untuk melakukan loop, biasanya kita memakai perintah while. Yang artinya, selama masih ada

    artikel yang ingin ditampilkan, maka ulangi lagi. Perintah ini sangat fleksibel. Ketika kita

    membuat halaman artikel, berarti kan disana cuma ada 1 artikel saja yang akan ditampilkan.

    Maka while pun akan bekerja 1 kali saja. Enak kan?

    Banyak fungsi-fungsi WP yang harus dimasukkan dalam loop ini. Artinya anda tidak bisa

    meletakkan di luar loop. Contoh yang paling sering ditemui adalah fungsi the_title, the_content,

    the_date, dll.

  • Sekarang kita coba belajar bikin loop dulu. Ini kodenya. Pasang kode ini menggantikan tulisan

    Artikel akan muncul disini

    Kita bahas satu per satu ya. Pertama fungsi have_posts(). Fungsi ini untuk mengecek apakah ada

    tulisan yang ingin ditampilkan. Kita pakai fungsi IF untuk pengecekan. Jika have_posts ada

    isinya, maka perintah di bawahnya akan di eksekusi. Jika tidak ya langsung ke endif.

    Kemudian while seperti dijelaskan diatas. Selama ada tulisan (have_post) maka the_post. Fungsi

    the_post digunakan untuk mengambil data di have_post dan kemudian dengan fungsi-fungsi

    lainnya kita akan menampilkannya satu per satu.

    Sebagai bahan belajar kali ini, kita cuma akan menampilkan judul blog saja dan mengakhirinya

    dengan tanda untuk mengganti baris.

    Sekarang jika anda melihat blog, maka akan ada judul-judul artikel disana. Cobalah membuat

    beberapa artikel agar terlihat bagaimana loop bekerja.

    Nah, silahkan berkreasi, ingin menampilkan apa di blog anda. Dan ini beberapa fungsi yang bisa

    anda pakai:

    - the_permalink : digunakan untuk menampilkan URL artikel

    - the_title : untuk menampilkan judul artikel

    - the_content : untuk menampilkan konten artikel. Jika lebih dari 1 artikel, maka yang muncul

    cuma sampai tanda readmore

    - the_excerpt: untuk menampilkan beberapa karakter awal artikel dan menghilangkan kode

    HTML-nya

    - the_time : untuk menampilkan kapan artikel ini di publikasikan

    - the_author : untuk menampilkan penulisnya

    - the_category : untuk menampilkan kategori artikel

    Untuk menambah wawasan anda, silahkan coba baca-baca daftar template tags dari

    codex.wordpress.org

    Berhubung beberapa hari ke depan saya agak sibuk di offline, jadi insya Allah kita akan jumpa

    lagi hari Senin ya. Sebagai PR, silahkan anda utak-atik deh fungsi-fungsi itu dan tempatkan

    diantara while dan endwhile.

    DIGITTextbox

  • Mengatur Konten dalam Themes WordPress

    Wah, tidak terasa sudah lama sekali saya tidak meneruskan penduan membuat theme di

    wordpress.or.id. Bagaimana PR yang saya berikan, harusnya sih udah selesai semua ya? Nah,

    pertemuan kali ini saya cuma akan menunjukkan pengaturan konten yang saya lakukan.

    Barangkali ada yang masih belum mengerjakan, silahkan deh di contek

    1. 2. 3. 4.

  • Kode diatas digunakan untuk menampilkan isi artikel. Jika kode ini ada di home atau archive,

    maka dia akan mencari tanda readmore secara otomatis dan memotongnya. Anda bisa

    memodifikasi tulisan default yang muncul di tempat pemotongan dengan menggunakan kode ini:

    Selanjutnya kita akan bahas langsung 3 baris karena nanti di blog 3 baris kode ini akan muncul

    hanya sebaris saja. Jadi kita sikat aja langsung ketiganya. OK?

    1. Publish on under by |

    2.

    3.

    Tiga baris diatas, diapit dengan DIV dengan id=postmeta. Kita beri id karena nanti akan kita rubah style-nya sehingga berbeda dengan konten. Biasanya sih dibuat ukurannya lebih kecil dan

    ada box gitu. Di dalam post meta ini kita masukkan tanggal artikel ini di publish dengan kode

    .

    Kita juga akan menampilkan kategori artikel ini dengan perintah . Lalu disambung dengan menampilkan penulis artikel dengan kode .

    Baris berikutnya adalah kode untuk menampilkan jumlah komentar lengkap dengan link menuju

    lokasi komentar. Kata-kata dalam kurung adalah tulisan yang akan muncul bila tidak ada

    komentar, 1 komentar dan lebih dari satu komentar.

    Baris yang dalam post meta ini adalah link Edit. Link ini hanya muncul jika anda login sebagai

    admin atau editor atau author artikel tersebut. Jika bukan itu, maka link tidak akan muncul.

    Terakhir kode yang akan kita bahas adalah . Seperti nama

    fungsinya, kode ini adalah untuk menampilkan komentar lengkap dengan form untuk mengisi

    komentarnya.

    Dan inilah hasil akhir hingga pelajaran ini:

  • Selamat Mencoba!

    Styling Konten WordPress

    Gak terasa lagi-lagi saya gak update sekian lama. Padahal saya rasa baru beberapa hari saya

    tinggal blog ini tapi cek tanggalnya ternyata update terakhir lebih dari sepekan yang lalu. Ya

    udah, kita terusin deh sharing ilmu cara membuat themes WordPress-nya.

    Kali ini kita akan mengatur tampilan konten yang sudah kita buat di pertemuan sebelumnya.

    Karena mengatur style, berarti file yang akan kita edit sekarang adalah file style.css. Dan karena

    ini pengaturan konten, maka kita tempatkan saja di bawah pengaturan untuk konten sambil

    sekalian menghilangkan warna kuning di bagian konten artikelnya. Yuk, kita cari kode ini:

    1. #content { 2. width:590px; 3. background:#FFCC00; 4. float:left; 5. }

    Lalu kita hilangkan kode background:#FFCC00; agar warna belakangnya tetap putih. Jika anda

    simpan file style.css dan lihat blog anda sekarang, maka background kuningnya akan hilang

    sekarang dan berganti dengan putih bersih.

    Tahap awal, kita atur dulu tampilan untuk judulnya. Sebelumnya kita telah mengidentifikasi

    bagian judul artikel dengan . Jadi kita buat saja di style.css-nya seperti ini:

    1. .title , .title a{

  • 2. font-size: 20px; 3. text-decoration:none; 4. color:#000000; 5. }

    Satu tambahan perintah baru kita pelajari disini yaitu text-decoration:none; Perintah ini

    untuk menghilangkan garis bawah pada judul artikel.

    Dan untuk bagian post meta yang berisi informasi tanggal publikasi, kategori, jumlah komentar

    serta link edit, kita buat dengan font lebih kecil dan background warna abu-abu:

    1. #postmeta { 2. font-size:10px; 3. background: #EDEDED; 4. padding:10px; 5. }

    Sekarang simpan dan lihat bagaimana tampilan blog anda sekarang

    Hasil Akhir Styling bagian Konten

    Pada bagian konten ini, sebenarnya ada banyak hal yang harus kita atur, misalnya bagaimana

    menampilkan gambar nanti, list, link, dll. Tapi gpp, nanti kita atur lagi kalau sudah jadi. Santai

    saja bos

    Membuat Sidebar Widget

    Selamat berjumpa kembali dalam seri panduan membangun themes dari nol hingga menjadi

    themes yang memenuhi standart WordPress 3.1. Pelan tapi pasti themes yang sudah kita bangun

  • mulai menampakkan bentuknya. Jika anda mengikuti terus panduan ini dari awal, saya yakin

    anda sudah mulai berani mengutak-atik themes yang sudah ada. Tapi buat yang terlambat

    silahkan baca kembali panduan ini dari awal biar nyambung karena saya tidak akan mengulang

    lagi pelajaran yang sudah lewat

    Jika kemarin kita telah menyelesaikan pembuatan bagian konten, maka sekarang kita akan coba

    memasukkan unsur canggih dalam themes kita yaitu sidebar widget. Disini kita akan berkenalan

    dengan file baru yang kita beri nama functions.php. File ini khusus menangani fungsi-fungsi

    PHP yang kita bangun untuk keseluruhan blog. Jadi, anda harus benar-benar membaca artikel ini

    dengan baik dan teliti

    Dalam membuat sidebar widget, kita akan bekerja dengan 3 file sekaligus:

    1. functions.php yang menangani fungsi widget di sidebar kita 2. index.php yang bertugas menentukan dimana letak sidebar widgetnya 3. style.css yang mengurusi bagaimana widget-widget ditampilkan

    Baiklah, pertama kita akan buat file functions.php. Caranya sama dengan saat kita membuat file

    index.php, kalau sudah lupa silahkan buka kembali arsip-arsip tulisan berseri ini.

    Untuk mendeklarasikan sebuah widget, kita gunakan fungsi register_sidebar. Nah, karena

    kita akan meregistrasi 3 sidebar widget sekaligus sesuai dengan theme yang kita bangun, maka

    kita akan buat fungsi khusus yang mendaftarkan 3 widget tersebut. Berikut kodenya:

    1.

  • 23. register_sidebar( array( 24. 'name' => 'Sidebar Kanan', 25. 'id' => 'sidebar-kanan', 26. 'description' => 'Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di s

    ebelah kanan sidebar kiri',

    27. 'before_widget' => '', 28. 'after_widget' => '', 29. 'before_title' => '', 30. 'after_title' => '', 31. ) ); 32. 33. } 34. add_action( 'widgets_init', 'themegue_widgets' ); 35. ?>

    Oke, saya jelaskan dulu. Pertama kode function themegue_widgets() dipakai untuk

    mendeklarasikan sebuah fungsi baru. Dalam contoh ini nama fungsinya adalah

    themegue_widgets.

    Selanjutnya dalam fungsi tersebut kita mendeklarasikan 3 buah widget dengan nama sidebar

    lebar, sidebar kiri dan sidebar kanan. Masing-masing sidebar kita beri keterangan nama

    sidebarnya, id, diskripsi, dll.

    Dan terakhir kita daftarkan fungsi tersebut agar dieksekusi menggunakan perintah add_action( 'widgets_init', 'themegue_widgets' );

    Sudah paham ya?

    Menginformasikan letak sidebar widget di Themes

    Berikutnya kita akan menunjukkan kepada WordPress dimana letak sidebarnya. Gak

    mungkinkan kita cuma daftarin aja widgetnya tapi nggak kita tunjukkan mau muncul dimana.

    Konyol dong jadinya. Bagaimana caranya?

    Buka file index.php dan kita cari kode sidebar kita yang dahulu. Kalau tidak salah, kodenya

    kemarin seperti ini:

    1. 2. 3. Iklan kotak ada disini 4. 5. 6. Menu-menu sidebar kiri ada disini 7. 8. 9. Menu-menu sidebar kanan ada disini

  • 10. 11.

    Disinilah kita perintahkan WordPress meletakkan widget sidebar. Dan perlu diingat, walaupun

    namanya sidebar widget, tapi tidak menutup kemungkinan untuk diletakkan di tempat lain lho

    (misalnya header atau footer). Karena kitalah yang menentukan dimana widget tersebut akan

    muncul.

    Ada 2 cara untuk menampilkan widget.

    Pertama widget baru muncul kalau ada isinya. Kalau ndak ada isinya dia hilang seolah-olah tidak

    ada. Cara ini bisa kita terapkan di sidebar lebar. Kita asumsikan, sidebar lebar digunakan untuk

    menampilkan iklan banner atau adsense. Nah, kalau tidak ada iklan sama sekali, maka sidebar itu

    hilang sehingga hanya memunculkan sidebar kiri dan kanan saja. Maka kita ganti kode untuk

    menampilkan sidebar lebar dengan kode berikut:

    1. 2. 3. 4. 5. 6. 7.

    Lihat kan? Kita gunakan fungsi IF untuk melakukan pengecekan apakah sidebar lebar ada isinya

    atau tidak (maksudnya widgetnya terisi atau tidak). Kalau ada, maka munculkan isinya. Kalau

    ndak ada ya hilangkan beserta DIV-nya sehingga tampilan kotak lebarnya ikut hilang. Gak lucu

    kok kalau kita cuma menampilkan kotak kosong doang.

    Fungsi kita pakai untuk memunculkan isi

    sidebar widget. Dalam hal ini sidebar widget dengan ID sidebar-lebar.

    Cara kedua menampilkan widget adalah jika ada isinya, maka tampilkan isinya. Tapi jika tidak

    ada isinya, maka tampilkan isi default. Jadi lokasi widgetnya tidak pernah kosong. Ini akan kita

    terapkan untuk sidebar kiri dan kanan. Kodenya seperti ini:

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

  • 11. 12. 13. 14.

    Nah, sudah paham kan? Sekarang tinggal kreatifitas anda sendiri yang menentukan isian

    defaultnya apa. Inilah kode sidebar yang saya buat dengan isian default untuk sidebar kiri adalah

    form search dan arsip, sedangkan untuk sidebar kanan saya isi meta. Cekidot !!

    1. 2. 3. 4. 5. 6. 7. 8. 9. Arsip 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. Meta 22. 23. 24. 25. 26. 27. 28. 29. 30.

    Sekarang coba lihat blog anda. Sebelum kita pasang widget, seharusnya tampilannya seperti ini:

  • Tampilan sidebar sebelum dipasang widget

    Dan inilah tampilan wp-admin pada menu widget

    Menu Widget

    Tampilannya masih ancur ya? Gpp, besok kita styling bagian sidebar ini. Anda pelajari dulu apa

    yang sudah saya sampaikan sampai paham. Insya Allah ke depan kita akan lebih banyak utak-

    atik kode lagi.

  • Styling Sidebar

    Bagaimana pelajaran kemarin? Sudah berhasil semua kan? Kali ini kita akan buat supaya sidebar

    kita lebih cakep. Untuk pewarnaan, silahkan anda pilih sendiri-sendiri ya? Warna-warna yang

    dipakai di panduan ini semuanya berdasarkan selera saya.. hehehe Anda bisa melihat daftar kode-kode warna di http://html-color-codes.com/ atau seperti saya menggunakan software color

    picker

    Nah, kita langsung saja kalau gitu. Karena kali ini kita akan bahas soal styling (kalau bahasa

    Indonesia apa ya?) maka file yang kita utak-atik apa?

    Bener style.css jadi GPL, langsung buka style.css dan kita cari lokasi styling sidebarnya. Sebenarnya bisa langsung anda tambah di bawah, tapi kelak ketika anda mau mengubah-ubah

    lagi anda akan puyeng nyarinya hehehe

    Inilah style.css kita sebelumnya:

    1. #sidebar { 2. width:300px; 3. background:#FF9900; 4. float:left; 5. margin-left:10px; 6. }

    Dan kita rubah seperti ini

    1. #sidebar { 2. width:300px; 3. float:left; 4. margin-left:10px; 5. } 6. #sidebar ul { 7. margin: 0px; 8. padding: 0px; 9. } 10. #sidebar li { 11. list-style:none; 12. font-size:12px; 13. margin-bottom:5px; 14. } 15. #sidebar li a { 16. text-decoration:none; 17. } 18. #sidebar h3 { 19. font-size:16px;

  • 20. margin: 0 0 10px 0; 21. }

    Dan inilah hasilnya:

    Hasil styling sidebar

    Saya menempatkan sebuah banner ukuran 300px x 250px di sidebar lebar sehingga bisa

    kelihatan ada bagian lebarnya. Sekarang tindakan terakhir adalah menghilangkan background

    warna abu-abu yang sementara saya pasang biar kelihatan bagian sidebarnya.

    Mudah saja, cukup menghapus baris-baris sidebar di ID lebar, kiri dan kanan sehingga seperti

    ini:

    1. #lebar { 2. margin-bottom:10px; 3. } 4. #kiri { 5. width:145px; 6. float:left; 7. margin-right:10px; 8. } 9. #kanan { 10. width:145px; 11. float:left; 12. }

  • Nah, sekarang anda lihat bagaimana hasil akhir blog anda. Insya Allah besok kita ngurusi bagian

    footernya. Sampai jumpa lagi

    Membuat Footer

    Footer atau kaki blog adalah bagian yang biasanya berisi informasi singkat soal copy right,

    mesin yang dipakai dan mungkin juga informasi kecil soal blog. Di footer ini juga bisa kita

    sisipkan judul artikel sehingga bisa menambah daya dorong SEO-nya.

    Pertama mari kita buka index.php. Dan kita cari bagian footernya:

    1.

    2. Footer ada disini 3.

    Kita akan ganti kata-kata Footer ada disini dengan informasi sebagai berikut:

    1. Nama Blog 2. Copyright 3. Judul Artikel yg sedang dibuka 4. Powered by WordPress

    Maka kodenya adalah seperti ini:

    1. 2.

  • Footer Theme WordPress

    Untuk sentuhan terakhir adalah memasang fungsi wp_footer yang akan dipakai oleh banyak

    plugin untuk bekerja maksimal di blog anda. Cari kode dan pasang sebelumnya seperti

    ini:

    1. 2. 3.

    Sekarang coba anda login dan jika benar, maka admin bar akan muncul di blog anda hehehe Dan nanti kalau ada plugin lain yang membutuhkan fungsi ini untuk meletakkan beberapa kode

    di footer, maka dia bisa meletakannya dengan mudah.

    Themes ini secara prinsip sudah siap. Tentunya anda bisa memodifikasinya sesuka hati sehingga

    sesuai dengan selera anda. Anda bisa menghiasinya dengan background yang menarik atau

    header yang keren untuk membuat themes ini makin cakep.

    Dan dengan berakhirnya panduan membuat footer ini maka seri panduan dasar membangun

    theme WordPress sudah selesai. Insya Allah berikutnya akan saya berikan beberapa tips dan trik

    untuk meningkatkan performa themes ini sehingga makin maknyuss

    Makanya subscribe dong menggunakan form di sebelah kanan tuh. Biar makin semangat

    sharingnya. Kalau sepi kan kayak sharing sama hantu.. hehehe

    Membuat Custom Background

    Sepertinya makin seru aja nih kegiatan kita utak-atik Themes WordPress. Dan kali ini saya ingin

    tunjukkan sebuah jurus lagi untuk membuat themes anda lebih gaya dan full fungsi. Apalagi

    kalau bukan custom background. hehehe..

  • Walaupun hasil akhirnya nanti sangat keren, tapi bikinnya ternyata gampang banget. Bahkan

    cuma perlu edit 1 file doang. Apalagi kalau bukan file functions.php yang selama ini sudah

    menemani kita dalam mempercanggih tampilan blog. Apa sih kode rahasianya? Nih, copy dan

    paste ke functions.php anda ya

    1. add_custom_background();

    Hah? cuman gitu doang mas? Trus apalagi yang diedit?

    Karena background itu dimana-mana cuma ada satu, jadi kita ndak perlu ngasih tahu WordPress

    dimana backgroundnya hehehe.. Dia sudah cukup cerdas untuk menebaknya.

    Tapi setelah saya coba, ternyata ada masalah nih dengan theme kita saat kita pasangin fungsi ini.

    Masalahnya yaitu, background bagian dalam ikut-ikutan berubah warna. Maklum, kemarin

    waktu bikin kita ndak ngisi dengan warna sehingga dianggap transparant. Nah, kita perbaikin

    yuk.

    Buka style.css dan cari kode ini:

    1. #wrap { 2. border:solid 1px #000; 3. width:900px; 4. margin:0 auto; 5. padding:10px; 6. }

    lalu kita tambahin deh kode warna latar belakang untuk tulisannya, misalnya putih sehingga

    jadinya seperti ini:

    1. #wrap { 2. border:solid 1px #000; 3. width:900px; 4. margin:0 auto; 5. padding:10px; 6. background:#ffffff; 7. }

    Yuk, kita lihat bagaimana hasilnya sekarang setelah kita rubah backgroundnya dengan warna

    coklat misalnya

  • Membuat Drop Down Menu

    Pada artikel sebelumnya tentang cara membuat custom menu navigasi, ternyata saya melewatkan

    sebuah panduan yaitu bagaimana kalau menu-nya bersusun alias ada sub menu. Mengingat ruang

    navigasi yang ada cuma cukup untuk 1 baris menu saja, maka kita perlu mengakalinya dengan

    membuat drop down.

    Bagaimanakah caranya?

    Mudah saja kok. Kita cuma perlu main-main sedikit dengan CSS-nya. Dan inilah kode CSS yang

    harus anda masukkan di file style.css

    1. #menu { 2. display: block; 3. float: left; 4. width: 100%; 5. } 6. #menu .menu-header, 7. div.menu { 8. width: 100%; 9. } 10. #menu .menu-header ul, 11. div.menu ul { 12. list-style: none; 13. margin: 0; 14. } 15. #menu .menu-header li,

  • 16. div.menu li { 17. float: left; 18. position: relative; 19. } 20. #menu a { 21. color: #aaa; 22. display: block; 23. line-height: 25px; 24. padding: 0 10px; 25. text-decoration: none; 26. } 27. #menu ul ul { 28. display: none; 29. position: absolute; 30. top: 25px; 31. left: 0; 32. float: left; 33. width: 180px; 34. z-index: 99999; 35. } 36. #menu ul ul li { 37. min-width: 180px; 38. } 39. #menu ul ul ul { 40. left: 30px; 41. top: 35px; 42. } 43. #menu ul ul a { 44. background: #000000; 45. line-height: 1em; 46. padding: 10px; 47. width: 180px; 48. height: auto; 49. } 50. #menu li:hover > a, 51. #menu ul ul :hover > a { 52. background: #000000; 53. color: #fff; 54. } 55. #menu ul li:hover > ul { 56. display: block; 57. }

    Anda bisa meletakkannya di baris paling bawah. Dan sekarang cobalah membuat menu bersusun

    di menu Appearance Menus.

  • Untuk membuat bersusun, geser sub menunya agak menjorok, nanti akan muncul box

    pembantunya sehingga bisa anda letakkan dengan mudah.

    Search Form Gaya dengan Image

    Kalau sebelumnya sudah saya sampaikan bagaimana memasang search form di menu bar, maka

    di artikel kali ini kita akan melakukan modifikasi agar search form itu bisa tampil lebih gaya.

    Bagaimana caranya?

    Oke, pertama kita perlu memodifikasi kode form yang dipakai sebelumnya:

    1. 2.

  • 7. } 8. #search-nav input { 9. background:transparent; 10. border:none; 11. color: #ffffff; 12. margin:0 0 0 7px; 13. width: 180px; 14. height: 20px; 15. } 16. #search-nav #searchsubmit { 17. width: 20px; 18. height: 20px; 19. }

    Selesai!

    Lho tapi mana gambarnya? hehehe. Iya kelupaan. Download gambarnya disini dan extract di folder themes anda. Sekarang coba deh anda lihat bagaimana tampilan themes kita sekarang

    Memasang Featured Image

    Sejak versi 2.9 WordPress memiliki fasilitas baru dengan nama featured image. Ini adalah

    gambar thumbnail yang mewakili sebuah artikel. Tak banyak blog yang memanfaatkan ini

    (termasuk blog ini juga), tapi karena kita belajar membuat themes WordPress, jadi kita perlu

    untuk mempelajarinya juga.

  • Apalagi, seperti biasa kita lihat di themes-themes premium dimana di bagian home kita bisa

    melihat sebuah gambar dengan sedikit tulisan dan di bagian artikel, gambar yang lebih besar

    muncul dengan lebih jelas. Bagaimana sih cara membuatnya? Ternyata gampang lho.

    Ada 3 file yang kita edit kali ini yaitu functions.php, index.php dan tentunya style.css untuk

    mempercantik tampilannya.

    Baiklah, di function.php kita pasang kode ini:

    1. add_theme_support( 'post-thumbnails' ); 2. set_post_thumbnail_size( 100, 100, true );

    Gampang ya? Angka 100 mewakili tinggi dan lebar gambar thumbnailnya. Jadi silahkan

    dimodifikasi sesuka hati.

    Untuk memunculkan thumbnailnya, kita edit index.php tambahkan kode ini ditempat dimana

    anda ingin thumbnail itu muncul. Karena saya ingin dia muncul sebelum judul artikel, maka saya

    letakan diatas judul artikel seperti ini:

    1. if (!is_single()) { 2. if ( has_post_thumbnail() ) { 3. the_post_thumbnail(); 4. } else { 5. echo '';

    6. } 7. } 8. ?> 9.

  • 3. margin-right:5px; 4. width:100px; 5. height:100px; 6. padding:3px; 7. border:solid 1px #cccccc; 8. }

    Tentunya anda bisa memodifikasi sesuka hati CSS-nya. Sesuaikan dengan themes anda yah.

    sekarang coba anda lihat tampilan blog anda sekarang

    Tampilannya masih berantakan karena gambar yang kita masukkan di artikel masih keluar di

    halaman depan.. hehehe.. trus bagaimana dong?

    Ditunggu artikel berikutnya ya xixixi

    Memperbaiki tampilan halaman depan

    Melanjutkan artikel sebelumnya tentang cara membuat featured image, sebagaimana dibagian

    akhir artikel tersebut, tampilan home blog kita masih terlihat berantakan. Ini karena kita masih

    menampilkan artikel dalam format full HTML sehingga jika kita pasang gambar, sudah tentu

    akan muncul.

    Maka, kita perlu menambah sedikit kode di index.php agar full HTML hanya muncul di halaman

    single saja. Sedangkan jika ada di home atau arsip, semua kode HTML dinonaktifkan dan hanya

    menampilkan ringkasannya saja. Caranya?

    Kita cari dulu kode ini di index.php

    1.

    Kita ganti dengan kode seperti ini:

    1.

  • Sekarang, jika anda lihat halaman depan blog, maka akan tampak lebih rapi karena gambar-

    gambar dan semua format tulisan akan hilang dan baru muncul ketika kita membuka artikelnya.

    Keren kan?

    Membuat Featured Slide Show

    Akhirnya kita coba sesuatu yang sedikit rumit.. hehehe.. Jika anda mengikuti panduan ini dari

    awal, insya Allah panduan berikut biasa-biasa aja. Silahkan copy paste dan modif sendiri koding-

    kodingnya ya.

    Featured slide show adalah sebuah fasilitas di sebuah web berita yang memungkinkan pemilik

    web berbagi sesuatu yang spesial. Misalnya berita-berita khusus yang penting dan hot atau

    peristiwa yang langka dan layak diketahui oleh banyak orang. Untuk blog, biasanya dipakai di

    artikel-artikel khusus. Fasilitas ini dibuat dalam bentuk dinamis dengan animasi yang keren.

    Ada macam-macam slideshow sih. Tapi yang coba saya share disini adalah slideshow yang

    cukup sederhana sehingga mudah untuk memodifikasinya. Anda bisa mengkombinasinya sendiri

    agar nampak lebih keren misalnya dengan menambah thumbnail dengan ukuran lebih besar

    khusus untuk slideshow ini. Anda juga bisa memodifikasi tampilannya. Oke, mari kita mulai.

    Untuk keperluan membuat slideshow ini, kita membutuhkan 2 buah file javascript yang akan

    mengelola slideshow kita nanti. Jadi, silahkan unduh dulu filenya disini. Itu adalah sebuah file

    zip dengan folder js di dalamnya. Anda hanya perlu meng-ekstract-nya ke folder themes yang

    sedang anda bangun.

    Jika sudah, sekarang mari kita mulai mengedit 2 file yaitu index.php dan style.css. Pada file

    index.php kita memasang 2 deret kode di 2 tempat terpisah. Pertama sebelum tag dan

    kedua di tempat dimana anda ingin slideshow ini muncul. Biasanya saya taruh setelah div

    content.

    Sebelum tag kita masukkan kode ini untuk memanggil 2 file javascript diatas dan file

    jquery yang sudah ada di WordPress:

    1. if (is_home()) { 2. wp_enqueue_script('jquery'); 3. wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js'); 4. wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js'); 5. }

    Kemudian di tempat dimana slideshow muncul, silahkan pasang kode slideshow ini:

    1. 2. jQuery(function() { 3. jQuery(".mygallery").jCarouselLite({ 4. btnNext: ".nextb",

  • 5. btnPrev: ".prevb", 6. visible: 1, 7. speed: 2000, 8. auto: 3000, 9. easing: "backout" 10. }); 11. }); 12. 13. 14. 15. 16. 17. 18. 23. 24. 25. 33. 34.
  • 47. 48.

    Kode diatas akan memunculkan 5 artikel terbaru di slideshow. Jika anda ingin mengubahnnya,

    silahkan merubah kode ini sesuai query yang anda inginkan:

    $my_query = new WP_Query('showposts=5');

    Selanjutnya, kita tinggal mengatur bagaimana slideshow ini muncul melalui style.css. Berikut ini

    style yang saya gunakan. Anda bisa memodifikasinya sendiri:

    1. /* SLIDER */ 2. 3. #slidearea{ 4. height: 170px; 5. overflow: hidden; 6. margin:10px 0px 0px 0px; 7. padding:10px; 8. position: relative; 9. width:560px; 10. border:solid 1px #cccccc; 11. background: #ededed; 12. } 13. #gallerycover{ 14. overflow: hidden; 15. margin:0px 20px 0px 0px; 16. } 17. .mygallery{ 18. overflow: hidden; 19. position:relative; 20. 21. } 22. .mytext img{ 23. float:left; 24. } 25. .mytext{ 26. position:relative; 27. margin:0px 5px 0px 5px; 28. height: 240px; 29. display:inline; 30. float:left; 31. color:#c4c4c4; 32. } 33. .mytext h2 { 34. padding:0px; 35. margin:0px; 36. font-size: 18px ;

  • 37. font-weight:bold; 38. font-style:italic; 39. } 40. .mytext h2 a:link,.mytext h2 a:visited{ 41. color:#006b97; 42. text-decoration:none; 43. } 44. .mytext p{ 45. padding:0px 0px; 46. color:#555; 47. font-size: 14px ; 48. line-height:20px; 49. font-style:italic; 50. text-shadow:1px 1px 0px #f6f6f6; 51. } 52. .nextb { 53. float:rightright; 54. } 55. .prevb { 56. float:left; 57. }

    Nah, itu aja yang perlu dilakukan untuk membangun slideshow. Tinggal anda kemudian yang

    harus menentukan sendiri seperti apa tampilan yang anda inginkan. Karena tiap orang pasti

    punya sentuhan seni sendiri-sendiri. Oke, selamat berkreasi

    Bermain-main dengan Looping WordPress

    Untuk memunculkan list artikel, WordPress menggunakan loop system. Biasanya menggunakan

    perintah while seperti ini:

    1. 2. 3.

    Antara while dan endwhile biasanya akan dimasukkan aneka macam hal yang ingin ditampilkan

    dalam list artikel. Biasanya adalah Judul artikel beserta link ke artikel tersebut, ringkasan artikel,

    tanggal, kategori, jumlah komentar dan penulisnya. Secara default, semua list itu akan tampil

    sama persis mulai artikel pertama sampai terakhir.

    Dengan sedikit trik, kita bisa membuat tampilan artikelnya berbeda-beda. Misalnya untuk artikel

    1 ditampilkan dalam bentuk biasa, lalu artikel 2-4 ditampilkan dalam bentuk kotak-kotak dengan

    hanya menampilkan featured image dan judul artikel saja. Kemudian sisanya kita tampilkan

    hanya dalam bentuk judulnya saja. Gimana caranya?

  • Kita akan menggunakan counter di dalam loop. Sederhananya seperti ini:

    1. 2. 3. 4.

    Di awal, kita beritahu bahwa $i isinya nol. Nah, ketika masuk ke loop, kita pasang script untuk

    meningkatkan nilainya secara otomatis. Baik, kalau sudah tinggal memproses counternya.

    Karena cuma ada 3 macam cara menampilkan post, maka kita pakai perintah if aja.

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

    Sekarang terserah anda mau diatur seperti apa. Selamat berkreasi

    Memecah File Themes

    Baiklah, karena ke depan kita akan melakukan modifikasi themes yang lebih expert lagi, rasanya

    akan sangat memusingkan kepala kalau kita masih juga bekerja dengan 1 file index.php dan 1

    file functions.php kita butuh file-file lain untuk mengelola semua tampilan themes. Sekaligus

    memperkenalkan masing-masing fungsi file yang biasanya terdapat di themes2 gratisan.

    Baiklah, sebagai awal, silahkan anda buka file index.php didalam file ini sebenarnya terkandung

    banyak file hehehe Tapi anda tidak sadar kan? Baiklah. Untuk awalnya, kita pecah dulu file index.php ini menjadi 3 file yaitu header.php, index.php dan footer.php

    Sebenarnya suka-suka hati anda sih mau memecahnya dimana. Kalau saya biasanya untuk footer,

    saya ambil dari baris paling awal hingga kode . Jadi akan tetap di index.php Ini isi file header.php saya

    1. 2. 3.

  • 6. wp_title( '|', true, 'right' ); 7. bloginfo( 'name' ); 8. ?> 9. 10.
  • Untuk footer, kita ambil mulai sampai terakhir seperti ini:

    1. 2. 3.

  • 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. Arsip 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. Meta 30. 31. 32. 33. 34. 35. 36. 37. 38. 39.

    Sebagaimana pelajaran yang lalu cut code ini lalu paste ke file baru dengan nama sidebar.php.

    Nah, sebagai ganti kode yang sudah hilang ini, kita pasang kode untuk memanggil sidebar yaitu:

    Dan inilah hasil akhir index.php yang sudah sendirian hehehe.

  • 1. 2. 3. 4. 5. 6. jQuery(function() { 7. jQuery(".mygallery").jCarouselLite({ 8. btnNext: ".nextb", 9. btnPrev: ".prevb", 10. visible: 1, 11. speed: 2000, 12. auto: 3000, 13. easing: "backout" 14. }); 15. }); 16. 17. 18. 19. 20. 21. 22. 23. 24. 29. 30. 31. 39. 40.
  • 44. 45. PreviousNex

    t

    46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 70.

  • Mudah-mudahan cukup dimengerti. Intinya cuma memindah kode-kode di index.php ke file

    yang baru aja sehingga ke depan akan lebih mudah pengelolaannya.

    Berikutnya adalah mentransformasi file index.php ini menjadi single.php, page.php dan

    archive.php serta category.php. Ya, kita akan banyak bekerja dengan file-file standart WordPress

    nantinya. Keep watching!!

    Membuat File Single.php, archive.php, dll

    Sesuai janji, hari ini saya akan share bagaimana cara membuat file-file wordpress themes yang

    jumlahnya berjibun itu. Sebenarnya file-file itu isinya sama kok. Hanya saja fungsinya berbeda-

    beda. Bahkan sebenarnya kalau isinya sama semua dengan index.php anda tidak perlu

    membuatnya.

    Oke, sekarang akan jelaskan lebih dahulu skema perintah file di WordPress.

    Saat anda mengetikkan URL, maka WordPress akan melakukan analisa, ini URL apa? Apakah

    halaman utama, arsip kategori, arsip tanggal, artikel, page atau kategori? Setelah tahu ini URL

    apa, WordPress kemudian akan mencari file template yang sesuai:

    1. URL Kategori maka akan dicari file category.php 2. URL Page maka akan dicari file page.php 3. URL artikel dicari file single.php 4. URL arsip tanggal dicari file archive.php 5. URL search cari search.php 6. URL halaman utama cari home.php 7. URL 404 error cari 404.php 8. URL author cari author.php

    Kalau file-file itu tidak ada, maka WordPress akan membuka file index.php dan menjalankan file

    itu. Selain file-file tersebut, masih ada file-file lain untuk custom-nya. Insya Allah kapan-kapan

    dibahas tersendiri.

    Nah, bagaimana membuat file-file itu?

    Cara paling mudah adalah dengan mengcopy paste file index.php. Kalau anda copy paste di

    folder yang sama biasanya akan muncul file baru dengan nama copy of index.php. Nah, rename

    aja file ini jadi single.php, page.php, archive.php, search.php, dll.

    Langkah berikutnya adalah menkostumasi file-file itu sesuai fungsinya. Misalnya untuk single,

    anda beri iklan di bawah artikelnya dan ada comment_template(). Kemudian featured slide show

    kan gak perlu di single, jadi hilangkan aja kodenya dari sana. Sedangkan yang lain silahkan

    dikostumasi sendiri.

  • Satu hal yang perlu diingat, kalau memang tidak ada perubahan yang perlu anda tambahkan,

    maka ada baiknya pakai index.php aja. Ini tentunya akan menghemat space themes anda.

    Nah, mudah-mudahan semua panduan yang sudah saya berikan selama ini dalam membuat

    themes cukup membuat anda paham. Memang tidak bisa dipersiskan karena themes unsur

    seninya lebih banyak daripada logikanya. Jadi, kreatifitas andalah yang paling penting.

    Sedikit tips dari saya, buatlah themes anda sendiri dan lakukan perubahan dikit demi sedikit. Jika

    ini anda lakukan secara konsisten insya Allah jauh lebih mudah memahami panduan-panduan

    ini. Jangan terlalu terpaku dengan kode-kode ini. Jika ingin beda tampilan, tentunya kodenya

    harus berbeda.

    Selamat berkreasi !!

    Membuat Custom Menu Navigasi

    Mulai artikel ini hingga artikel mendatang, saya akan sharing beberapa tips untuk membuat

    theme kita lebih canggih hehehe Pertama, saya akan sharing bagaimana cara memasang custom menu di themes sederhana yang sudah kita buat sebulan terakhir kemarin. Walaupun

    canggih, tapi caranya mudah banget lho.. xixixi

    Pertama, kita deklarasikan dulu custom menunya di functions.php (masih ingat kan?) cukup

    tambahkan kode ini di bawah file functions.php:

    1. register_nav_menus( array( 2. 'primary' => __( 'Navigasi Utama', 'themegue' ), 3. ) );

    Tulisan Navigasi Utama adalah nama lokasi yang akan kita masukkan custom menu. Sedangkan

    themegue ya nama themesnya Untuk primary adalah nama identitas menu-nya.

    Sekarang kita tinggal tentukan mau dipasang dimana custom menu-nya. Kalau dari theme yang

    kita buat, berarti pasangnya di bagian header. Kita cari dulu kode ini:

    1. 2.

  • Nah, coba deh cek menu Appearance Menu di wp-admin anda. Insya Allah anda sudah bisa memfungsikan custom menunya hehehe

    Membuat Custom Header

    Mari kita melangkah pada trik yang lebih canggih lagi. Kali ini kita akan menambah fasilitas

    untuk mengganti gambar pada header. Dengan fasilitas ini, pengguna theme kita bisa

    menentukan sendiri mau pakai gambar apa. Keren kan?

    Kita juga bisa menentukan lebar dan tinggi bagian headernya sehingga sesuai dengan themes.

    Hebatnya lagi, ternyata trik agar themes kita punya fasilitas custom header sangat mudah lho..

    hehehe Bagaimana sih caranya? Cekidot gan!

    Ada 2 file yang kita otak-atik disini yaitu file functions.php dan index.php. Pada functions.php

    kita tambahkan kode ini di bagian bawah:

    define( 'HEADER_IMAGE_WIDTH', 900 );

    define( 'HEADER_IMAGE_HEIGHT',120 );

    define( 'HEADER_TEXTCOLOR', '000000' );

    add_custom_image_header( '', 'themegue_header_style' );

    function themegue_header_style() {

    echo '

    #headimg {

    height:120px;

    background:#cccccc;

    }

    #name {

    font-family: Georgia, "Bitstream Charter", serif;

    font-size:30px;

    }

    h1 a {

    text-decoration:none;

    }

    #desc {

    font-family: Georgia, "Bitstream Charter", serif;

    font-size:14px;

    }

    ';

    }

    Ada 3 bagian dalam kode diatas. Pertama adalah kode-kode define yang berisi nilai-nilai yang

    menjadi default header blog nanti.

    define( 'HEADER_IMAGE_WIDTH', 900 ); : menentukan ukuran lebar header

    define( 'HEADER_IMAGE_HEIGHT',120 ); : menentukan ukuran tinggi header

    define( 'HEADER_TEXTCOLOR', '000000' ); : menentukan warna teks di header

  • Kemudian diikuti oleh kode untuk deklarasi bahwa theme kita menyediakan fasilitas ganti

    header.

    add_custom_image_header( '', 'themegue_header_style' );

    Dan terakhir adalah kode yang kita gunakan untuk memasang style di halaman admin nanti saat

    user mengedit gambar headernya.

    Setelah kode-kode tersebut masuk di functions.php kita tentukan letak headernya di index.php

    (ingat, WP hanya robot yang nggak tahu apa-apa kalau ndak kita kasih tahu)

    Karena design theme kita gambarnya adalah latar belakang maka kita letakkan style sebelum tag

    #header {

    background : url();

    }

    .blogtitle a, .description {

    color:

    }

    Anda perhatikan kode adalah kode untuk memanggil gambar

    header yang dipasang oleh user.

    Sekarang silahkan deh coba masuk ke wp-admin lalu klik menu Appearance Header Selamat mencoba!