membuat tema di blog wordpress.com

Theme WordPress – Bag 1

Sudah lama ingin membuat tutorial ini, selalu bentrok dengan malas dan keterbatasan inspirasi :) , namun sekarang lah saatnya, kita mulai dari yang paling dasar, semangat!!.

Asumsi awal, kita telah mempunyai 1 (satu) halaman template (.html) yang siap dikonversi menjadi theme wordpress. Nah, sebelum ke teknis bagaimana membuat theme tersebut sebaiknya kita bahas terlebih dahulu tentang struktur direktori dari theme wordpress itu sendiri.

WordPress memiliki struktur direktori theme yang cukup mudah dimengerti, wordpress menyimpan semua file-file theme kedalam satu direktori yang ditempatkan di bagian wp-content -> themes. Jadi jika kita akan membuat satu theme buat satu direktori (contoh : 2133), kemudian simpan di direktori themes.

struktur-theme-wp

Sedangkan di dalam direktori theme itu sendiri setidaknya memiliki file-file berikut ini :

struk-wp

  1. style.css
    Ini untuk menyimpan style untuk theme kita. Tetapi ada hal yang penting disini, nama file harus tetap style karena engine wordpress hanya membaca nama file tersebut, kemudian di dalam file ini harus disimpan juga informasi tentang theme (akan dibahas selanjutnya).
  2. screenshot.png
    Adalah file gambar yang akan dibaca oleh engine WP.
  3. index.php
    File yang pertama kali akan di-render, biasanya untuk halaman utama blog.
  4. functions.php
    File yang berisi fungsi-fungsi yang ada pada theme kita, seperti fungsi untuk pengaturan widget, panel dan sebagainya.
  5. header.php
    File ini menyimpan header theme kita. Yang saya maksud header disini adalah bagian yang sering digunakan kembali dibagian lain (index, single, page, dsb).
  6. sidebar.php
    File ini akan ditempatkan sebagai sidebar blog kita. Pengaturan agar terhubung dengan widget terletak di file functions.php, file ini pun adalah bagian yang sering digunakan kembali.
  7. footer.php
    File untuk footer blog.
  8. single.php
    Adalah file untuk halaman detail sebuah posting.
  9. page.php
    Adalah file untuk halaman detail sebuah page.
  10. comments.php
    File untuk menyimpan list komentar dan form komentar.

Untuk lebih lengkapnya (tentang struktur theme wp) bisa dibaca di wordpress codex, site architecture dan template hierarchy. Selanjutnya kita langsung lakukan langkah-langkah berikutnya :

Step 1
Buat folder theme yang akan kita buat, salin file html (dan kelengkapannya) ke folder tersebut. Kemudian buat 10 (sepuluh) file yang disebutkan diatas (file kosong pun tidak masalah).

Step 2
File css yang telah dibuat, sesuaikan dengan ketentuan WordPress –rename menjadi style.css. Kemudian di baris paling atas tambahkan komentar berupa informasi theme yang akan dibuat. Contoh :

1
2
3
4
5
6
7
8
/*
Theme Name: t-simple
Description: 2 Column, CSS, xHTML, JQuery.
Version: 0.1
Author: Asep Sufyan Tsauri
Author URI: http://www.tsauri28.myhaley.com/
*/
/* css-nya dilanjut disini */

Komentar ini akan dibaca oleh engine sebagai informasi utama theme.

Step 3

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s