Membuat Custom Header

Membuat Custom Header

sumber www.wordpress.or.id/membuat-custom-header.html 

Mari kita melangkah pada trik yang lebih canggih lagi. Kali ini kita akan menambah fasilitas untuk mengganti gambar pada header. Dengan fasilitas ini, pengguna theme kita bisa menentukan sendiri mau pakai gambar apa. Keren kan?
Kita juga bisa menentukan lebar dan tinggi bagian headernya sehingga sesuai dengan themes. Hebatnya lagi, ternyata trik agar themes kita punya fasilitas custom header sangat mudah lho.. hehehe… Bagaimana sih caranya? Cekidot gan!
Ada 2 file yang kita otak-atik disini yaitu file functions.php dan index.php. Pada functions.php kita tambahkan kode ini di bagian bawah:

1. define( 'HEADER_IMAGE_WIDTH', 900 );  
2. define( 'HEADER_IMAGE_HEIGHT',120 );  
3. define( 'HEADER_TEXTCOLOR', '000000' );  
4.   
5. add_custom_image_header( '', 'themegue_header_style' );  
6.   
7. function themegue_header_style() {  
8. echo ' 
9. <style type="text/css"> 
10. #headimg { 
11.   height:120px; 
12.   background:#cccccc; 
13. } 
14. #name {  
15.   font-family: Georgia, "Bitstream Charter", serif; 
16.   font-size:30px; 
17. } 
18. h1 a { 
19.   text-decoration:none; 
20.   } 
21. #desc {  
22.   font-family: Georgia, "Bitstream Charter", serif; 
23.   font-size:14px; 
24. } 
25.  
26. </style>';  
27. } 

Ada 3 bagian dalam kode diatas. Pertama adalah kode-kode define yang berisi nilai-nilai yang menjadi default header blog nanti.
define( 'HEADER_IMAGE_WIDTH', 900 ); : menentukan ukuran lebar header
define( 'HEADER_IMAGE_HEIGHT',120 ); : menentukan ukuran tinggi header
define( 'HEADER_TEXTCOLOR', '000000' ); : menentukan warna teks di header
Kemudian diikuti oleh kode untuk deklarasi bahwa theme kita menyediakan fasilitas ganti header.
add_custom_image_header( '', 'themegue_header_style' );
Dan terakhir adalah kode yang kita gunakan untuk memasang style di halaman admin nanti saat user mengedit gambar headernya.
Setelah kode-kode tersebut masuk di functions.php kita tentukan letak headernya di index.php (ingat, WP hanya robot yang nggak tahu apa-apa kalau ndak kita kasih tahu)
Karena design theme kita gambarnya adalah latar belakang maka kita letakkan style sebelum tag </head>

1.  <style type="text/css">  
2.   #header {  
3.     background : url(<?php header_image(); ?>);   
4.   }  
5.   .blogtitle a, .description {  
6.     color: <?php header_textcolor(); ?>  
7.   }  
8.  </style>  

Anda perhatikan kode <?php header_image(); ?> adalah kode untuk memanggil gambar header yang dipasang oleh user.
Sekarang silahkan deh coba masuk ke wp-admin lalu klik menu Appearance – Header Selamat mencoba!