Buat Theme WordPress: Blog Header

Panduan kali ini membutuhkan konsentrasi tinggi.. hehehe.. Makanya anda butuh fokus..fokus..dan fokus.. cieeh.. Bagi yang kesasar, ini adalah artikel ketujuh dari rangkaian artikel cara membuat theme WordPress dari awal sampai akhir. Anda bisa membaca-baca lagi artikel sebelumnya di bagian bawah tulisan ini:

Yang akan kita bahas nanti adalah bagian header blog. Saya punya gambaran headernya nanti bisa diganti-ganti kayak Twenty Ten gitu, tapi nanti ajalah kalau kita sudah membahas soal fungsi. Untuk saat ini kita bikin standart dulu. Namanya juga belajar. Tul nggak?

Kita akan pasang judul blog ukuran besar di bagian header. Kemudian kita tambahkan juga description dengan font lebih kecil di bawahnya dan nanti dekat dengan batas bawah header kita pasang menu navigasi. Untuk sementara menu navigasinya pakai list page saja. Nanti kita akan merubahnya menjadi custom menu. Keren kan?

Yuk, langsung buka file index.php lalu fokus pada zona header yaitu baris antara tag <div id="header"> hingga </div>. Yuk kita lihat lagi kodenya:

     <div id="header">
        Lokasi header ada disini
     </div>

Sekarang kita ganti tulisan Lokasi header ada disini dengan nama blog dan sekaligus diskripsi di bawahnya lalu kita pasang juga list page. Kode lengkapnya seperti ini:

 <div id="header">
  <h1 class="blogtitle"><?php bloginfo('name');?></h1>
  <p class="description"><?php bloginfo('description');?></p>
  <div id="menu">
    <ul>
    <li><a href="<?php bloginfo('url');?>">Home</a></li>
    <?php wp_list_pages('title_li='); ?>
    </ul>
  </div>
 </div>

Saya jelaskan satu per satu ya. Kita mulai dari baris <h1 class="blogtitle"><?php bloginfo('name');?></h1>. Ini akan menampilkan judul blog di dalam header kita. Disini kita memakai class agar bisa dengan mudah kita atur nanti. Dan ketika ada di single page, h1 ini akan kita rubah menjadi div sehingga bisa SEO friendly. Tapi itu nanti dulu ya hehehe..

Baris berikutnya adalah untuk menampilkan diskripsi. Kita beri class juga agar CSS tahu bahwa cuma bagian ini saja yang dirubah font maupun tata letaknya.

Berikutnya adalah zona menu. Perintah wp_list_page kita pakai untuk menampilkan list page kita. Sebelum menampilkan page, kita tambahkan satu menu lagi yaitu Home. Jika anda ingin menambahkan menu lagi anda tinggal ikuti saja alur seperti pembuatan link home diatas.

Sekarang coba buka blog anda. Hehehe.. dijamin ancur.. hahahaha… Tenang bro, jangan panik dulu apalagi sampai banting laptop Mari kita buka style.css dan kita atur-atur deh tampilan header blog kita.

.blogtitle {
  font-size:30px;
  padding:30px 0 0 30px;
  margin:0;
  }
.description {
  font-size:14px;
  padding-left: 30px;
  margin:0;
  }
#menu {
  margin-top:10px;
  padding:0;
  background:#000;
  height:30px;
  }
#menu ul {
  margin: 0;
  padding: 5px 0 0 15px;
  list-style: none;
  display: block;
  }
#menu li , #menu li  a{
  float: left;
  position: relative;
  margin-right:10px;
  color:#ffffff;
  text-decoration: none;
}

Ada beberapa perintah CSS baru yang kita masukkan: font-size (untuk mengatur ukuran font), list-style (untuk mengatur style list page), display (untuk mengatur bagaimana list ditampilkan. Dalam contoh ini kita buat mendatar) dan text-decoration (untuk mengatur dekorasi link. Dalam contoh ini kita pilih none karena kita gak mau ada garis bawah di link-nya).

Agar mudah mengaturnya, kita tempatkan kode tersebut tepat diatas kode #maincontent biar urut gitu ini setingan untuk header.

Oh iya, ada yang terlupa kemarin. Kita belum mengatur font-nya kan? Nah, silahkan tambahin juga deh di bagian atas deretan setingan CSS kode ini:

body {
  font-family: Georgia, "Bitstream Charter", serif;
  }

Nah, sekarang harusnya blog anda sudah muncul seperti ini:

Mudah-mudahan masih bisa diikuti ya? Insya Allah besok kita beranjak ke bagian konten-nya. Doakan aja moga sehat dan punya banyak kesempatan

Diakses dg kata kunci:

header (419), buat tema (145), template wordpress 3 1 (29), buat theme (17), tema blog (12), membuat tema blog wordpress (11), buat header wordpress (6), header wordpress (5), mengatur font pada wordpress (5), buat wordpress blog (4), header wordpress tidak bisa diganti (4), memasukkan headter wordpress dg php (4), mengatur font di wordpress (4), letak header di blog (3), pasang header di wordpress (3), ubah huruf heading di wordpress (3), header blog wordpress (3), mengatur huruf wordpress (2), cara merubah nama theme wordpress (2), cara memasang logo di header wordpress (2), cara ubah header thema wordpress (2), tema wordpress header (2), cara membuat judul wordpress dengan logo (2), merubah text header wordpress (2), wordpress theme header (2), GIMANA CARANYA SUPAYA HEADER DI WORDPRESS BISA D ATUR? (2), cara pasang header pada wordpres (2), menu font size di word kok nggak muncul (2), mengatur teks header pada wp (2), merubah jenis hurup pada header twenty elevan (2), download tema wordpress yang bisa di ganti header dan seo (2), margin logo blog tidak mau pindah (2), membuat theme wordpress menu (2), membuat theme wordpress seo friendly (2), cara ganti font pada JUDUL wordpress (2), membuat kode html untuk header blog wp (2), membuat header buat wordpress (2), thema wordpress yang ada headernya (2), wordpress lokasi file header2 (2), mengganti judul blog dengan logo wordpress (1), membuat tema wordpress agar support menu (1), mengatur ukuran font judul blog wordpress (1), membuat tema blog wordpress 3 kolom (1), mengedit header blog wordpress (1), mengedit header pages wordpress (1), mengcustom blog header wordpres org (1), mengganti text judul (1), mengganti letak title di blog wordpress (1), mengganti besar kecil font di wordpress (1), mengganti font judul pada wordpress (1)

Daftar Isi Membuat Theme WP

1. Cara Membuat Theme WordPress
2. Membangun Theme WP: Style.css
3. Membangun WP Theme: index.php
4. Bikin Theme WP: Designing
5. Bikin Tema WP: Layout
6. Membuat Theme: Heading
7. Buat Theme WordPress: Blog Header
8. Buat Theme WP: Konten
9. Mengatur Konten dalam Themes WordPress
10. Styling Konten WordPress
11. Membuat Sidebar Widget
12. Styling Sidebar
13. Membuat Footer
14. Membuat Custom Background
15. Membuat Drop Down Menu
16. Search Form Gaya dengan Image
17. Memasang Featured Image
18. Memperbaiki tampilan halaman depan
19. Membuat Featured Slide Show
20. Bermain-main dengan Looping WordPress
21. Memecah File Themes
22. Memecah Sidebar
23. Membuat File Single.php, archive.php, dll