Cara Menambah Widget WordPress ke Header Laman Web Anda

Adakah anda ingin menambahkan widget WordPress ke kawasan tajuk laman web anda? Widget membolehkan anda menambahkan blok kandungan dengan mudah ke dalam bahagian tema anda. Dalam artikel ini, kami akan menunjukkan kepada anda cara menambahkan widget WordPress dengan mudah ke tajuk laman web anda.


Tambahkan widget WordPress ke tajuk laman web anda

Nota: Ini adalah tutorial peringkat pertengahan. Anda perlu menambahkan kod ke fail tema WordPress anda dan menulis CSS.

Mengapa dan Bila Anda Memerlukan Widget Header di Laman Web anda?

Widget membolehkan anda menambahkan blok kandungan dengan mudah ke kawasan yang ditentukan dalam tema WordPress anda. Kawasan yang ditentukan ini disebut bar sisi atau kawasan siap widget.

Kawasan siap widget di tajuk atau sebelum kandungan dapat digunakan untuk memaparkan iklan, artikel terbaru, atau apa sahaja yang anda mahukan.

Kawasan khusus ini dipanggil ‘Di bawah liputan’ dan semua laman web popular menggunakannya untuk menunjukkan perkara yang sangat penting.

Bahagian tajuk di laman web List25 yang popular

Biasanya, tema WordPress menambah bar sisi di sebelah kandungan atau di kawasan footer. Tidak banyak tema WordPress yang menambahkan kawasan siap widget di atas kandungan atau di tajuk.

Itulah sebabnya dalam artikel ini, kami akan membahas cara menambahkan kawasan widget ke tajuk laman web WordPress anda.

Langkah 1. Membuat Kawasan Widget Header

Pertama, kita perlu membuat kawasan widget tersuai. Langkah ini akan membolehkan anda melihat kawasan widget tersuai anda Rupa »Widget halaman di papan pemuka WordPress anda.

Anda perlu menambahkan kod ini ke fail functions.php tema anda.

fungsi wpb_widgets_init () {

register_sidebar (susunan (
‘nama’ => ‘Kawasan Widget Header Kustom’,
‘id’ => ‘widget-tajuk-khusus’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

Kod ini mendaftarkan bar sisi baru atau kawasan siap widget untuk tema anda.

Anda kini boleh pergi ke Rupa »Widget halaman, dan anda akan melihat kawasan widget baru yang berlabel ‘Custom Header Widget Area’.

Kawasan widget header tersuai

Teruskan, dan tambahkan widget teks ke kawasan widget yang baru dibuat dan simpan. Lihat panduan kami tentang cara menambah dan menggunakan widget di WordPress untuk arahan terperinci mengenai penambahan widget.

Langkah 2: Paparkan Widget Header Tersuai Anda

Sekiranya anda melayari laman web anda sekarang, anda tidak akan dapat melihat widget teks yang baru anda tambahkan ke widget tajuk yang baru anda buat.

Itu kerana kami belum memberitahu WordPress di mana hendak memaparkan kawasan widget ini.

Mari lakukan pada langkah ini.

Anda perlu mengedit fail header.php dalam tema anda dan menambahkan kod ini di mana anda ingin memaparkan kawasan widget tersuai anda.

<?php

jika (is_active_sidebar (‘custom-header-widget’)): ?>

<?php dynamic_sidebar (‘custom-header-widget’); ?>

<?php endif; ?>

Jangan lupa menyimpan perubahan anda.

Anda kini boleh melayari laman web anda dan anda akan melihat kawasan widget tajuk anda.

Widget pengepala tidak bergaya

Anda akan melihat bahawa ia kelihatan agak tidak bertoleransi. Di situlah anda memerlukan CSS untuk menjadikannya lebih baik.

Langkah 3: Gaya Kawasan Widget Header Anda Menggunakan CSS

Bergantung pada tema anda, anda perlu menambahkan CSS untuk mengawal bagaimana kawasan widget tajuk dan setiap widget di dalamnya ditampilkan.

Cara yang lebih mudah untuk melakukannya adalah dengan menggunakan pemalam CSS Hero. Ini membolehkan anda menggunakan antara muka pengguna yang intuitif untuk mengubah CSS mana-mana tema WordPress. Untuk maklumat lebih lanjut, lihat ulasan Wira CSS kami.

Sekiranya anda tidak mahu menggunakan pemalam, anda boleh menambahkan css tersuai pada tema anda dengan melawati Rupa »Sesuaikan halaman.

Ini akan melancarkan antara muka penyesuai tema WordPress. Anda perlu mengklik tab ‘CSS Tambahan’.

Menambah CSS tersuai ke tema WordPress

Tab CSS tambahan dalam penyesuai tema membolehkan anda menambahkan CSS tersuai anda sambil menyaksikan perubahan muncul dalam pratonton langsung.

Demi tutorial ini, kami menganggap Anda hanya akan menggunakan kawasan ini untuk menambahkan satu widget untuk menampilkan iklan sepanduk, atau widget menu khusus.

Berikut adalah beberapa contoh CSS untuk membantu anda memulakan.

div # header-widget-area {
lebar: 100%;
warna latar: # f7f7f7;
sempadan-bawah: 1px padat #eeeeee;
text-align: tengah;
}
h2.chw-tajuk {
margin-top: 0px;
text-align: kiri;
text-transform: huruf besar;
saiz fon: kecil;
warna latar: #feffce;
lebar: 130px;
pembalut: 5px;
}

Ini adalah bagaimana kawasan widget tajuk utama kami melihat tema Twenty Seventeen lalai.

Pratonton widget pengepala

Anda mungkin perlu menyesuaikan CSS agar sesuai dengan tema anda. Lihat panduan kami mengenai cara menambahkan gaya tersuai pada widget WordPress.

Kami harap artikel ini membantu anda mempelajari cara menambahkan widget WordPress ke tajuk laman web anda. Anda mungkin juga ingin melihat senarai 25 widget WordPress paling berguna untuk laman web anda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map