Rss

About Me

My photo
SURAKARTA, JAWA TENGAH, Indonesia
Pernah bersekolah di SDN Begalon 2 Surakarta berlanjut ke SMP N 2 Grogol, Skh. Lalu ketika semester 3 pindah ke Banjarnegara, bersekolah si SMP N 2 Banjarnegara dikarenakan perintah orang tua. Dan saat semester ke 4 pindah lagi ke Solo dan bersekolah di SMP N 25 Surakarta. Sekitar tahun 2004/2005 lanjut ke SMK TP 2 Surakarta dan lulus pada tahun 2008. Mulai berkuliah di POLITEKNIK INDONUSA SURAKARTA pada tahun 2010. Minat saya hanya ingin bekerja dengan imajinasi saya, bukan dengan tenaga maupun berfikir hitung-hitungan yang ribet, hehe.. Saya ingin menjadi seorang desainer dan musisi.. :-D

Tuesday, May 8, 2012

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

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!






0 comments:

Post a Comment

Coment here