NIAS ZALUKHU

Tutorial Membuat wordpress themes ini merupakan bagian keempat dari Tutorial Membuat dan memodifikasi Wordpress themes, sebelumnya membahas soal Pengenalan struktur Wordpress Themes, Tools-tools yang diperlukan serta Memodifikasi bagian Header pada wordpress themes. Pada kesempatan ini, saya masih melanjutkan pengaturan header pada wordpress themes. Sebelum lanjut saya juga ingin menanggapi pernyataan Sobat kita Fanari yang mengatakan bahwa alangkah bagusnya jika membuat dan memodifikasi wordpress themes melalui wordpress offline. Di juga menambahkan bahwa tanda # (kress) pada title di file css bisa dipakai berulang-ulang sedangkan tanda . (titik) hanya buat sekali pakai. Tanda # pada file css biasanya dipakai untuk satu label yang dipakai berulang kali dalam beberapa file, misalkan jika kita ingin mengatur tampilan peletakan iklan banner yang kita pasang di beberapa bagian file, sedangkan jika pengaturan banner yang mengatur satu lokasi banner saja maka cukup menggunakan tanda . (titik) . Ke depan kita akan mengetahui lebih jauh perbedaannya. Saat ini saya ingin melanjutkan pembahasan pengaturan header lebih dahulu.

Jika pada bagian sebelumnya kita telah berhasil mengubah header seperti gambar di bawah ini:

Karena title blog dan desktipsinya berada di tengah-tengah sepertinya aga mengganggu. Mari kembali kita periksa file header.php. Kita lihat bagian body yang bertuliskan :

<div id=”header”> <div id=”headerimg”> <h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1> <div class=”description”><?php bloginfo(’description’); ?></div> </div> </div>

Di situ terdapat 3 buah label css yakni: header, headerimg dan description. Ruang lingkup kekuasaan ( hahaha bahasanya aneh ) dari perintah label tersebut berada dalam perintah <div> hingga </div> jadi sebelum kita menemukan perintah </div> maka label tersebut masih berlaku. Mari kita fokus terlebih dahulu pada nama blog. Pada perintah di atas, peletakkan title atau nama blog terdapat pada perintah:

<h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>

Tanda <h1> menyatakan format penulisan judul blog, mari kita cek pada style.css , kita dapatkan perintah berikut:

h1, h2, h3 { font-family: ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif; font-weight: bold; }

h1 { font-size: 4em; text-align: center; }

Karena kita hanya ingin merubah h1 saja maka kita rubah saja pada bagian h1. Kita rubah perintahnya menjadi seperti berikut:

h1 { font-size: 2em; <<<< ukuran huruf

text-align: left; <<<< peletakan judul blog, kita rapatkan ke kiri.

padding-left: 25px; <<<< jarak antara garis pinggir kiri biar ga terlalu rapat.

}

Save style css, lalu refresh blog, maka tampilannya akan menjadi seperti berikut :

Ternyata deskripsinya masih di tengah yach… Kita periksa style.css, kita masuk pada perintah #headerimg .description : disitu kita dapatkan perintah :

#headerimg .description { font-size: 1.2em; text-align: center; }

Kita akan mengatur peletakan kalimat deskripsi pada header, kita akan meletakkannya pada bagian kiri dengan huruf yang lebih besar. Rubahlah perintah di atas menjadi sebagai berikut:

#headerimg .description { font-size: 1.6em; <<<< kita perbesar hurufnya text-align: left; <<<< kita rubah menjadi rapat samping padding-left : 25px; <<<< biar ga terlalu rapat kita berikan jarak 25px dari samping kiri.

}

Save style.css, lalu kita refresh maka hasilnya akan seperti berikut :

Sepertinya Judul blog dan Deskripsi masih kurang ke atas yach, kita ingin merapatkannya ke atas biar ntar di ruang kosong itu bisa kita tempatkan banner atau daftar menu atau apalah. Kita periksa Style.Css, pada bagian label #header untuk <h1> tidak terdapat perintah padding-top padahal jelas-jelas pada hasil yang kita dapatkan jarak antara judul blog dari garis atas sangatlah jauh melebihi 50px, oh iya padding-top adalah perintah yang menunjukkan jarak dari garis atas. Setelah saya ulik-ulik ternyata struktur style.css pada themes default ini dipecah-pecah menjadi beberapa bagian. Walah bikin pusing banget namun asyik untuk dipelajari hehehe. Inilah bagian-bagian pada style.css themes default yang diawali dengan komentar (bukan perintah) /* begin */ dan diakhiri dengan komentar /* end */ :

• Typography & Colors : semua label perintah dalam bagian ini menyangkut tipografi dan warnanya.
• Structure : struktur dasar.
• Headers : pengaturan di bagian header.. <<<<< nah ini yang kita cari.
• Images : pengaturan gambar.
• Lists : pengaturan list.
• Form Elements : pengaturan elemen form seperti form komentar dan form pencarian.
• Comments : pengaturan tampilan komentar.
• Calender : pengaturan tampilan kalender . <<< ga penting banget.
• Various Tags & Classes : Pengaturan tag dan class.

Bagian-bagian di atas tidak mutlak terdapat dalam sebuah themes, bahkan menurut saya justru akan memusingkan karena dengan pembagian seperti di atas akan terdapat beberapa perintah dalam satu label diletakkan terpisah. Kita periksa bagian headers, ternyata disitu kita dapatkan perintah:

h1 { padding-top: 70px; <<<< ini dia yang menentukan jarak judul dari sisi atas. margin: 0; }

Nah ini dia yang kita cari, mari kita rubah padding topnya kita beri angka 10px saja, save style.css lalu refresh blog offlinennya, maka kita dapatkan hasilnya seperti berikut:

Nah lebih oke kan…. Jika kita ingin mengganti judul blognya dengan logo maka bisa kita lakukan dengan mengedit file header.php. Sebelumnya pastikan logo sudah dicopykan ke dalam folder images themes default walau sebenarnya bisa kita taruh dimana saja asalkan bisa diakses online. Dalam praktek ini saya akan mengganti judul dengan logo dengan nama file logo.gif. Maka pertama-tama di file header.php temukan perintah seperti di bawah ini:

<div id=”headerimg”> <h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a> </h1> <div class=”description”><?php bloginfo(’description’); ?></div> </div>

Ganti kalimat yang saya warnai biru di atas dengan kalimat perintah: <a href=”<?php echo get_settings(’home’); ?>”><img src=”<?php bloginfo(’template_url’); ?>/images/logo.gif” alt=”logo” /></a> Sehingga perintah lengkapnya menjadi seperti di bawah ini:

<div id=”headerimg”> <h1><a href=”<?php echo get_settings(’home’); ?>”><img src=”<?php bloginfo(’template_url’); ?>/images/logo.gif” alt=”logo” /></a></h1> <div class=”description”><?php bloginfo(’description’); ?></div> </div>

Nah save file header.php lalu refresh blog offlinenya kita akan mendapatkan tampilan header seperti berikut:

Nah selesai sudah kita memodifikasi header, untuk membuat header wordpress yang bukan modifikasi akan saya coba berbagi setelah modifikasi themes wordpress default ini selesai. Selanjutnya, saya akan berbagi memodifikasi bagian body yang menyangkut content dan sidebar. Namun jika masih ada yang kurang dipahami pada pembahasan header ini, silahkan berikan pertanyaan pada komentar yach… heheheh.

Artikel Terkait

• Permak Baju (Jadi Kelap-kelip Hihihi)