Header Kustom WordPress: Apa Itu dan Cara Membuatnya

Salah satu fungsionalitas paling fleksibel dan berguna yang pernah diperkenalkan WordPress adalah Header Kustom. Ini adalah fitur yang memungkinkan Anda untuk menyesuaikan bagian atas situs web WordPress Anda, memberi Anda kemampuan untuk mempersonalisasikannya sesuai keinginan Anda dengan menggunakan templat tajuk khusus. Dan, seperti kebanyakan fungsionalitas WordPress, ada beberapa cara untuk menyesuaikan header, dengan menggunakan fitur tema, kode kustom, atau plugin WordPress.

Pada artikel ini, kami akan memandu Anda melalui rute ini dan memberikan beberapa contoh. Tapi pertama-tama, mari kita bicara tentang header WordPress dan mengapa Anda repot-repot menyesuaikannya.

Mengapa Menggunakan Header WordPress Kustom?

Header adalah salah satu aspek grafis paling penting dari sebuah situs web karena itu adalah hal pertama yang akan dilihat pengunjung Anda. Karena itu, ada baiknya memeriksa apakah mengubah tajuk situs web Anda dapat meningkatkan pengalaman pengguna. Misalnya, Anda dapat meningkatkan estetika dan desain header Anda sehingga pesan bisnis Anda lebih efektif dikomunikasikan kepada pengunjung.

Host situs web Anda dengan Pressidium

GARANSI UANG KEMBALI 60 HARI

LIHAT RENCANA KAMI

Selain itu, header yang terstruktur dengan baik dapat membantu pengunjung menjelajahi konten Anda dengan lebih mudah dan dapat digunakan untuk mendorong mereka dengan lembut ke produk atau layanan yang Anda ingin mereka fokuskan.

Apa yang Sebenarnya Bisa Anda Ubah

Secara teknis, hampir semua hal terbuka untuk perubahan di header situs web termasuk ukuran font, gambar, skema warna, dan sebagainya. Anda dapat menambahkan area widget, menerapkan gaya yang berbeda untuk halaman tertentu, memposisikan logo sesuai keinginan, menerapkan tombol CTA (Call to Action), memodifikasi menu navigasi, dan banyak lagi lainnya!

Jika pada titik ini, Anda yakin bahwa Anda memerlukan templat tajuk khusus, berikut adalah opsi yang disertakan dengan WordPress untuk pengembang dan bukan pembuat kode.

Cara Menyesuaikan Header di WordPress

Mari kita lihat beberapa cara paling populer untuk menyesuaikan header.

Gunakan Penyesuai Tema Anda

Untuk menggunakan penyesuai WordPress bawaan untuk mengedit tajuk Anda, Anda harus terlebih dahulu mencari tahu apakah tema Anda mendukung ini. Anda dapat mencari tema Anda di perpustakaan tema resmi dan menggunakan filter untuk mengetahui apakah tema Anda saat ini memiliki fitur bawaan untuk header khusus.

Jika Anda menginstal salah satu tema yang disertakan dengan fitur ini, Anda akan melihat bahwa setelah aktivasi, beberapa item menu tambahan muncul di bawah menu "Tampilan". Jika Anda menginstal dan mengaktifkan Blog Forever, misalnya, Anda akan mendapatkan menu ini:

Setelah Anda mengklik item menu "Header", Anda akan dialihkan ke opsi header.

Di menu penyesuai, Anda juga dapat menemukan opsi lain yang membantu Anda menyesuaikan tajuk.

Banyak pilihan tersedia di sini. Anda dapat mengubah warna, menambahkan widget di header seperti media sosial atau info kontak, mengubah slogan, dll.

Tetapi bagaimana jika tema Anda bukan salah satu dari tema "tajuk yang dapat diedit"?

Cara Menambahkan Dukungan Header Kustom ke Tema Anda

Mari kita ambil tema GeneratePress sebagai contoh tema yang tidak mendukung fungsi ini. Jika Anda menginstal dan mengaktifkan tema ini, Anda tidak akan melihat opsi apa pun untuk mengubah gambar header di penyesuai tema.

Jika Anda memiliki beberapa keterampilan pengkodean dan menggunakan inti WordPress versi 3.4 atau lebih baru, Anda dapat mengaktifkan fitur header khusus dengan cukup mudah. Anda dapat dengan mudah menambahkannya dengan menggunakan fungsi add_theme_support() .

Buka folder tema Anda, temukan file functions.php dan buka dengan editor favorit Anda. Kemudian tambahkan baris berikut:

 add_theme_support( 'custom-header' );

Dan itu saja, sekarang Anda akan dapat melihat opsi gambar header di halaman penyesuai dan di bawah menu Penampilan. Anda dapat menggunakannya dan mengunggah gambar untuk tajuk Anda.

Anda juga dapat meneruskan argumen untuk menyetel salah satu opsi yang tersedia. Berikut adalah contoh bagaimana Anda dapat mengatur ukuran gambar dengan menambahkan kode ke functions.php:

 function mytheme_custom_header_setup() { $args = array( 'width' => 1000, 'height' => 250, ); add_theme_support( 'custom-header', $args ); } add_action( 'after_setup_theme', 'mytheme_custom_header_setup' );

after_setup_theme digunakan untuk mendaftarkan fungsionalitas kami tepat setelah tema diinisialisasi.

Namun, seperti yang mungkin Anda perhatikan, tidak ada gambar yang muncul di header, yang normal, karena kami tidak melakukan apa pun untuk menampilkannya.

Cara Menampilkan Gambar Header

Untuk menampilkan gambar header, Anda harus menggunakan fungsi get_header_image() WordPress seperti ini:

 <?php if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; ?>

Anda dapat pergi ke mana saja dari sini tergantung pada kebutuhan dan keterampilan pengkodean Anda. Anda dapat menambahkan tag atau judul kepala sekunder atau widget tema apa pun dengan menggunakan pengaitnya, dan tentu saja menambahkan CSS Anda sendiri untuk memolesnya.

Anda harus memasukkan potongan kode khusus ini ke dalam file template header dari instalasi WordPress Anda. File ini tidak sama untuk semua tema. Jika Anda tidak tahu yang mana, Anda dapat berkonsultasi dengan hierarki template, atau melupakan file apa dan menambahkan kode ke header melalui functions.php menggunakan fungsi wp_head().

 function my_custom_function(){ if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; }; add_action('wp_head', 'my_custom_function');

Penting juga untuk menunjukkan bahwa penyesuaian tersebut harus diterapkan dalam tema anak sehingga perubahan tidak akan hilang saat pembaruan tema.

Tentu saja, jika Anda menggunakan Tema Blokir WordPress seperti Twenty Twenty Two yang mendukung editor situs lengkap, segalanya bisa menjadi lebih mudah bagi Anda. Kami akan membahas lebih detail tentang ini di artikel mendatang.

Buat Header Kustom Menggunakan Plugin WordPress

Ada berbagai plugin populer yang dapat digunakan untuk membantu Anda menyesuaikan header WordPress Anda. Terlalu banyak sebenarnya untuk masuk ke dalam artikel ini.

Dengan demikian, ada satu yang layak untuk dicoba karena dapat digunakan tidak hanya untuk menyesuaikan tajuk Anda, tetapi juga sebagai alat yang berguna untuk memasukkan kode ke area 'kanan' situs web Anda bila diperlukan. Sapalah plugin 'Sisipkan Header & Footer'.

Plugin Insert Headers & Footers berguna dalam banyak hal. Tidak hanya memungkinkan Anda untuk menambahkan kode ke header, footer, atau body, tetapi juga menyimpan semua yang terorganisir di satu tempat, di bawah "Pengaturan -> Sisipkan Header dan Footer".

Ini tidak disarankan untuk non-coders karena Anda masih harus memasukkan skrip. Jika Anda ingin menyesuaikan header dan menghindari pengkodean, kami merekomendasikan plugin Tambahkan Gambar Header Kustom yang disediakan WordPress.

Yang harus Anda lakukan setelah diinstal dan diaktifkan, adalah membuat halaman (terlihat atau pribadi) berjudul "The Headers" dan mengunggah gambar di dalamnya.

Apa yang dilakukan plugin adalah a) mengaktifkan opsi "Header" penyesuai dan b) mengurai semua gambar yang diunggah di halaman "Header" dan menyediakannya sebagai header yang disarankan di penyesuai. Cukup keren!

Kesimpulan

Header WordPress Anda adalah hal pertama yang akan dilihat siapa pun di situs web Anda. Karena itu, ada baiknya memastikan tampilannya sebagus mungkin! Semoga di atas telah memberi Anda beberapa petunjuk dan tip tentang cara melakukan ini apakah Anda senang membuat kode atau tidak.