Cara Mengaktifkan Mode Malam di WordPress

Untuk beberapa waktu sekarang, sistem operasi dan aplikasi telah menyertakan versi antarmuka grafis mereka di mana latar belakang putih diganti dengan latar belakang hitam untuk mengurangi emisi cahaya pada malam hari dan dengan demikian mengurangi kerusakan mata Anda. Ini dikenal sebagai mode malam .

Entah karena mode atau karena benar-benar berfungsi, mode malam semakin populer. Ada yang memastikan bahwa mode malam memiliki manfaat bagi lingkungan karena layar hitam menggunakan lebih sedikit energi daripada layar putih. Tetapi ada juga pencela dari mode gelap semacam ini.

Bagaimanapun, ini mungkin fungsi yang Anda minati juga di situs web Anda, dan untuk hari ini kita akan berbicara tentang mode malam di WordPress.

WordPress belum menyertakan mode malam di dalamnya secara default, tetapi ada opsi untuk menambahkan mode malam di Dasbor WordPress dan frontend. Seperti biasa, plugin adalah solusi untuk memperluas WordPress dengan fungsionalitas visual yang menarik ini.

Cara Mengaktifkan Mode Malam di Dashboard WordPress

Kami mulai dengan plugin Mode Gelap untuk WordPress, yang memungkinkan Anda mengaktifkan mode malam di Dasbor WordPress. Sangat mudah digunakan dan gratis.

Hal pertama adalah menginstal dan mengaktifkan plugin. Kita dapat menemukannya langsung di Direktori Plugin WordPress, langsung di dalam dashboard WordPress melalui menu Plugin , seperti yang Anda lihat pada tangkapan layar di atas.

Setelah plugin Mode Gelap diinstal, setiap pengguna WordPress Anda akan memiliki opsi di profil mereka untuk mengaktifkannya di Dasbor mereka:

Hal yang baik tentang plugin ini adalah setiap pengguna yang memilih bagaimana mereka ingin melihat Dasbor WordPress, dalam mode gelap atau dalam mode normal. Dengan cara ini, jika ada seseorang yang ingin terus menggunakan Dashboard WordPress seperti biasa, dengan latar belakang putih, maka tidak ada masalah untuk melakukannya.

Pada tangkapan layar sebelumnya Anda dapat melihat hasil mengaktifkan mode gelap. Dan itu terlihat bagus! Saya sangat menyukai hasil memiliki warna latar belakang hitam juga di bagian tengah halaman dan tidak hanya di menu samping.

Sayangnya, ada masalah tertunda untuk plugin Mode Gelap WordPress: untuk menyediakan kompatibilitas dengan editor blok Gutenberg. Pada tangkapan layar berikut Anda dapat melihat bahwa itu belum dapat menerapkan latar belakang gelap ke Gutenberg:

Saya kira jika plugin cukup berhasil dan pengguna memintanya, pengembangnya akan mengadaptasinya sehingga editor blok juga muncul dalam mode malam. Bagaimanapun, kecepatan perkembangan Gutenberg yang hingar-bingar dan pembaruannya yang "sering" dalam gayanya membuat adaptasi agak rumit.

Cara Mengaktifkan Mode Malam Untuk Pengunjung WordPress Anda

Plugin Dark Mode hanya menambahkan mode malam di Dashboard WordPress. Sisa situs web Anda, yaitu frontend yang dilihat pengunjung, akan terus terlihat sama, tanpa mengalami perubahan apa pun.

Jika Anda ingin pengunjung Anda memiliki opsi untuk mengaktifkan mode malam di situs web Anda, menggunakan latar belakang gelap daripada latar belakang terang, Anda harus menginstal plugin WP Mode Malam.

Plugin ini, seperti Mode Gelap, sepenuhnya gratis dan Anda juga memilikinya tersedia di Direktori Plugin WordPress.

Setelah diinstal, Anda tidak akan melihat apa pun di Pengaturan atau menu tambahan apa pun. Yang harus Anda lakukan adalah pergi ke menu Appearance dan di sana untuk mengedit menu Anda. Di menu utama Anda, Anda harus menambahkan tautan khusus tanpa URL tertentu. Item menu baru ini akan membantu kami menambahkan sakelar untuk mengaktifkan dan menonaktifkan mode malam.

Di antarmuka manajemen menu itu sendiri Anda harus membuka opsi layar yang akan Anda temukan di sudut kanan atas untuk mengaktifkan opsi untuk menambahkan kelas CSS seperti yang Anda lihat pada tangkapan layar berikut:

Setelah Anda selesai melakukannya, saat Anda akan mengedit item menu yang telah kami tambahkan sebelumnya, Anda akan melihat bidang tambahan tempat Anda dapat menambahkan kelas CSS. Di sini Anda harus memasukkan kelas CSS wp-night-mode . Kelas ini adalah yang dibutuhkan WP Night Mode untuk mengidentifikasi item apa yang harus digunakan sebagai sakelar mode malam.

Secara default, WP Night Mode adalah plugin yang tidak menambahkan warna gelap ke antarmuka Anda. Anda harus menjadi orang yang memilih warna gelap yang ingin Anda tampilkan baik untuk latar belakang, teks, dan tautan. Untuk menentukan warna-warna ini Anda harus pergi ke menu Appearance dan di sana buka menu Customize .

Penyesuai WordPress akan terbuka dan di sana Anda akan menemukan opsi Mode Malam . Jika Anda memilihnya, Anda akan melihat bahwa Anda memiliki opsi untuk mengaktifkan mode malam secara default dan untuk membuat beberapa gaya. Di setiap gaya Anda menentukan warna latar belakang, warna teks, dan warna tautan.

Hal yang baik tentang penyesuai adalah Anda dapat melihat pratinjau nyata tentang tampilan situs web Anda dengan warna yang dipilih:

Sayangnya, hasilnya tidak sempurna: beberapa elemen masih memiliki latar belakang terang yang terlihat aneh dalam mode malam. Tapi jangan khawatir, kami bisa memperbaikinya. Dari penyesuai itu sendiri, Anda dapat menambahkan aturan CSS tambahan untuk memperbaiki masalah kecil ini.

Kembali ke penyesuai dan Anda akan melihat opsi CSS tambahan . Jika Anda memilihnya, Anda memiliki kemungkinan untuk menulis aturan CSS di sana. Aturan ini dapat berupa jenis berikut:

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

Perlu diingat bahwa apa yang sebenarnya dilakukan plugin adalah menerapkan kelas CSS wp-night-mode-on di tag body situs web Anda. Oleh karena itu, jika Anda ingin memperbaiki latar belakang elemen HTML dan membuatnya gelap, yang harus Anda lakukan adalah menemukan pemilih untuk elemen tersebut dan menerapkan perbaikan saat tag body memiliki kelas wp-night-mode-on .

Pada perbandingan berikut ini Anda dapat melihat perbandingan dasar antara mode normal dan mode malam dengan warna yang telah kami terapkan:

Menambahkan mode malam ke WordPress Anda sangat mudah berkat beberapa plugin. Hari ini kami telah meninjau plugin yang membantu kami mengaktifkan mode malam di Dasbor WordPress dan di frontend.

Apakah Anda pengguna reguler mode malam di aplikasi Anda? Ingatlah untuk berkomentar di bawah dengan pendapat Anda!

Gambar unggulan oleh Priscilla Du Preez di Unsplash.