Cara Menambahkan Widget WordPress ke Header Situs Web Anda

Apakah Anda ingin menambahkan widget WordPress ke area header situs web Anda? Widget memungkinkan Anda menambahkan blok konten dengan mudah ke bagian tertentu dari tema Anda. Pada artikel ini, kami akan menunjukkan cara mudah menambahkan widget WordPress ke header situs web Anda.

Catatan: Ini adalah tutorial tingkat menengah. Anda perlu menambahkan kode ke file tema WordPress Anda dan menulis CSS.

Mengapa dan kapan Anda membutuhkan widget header di situs web Anda?

Widget memungkinkan Anda untuk dengan mudah menambahkan blok konten ke area tertentu dari tema WordPress Anda. Area yang ditentukan ini disebut sebagai area Barras Side atau widget siap pakai.

Anda dapat menggunakan area widget siap di header atau sebelum konten untuk menampilkan iklan, posting terbaru atau apa pun yang Anda inginkan.

Area khusus ini disebut Beneath the Fold dan semua situs web populer menggunakannya untuk menunjukkan hal-hal yang benar-benar penting.

Tema WordPress sering menambahkan barras di sebelah konten atau di area footer. Tidak banyak tema WordPress yang menambahkan area siap widget ke konten atau header.

Itu sebabnya dalam artikel ini, kami akan membahas cara menambahkan area widget ke header situs WordPress Anda.

Dia lulus 1. Buat area widget judul

Pertama, kita perlu membuat area widget khusus. Langkah ini akan memungkinkan Anda untuk melihat area widget khusus Anda di Penampilan »Widget halaman di dasbor WordPress Anda.

Anda perlu menambahkan kode ini ke file .php tema Anda.

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '
',
		'after_widget'  => '
',
		'before_title'  => '
',
		'after_title'   => '
',
	) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

Kode ini mendaftarkan area sidebar atau widget baru untuk tema Anda.

Sekarang kamu bisa pergi ke Penampilan »Widget dan Anda akan melihat area widget baru berlabel area widget “Judul Kustom”.

Lanjutkan dan tambahkan widget teks ke area widget yang baru dibuat ini dan simpan. Lihat panduan kami tentang cara menambahkan dan menggunakan widget di WordPress untuk instruksi terperinci tentang cara menambahkan widget.

Dia lulus 2- Tampilkan widget judul khusus Anda

Jika Anda membuka situs Anda sekarang, Anda tidak akan dapat melihat widget teks yang baru saja Anda tambahkan ke widget header yang baru dibuat.

Ini karena kami belum memberi tahu WordPress tempat menampilkan area widget ini.

Mari kita lakukan di langkah ini.

Anda perlu mengedit file header.php di tema Anda dan menambahkan kode ini di mana Anda ingin menampilkan area widget khusus Anda.

Jangan lupa untuk menyimpan perubahan Anda.

Anda sekarang dapat mengunjungi situs web mereka dan Anda akan melihat area widget header.

Anda akan melihat bahwa itu terlihat agak kasar. Di situlah Anda akan membutuhkan CSS agar terlihat lebih baik.

Dia lulus 3: Rancang area widget header dengan CSS

Bergantung pada tema Anda, Anda akan memerlukan CSS tambahan untuk mengontrol bagaimana area widget header dan setiap widget di dalamnya ditampilkan.

Cara termudah untuk melakukannya adalah dengan menggunakan plugin CSS Hero. Ini memungkinkan Anda untuk menggunakan antarmuka pengguna yang intuitif untuk mengubah CSS tema WordPress apa pun. Untuk detail lebih lanjut, lihat ulasan Pahlawan CSS kami.

Jika Anda tidak ingin menggunakan plugin, Anda dapat menambahkan CSS khusus ke tema Anda dengan mengunjungi Penampilan » Kustomisasi Halaman.

Ini akan meluncurkan antarmuka penyesuai tema WordPress. Anda harus mengklik tab “CSS tambahan”.

Tab CSS tambahan di penyesuai tema memungkinkan Anda menambahkan CSS khusus sambil melihat perubahan yang muncul di pratinjau langsung.

Untuk keperluan tutorial ini, kami berasumsi bahwa Anda hanya akan menggunakan area ini untuk menambahkan satu widget untuk menampilkan widget menu kustom atau iklan banner.

Berikut adalah beberapa contoh CSS untuk Anda mulai.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
}	
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

Seperti inilah tampilan area widget tajuk khusus kami di tema Twenty Seventeen default.

Anda mungkin perlu menyesuaikan CSS agar sesuai dengan tema Anda. Lihat panduan kami tentang cara menambahkan gaya khusus ke widget WordPress.

Kami harap artikel ini membantu Anda mempelajari cara menambahkan widget WordPress ke header situs web Anda. Anda juga dapat melihat daftar 25 widget WordPress paling berguna untuk situs web Anda.

Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.