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:
- define( 'HEADER_IMAGE_WIDTH', 900 );
- define( 'HEADER_IMAGE_HEIGHT',120 );
- define( 'HEADER_TEXTCOLOR', '000000' );
- add_custom_image_header( '', 'themegue_header_style' );
- function themegue_header_style() {
- echo '
- <style type="text/css">
- #headimg {
- height:120px;
- background:#cccccc;
- }
- #name {
- font-family: Georgia, "Bitstream Charter", serif;
- font-size:30px;
- }
- h1 a {
- text-decoration:none;
- }
- #desc {
- font-family: Georgia, "Bitstream Charter", serif;
- font-size:14px;
- }
- </style>';
- }
define( 'HEADER_IMAGE_WIDTH', 900 );
: menentukan ukuran lebar headerdefine( 'HEADER_IMAGE_HEIGHT',120 );
: menentukan ukuran tinggi headerdefine( 'HEADER_TEXTCOLOR', '000000' );
: menentukan warna teks di headerKemudian 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>
- <style type="text/css">
- #header {
- background : url(<?php header_image(); ?>);
- }
- .blogtitle a, .description {
- color: <?php header_textcolor(); ?>
- }
- </style>
<?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
0 komentar:
Posting Komentar