Home » Tips & Tricks » Blog » Cara Membuat Fitur Switch Dark Mode Menggunakan Plugin WordPress

Cara Membuat Fitur Switch Dark Mode Menggunakan Plugin WordPress

Sebagai pemilik website tentunya kita harus membuat website kita agar dapat di sukai pengunjung, Tujuanya agar pengunjung merasa nyaman dan betah saat sedang mengexplore atau membaca artikel di website kita. Ini sangat penting, karna apabila website kita tampil berantakan ataupun lemot karna banyaknya widget atau plugin yang terinstall maka pengunjung pun akan merasa tidak nyaman dan tentu saja mereka akan pergi meninggalkan halaman website kita. Tentunya, kita tidak mau kehilangan pengunjung bukan ?

Banyak cara di lakukan agar website kita dapat di sukai pengunjung, Mulai dari meminimalisir penggunaan plugin, mengupgrade hosting hingga menambah fungsionalitas sebuah halaman website. Dan di artikel ini saya akan menjelaskan bagaimana cara menambahkan fungsionalitas website agar disukai pengunjung dengan menambahkan fitur dark mode pada website menggunakan worpdress plugin.

Tapi sebelum kita praktekan cara penggunaanya, Mari kita simak dahulu pengertian dan manfaat yang di dapat ketika memasang fitur dark mode pada website.

membuat dark mode
Illustrasi toogle dark and light by Hansyah.com

 

Apa itu Dark Mode pada Website ?

Dark Mode atau biasa di sebut juga Mode Malam merupakan sebuah fitur yang tersedia pada halaman website/aplikasi agar memberikan sebuah pengalaman baru bagi usernya untuk dapat menikmati suasana gelap

Baca Juga : Manfaat dan Keuntungan jika Kamu Punya Blog

Pentingkah Menambahkan Fitur Dark Mode pada Website ?

Menambahkan fitur switch dark mode atau biasa di sebut juga mode malam pada website kita tentunya itu menambahkan nilai plus bagi website kita. Karna dengan menambahkan fitur dark mode pengunjung bisa memilih opsi mau membaca artikel pada mode terang atau gelap. Ini sangat berguna bagi mereka yang lebih suka mode gelap agar lebih fokus saat membaca artikel pada halaman website.  Selain itu mode gelap juga dapat mengurangi tingkat kesilauan saat membaca pada ruangan gelap

Menambahkan Fitur Switch Dark Mode Menggunakan Plugin WP Night

dark mode plugin
WP Night

Bagi kamu pengguna wordpress, kamu tidak perlu pusing untuk memikirkan pengkodingan untuk membuat fitur dark mode ini, karna di WordPress sendiri sudah tersedia plugin yang dapat membuat halaman website kita berubah menjadi mode gelap, yaitu dengan cara menggunakan plugin WP Night. 

Cara Menggunakan WP Night

Buat kamu yang masih bingung cara menggunakan plugin ini, tidak perlu khawatir saya akan memberikan penjelasanya di artikel ini. Simak langkah-langkahnya di bawah ini ya

Install Plugin

Langkah pertama, kamu harus install plugin WP Night terlebih dahulu, kamu bisa mencarinya pada menu plugins dan pilih add new, setelah terinstall jangan lupa untuk Aktifkan pluginya ya

Memasang Kode Plugin pada Menu

Setelah terinstall, pergi ke menu Appearance > pilih Menus. di bagian menus ini pastikan CSS clases nya sudah tercentang, apabila belum kamu bisa pergi ke menu Screen Options yang berada di atas kemudian centang CSS clasess

css classes

Setelah itu kamu bisa isi di bagian custom links untuk URL isi #  sedangkan Link text nya tulis saja Night Mode kemudian klik Add to Menu

night mode website

Secara otomatis menu Custom Linksnya akan bertambah, pada kotak CSS clasesnya isi dengan  wp-night-mode. Kemudian kamu bisa langsung klik Save Menu

Oh iya pastikan menu Night Mode ini di pasang pada ujung akhir ya

fitur mode malam

Untuk tahap ini fitur Dark Mode sudah terinstall, kamu bisa lihat hasilnya pada halaman website kamu, akan muncul toogle pada bagian Menu

Mengubah warna body, text dan style toogle

Jika kamu masih kurang puas dengan hasilnya, kamu bisa ubah warna body,text dan style tooglenya pada bagian customize

Gimana, keren bukan? Sekarang website kamu udah bisa ganti mode terang atau gelap deh, Selamat ya ! hehe

Oh iya setelah terpasang, mungkin pada kasus tertentu ada beberapa elemen yang terbawa menjadi mode gelap, untuk cara mengatasinya kamu bisa mengatur element cssnya pada bagian Additional CSS

Leave a Comment

Your email address will not be published. Required fields are marked *