Eksperimen Mengubah Tema Blog WordPress

Maunya membuat toko online memakai blog WordPress. Bagi yang tidak mau bersusah-payah banyak tersedia jalan pintas, tetapi bagi yang ingin berpetualang membangun toko online sendiri mungkin ini posting yang ditunggu. Kita memakai blog WordPress dari ‘wordpress.org’ sebagai toko.

Strukturnya yang sama dengan blog ‘wordpress.com’ memudahkan kita sehingga tak perlu belajar lagi. Blog disimpan sementara di server lokal (komputer kita). Untuk itu komputer perlu diubah jadi server dulu. Banyak yang sudah tahu caranya; kalau belum, tidak perlu berkecil hati, nanti dibahas pada posting selanjutnya.

Screenshot twentyelevenKalau WordPress sudah diinstal di komputer, tampil blog baru seperti di samping. Struktur blog adalah standar, memakai theme (tema) ‘Twenty Eleven’ (2011) yang sudah teruji.

Untuk toko, tampilan standar ini kurang menarik. Kita dandani tema agar tampak lebih cantik. Kita membuat perubahan minor seperti mengganti font dan sebagian tata letaknya.

Ini ‘kan kerjaan programmer! Betul, tetapi ini petualangan. Kita memang bukan programmer tetapi ‘kan ada internet dengan segudang ilmu pengetahuan membantu kita. Jadi, siapa takut?
 

Membuat ‘Child Theme’

Create child themeTema induk ‘Twenty Eleven’ jangan kita ganggu! Kita akan membuat tema baru sendiri melengkapi tema induk; tema disebut ‘tema anak’ atau child theme. Tema baru kita isi dengan program-program kecil yang berfungsi mengganti font dan mengubah tata letak tampilan blog.

Mulai dengan login, di ruang ‘Dashboard’ klik ‘Appearance’-‘Themes’, klik ‘Child Theme’ (untuk memperbesar klik gambar).

Child theme createDi kotak isian beri keterangan, misalnya: nama tema, ‘twentyelevenchild'; penjelasan (description) ‘tema twentyeleven dengan font dan tata letak baru’ atau semacamnya, nama pembuat tema, ‘rioseto’.

Klik ‘Create Child’.
 
theme is switchedSekarang klik ‘theme switched’ di baris teks yang tampil. Horee.. blog sekarang sudah berganti dengan tema baru kita!

Membuat ‘child theme’ selesai.
 

Mengisi ‘style.css’

Belum terlihat perbedaan pada tema ‘twentyelevenchild’, masih sama seperti ‘Twenty Eleven’. Sekarang buka direktori WordPress, klik ‘wp-content’-‘themes’. Ada folder ‘twentyelevenchild’, yang tercipta saat ‘Create Child’ tadi. Buka, lihat isinya, …kosong, hanya ada 3 berkas ‘rtl.css’, ‘style.css’, dan gambar tema.

stylesheet child themeBuka ‘style.css’ dengan editor teks Wordpad (jangan Notepad). Isinya hanya beberapa baris saja, sisanya kosong.

Baris terakhir ‘@import url(“../twentyeleven/style.css”);’ menunjukkan tema ‘Twenty Eleven’ adalah pola untuk tema baru kita. Di bawah baris akan kita isi program mini mengganti font dan tata letak baru.

Dari mana mengambil program? Karena bukan programmer ya cari di internet. Ini hasil ‘contekan’ untuk font.

Mengubah font — pilih dari koleksi font Google, ‘Google Web Fonts’. Kita pilih ‘Dancing Script’ untuk judul dan subjudul, ‘Droid Sans’ untuk teks. Klik ‘Early Access’ dan dapatkan kode ‘panggil’ font yang kemudian disesuaikan untuk diterapkan di blog,

@import url(‘http://fonts.googleapis.com/css?family=Dancing+Script’);
@import url(‘http://fonts.googleapis.com/css?family=Droid+Sans’);

Lanjutkan dengan pendefinisian penggunaan kedua font. Seperti ini,

stylesheet child theme fontbody, input, textarea, p {
color: #000000;
font-family: ‘Droid Sans’, sans-serif;
}

p {
font-size: 14px;
line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
font-family: ‘Dancing Script’, cursive;
}

Gampang ya. Kita sudah seperti seorang programmer tulen! Font Google dipakai karena font yang sama harus bisa ditampilkan di web, di mana saja. Beres. Simpan program ditulis lengkap dengan tanda kutipnya, “style.css”, [Enter].
 

Menguji tema baru

child theme screenshot2Kita uji, pada tema baru ‘twentyelevenchild’, klik ‘Customize’. Sabar… horee, font baru!

Sip. Pengisian ‘style.css’ babak pertama untuk tema baru selesai. Tema induk tidak terganggu. Kita lanjut mengubah tata letak (layout) blog di posting berikutnya.

Mengganti warna latar dan gambar, mudah, bisa dilaksanakan sekarang kalau mau. Setting deretan tombol pengatur ada di kolom kiri.

Selamat mencoba.
 
:D
 

Tagged with: , , , , , , , , ,
Ditulis dalam Tak Berkategori
3 comments on “Eksperimen Mengubah Tema Blog WordPress
  1. [...] posting Eksperimen Mengubah Tema Blog WordPress: tema baku WordPress Twenty Eleven, pengaturan tema ada di berkas stylesheet.css. Mengubah tema [...]

  2. Wah saya jadi pengen ngoprek thems wordpress saya nich

    • riosetoblog mengatakan:

      hehe… terbalik, jam terbang masih nol kalah jauh sama ‘Tips dan Peluang Bisnis’nya mas nih! :D (mau tinggalin jejak di sana, kok mogok ya tidak bisa ditulisi)

Silakan komentar, 'like' juga oke

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 224 pengikut lainnya.