Membuat wordpress themes sendiri : Header

Membuat wordpress Themes : Header

Ditulis Pada : July 13th, 2008 , 2:04 pm | Kategori Tutorial Membuat Theme Wordpress | Author: Nias zalukhu

Bagian ketiga dari cara Membuat Themes Wordpress Sendiri. Jika sebelumnya sudah dibahas pengenalan struktur files wordpress themes dan apa-apa saja yang dipersiapkan dalam tutorial membuat wordpress themes. Sebelum benar-benar membuat wordpress themes sendiri, alangkah lebih baik kita mencoba mengenal bagian-bagian dari sebuah blog wordpress. Oh yah tidak menutup kemungkinan para blogger yang menggunakan blogspot juga bisa mengadaptasi tutorial ini. Kali ini mari mengenal bagian HEADER dari sebuah blog, untuk itu saya mencoba berbagi bagaimana cara mengganti header menjadi seperti yang kita inginkan. Oh yah sebelum mulai, silahkan melihat wordpress themes buatan saya terbaru di sini.

Untuk lebih memudahkan maka saya menyarankan agar seluruh praktek tutorial membuat wordpress themes ini dilakukan secara offline lewat Wordpress Offline. Bagi yang belum jelas bagaimana membuat wordpress offline di PC masih belum terlambat untuk mempelajari tutorialnya di sini dan di sini. Namun bagi yang terkoneksi internet dan langsung memanagemen di file manager control panel hosting ya ga usah pake wordpress offline hehehehe.

Kita akan memulai membuat wordpressthemes buatan kita sendiri tentunya kita mengacu pada theme wordpress default yang merupakan acuan semua desainer themes. Ptutorial yang saya bagikan ini, kita akan membuat sebuah wordpress themes yang bernuansa merah dengan acuan wordpress themes default yang bernuansa biru. Saya akan mencoba berbagi penjelasan secara terperinci agar mudah dipahami, jadi mungkin saja tahap-tahap yang saya bagikan bukanlah tahap-tahap sebenarnya dalam membuat wordpress themes, tahap-tahap yang saya bagikan ini merupakan tahap-tahap bagi pemula seperti saya hihihihi. Ayo kita mulai….. walah kayak mau perang ajah…..

Pastikan blog wordpress offline sudah berjalan lalu login dan rubah themes ke themes default. Bukalah blog wordpress offline dengan mengetikkan http://localhost/wordpress pada browser. Alamat ini akan berbeda jika folder wordpress pada PC telah diganti namanya. Sehingga akan muncul blog offline dengan themes default seperti di bawah ini (silahkan klik gambar untuk memperbesar yach ).

Pada PC anda bukalah langsung windows explorer tempat dimana folder wordpress themes default berada. Kira-kira alamatnya : C:\apachefriends\xampp\htdocs\wordpress\wp-content\themes\default tapi alamat ini berbeda jika folder wordpressnya telah di ganti.

Selain windows explorer kita juga perlu membuka program Dreamweaver untuk mengedit dan Adobe Photoshop untuk mengedit gambar dan mencari tahu kode sebuah warna.

Kita akan mengubah themes default yang berwarna biru ini menjadi sebuah themes yang berbeda dengan nuansa Merah. Oke kita mulai memodifikasi header blog kita. Dengan menggunakan Dreamweaver (atau program editor lain yang terlah saya bahas disini ) bukalah file style.css dan file header.php.

Pada header php masuk ke bagian <body> </body> di sini kita menemukan perintah seperti berikut:

<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>

Dari script di atas terdapat tiga buah label perintah yang dibaca dari file Style.css yang berada di dalam tanda kutip, yakni header, headerimage dan description. Mari kita periksa satu persatu pada file style.css. Sekarang kita berada pada file Style.css carilah bagian yang menjabarkan ketiga label perintah tersebut yang biasanya diawali dengan tanda # (kress) atau . (titik) . Di sini kita temukan perintah #header yang bunyinya seperti berikut:

#header {
background: #73a0c5 url(’images/kubrickheader.jpg’) no-repeat bottom center;
}

Kira-kira maksud perintah di atas adalah berwarna latar belakang #73a0c5 dengan background gambar yang terdapat di folder images dengan nama kubrikheader.jpg tanpa diulang dan terletak di bagian bawah tengah pada bagian header. Pusing ga sih ? hehehhehehe. Oke kita coba cek gambar kubrikheader.jpg pada folder images. Gambarnya seperti di bawah ini:

File tersebut memiliki lebar 760px tinggi 200px, jadi kita akan mengganti gambar ini dengan sebuah gambar yang juga berdimensi sama. Jadi cari gambar dengan dimensi yang sama, kali ini saya akan memakai sebuah gambar bernama zalukhu1.jpg (narsis banget ga seh.. hehehe) seperti di bawah ini :

Copykan file gambar tersebut pada folder images dalam themes wordpress default. Lalu kita kembali pada dreamweaver untuk mengedit file css. Rubahlah bagian #header menjadi seperti berikut :

#header {
background: #73a0c5 url(’images/zalukhu1.jpg’) no-repeat bottom center;
}

Save file style css dan coba refresh blog wordpress offline anda. Hasilnya akan seperti di bawah ini:

Suudah berubah walau belum sempurna. Kita periksa kembali style.css pada bagian header, di situ terdapat kode warna yakni #73a0c5, kita coba periksa warna apakah itu melalui Adobe Photoshop. Kita menuju Photoshop klik pada bagian warna seperti di bawah ini (yang saya berikan tanda panah biru):

membuat wordpress themes

Sehingga akan terbuka kotak dialog warna :

Pada bagian yang saya berikan tanda panah biru masukkan 6 kode warna yang tadi, ingat tanpa tanda #. Kita masukkan angka 73a0c5 maka bagian yang saya beri tanda panah merah akan berganti posisi serta bagian yang saya beri tanda panah hijau akan menunjukkan sebuah warna yang memiliki unsur biru. Karena kita akan mengubah struktur themes ini menjadi bernuansa merah maka letakkan kursor pada area berwarna merah bagian atas bar yang saya beri tanda panah kuning. Kita akan mendapatkan kode warna baru pada kotak yang saya beri tanda panah biru yakni c5737f. Maka ganti kembali #header pada style.css sehingga perintahnya seperti berikut:

#header {
background: #c5737f url(’images/zalukhu1.jpg’) no-repeat bottom center;
}

Save style.css dan refresh kembali blog wordpress offline anda. Ternyata tak ada perubahan karena warna tersebut merupakan warna background sebelum gambar zalukhu1.jpg terbuka. Tapi kok warna abu-abu di kedua sisi terasa mengganggu yach… kita ingin menggantinya dengan warna yang serasi misalkan warna dengan kode c5737f yang kita dapatkan tadi. Karena itu merupakan background utama, maka biasanya pengaturannya terdapat pada perintah body. Kita periksa perintah #body pada file style.css.

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
background: #d5d6d7 url(’images/kubrickbgcolor.jpg’);
color: #333;
text-align: center;
}

Di situ terdapat kalimat : background: #d5d6d7 url(’images/kubrickbgcolor.jpg’) yang berarti background theme tersebut berwarna #d5d6d7 (abu-abu) dan images kubrickbgcolor.jpg. Kita ganti kode warna tersebut dengan #c5737f yang kita rencanakan. Dan biar ga terlalu memberatkan maka background berupa image kita hapus saja. Sehingga perintah untuk #body menjadi seperti berikut:

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
background: #c5737f;
color: #333;
text-align: center;
}

Simpan file style.css dan kemudian refresh kembali blog wordpress offline anda. Maka akan tampil seperti berikut :

Biar ga ngeberatin maka hapus file kubrickbgcolor.jpg pada folder images di folder wordpress theme default karena dah ga guna lagi. Sekarang tampilannya sudah beda, tapi masih belum selesai lho… Pada bagian header, kalimat judul Blog dan deskripsi aga mengganggu gimana mengaturnya ?…. Sabar dunk… Panda juga manusia.. walaaaahhhh maksa banget hehehehe. Selanjutnya kita masih akan membahas modifikasi bagian header jadi jangan lupa terus ikuti yach…..

Tulisan ini saya tulis berdasarkan apa yang telah saya lakukan dan bukan berdasarkan ebook atau buku apapun yang saat ini banyak dijual di toko maupun di internet. Karena pada dasarnya saya ingin berbagi apa yang saya pelajari secara gratis kepada sahabat-sahabat yang benar-benar mau belajar dan berbagi bersama-sama dengan saya, maka saya mohon artikel ini tidak di komersilkan. Jika ingin saling berbagi maka silahkan melink dengan artikel ini.. hehehe Jika sahabat-sahabat ada yang mau keluarin uang untuk membeli ebook atau buku tentang membuat atau memodifikasi themes ya silahkan saja..

Saya akan sangat berterima kasih jika teman-teman memasang link di blogroll atau dimana pun di blog masing-masing dengan deskripsi:

Text : Tutorial membuat Wordpress Themes

URL : http://www.zalukhu.com/tips-dan-trik/membuat-theme-wordpress-sendiri-bagian-1

Title : Tutorial membuat Wordpress Themes

SEO services

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.