Apakah Anda ingin menambahkan widget WordPress ke area header situs web Anda?

Widget memungkinkan Anda menambahkan blok konten dengan mudah di bagian tertentu dari tema WordPress Anda.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mudah menambahkan widget WordPress ke header situs web Anda.

Note: Ini adalah tutorial tingkat menengah. Anda perlu menambahkan kode ke file tema WordPress Anda dan kuasai beberapa CSS.

Tetapi sebelum modifikasi menemukan kami plugin 5 WordPress untuk backup blog Anda atau Cara menginstal tema WordPress et Berapa banyak plugin saya harus menginstal pada WordPress.

Kalau begitu mari kita kembali ke mengapa kita ada di sini. 

Mengapa dan kapan Anda perlu menambahkan widget di header?

Widget memungkinkan Anda menambahkan blok konten dengan mudah ke area yang ditentukan di tema WordPress Anda. Area khusus ini disebut " sidebars "Atau area" widget'.

Area widget di header dapat digunakan untuk menampilkan iklan, artikel terbaru, atau apa pun yang Anda inginkan.

Domain khusus ini digunakan pada semua situs web populer untuk menampilkan informasi yang sangat penting.

Temukan juga Cara menambahkan widget kustom setelah posting di WordPress

Sebagai aturan umum, Tema WordPress tambahkan bilah sisi di sebelah konten atau di area footer. Sangat sedikit tema WordPress yang menambahkan area widget di atas konten atau di header.

Kami juga menyarankan untuk menemukan MailChimp tutorial dalam bahasa Prancis: panduan lengkap untuk membuat newsletter

Itu sebabnya dalam tutorial ini kami akan menunjukkan kepada Anda cara menambahkan area widget ke header situs WordPress Anda.

Langkah 1: Buat area widget

Pertama-tama, kita perlu membuat area widget khusus. Langkah ini akan memungkinkan Anda melihat area widget khusus di " Penampilan> Widget Di dasbor WordPress Anda.

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

function bpc_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', 'bpc_widgets_init');

Kode ini menyimpan area sidebar atau widget baru pada tema WordPress Anda.

Jika Anda belum pernah menginstal WordPress secara lokal, cari tahu Cara menginstal WordPress secara lokal pada PC / Windows dengan XAMPP

Anda bisa pergi ke " Penampilan> Widget Dan Anda akan melihat area widget baru ditandai " Tajuk Widget di Area kustom '.

Silakan, dan tambahkan widget teks ke area yang baru dibuat ini dan simpan.

Coba juga panduan kami tentang menambahkan widget.

Langkah 2: Tampilkan widget Anda di header

Jika Anda mengunjungi situs web Anda, Anda tidak akan dapat melihat widget teks yang baru saja Anda tambahkan.

Karena kami belum menunjukkan kepada Anda cara menampilkan zona widget khusus WordPress.

Inilah yang akan kita lakukan pada langkah ini.

Ini juga untuk Anda daftar 5 Plugin WordPress Kritis untuk meningkatkan penghasilan blog Anda

Anda perlu mengedit file header.php Di tema WordPress Anda dan tambahkan kode ini di mana Anda ingin menampilkan widget.

Jangan lupa untuk menyimpan perubahan Anda.

Anda kemudian dapat mengunjungi situs web Anda dan Anda akan melihat widget teks di header Anda.

Hasilnya belum tentu yang paling menarik. Itu sebabnya Anda membutuhkan CSS agar dapat ditampilkan dengan benar.

Langkah 3: Berikan gaya pada tajuk CSS Anda

Bergantung pada tema WordPress Anda, Anda perlu menambahkan beberapa kode CSS untuk mengontrol bagaimana area header dan widget ditampilkan.

Salah satu cara termudah untuk melakukannya adalah dengan menggunakan CSS Hero. Yang terakhir memungkinkan Anda menggunakan antarmuka pengguna yang intuitif untuk memodifikasi CSS tema WordPress.

Kami juga menyarankan Anda untuk menemukan ini Apa yang dapat Anda lakukan dengan plugin Yellow Pencil WordPress?

Jika Anda tidak ingin menggunakan plugin, Anda dapat menambahkan CSS khusus ke tema WordPress Anda dengan mengunjungi " Penampilan »Personalisasi Untuk menyesuaikan tema WordPress.

Baca juga artikel kami di Plugin 10 WordPress untuk meningkatkan traffic blog

Ini akan memungkinkan Anda untuk menampilkan antarmuka Penyesuai WordPress. Anda harus mengklik " CSS tambahan '.

Tab « CSS tambahan Di " Customizer Memungkinkan Anda menambahkan CSS khusus Anda saat melihat perubahan pada pratinjau di sebelah kanan.

Karena alasan yang melekat pada tutorial ini, kami berasumsi bahwa Anda akan menggunakan area ini untuk menambahkan widget tunggal untuk menampilkan iklan banner, atau widget menu kustom.

Berikut contoh CSS untuk Anda mulai:

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

Begini cara widget khusus kami akan muncul di tajuk tema Twenty Seventeen.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Smart4y Tooltip

Tooltip Smart4y adalah WordPress Plugin alat fleksibel yang didedikasikan untuk membuat tooltips modern tanpa ketergantungan pada perpustakaan Javascript. Ini sepenuhnya responsif dan menawarkan kemungkinan memasukkan konten HTML.

Editor WYSIWYG-nya akan memungkinkan Anda untuk membuat setiap tooltip secara visual tanpa harus memasukkan kode apa pun, tetapi jika Anda bersedia, Anda selalu dapat melakukannya.

Temukan juga milik kami Plugin 10 WordPress untuk mengevaluasi artikel dari Blog Anda

Fitur lainnya adalah: Dukungan halaman pembangun, tata letak yang cukup responsif, kemampuan untuk menentukan parameter global untuk semua tooltips atau untuk menentukan parameter spesifik untuk setiap tooltip, dukungan untuk efek visual yang telah ditentukan, perhitungan posisi tooltip pada jendela yang diubah ukurannya, dokumentasi rinci, dll….

Unduh | Demo | Hébergement Web

2. dibenarkan

Le WordPress Plugin Justified adalah plugin galeri responsif yang menyelaraskan thumbnail Anda di grid yang dibenarkan menggunakan jQuery, seperti di Flickr. 

Ini membawa fitur yang akan membedakan galeri Anda dari yang ada di pesaing!

Fitur utamanya adalah: tata letak responsif, efek flyover khusus, penyelarasan grid otomatis,  editor kode pendek, penampilan esepenuhnya dapat dikustomisasi, dukungan ppemirsa dan banyak lagi ...

Download | Demo | Hébergement Web  

3. Jadwalkan Email

ce WordPress Plugin seperti namanya memungkinkan Anda menjadwalkan publikasi email di situs web Anda. Ini adalah bagian dari ekstensi plugin WordPress “Ikuti Postingan Blog Saya”.

Sekarang Anda dapat menjadwalkan publikasi email Anda berdasarkan jam, hari, atau minggu.

Baca juga artikel kami di Plugin 10 WordPress untuk menggunakan peta di situs web Anda

Ini menawarkan kemungkinan untuk mengirim email gabungan untuk semua pemberitahuan alih-alih setiap email untuk setiap pemberitahuan dan juga memungkinkan untuk menentukan templat email yang berbeda untuk email yang berbeda, akhirnya membuat penerimaan email Anda lebih mudah dicerna. .

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

• Cara membuat Excel dan Word dokumen di WordPress
• Cara menyesuaikan logo WordPress dasbor
• Bagaimana menemukan file untuk mengedit tema WordPress
• Cara menyesuaikan CSS situs web WordPress Anda

Kesimpulan

Itu dia! Itu saja untuk tutorial ini, saya harap ini akan membantu Anda menambahkan area widget di header tema WordPress Anda. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda. 

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.

...