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 Creating Wordpress Theme (wp Tutorial) as PDF for free.
Tutorial Membuat Wordpress Theme Mohammad Mustamar Natsir http://profmustamar.com A. INTRO Yang harus diperhatikan dalam membuat Wordpress theme adalah: - Daftar kebutuhan - Struktur dasar kode html dan css yang valid - Istilah-istilah dalam template Wordpress Ok, sekarang mari kita bedah. 1. Yang dibutuhkan untuk membuat sebuah Wordpress theme 1. Local Apache, PHP, MySQL Sever Untuk bisa menjalankan engine Wordpress, kita membutuhkan sebuah webserver Apache, PHP, dan MySQL. Hampir semua hosting (Linux Hosting) memilikinya, tapi tidak di komputer kita. Nah, karena kita akan menjalankan Wordpress di komputer kita, maka kita membutuhkan program yang mampu bekerja sebagai webserver di komputer kita (Local Server). Untuk yang menggunakan sistem operasi Windows, dapat menggunakan beberapa software local server berlisensi opensource, seperti: - XAMPP (http://www.apachefriends.org/en/xampp.html), atau - WAMP (http://www.wampserver.com/en/) Bagi pengguna Linux, dapat juga menggunakan XAMPP, atau LAMP (Linux Apache MySQL PHP) Cara installasi LAMP dapat dilihat di situs http://lamphowto.com/ Pada tutorial ini saya menggunakan XAMPP sebagai local servernya. Sebagai bahan praktek, software XAMPP tersedia di dalam CD tutorial. (install sekarang!) 2. Wordpress File Tentunya yang kita butuhkan selanjutnya adalah Wordpress File. Saya sarankan menggunakan Wordpress rilis terbaru (Wordpress 2.7), dapat didownload melalui situs resmi Wordpress (www.wordpress.org/download). Sebagai bahan praktek, file Wordpress tersedia di dalam CD tutorial, dengan nama wordpress.zip
3. Text Editor Untuk mengedit kode-kode template, harus menggunakan teks editor standar, seperti notepad atau wordpad. Atau, dapat juga menggunakan web editor, seperti Adobe Dreamweaver, atau yang berlisensi opensource semacam Nvu Web Authoring Software (http://www.net2.com/nvu/). Dalam tutorial ini saya menggunakan Notepad sebagai text editor. Namun jika ingin menggunakan Nvu sebagai editornya, sebagai bahan praktek, software installasi Nvu tersedia di dalam CD tutorial. (install sekarang!) 2. Struktur dasar kode html yang valid Struktur kode html yang valid itu: a. harus dimulai dengan sebuah tag <> dan ditutup dengan end tag Contoh : title text kecuali beberapa tag yang tidak membutuhkan penutup end tag, seperti : , , b. Struktur kode html harus berurutan. Jangan terbalik-balik Contoh struktur yang salah:
3. Istilah-istilah dalam pembuatan Wordpress theme Kita juga harus mengetahui istilah-istilah yang sering digunakan dalam template Wordpress. Istilah-istilah ini adalah standar yang digunakan dalam pengembangan Wordpress di seluruh dunia. Istilah-istilah itu antara lain: a. Template Adalah set kode yang dapat digunakan di berbagai tempat dalam layout, tanpa harus menulis kode yang sama berulang-ulang. b. Template File Adalah file yang berisi beberapa kode template. Contohnya, index.php, sidebar.php, home.php c. Theme / Wordpress Theme Adalah kumpulan semua file yang digunakan. File-file itu dapat berupa gambar, teks, kode, dll, yang terhimpun dalam sebuah folder theme. Jadi, Wordpress Theme dan Wordpress Template berbeda. Catat: BERBEDA! d. Post Sederhananya, post adalah entry utama yang kita tampilkan di blog. e. Page Adalah sejenis post juga, tetapi tidak tergantung pada pilihan kategori, tags, dll. 4. Memahami hirarki dan struktur file di Wordpress Setelah memahami istilah-istilah yang digunakan dalam pembuatan Wordpress theme, kita juga harus memahami struktur file di dalam Wordpress theme. Pertama, File yang dibutuhkan untuk membangun sebuah theme sebenarnya cukup hanya dengan 2 file, yaitu index.php dan style.css, yang keduanya berada dalam sebuah folder theme. Semua tampilan blog akan diarahkan ke file index.php, dan style.css sebagai pendukung untuk mengatur layout blog.
Tapi, agar blog dapat bekerja lebih fungsional dan efektif, sebaiknya dibuatkan pula template file lainnya sebagai pendukung. Daftar template file itu antara lain adalah: • • • • • • • • • • • • •
Semua file template itu harus disimpan dalam sebuah folder theme dengan nama folder tertentu, misalnya ‘ThemeSaya’, dan disimpan dalam folder /wp-contents/themes/ dalam folder installasi Wordpress. Berikut ini adalah hirarki akses blog ke dalam theme.
Diambil dari: http://codex.Wordpress.org/Templates_Hierarchy
Nah, dari gambar di atas dapat kita lihat bahwa semua halaman yang kita akses akan diarahkan ke index.php jika template file pendukungnya tidak ada.
B. PRAKTEK MEMBUAT WORDPRESS THEME Ok, sekarang setelah dasar-dasar teori tentang Wordpress theme sudah diketahui, saatnya untuk memulai praktek pembuatannya. Yang harus dilakukan dalam praktek ini adalah: 1. Menginstall dan menjalankan Wordpress di komputer 2. Membuat sebuah template html+css komplit. 3. Membuat file template. 1. Menginstall dan menjalankan Wordpress di komputer • Install XAMPP di komputer. (file installer tersedia di CD tutorial) • Setelah terinstall, jalankan Apache, MySQL, dan PHP server melalui XAMPP Control Panel. Pastikan di XAMPP Control Panel, status Apache dan MySQL adalah ‘running’. • Exstrak file Wordpress (wordpress.zip, tersedia di CD tutorial) ke folder htdocs di dalam folder installasi XAMPP. Jika menggunakan Windows, secara default folder installasi XAMPP terdapat di drive C:\xampp • Buat sebuah MySQL database melalui PHPMyAdmin, dengan cara mengakses: http://localhost/phpmyadmin lewat browser, dan membuat sebuah database dengan nama tertentu, misalnya wordpress
Akses wordpress melalui browser, http://localhost/wordpress, isikan data mengenai database sesuai dengan database yang baru saja dibuat. Isikan username dengan ‘root’, dan field password dikosongkan.
•
Ikuti instruksi selanjutnya hingga selesai, dan Anda dapat login ke dashboard. Setelah itu, pastikan Anda mengganti password melalui menu Users >> Your Profile Wordpress sudah selesai diinstall, dan dapat langsung dijalankan melalui browser, dengan alamat http://localhost/wordpress.
•
2. Membuat sebuah template html+css komplit. Setelah selesai menginstall Wordpress di komputer, yang harus dilakukan adalah membuat sebuah template html dan css komplit. Template ini adalah layout dasar blog yang akan kita buat. Anda dapat membuat sebuah template html dan css sendiri, namun untuk mempersingkat waktu, di dalam CD tutorial terdapat sebuah template html+css yang akan digunakan untuk membuat file template Wordpress.
Pindahkan folder mywptheme yang terdapat pada CD tutorial ke dalam folder wp-content/themes/ di dalam folder installasi Wordpress. 3. Membuat file template Setelah memindahkan folder mywptheme ke dalam folder installasi Wordpress, yang harus dilakukan sekarang adalah memecah file layout.html yang terdapat di dalam folder mywptheme menjadi file-file template Wordpress. Buka file layout.html yang terdapat di dalam folder mywptheme menggunakan text editor. a. Membuat file style.css Style.css adalah file cascade stylesheet (CSS), yang fungsinya adalah untuk mengatur tampilan web. CSS adalah kode yang di dalamnya terdapat kode-kode untuk mewakili warna, ukuran (size), garis, border, posisi, dan sebagainya. Dalam praktek kali ini, kode CSS sudah tersedia di dalam file layout.html. Buka file tersebut. Setelah terbuka, cut text mulai dari <style type=”text/css”> sampai seperti yang terdapat pada gambar di bawah:
Lalu buat sebuah text file baru, lalu paste ke dalamnya. Lalu tambahkan text berikut ini pada baris paling atas file tersebut : /* Theme Name: Theme URI: Description: Version: Author: Author URI: */
MyWPtheme http://profmustamar.com Theme Pertamaku 1.0 Mohammad Mustamar Natsir http://profmustamar.com
Isikan Theme Name, Theme URl, Description, Version, Author, dan Author URl dengan data sesuai keinginan Anda, lalu save ke dalam folder mywptheme dengan nama style.css. Setelah jadi, susunan kode akan seperti kode dalam file contoh-style.txt yang terdalam CD tutorial. b. Membuat header.php Buat text berikut ini pada halaman baru text file: <meta http-equiv="Content-Type" content="; charset=" /> <?php if (is_home()) { bloginfo('description'); } else { wp_title('',true); } ?> — <?php bloginfo('name'); ?> <meta name="generator" content="WordPress " />
title="
Kode tersedia dalam CD tutorial dengan nama inside-head.txt. Lalu save dengan nama header.php. c. Membuat index.php Dari file layout.html, cari code berikut ini:
judul entry di sini
>> tanggal 27 maret 2009, by Admin
Postingan kamu nanti ada di sini. Silakan diedit lagi yaa... Kalau mau jalanjalan ke blog saya, silakan langsung ke: www.profmustamar.com
<strong>ini strong/bold:
ini unordered list
ini unordered list juga
ini ordered list
ini ordered list
kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text.
diposting pakai kategori: tewasd, sdfasfasd, asd, as, asd asdf a,
Copy, lalu paste ke dalam sebuah file text baru. Tambahkan pada baris paling atas code untuk ‘memanggil’ header template file. Berikut ini codenya:
Lalu pada baris paling bawah, tambahkan kode berikut ini untuk ‘memanggil’ sidebar dan footer template. Berikut ini codenya:
Simpan file dengan nama index.php. d. Membuat sidebar.php Dari file layout.html, cari kode berikut:
Judul Widget
listnya item
listnya item
listnya item
listnya item
Copy-paste code tersebut, ke dalam sebuah file text baru, lalu simpan dengan nama sidebar.php. e. Membuat footer.php Masih dari file layout.html, cari kode berikut:
Copy-paste ke dalam file text baru, lalu simpan dengan nama footer.php. Sampai pada tahap ini, Anda sudah dapat melihat layout ‘bayangan’ theme Wordpress yang sedang kita buat. Untuk melihatnya, akses blog Wordpress Anda melalui browser: http://localhost/wordpress. f. Bekerja dengan The Loop The Loop adalah kode utama yang fungsinya ‘memanggil’ entry demi entry post blog. Untuk itu, The Loop paling minimal harus dibuat/ditulis di dalam file template index.php. Untuk mulai bekerja dengan The Loop, buka file index.php. Pembuka dan penutup The Loop
Setelah kode Masukkan kode pembuka The Loop berikut ini:
Lalu, masukkan kode berikut ini sebagai penutup The Loop:
tepat sebelum kode:
Sampai pada tahap ini, The Loop sudah selesai dibuat. Selanjutnya adalah membuat kode untuk memanggil item-item entry, seperti judul, entry post, tanggal post, author, dll. g. Bekerja dengan The Content The Content adalah kumpulan kode-kode yang bertugas ‘memanggil’ item-item entry. Kode-kode dalam The Content fungsinya menampilkan item seperti, judul post, entry, author, tanggal, kategori, tag, dan lain-lain. The Content berada di dalam The Loop, dan harus berada (minimal) di dalam template file index.php. Untuk mulai bekerja dengan menggunakan teks editor.
The
Content,
buka
file index.php
Menampilkan Post Title Kode berikutnya adalah kode untuk ‘memanggil’ judul post. " rel="bookmark" title="">
Masukkan kode di atas itu, menggantikan tulisan ‘judul entry di sini’, setelah kode
Menampilkan Tanggal dan Author Selanjutnya adalah kode untuk ‘memanggil’ tanggal dan penulis (author) post. Kode tersebut adalah:
Menampilkan Entry Post Berikutnya, memasukkan kode untuk entry post. Masukkan kode berikut ini:
Setelah tag , lalu hapus seluruh kode berikut:
Postingan kamu nanti ada di sini. Silakan diedit lagi yaa... Kalau mau jalan-jalan ke blog saya, silakan langsung ke: www.profmustamar.com
<strong>ini strong/bold:
ini unordered list
ini unordered list juga
ini ordered list
ini ordered list
kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text.
Menampilkan Kategori Post Memasukkan kategori post, dapat menggunakan kode berikut: <strong>Category:
Masukkan kode di atas, menggantikan text di antara tag:
dan tag
Sehingga kode akan menjadi seperti ini:
<strong>Category:
Sampai pada tahap ini, entry post blog sudah dapat dilihat, namun belum dapat menampilkan komentar yang masuk. Menampilkan Jumlah Komentar Masuk Dapat menggunakan kode berikut ini:
Kode tersebut harus disisipkan di dalam The Loop. Misalnya, di sekitar kode category. h. Membuat dan menampilkan Comments Template Comments Template berisi kode untuk form komentar dan kode untuk menampilkan daftar komentar yang sudah masuk ke dalam post. Berikut ini kodenya: post_password)) { // if there's a password if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie ?>
Buatlah kode di atas sebagai sebuah file baru dengan nama comments.php. Untuk mempermudah, kode tersebut tersedia di dalam CD tutorial, dengan nama comments.txt. Untuk menampilkan template ini ke dalam layout blog, kode yang digunakan adalah:
Kode itu harus dimasukkan ke dalam The Loop. Caranya, buka file index.php dengan text editor. Masukkan kode tersebut di antara tag: dan
Sehingga kode menjadi: comments_template(); ?>
Sampai di tahap ini, template Comments sudah terlihat di entry post blog.
i. Membuat Navigasi Navigasi ini berguna untuk membuat link ke entry post sebelum dan setelah post yang ditampilkan.
Untuk menampilkan navigasi ini, harus dibuatkan sebuah file template baru dengan nama navigation.php. File template navigation.php berisi kode:
<span class="next">
<span class="next">
Entries
→')
Kode di atas terdapat di dalam CD tutorial, dengan nama navigation.txt. Dan untuk menampilkannya ke dalam halaman entry post, kode yang digunakan untuk ‘memanggilnya’ adalah:
Masukkan kode tersebut ke dalam The Loop. Kode dapat dimasukkan setelah kode 4. Membuat Widgetized Sidebar (Widget Ready) Sidebar biasanya adalah sebuah template file dengan nama sidebar.php. Struktur kode Wordpress dalam sidebar secara default dan standar adalah:
Dengan struktur seperti ini, akan memudahkan untuk pembuatan style (CSS), juga agar kompatibel dengan widget plugin, karena susunan seperti ini yang digunakan untuk membangun sebuah widgetized plugin. Sidebar sendiri terdiri dari 2 jenis, yaitu • Sidebar statis, dan • Widget. Sidebar Statis, adalah bagian sidebar yang tidak dapat diubah melalui backend, sementara, Widget, adalah bagian sidebar yang dapat diubah-ubah posisinya, ditambah, atau pun dihilangkan dari sidebar melalui backend Wordpress. Untuk mulai membuat template sidebar, buka file template sidebar.php. Yang pertama akan kita buat adalah Sidebar Statis Pada Judul Sidebar, ganti dengan Latest Blog Entries, lalu setelah
Sampai pada tahap ini, sidebar sudah dapat berfungsi normal, namun belum widget ready. Untuk membuatnya widget ready, masukkan kode berikut setelah tag
, sebelum tag
:
Lalu sebelum end tag , sisipkan kode berikut:
Sehingga secara keseluruhan, kode akan seperti berikut ini:
Latest Blog Entries
href="
the_permalink()
? rel="nofollow">">
the_title()
?>
Simpan perubahan (save) dengan nama sidebar.php. File Template Sidebar sudah selesai dibuat. Namun widget belum dapat berfungsi. Yang diperlukan berikutnya adalah file functions.php yang berguna untuk mendaftarkan sidebar ke sistem Wordpress. Caranya: buat sebuah file text baru, lalu masukkan kode berikut:
↓
Copyright © 2009 http://www.profmustamar.com
- comment_author_email == get_the_author_email()) { ?> class="author"> <span class="comment_num">" title="Permalink to this comment"># <strong> on at
- comment_approved == '0') : ?>
comment_status) { ?><strong>Your comment is awaiting moderation.
There are no comments yet...Kick things off by filling out the form below.
Like gas stations in rural Texas after 10 pm, comments are closed.
Copyright © 2009 http://www.profmustamar.com
You must /wp-login.php?redirect_to=">log in to post a comment.
Leave a Comment