Cara Membuat UI Pesan Mendesak di WordPress

Keadaan darurat dapat memengaruhi organisasi mana pun. Baik itu penutupan terkait cuaca, perubahan jam kerja yang tiba-tiba, atau kebocoran pipa di ruang bawah tanah, semuanya terjadi. Dan salah satu cara terbaik untuk mengomunikasikan jenis masalah ini adalah dengan mempostingnya di situs web Anda.

Informasi ini sangat penting dan harus menonjol dari konten lainnya di situs. Juga, dibutuhkan upaya sesedikit mungkin untuk menambahkan. Ini terutama terjadi jika klien Anda yang memperbarui situs web. Idealnya, mereka tidak boleh membuat keputusan desain saat mencoba membagikan pesan penting. Juga, waktu adalah esensi.

Hari ini, kami akan menunjukkan kepada Anda solusi praktis menggunakan bidang WordPress khusus. Ini akan memungkinkan Anda untuk:

• Buat pesan mendesak pribadi;
• Pilih ikon Font Awesome untuk ditampilkan di sebelahnya;
• Mengaktifkan atau menonaktifkan pesan dengan satu klik;
• Tambahkan desain yang menarik ke tema WordPress Anda;

Siap untuk memulai? Ayo lakukan!

Apa yang Anda butuhkan?

Ini cukup sederhana untuk disatukan. Namun, Anda membutuhkan beberapa bahan:

Dua plugin gratis perlu diinstal dan diaktifkan. Selain itu, Anda juga memerlukan akses ke tema WordPress Anda.

Jika Anda menggunakan salah satu tema default yang disertakan dengan WordPress atau tema komersial, pastikan untuk menyiapkan tema sekunder. Ini akan mencegah perubahan apa pun yang Anda buat agar tidak ditimpa dengan pembaruan nanti.

Tambahkan dan konfigurasikan bidang khusus

Tugas pertama adalah membuat grup bidang khusus di WordPress. Untuk memulai, buka Bidang Kustom > Tambah Baru di dasbor WordPress.

Anda dapat membuat bidang apa pun yang ingin Anda gunakan. Seperti inilah contoh kita:

Atau, Anda dapat mereproduksi contoh persis ini dengan mendapatkan file JSON berikut:

Setelah Anda mengunduh file, buka Bidang Kustom > Alat. Anda kemudian dapat mengimpor grup bidang khusus ke situs web Anda.

Setelah diimpor, buka Bidang Kustom > Grup Bidang. Klik “Pemberitahuan Mendesak” untuk membuka layar edit.

Harap perhatikan bahwa Anda mungkin ingin mengubah beberapa pengaturan di sini. Fokus khusus pada Aturan lokasi untuk grup lapangan. Pastikan bidang diatur untuk ditampilkan pada halaman atau halaman yang Anda inginkan. Dalam kasus kami, kami menampilkan bidang pada halaman “Beranda”.

Buat pesan mendesak

Sekarang saatnya untuk menavigasi ke halaman “Beranda”, di mana bidang pemberitahuan darurat ditentukan.

Tampilan kolom di editor konten akan bervariasi. Jika Anda menggunakan editor blok Gutenberg, kumpulan bidang akan disembunyikan di bagian bawah editor dan di bawah konten yang ada.

Jika Anda menggunakan Editor Klasik, bidang dalam file JSON yang kami sediakan dikonfigurasi untuk muncul tepat di bawah judul halaman dan di atas konten yang ada.

Either way, menambahkan pesan ke halaman kami cukup mudah. Untuk bidang “Tampilkan pesan mendesak”, klik “Ya”. Kemudian pilih ikon (lihat daftar ikon Font Awesome yang tersedia). Dari sana, masukkan pesan Anda di bidang WYSIWYG.

Simpan halaman dan voila! Hampir saja…

Tambahkan dan rancang pesan Anda di bagian depan

Terakhir, mari taruh pesan penting kita di tema WordPress dan tambahkan beberapa gaya CSS.

Dalam contoh ini, kami akan menempatkan pesan di header halaman web. Di sini, itu akan menjangkau lebar layar dan ditampilkan di bagian atas halaman. Tentu saja, Anda dapat menambahkan cuplikan ini ke area mana pun yang menurut Anda terbaik.

Adapun gaya, Anda memiliki banyak fleksibilitas. Di sini, kita akan menggunakan latar belakang merah dengan teks putih besar. Ikon Font Awesome kami akan disorot dengan warna kuning.

Hasil akhirnya akan sulit hilang!

Pemberitahuan kepada pengunjung

Situs web organisasi adalah salah satu tempat pertama orang mencari informasi penting. Meskipun penting juga untuk memposting jenis pesan ini di media sosial, pesan ini dapat dengan mudah hilang dalam jumlah besar konten.

Solusi ini menyediakan cara sederhana untuk menambahkan pesan penting kapan saja. Ketika tidak lagi diperlukan, itu dapat dihapus hanya dengan beberapa klik.

Ada juga cara untuk meningkatkan fungsionalitas dengan menambahkan bidang khusus lain yang relevan. ACF memiliki banyak opsi bawaan, dan ada beberapa plugin yang dapat melakukan lebih banyak lagi.

Hampir semua situs web dapat memanfaatkan fitur jenis ini. Siapkan sekarang agar Anda tidak perlu bersusah payah melakukannya nanti.