This document was uploaded by user and they confirmed that they have the permission to share
it. If you are author or own the copyright of this book, please report to us by using this DMCA
report form. Report DMCA
Overview
Download & View Tutorial Dasar Perancangan Theme Wordpress as PDF for free.
Tutorial Dasar Perancangan Theme Wordpress Posted in Recommended, Tutorial, Web Design, Web Developer - 2 Comments Wordpress adalah blog engine terpopuler saat ini. Hal ini karena Wordpress bersifat open dan mudah untuk dikostumasi dan ditambahkan fitur dengan bermacam template dan plugin yang tersedia secara gratis. Namun tentu ada ingin memiliki tampilan blog yang unik dan beda dengan yang lain. Untuk permulaan anda tentu dapat menggunakan theme yang telah tersedia. Atau juga bisa menggunakan template default yaitu Kubrick. Namun untuk anda yang ingin merancang sendiri tampilan blog Wordpress anda inilah caranya. Merancang theme Wordpress memerlukan keahlian HTML, CSS, dan dasar PHP. Saya tidak mengajarkan hal tersebut disini. Jadi kalau anda telah memiliki keahlian tersebut silakan melanjutkan tutorial ini. Template yang kita rancang akan menggunakan engine Wordpress 2.3 yang merupakan versi mayor terbaru saat tutorial ini dibuat yang telah mendukung widget secara default. Kebanyakan template mendukung 1 sidebar saja, namun tutorial ini sidebar yang saya gunakan ada 2 yaitu sidebar pada halaman depan atau hompage dan sidebar pada halaman posting. Tujuannya agar kita bisa memberikan link yang sesuai dengan posting agar pengunjung tertarik mengunjungi posting lainnya. Konsep dari theme Wordpress adalah menggunakan template tag. Halaman theme akan digunakan sesuai dengan halaman yang diload. Contohnya pada saat konten posting kita ditampilkan maka yang dipanggil adalah file single.php. Bila yang ditampilkan adalah page maka yang dipanggil adalah page.php. Demikian juga dengan pemanggilan archive, category, dan halaman lainnya. Agar lebih dapat dimengerti silakan ikut langkah tutorial berikut. Berikut adalah langkahlangkah perancangan dasar theme Wordpress: 1. Langkah pertama siapkan template HTML & CSS yang sudah siap pakai. Template ini berupa template lengkap yang merupakan halaman web statis yang akan kita ubah menjadi themes Wordpress. Anda sebaiknya merancang template HTML CSS terlebih dahulu sebelum mengubahnya menjadi themes Wordpress. Template ini nanti akan kita pilah-pilah menjadi bagian-bagian dari theme Wordpress. Berikut adalah kode HTML dari template basic kita:
2. Selanjutnya kita akan membagi atau memotong kode HTML penyusun template diatas. Kode HTML kita bagi menjadi 4 bagian menjadi 4 file PHP yaitu: o Header.php, file yang akan menyimpan bagian header theme Wordpress. Yang perlu dipertimbangkan pada bagian ini adalah header akan selalu di load atau ditampilkan pada tiap halaman Wordpress kita. Jadi potong bagian penting yang harus diload tiap kita akan membuka semua halaman blog. Contohnya adalah bagian tag pada file HTML dan sedikit bagian pad tag pada contoh template basic diatas bagian yang dimasukkan adalah pada bagian header. Jadi untuk pemotongan awal inilah isi dari file header.php:
Index.php, yaitu file utama yang akan diload pada saat pertama kali blog kita dibuka. File ini merupakan halaman depan dari blog Wordpress kita karena itu tempatkan bagian body dari HTML template basic kita yang merupakan bagian konten utama dari template kita. Pada contoh template basic yang merupakan konten utama adalah pada bagian konten posting di blok content-left. Dengan demikian isi dari file index.php adalah sebagai berikut:
Sidebar.php, yaitu bagian sub content dari blog kita. Pada sidebar kita menempatkan beberapa informasi singkat dari blog kita seperti kategori, arsip, daftar link, dan sebagainya. Pada template basic yang dimaksud sidebar adalah pada blok content-right. Karena itu isi dari file sidebar.php adalah:
Category
internet
flash
web
php
Archive
03/2008
02/2008
01/2008
Footer.php, hampir sama dengan bagian header yaitu bagian penutup blog yang akan selalu diload setiap blog kita diakses. Dengan demikian pada bagian template
basic kita yang dimaksud adalah blok footer. Kita bisa menempatkan kode javascript pada bagian ini. Isi dari footer.php akan menjadi sebagai berikut:
3. Setelah selesai membagi template basic kita menjadi sub-sub template maka selanjutnya kita akan mengubah kode-kode HTML biasa dengan menambahkan beberapa kode PHP yang merupakan template tag dari Wordpress. Template tag ini berfungsi untuk meload isi sebenarnya blog kita dari engine blog Wordpress. Dengan demikian template tag akan menampilkan isi-isi dari blog. Berikut adalah perubahan pada file themes basic Wordpress yang telah kita potong-potong sebelumnya: o Header.php, pada file ini kita menempatkan template tag yang akan meload beberapa komponen blog seperti blog-title, blog-description, page-menu, dan lain-lain. File ini bisa dipanggil dengan template tag . Berikut isi file header.php yang kita ubah: > <meta http-equiv="Content-Type" content="; charset=" /> <?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?> <meta name="generator" content="WordPress " />
Sorry, but you are looking for something that isn't here.
Sidebar.php, pada file ini kita akan meload beberapa widget yang telah kita set pada wordpress administrator. Sidebar yang diload ada 2 macam. Bila sidebar dipanggil oleh hompage atau page biasa maka yang diload adalah sidebar 1, sedangkan bila sidebar dipanggil oleh single post atau halaman yang menampilkan
isi posting maka yang dipanggil adalah sidebar 2. File ini dipanggil dengan template tag Berikut adalah isi perubahan pada file sidebar.php:
Footer.php, pada file ini tidak terlalu banyak fungsi yang penting. Hanya sedikit informasi mengenai blog ini. File ini dipanggil dengan template tag . Berikut adalah isi dari footer.php:
Setelah mengubah file template basic kita menjadi file theme Wordpress maka kita perlu menambahkan beberapa file theme lagi untuk melengkapi theme kita agar dapat bekerja secara penuh. Berikut ada file-file yang perlu kita buat: Single.php, merupakan file theme turuan dari index.php. Strukturnya hampir sama namun yang membedakan adalah isi yang diload. Anda bisa mengkopi file index.php dan menyimpannya dengan filename single.php dan mengubahnya sedikit. Pada bagian isi posting dan postmetadata Berikut adalah isi dari file single.php:
<small> This entry was posted on at and is filed under . You can follow any responses to this entry through the feed. comment_status) && ('open' == $post->ping_status)) { // Both Comments and Pings are open ?> You can leave a response, or " rel="trackback">trackback from your own site. comment_status) && ('open' == $post->ping_status)) { // Only Pings are Open ?> Responses are currently closed, but you can " rel="trackback">trackback from your own site. comment_status) && !('open' == $post->ping_status)) { // Comments are open, Pings are not ?> You can skip to the end and leave a response. Pinging is currently not allowed. comment_status) && !('open' == $post->ping_status)) { // Neither Comments, nor Pings are open ?> Both comments and pings are currently closed.
Sorry, no posts matched your criteria.
Selain single.php yang memiliki struktur mirip dengan index.php ada juga file yang mirip yaitu page.php. File ini digunakan untuk menampilkan halaman yang dibuat. Contohnya halaman about dan contact. Berikut contoh page.php:
Read the rest of this entry »'); ?> '
<strong>Pages: ', 'after' => '
', 'next_or_number' => 'number')); ?>
Sorry, no posts matched your criteria.
Untuk menampilkan daftar komentar pada suatu post maka diperlukan file comments.php. File ini dapat dipanggil dengan template tag post_password)) { // if there’s a password if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post>post_password) { // and it doesn’t match the cookie ?>
This post is password protected. Enter the password to view comments.
to “”
id=”comment-”> says: comment_approved == ‘0′) : ?> <em>Your comment is awaiting moderation. <small>” title=”"> at
Berikutnya adalah file functions.php yang merupakan file untuk menyimpan fungsi-fungsi yang berkaitan dengan theme buatan kita. Pada file ini kita mendeklarasikan widget yang kita inginkan. Pada file ini juga dapat memberi fungsi tambahan untuk administrasi theme dari Wordpress administrator: '
',
'after_widget' => "
", 'before_title' => '
', 'after_title' => "
")); } ?>
4. Selesailah theme Wordpress kita. Sebenarnya masih ada file file lain yang dibutuhkan untuk menampilkan secara keseluruhan fungsi blog Wordpress. Akan tetapi file tersebut tidak bersifat harus ada. Bila file tersebut tidak ada blog kita masih dapat menampilkan konten dengan baik. File-file itu dapat tergantikan oleh file default atau oleh file lainnya. Contohnya adalah archive.php,search.php,category.php, dll. Bila ingin tampilan theme anda dapat lebih spesifik maka anda dapat melengkapi file-file tersebut. Anda tinggal meng-copy semua file tersebut ke dalam 1 folder dan memasukkannya ke folder theme Wordpress. Selanjutnya anda dapat mengaktifkan theme buatan anda dari menu Presentation pada Wordpress Administrator. Bila ingin menggunakan theme Wordpress yang lebih lengkap maka theme default Wordpress 2.3 adalah permulaan yang bagus. Kelengkapan fungsi dan file theme dapat dijadikan referensi untuk pengembangan theme anda sendiri. Contoh theme wordpress yang kita gunakan diatas merupakan theme yang sangat dasar. Anda dapat memperbaiki theme tersebut dengan memodifikasi theme dan CSS dari theme tersebut. Anda juga dapat menambahkan beberapa gambar agar lebih menarik. Selamat berkreasi.
