Cara Menambahkan Mode Gelap ke Situs WordPress Anda dengan 4 Langkah Sederhana Ini

Diterbitkan: 2022-06-16

Ketika Instagram dan beberapa situs web dan aplikasi utama lainnya menambahkan mode gelap pada Oktober 2019, kami menyaksikan lonjakan besar dalam minat orang terhadap fitur ini.

How to Add Dark Mode to Your WordPress Website with These 4 Simple Steps

Namun, meskipun kami mengecualikan outlier yang merupakan adopsi Instagram dari mode gelap, alias mode malam , grafik di atas dengan jelas menunjukkan pertumbuhan popularitas fitur selama beberapa tahun terakhir.

Seiring dengan Instagram, banyak perusahaan besar lainnya telah beralih ke era mode malam, dan Anda harus mempertimbangkan untuk beralih juga. Bukan hanya karena sedang tren, tetapi karena banyak manfaatnya bagi pengguna Anda, termasuk tetapi tidak terbatas pada pengurangan kelelahan mata bagi pengguna Anda, peningkatan masa pakai baterai untuk perangkat yang digunakan untuk mengunjungi situs Anda, dan fakta bahwa tampilannya jauh lebih keren.

Oke, yang terakhir mungkin agak subjektif, tapi kami tetap menggunakannya.

Untungnya, menambahkan mode gelap ke situs WordPress Anda cukup sederhana. Anda tidak hanya dapat mengatur bagaimana situs web Anda ditampilkan kepada setiap pengguna, tetapi Anda juga dapat menambahkan fitur tersebut ke dasbor admin Anda dan memberikan istirahat pada mata Anda sendiri.

Jika Anda berpikir untuk menambahkan mode gelap ke situs Anda, ada beberapa cara untuk melakukannya, tetapi menggunakan plugin sejauh ini adalah yang paling sederhana, seperti yang Anda bayangkan.

Dalam posting ini, kami akan memperkenalkan plugin yang direkomendasikan sebagian besar perusahaan desain situs web di Los Angeles — WP Dark Mode — dan meninjau semua langkah yang perlu Anda ambil untuk menambahkan dan menyesuaikan fungsi ini sehingga sesuai dengan situs web dan tema WordPress Anda.

Tapi pertama-tama, mari kita lihat apa itu mode gelap dan manfaatnya yang paling menonjol. Baca terus!

Apa Itu Mode Gelap dan Mengapa Berguna?

Juga dikenal sebagai mode malam, mode gelap adalah sakelar tampilan sederhana yang mengubah skema warna situs web dari terang ke gelap.

Pada situs web biasa dengan huruf hitam pada latar belakang putih, ini biasanya terlihat seperti warna yang dibalikkan, tetapi, seperti yang akan kami jelaskan di bawah, ada lebih dari itu.

Tweak sederhana ini secara signifikan mengurangi cahaya putih yang keluar dari layar, mengurangi ketegangan mata, terutama jika pengguna mengunjungi situs web di malam hari.

Opsi untuk mengaktifkan mode gelap tersedia di sebagian besar sistem operasi dan browser web modern.

Manfaat Paling Terkenal dari Mode Gelap

Kami telah menyebutkan beberapa manfaat dari fitur ini di seluruh posting ini, tetapi kami pikir kami akan menguraikan semuanya di sini dalam daftar berbutir yang bagus untuk kenyamanan Anda.

Jadi, manfaat mode gelap antara lain sebagai berikut:

  • Mengurangi ketegangan pada mata
  • Mengurangi konsumsi energi dan meningkatkan masa pakai baterai
  • Lebih sedikit cahaya putih dari layar
  • Lebih banyak waktu yang dihabiskan di halaman Anda

Seperti yang sudah Anda ketahui, browser dan sistem operasi modern sudah menawarkan mode gelap sebagai opsi, tetapi jika Anda ingin situs web Anda muncul dalam skema warna yang tepat bagi pengguna yang menginginkannya, Anda harus menambahkannya sendiri.

Untungnya, menginstal plugin WP Dark Mode dapat membuat proses ini menjadi mudah, serta memberi Anda semua jenis kontrol atas tampilan mode gelap situs web Anda.

Mode Gelap vs. Mode Malam

Sebelum kita melanjutkan, kami ingin membahas masalah potensial yang mungkin menjadi masalah bagi pembaca bermata elang. Yaitu, kami telah menggunakan dan akan terus menggunakan istilah "mode gelap" dan "mode malam" secara bergantian di seluruh artikel ini, meskipun secara teknis keduanya dapat menjelaskan dua fitur yang berbeda.

Istilah "mode malam" sering digunakan untuk fitur yang tersedia di sebagian besar ponsel cerdas modern, yang menghilangkan sebagian atau seluruh cahaya biru dari layar Anda saat malam tiba untuk mengurangi dampak waktu layar pada siklus tidur Anda.

Namun, seperti yang kami jelaskan sebelumnya, kedua istilah tersebut dapat digunakan secara bergantian, yang merupakan pendekatan yang kami pilih dalam posting ini.

Sekarang setelah kita menyelesaikannya, mari kita lihat bagaimana Anda dapat menambahkan mode gelap (atau malam) ke situs web WordPress Anda.

​Cara Menambahkan Mode Gelap ke Situs WordPress Anda Menggunakan Plugin Mode Gelap WP

Sekarang setelah Anda mengetahui semua alasan mengapa Anda ingin menambahkan mode gelap ke situs WordPress Anda, kami akan menunjukkan cara melakukannya melalui empat langkah sederhana.

Teman-teman kami dari perusahaan desain web di Miami membantu kami membuat panduan langkah demi langkah ini yang mengandalkan plugin khusus yang disebut WP Dark Mode.

1. Instal Plugin

Meskipun ada beberapa plugin WordPress mode gelap, kami menemukan WP Mode Gelap sebagai yang paling ramah pengguna dan dapat diandalkan.

Ini adalah plugin yang memungkinkan Anda membangun versi gelap situs Anda dengan cepat dan mudah, tanpa perlu berurusan dengan pengaturan atau kode yang rumit.

Seperti yang Anda harapkan, Direktori Plugin WordPress adalah tempat Anda dapat menemukan alat ini.

Kami menganggap Anda telah menambahkan plugin ke situs Anda sebelumnya, tetapi untuk berjaga-jaga, yang perlu Anda lakukan hanyalah membuka dasbor admin dan memilih Tambahkan Baru dari tab Plugin .

Dari sana, Anda dapat menemukan WP Dark Mode dan klik Instal Sekarang dan Aktifkan .

2. Aktifkan Pengaturan yang Diinginkan

Anda dapat mengaktifkan dan menonaktifkan mode gelap di tab Pengaturan Umum . Setelah Anda membuka tab ini, Anda akan melihat bahwa dua opsi sudah aktif secara default.

Ini adalah Aktifkan Mode Gelap Frontend dan Aktifkan Mode Gelap Sadar OS .

Yang pertama mengaktifkan mode gelap di situs web Anda, sedangkan yang kedua berarti bahwa fitur tersebut akan diaktifkan secara otomatis jika OS atau browser pengguna disetel ke Mode Gelap.

Pilihan lainnya adalah Menjadikan Mode Gelap Default . Yang ini cukup jelas — jika Anda mengaktifkannya, semua pengguna akan melihat versi gelap situs web Anda terlepas dari preferensi mereka.

3. Nyalakan dan Sesuaikan Saklar Mengambang

Jika Anda ingin memberi pengguna opsi untuk beralih antara mode gelap dan terang kapan saja, Anda juga dapat mengaktifkan Opsi Show Floating Switch .

Opsi ini akan melakukan persis seperti yang tertulis di kaleng — tempatkan sakelar di ujung depan situs Anda, memungkinkan pengguna untuk mengaktifkan atau menonaktifkan mode gelap sesuka mereka.

Anda dapat dipusingkan dengan penempatan dan gaya ikon di bagian Pengaturan Tampilan. Pilihan Anda dalam hal gaya agak terbatas dalam versi gratis plugin, tetapi fungsionalitas utama (mengaktifkan atau menonaktifkan mode gelap) ada di sana.

4. Bereksperimenlah dengan Skema Warna Mode Gelap yang Berbeda

Pada titik ini, situs WordPress Anda memiliki mode gelap yang berfungsi penuh, dan jika hanya itu yang Anda cari, Anda dapat melewati langkah ini.

Namun, jika Anda tidak ingin situs Anda terlihat umum, kami sangat menyarankan untuk menyesuaikan warna mode gelap Anda. Anda akan menemukan semua opsi yang Anda butuhkan di bagian Pengaturan Gaya .

Layar ini menawarkan palet warna yang dapat bekerja dengan identitas visual situs Anda.

Seperti yang Anda bayangkan, versi gratis dari plugin WP Dark Mode menawarkan opsi yang agak terbatas di sini, tetapi Anda harus dapat menemukan solusi yang sesuai.

Jika Anda ingin menyesuaikan warna lebih lanjut, versi premium menyediakan rentang palet warna prasetel yang lebih luas dan memungkinkan Anda membuat skema sendiri.

​Bonus — Mengaktifkan Mode Gelap di Dasbor Admin WordPress

Jika Anda akan menawarkan kepada pelanggan dan prospek Anda semua manfaat mode gelap di bagian depan situs WordPress Anda, mengapa tidak memberikan rasa hormat yang sama kepada diri Anda sendiri dan menambahkan mode tersebut ke dasbor admin Anda juga?

Jika skema warna default WordPress terlalu terang untuk selera Anda, plugin WP Dark Mode memiliki solusinya. Berikut cara melakukannya:

  1. Instal plugin WP Dark Mode — tidak banyak yang bisa dijelaskan di sini. Lihat bagian di atas untuk petunjuk tentang cara menyelesaikan langkah ini.
  2. Aktifkan Mode Gelap Backend — opsi ini berada di tab yang sama dengan pengaturan penting lainnya yang telah kita bicarakan sebelumnya ( Pengaturan Umum ). Anda harus menavigasi ke bagian ini dan membalik sakelar yang berjudul Aktifkan Mode Gelap Backend. Jangan lupa untuk menggulir ke bawah dan klik Simpan Pengaturan untuk menerapkan perubahan.
  3. Alihkan Mode Gelap di Dasbor Admin Anda — Dasbor Admin Anda sekarang akan memiliki tombol di bagian atas, memungkinkan Anda mengaktifkan mode gelap. Ini sangat berguna untuk situs web dengan banyak admin, karena setiap orang dapat mengaktifkan atau menonaktifkan mode gelap secara mandiri.
  4. (Opsional) Sesuaikan skema warna Dasbor Admin Anda — dengan mode gelap diaktifkan, Anda mungkin ingin mengganti beberapa warna agar semuanya terlihat lebih cantik. Untuk melakukan ini, navigasikan ke Users > Profile dan pilih palet yang Anda inginkan. Setelah Anda mengatur warna, klik Perbarui Profil untuk menerapkan pengaturan baru.

Dan hanya itu yang ada untuk itu. Kami harap panduan ini membantu Anda menerapkan mode gelap di situs WordPress serta Dasbor Admin Anda.

Peningkatan ini hampir terlalu mudah untuk diabaikan dengan plugin WP Dark Mode, jadi kami mendorong Anda untuk menambahkan fungsionalitas luar biasa ini ke situs Anda.

Penulis Bio: Christopher adalah spesialis pemasaran digital di Digital Strategy One dan blogger lepas. Dia fokus pada tren teknologi web baru dan distribusi suara digital di berbagai saluran. Di waktu luangnya, Christopher memainkan drum dan Magic: the Gathering.