Categories
Pengembangan Trik WordPress

Membuat Custom Header

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:

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

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

Anda perhatikan kode 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!

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

88 replies on “Membuat Custom Header”

Pertanyaannya membingungkan nih. Masukin gambar pada script? Lha script itu kan text doang. Mungkin maksudnya gini ya:

Script untuk memasukkan gambar gimana?

Kalau ini gampang, scriptnya seperti ini:

<img src=”http://urlgambar” alt=”Alternatif text”/>

By Post Author

Upload gambar bisa menggunakan fasilitas upload di editor. Atau anda bisa pakai File Manager CPanel, atau bisa juga pakai FTP Client Software

By Post Author

mas aku sudah coba langkah di atas. langkah pertama (functions.php) ok sudah jadi namun pada langkah kedua (index.php) aku ngak temukan tuh cara memasukan

#header {
background : url();
}
.blogtitle a, .description {
color:
}

katanya kan sebelum tag
aku sudah cari tuh tag ngak ketemu. bahkan sudah ku coba menekan ctrl + F hasilnya nihil. trus naruhnya di mana nih ?

berikut index php aku (tolong di bantu ya mas di taruh sebelah mana script php header tersebut ?


PostDateIcon
PostAuthorIcon
: 
ID )) : ?>
PostEditIcon
PostCategoryIcon
PostTagIcon
if(function_exists('get_search_form')) get_search_form();

Itu beneran gitu kodenya? Kok ancur banget 😀 yang ini maksudnya apa?

ID )) : ?>

Dan sebelum kode ini harusnya ada pembuka tag phpnya

if(function_exists('get_search_form')) get_search_form();

Dan terakhir, sepertinya anda coba mengedit themes lain deh, bukan themes yang diajarin disini

By Post Author

maaf mas. ketika aku copikan seluruh perintah yang tertulis di index php dan ku tuliskan kembali di sini hasilnya jadi kacau balau.
aku disini sama sekali tidak mengerti tentang bahasa php. hanya mencoba trik dari internet dan ketemu trik di sini.
katanya kan sebelum tag “” namun tulisan tersebut rupanya tidak ku temukan di index.php dari themes yg aku gunakan. aku menggunakan themes Soccer Professional 1.0

tolongin dong gan, mau nambah gambar n logo aja di header gak bisa2 nih(http://panoramabalitour.com/)..minta tolong kasih tau caranya mulai dari pertama ampe selesai cara masukin gambar n logonya, nanti kalo kee bali call aku tak diskon deh, jawabannya sangat di perlukan n makasih banyak bantuannya.

seep mastah … mungkin sedikit koreksi untuk potongan script yg kedua

#header {
background : url();
}
.blogtitle a, .description {
color:
}

tag untuk ada pada file header.php , jadi tambahkan potongan script itu pada file header.php … moga aq nda salah, tapi sudah aku coba berhasil kok 🙂

Kalau file Function.php nya ada dimana ya, saya udah nyari-nyari di appearance=>editor ga ada, di cpanel=>file manager juga ga ada?????????

aku masih pemula.mohon bantuannya kang..
yang ngetik itunya tu dimana?
di css?berarti nanti bayar?

tutorial di atas telah saya ikuti.. sebelomnya themes yang saya pakek tidak ada header/costum headernya. setelah menambah kode yang disediakan diatas. tombol header sudah ada.dan bisa ganti ganti header sesuai selera.
dan pemasalahan saya..header yang sudah dibuat tidak muncul di halaman blog saya.
kira2 kesalahan terletak dimana yaah?coba deh lihat di http://thoserba.16mb.com
tampilannya masi default.gambar headernya tidak terlihat sama sekali.padahal di dashboard gambarnya ada.

oya saya menggunakan themes “padangan” yang saya download di situs jauhari.
saya bingung ne cari2 taq di “index.php.” memang tidak ada tu..yang ada cuma di “header.php.” saya coba pasang kode yang terhir di atas di atas kode di “header.php” tapi tetap gak muncul gambarnya di halaman blog saya.
apa saya coba pasang di “Styles” aja?

Mau tanya mas, di mana letak file header.php?
Saya mau ganti tulisan “Hey there! Thanks for dropping by rantinghijau! Take a look around and grab the RSS feed to stay updated. See you around!”.
Saya menggunakan tema Motion.
Terima kasih.

boss,,, pas saya masukin kode custom header ke functions.php,,itu berhasil..
TAPI pada saat saya mengganti header lewat appearance > header> chose file> upload> save change. terus kok headernya tidak mau ganti juga boss,, tetep warnanya abu-abu,,,

bagaimana ini kisahnya boss,,,???
kasih pencerahan dong..!!!
siapapun itu,,,,yang baik hati,,hehehe 🙂

background sudah diganti, nah kalo titel & descriptionnya mau diganti image, terus buat admin menu untuk ganti title & description text dgn title berupa image, caranya gimana bos.. terima kasih bila ada yang mbantu. 😀 (.Y.)

makasih gan infonya.
salam kenal dan salam silaturahim.
distributor foredi gel, gasa, tisu majakani, oris breast cream melayani penjualan partai maupun eceran seluruh indonesia.
terima kasih dan semoga sukses selalu

Pd style.php koding .blogtitle a mestinya “a” dihapus dan pada color kekurangan ” ; ” , untuk efek blogtitle…. klo custom background yg tdk mau berubah..kita tunggu admin sambil nyari..

Mau tanya gan, apakah perlu merubah-rubah header pada editor header untu menjadikan website tersebut seo friendly atau memaksimalkan Seo nya ?Saya tunggun pencerahannya om .. Thanks

Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

I just want to tell you that I’m newbie to blogging and site-building and really liked you’re web site. Almost certainly I’m going to bookmark your website . You definitely come with excellent stories. With thanks for revealing your blog.

I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an shakiness over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this hike.

Good era. Very cool site!! Guy .. Admirable .. Magnificent .. I will bookmark your blog and acquire the feeds additionally…I’m joyful to locate a lot of useful info right at this juncture in the article. Be grateful you for sharing..

After I initially commented I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on each time a comment is added I get four emails with the same comment. Perhaps there is a way you are able to remove me from that service? Kudos!

I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the internet will be much more useful than ever before.

I blog frequently and I seriously thank you for your information. The article has really peaked my interest. I’m going to take a note of your site and keep checking for new information about once per week. I opted in for your Feed as well.

Hi, i think that i saw you visited my weblog thus i came to “return the favor”.I’m attempting to find things to improve my website!I suppose its ok to use some of your ideas!!

Comments are closed.