Loncat ke Konten Utama

Cara menambahkan widget ke header blog WordPress Anda

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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.

Catatan: 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

widgetisee zonee di kepala wordpress

Biasanya, tema WordPress menambahkan sidebar di samping 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 '.

zona widget WordPress baru

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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.

situs demo

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 '.

css tambahan WorDPress

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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.

tema demo dua puluh tujuh belas wordpress

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

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

1. Smart4y Tooltip

Smart4y Tooltip adalah plugin WordPress fleksibel yang didedikasikan untuk membuat tooltip modern tanpa ketergantungan pada pustaka JavaScript. Ini sepenuhnya responsif dan menawarkan kemungkinan memasukkan konten HTML.

Smart4y Tooltip Responsive WordPress Plugin

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

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

Dibenarkan-Plugin Untuk WordPress-Fotografer,

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

Plugin WordPress ini sesuai dengan namanya memungkinkan Anda untuk menjadwalkan publikasi email di situs web Anda. Ini adalah bagian dari plugin dari plugin WordPress "Follow My Blog Post". Jadwalkan Email Ikuti Posting Blog Saya plugin wordpress

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

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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. .

DownloadDemo |Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web 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.

...

Artikel ini berisi komentar 8

  1. Hai! Saya ingin tahu apakah Anda memiliki kesempatan untuk memberi tahu saya cara meletakkan "kotak info" yang mirip dengan yang digunakan di sini di awal artikel ini, termasuk tombol yang dapat diklik di samping "Unduh" dan "Spreadsheets", tata letaknya sangat bagus. Terima kasih!

  2. Pak, saya mencobanya. Memang, halaman widget adalah keluaran yang mendefinisikan penambahan widget. Dan saya menambahkannya. Ketika langkah 2 gagal memasukkan kode di header php. Tebak 2, apa kesalahannya, Pak?

  3. Pada kode pertama yang ditampilkan, yaitu untuk menghasilkan area widget baru, mulailah dengan mengetik "fungsi", tetapi saya akan mengatakannya dimulai dengan "fungsi". Sebenarnya kode ini memiliki beberapa kesalahan yang membuatnya salah saat menulisnya. Saya sangat menghargai jika dikoreksi.

  4. 🙂 Semuanya baik-baik saja, hanya tidak ada seorang pun dalam saran mereka yang menjelaskan di mana harus menambahkan kode ke "functions.php !!! " Itu penting! Setiap orang menggunakan tema "berbeda" ...

  5. halo,

    Terima kasih atas dukungannya

    Saya tahu cara menambahkan bilah pencarian saya di header yang dipersonalisasi. Di sisi lain, untuk mempersonalisasi gaya lebih rumit ...

    Saya ingin mengubah ukuran, posisi (yang tidak mengambil seluruh lebar header) serta warna latar belakang.

    Merci d'avance.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
6 saham
saham1
menciak
Register5