Bikin Theme WP
-
Upload
ary-cahyono -
Category
Documents
-
view
251 -
download
0
Transcript of Bikin Theme WP
-
7/31/2019 Bikin Theme WP
1/28
Bikin Theme WP: Designing
Dipublikasi padaFebruari 18, 2011olehadmin
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 Blog2. 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?
http://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/author/qzonershttp://wordpress.or.id/author/qzonershttp://wordpress.or.id/author/qzonershttp://wordpress.or.id/author/qzonershttp://wordpress.or.id/bikin-theme-wp-designing.html -
7/31/2019 Bikin Theme WP
2/28
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:
1. 2. 3. Theme Ujicoba4. 5. 6. 7. 8. Lokasi header ada disini9. 10. 11. 12. Artikel akan muncul disini13. 14. 15. 16. Iklan kotak ada disini17. 18. 19. Menu-menu sidebar kiri ada disini20. 21. 22. Menu-menu sidebar kanan ada disini23. 24. 25. 26. 27. 28. Footer ada disini29. 30. 31. 32.
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?
-
7/31/2019 Bikin Theme WP
3/28
Nah, di deretan kode diatas, saya menempatkan beberapa tag
. Tag ini kita pakai untuk menandaisuatu 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
Btw, kok belum ada yang subscribe ya? tadi saya cek cuma ada 1 orang doang. Hmm.. jadi kurang semangat
nih hehehe
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:
1. 2. 3. Theme Ujicoba4.
Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag /head>:
1.
-
7/31/2019 Bikin Theme WP
4/28
1. 2. 3. Theme Ujicoba4.
-
7/31/2019 Bikin Theme WP
5/28
2. height:120px;3. background:#cccccc;4. }
Ada 2 perintah lagi yang kita masukkan yaitu height untuk menentukan tinggi header. Dalam contoh diatas
saya buat 120 pixel. Untuk lebarnya tidak kita tentukan karena dia akan mengikuti 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
1. #maincontent {2. margin-top:10px;3. }4. #content {5. width:590px;6. background:#FFCC00;7. float:left;8. }9. #sidebar {10. width:300px;11. background:#FF9900;12. float:left;13. margin-left:10px;14. }
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
-
7/31/2019 Bikin Theme WP
6/28
1. #lebar {2. background:#FF3300;3. margin-bottom:10px;4. }5. #kiri {6. background:#660000;7. width:145px;8. float:left;9. margin-right:10px;10. }11.#kanan {12. background:#660000;13. width:145px;14. float:left;15. }
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.
PS: Jangan lupa ngajak teman untuk ikutan belajar ya? Biar seru!
Membuat Theme: Heading
-
7/31/2019 Bikin Theme WP
7/28
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!
1. 2.
-
7/31/2019 Bikin Theme WP
8/28
Ini kode untuk menerima ping back dari blog lain. Jadi kalau ada yang ngasih link ke kita, kita bisa langsung
tahu.
Kalau kode diatas kita perlukan agar fungsi reply comment berfungsi. Tahu kan reply comment? Contohnya di
blog ini. Kalau anda klik reply, maka secara otomatis form akan muncul disana dan anda bisa langsung ketik
komentar di bawahnya. Canggih ya?
Nah, kalau udah dimasukkan semua, simpan deh filenya index.php dan coba anda lihat hasilnya. Untuk
menguji titlenya, coba buka sebuah artikel melalui menu Posts Posts. Klik view salah satu artikel. Seharusnya
judulnya sudah berganti-ganti menurut judul artikelnya.
Oke, kita sudah belajar aneka atribut di head. Insya Allah besok kita akan utak-atik bagian header blog.Ditunggu yah
Buat Theme WordPress: Blog Header
Panduan kali ini membutuhkan konsentrasi tinggi.. hehehe.. Makanya anda butuh fokus..fokus..dan fokus..
cieeh.. Bagi yang kesasar, ini adalah artikel ketujuh dari rangkaian artikel cara membuat theme WordPress dar
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:
1. 2. Lokasi header ada disini3.
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:
-
7/31/2019 Bikin Theme WP
9/28
1. 2. 3.
4. 5. 6. -
7/31/2019 Bikin Theme WP
10/28
17.#menu ul {18. margin: 0;19. padding: 5px 0 0 15px;20. list-style: none;21. display: block;22. }23.#menu li , #menu li a{24. float: left;25. position: relative;26. margin-right:10px;27. color:#ffffff;28. text-decoration: none;29.}
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 buatmendatar) 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:
1. body {2. font-family: Georgia, "Bitstream Charter", serif;3. }
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
-
7/31/2019 Bikin Theme WP
11/28
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:
1. 2. Artikel akan muncul disini3.
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
1. 2. 3. 4.
5. 6. 7.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.
-
7/31/2019 Bikin Theme WP
12/28
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-bacadaftar template tagsdari 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.
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.
-
7/31/2019 Bikin Theme WP
13/28
8.
9. 10. 11. 12. 13. 14.
Saya jelasin per barisnya ya. Baris pertama sampai ketiga sudah saya jelaskan di cara membuat konten bagian
looping. Jadi kita langsung melompat ke baris ke empat yaitu:
-
7/31/2019 Bikin Theme WP
14/28
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!
-
7/31/2019 Bikin Theme WP
15/28
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. }
-
7/31/2019 Bikin Theme WP
16/28
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 kita2. index.php yang bertugas menentukan dimana letak sidebar widgetnya3. 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.
-
7/31/2019 Bikin Theme WP
17/28
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.
-
7/31/2019 Bikin Theme WP
18/28
Selanjutnya dalam fungsi tersebut kita mendeklarasikan 3 buah widget dengan nama sidebar lebar, sidebar kir
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 disini4. 5. 6. Menu-menu sidebar kiri ada disini7. 8. 9. Menu-menu sidebar kanan ada disini10. 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.
-
7/31/2019 Bikin Theme WP
19/28
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. Arsip10.
-
7/31/2019 Bikin Theme WP
20/28
11. 12. 13. 14. 15. 16.17.18. 19. 20. 21. Meta22. 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
-
7/31/2019 Bikin Theme WP
21/28
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 bisalangsung 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;
-
7/31/2019 Bikin Theme WP
22/28
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:
-
7/31/2019 Bikin Theme WP
23/28
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.
-
7/31/2019 Bikin Theme WP
24/28
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 disini3.
Kita akan ganti kata-kata Footer ada disini dengan informasi sebagai berikut:
1. Nama Blog2. Copyright3. Judul Artikel yg sedang dibuka4. Powered by WordPress
Maka kodenya adalah seperti ini:
1. 2.
-
7/31/2019 Bikin Theme WP
25/28
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 denganselera 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 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
-
7/31/2019 Bikin Theme WP
26/28
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.
-
7/31/2019 Bikin Theme WP
27/28
5. add_custom_image_header( '', 'themegue_header_style' );6.7. function themegue_header_style() {8. echo '9. 10.#headimg {11. height:120px;12. background:#cccccc;13.}14.#name {15. font-family: Georgia, "Bitstream Charter", serif;16. font-size:30px;17.}18.h1 a {19. text-decoration:none;20. }21.#desc {22. font-family: Georgia, "Bitstream Charter", serif;23. font-size:14px;24.}25.26.';27.}
Ada 3 bagian dalam kode diatas. Pertama adalah kode-kode define yang berisi nilai-nilai yang menjadi defaultheader 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
-
7/31/2019 Bikin Theme WP
28/28
1. 2. #header {3. background : url();4. }5. .blogtitle a, .description {6. color: 7. }8.
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!