Mode Gelap WordPress Tanpa Plugin – Mungkinkah?

Diterbitkan: 2022-10-18

Daftar isi

Tentang Mode Gelap WordPress Tanpa Plugin

Anda mungkin telah membebani mata Anda dengan menghabiskan banyak waktu di depan layar. Jadi, penting bagi Anda untuk menenangkan mereka saat menggunakan komputer. Salah satu cara paling efektif untuk mengistirahatkan mata adalah dengan mengubah pengaturan tampilan layar ke mode gelap.

Pemilik situs web harus dan dapat menambahkan mode gelap ke situs web mereka untuk meningkatkan pengalaman visual mereka. Jika Anda menggunakan WordPress untuk situs Anda, menambahkan mode gelap seharusnya mudah. Anda dapat melakukannya secara manual atau dengan menginstal plugin.

Kami setuju bahwa plugin adalah solusi terbaik untuk membuat versi gelap untuk situs WordPress Anda. Tetapi kami juga memiliki jawaban untuk mereka yang menganggap tidak mungkin mengaktifkan mode gelap WordPress tanpa plugin! Ya, itu mungkin.

Di sini, kita akan berbicara tentang menambahkan mode gelap dengan dan tanpa menggunakan plugin. Dan juga membahas mana yang unggul di mana. Nanti di artikel, Anda juga akan mengenal salah satu plugin favorit kami yang disebut QS Dark Mode.

Jadi tetap disini!

Manfaat menggunakan Mode Gelap di WordPress

Mengapa Anda harus menggunakan Mode Gelap di WordPress? Ada beberapa alasan bagus di baliknya. Anda secara pribadi menyadari kebutuhannya saat menjelajah di PC Anda di malam hari dengan mata lelah.

Menjadi pemilik situs web, Anda dapat membawa banyak manfaat bagi pengguna dengan menambahkan mode ini ke situs web Anda. Dan itu juga harus menambah nilai bisnis Anda.

Masih banyak lagi manfaatnya; mari kita cari tahu beberapa di bawah ini.

  • Meminimalkan cahaya putih yang datang dari layar komputer secara signifikan
  • Mengurangi ketegangan mata
  • Menghemat energi dan meningkatkan masa pakai baterai
  • Meningkatkan Waktu di Halaman dengan meningkatkan pengalaman pengguna
  • Memberikan aura estetis

Jadi ya, inilah alasan mengapa Mode Gelap adalah pilihan yang bagus untuk situs WordPress Anda.

Mode Gelap WordPress Tanpa Plugin – Mungkinkah?

Sekarang tiba bagian menyenangkan. Di sini kita akan melihat bagaimana Anda dapat mematikan lampu untuk situs WordPress Anda tanpa menginstal plugin apa pun.

Ada dua cara yang bisa Anda lakukan —

  1. Menambahkan mode gelap dengan menggunakan HTML, CSS, dan JQuery
  2. Menggunakan tema siap pakai dengan mode gelap diaktifkan

Mari kita lihat kedua metode ini secara rinci di bawah ini.

1) Tambahkan mode gelap dengan menggunakan HTML, CSS, dan JQuery

Jika Anda seorang pengembang tema, Anda sebaiknya memilih metode manual ini untuk menyertakan sakelar mode gelap ke situs WordPress Anda. Dalam metode ini, Anda perlu melalui sedikit pengkodean yang terkait dengan HTML, CSS, dan JQuery.

Jangan khawatir jika Anda kesulitan membuat kode karena Anda bisa mendapatkan potongan kode yang tersedia di sini. Jadi Anda cukup menyalin dan menempelkannya di tempat yang sesuai untuk mengaktifkan mode gelap.

Jangan ragu untuk menggunakan snippet ini karena open source dan gratis untuk digunakan.

  • Tambahkan Cuplikan Kode HTML

Pertama, tambahkan cuplikan HTML untuk membuat tombol sakelar mode gelap. Yang perlu Anda lakukan adalah menyalin dan menempelkan cuplikan berikut di header atau footer tema Anda.

<div class="wpnm-button">

<div class="wpnm-button-inner-left"></div>

<div class="wpnm-button-inner"></div>

</div>

  • Gaya dengan CSS

Sekarang Anda telah menata tombol atau pengalih mode gelap Anda dengan cuplikan CSS berikut.

/* Pengalih mode gelap */

.wpnm-button {

ukuran font: 16px

}

.wpnm-button-inner-left:empty {

margin-kiri: -0.625em

}

.wpnm-button-inner-left:before, .wpnm-button-inner-left:after {

ukuran kotak: kotak perbatasan;

margin: 0;

bantalan: 0;

/*transisi*/

-webkit-transisi: kemudahan masuk 0,4 detik;

-moz-transisi: 0,4 detik kemudahan masuk;

-o-transisi: 0,4 detik kemudahan masuk;

transisi: kemudahan masuk 0,4 detik;

garis besar: tidak ada

}

.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {

tampilan: blok sebaris;

ukuran font: 0.875em;

posisi: relatif;

bantalan: 0em;

tinggi garis: 1em;

kursor: penunjuk;

warna: rgba(149, 149, 149, 0,51);

berat font: normal

}

.wpnm-button .wpnm-button-inner-left:before {

isi: ";

tampilan: blok;

posisi: mutlak;

indeks-z: 1;

tinggi garis: 2.125em;

indentasi teks: 2.5em;

tinggi: 1em;

lebar: 1em;

margin: 0.25em;

/*batas-radius*/

-webkit-border-radius: 100%;

-moz-border-radius: 100%;

batas-radius: 100%;

kanan: 1.625em;

bawah: 0em;

latar belakang: #FFB200;

mengubah: memutar (-45deg);

kotak-bayangan: 0 0 0.625em putih

}

.wpnm-button .wpnm-button-inner-left:after {

isi: "";

tampilan: blok sebaris;

lebar: 2.5em;

tinggi: 1.5em;

-webkit-border-radius: 1em;

-moz-border-radius: 1em;

batas-radius: 1em;

latar belakang: rgba(255, 255, 255, 0,15);

vertikal-align: tengah;

margin: 0 0,625em;

perbatasan: 0.125em padat #FFB200

}

.wpnm-button.active .wpnm-button-inner-left:before {

kanan: 1,0625em;

box-shadow: 0.3125em 0.3125em 0 0 #eee;

latar belakang: transparan

}

.wpnm-button.active .wpnm-button-inner-left:after {

latar belakang: rgba(0, 0, 0, 0,15);

perbatasan: 0.125em putih solid

}

.wpnm-button .wpnm-button-inner-left {

warna: rgba (250, 250, 250, 0,51);

berat font: tebal

}

.wpnm-button.active .wpnm-button-inner-left {

warna: rgba(149, 149, 149, 0,51);

berat font: normal

}

.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {

warna: rgba (250, 250, 250, 0,51);

berat font: tebal

}

Cuplikan ini berasal dari sebuah plugin, dan kredit diberikan kepada penulis plugin, Marko Arula.

  • Tambahkan Kelas CSS Mode Gelap ke Tag Tubuh

Sekarang Anda perlu menambahkan kelas khusus ini ke tag tubuh karena ini akan memungkinkan Anda untuk menyesuaikan tata letak nanti.

Mari kita lakukan itu.

jQuery(fungsi($) {

/*Klik ikon mode gelap. Tambahkan kelas dan pembungkus mode gelap.

Simpan preferensi pengguna melalui sesi*/

$('.wpnm-button').klik(fungsi() {

//Tampilkan bulan atau matahari

$('.wpnm-button').toggleClass('aktif');

//Jika mode gelap dipilih

if ($('.wpnm-button').hasClass('active')) {

//Tambahkan kelas mode gelap ke badan

$('body').addClass('mode-gelap');

//Simpan preferensi pengguna ke Penyimpanan

localStorage.setItem('darkMode', benar);

} kalau tidak {

$('body').removeClass('mode-gelap');

localStorage.removeItem('darkMode');

}

})

//Periksa Penyimpanan. Tampilkan preferensi pengguna

if (localStorage.getItem(“darkMode”)) {

$('body').addClass('mode-gelap');

$('.wpnm-button').addClass('aktif');

}

})

Anda sekarang dapat memeriksa dan menguji apakah Kelas CSS "mode gelap" ditambahkan sebagai kelas isi. Selanjutnya, tambahkan latar belakang gelap untuk melihat apakah itu berfungsi dengan baik.

body.dark-mode * {

latar belakang: #333;

}

Karena kami melakukannya di browser atau sisi klien dan server tidak tahu apa-apa, Anda akan melihat bahwa mode gelap dimuat setelah mode terang dimuat. Di sini body dirender tanpa mode gelap beraksi, dan JS menunggu DOM dimuat sebelum menambahkan kelas.

Jadi itu bukan solusi sempurna bagi pengguna; harus ada cara yang lebih baik untuk meningkatkan pengalaman. Mari kita cari tahu apa.

  • Gunakan Cookie untuk Menyimpan Preferensi Pengguna Melalui Sesi

Jadi mari kita lihat bagaimana Anda dapat menambahkan kelas tubuh ke server untuk membuatnya dimuat sebelum disajikan. Cara terbaik untuk melakukannya adalah dengan menggunakan cookie untuk menyimpan preferensi pengguna. Dengan cara ini, Anda harus membuat cookie untuk preferensi mode gelap pengguna dan menambahkan kelas tubuh mode gelap yang sesuai.

Ini akan mengaktifkan kelas tubuh mode gelap saat html dirender. Jadi Anda perlu menulis ulang kode JS dengan cara berikut.

jQuery(fungsi($) {

//Buat objek cookie

var cookieStorage = {

setCookie: fungsi setCookie(kunci, nilai, waktu, jalur) {

var kedaluwarsa = new Date();

kedaluwarsa.setTime(kedaluwarsa.getTime() + waktu);

var pathValue = ”;

if (jenis jalur !== 'tidak terdefinisi') {

pathValue = 'jalur=' + jalur + ';';

}

document.cookie = kunci + '=' + nilai + ';' + pathValue + 'kedaluwarsa=' + kedaluwarsa.toUTCString();

},

getCookie: fungsi getCookie(kunci) {

var keyValue = document.cookie.match('(^|;) ?' + kunci + '=([^;]*)(;|$)');

mengembalikan nilai kunci? keyValue[2] : nol;

},

removeCookie: fungsi removeCookie(kunci) {

document.cookie = kunci + '=; Usia Maks = 0; jalur=/';

}

};

//Klik ikon mode gelap. Tambahkan kelas dan pembungkus mode gelap. Simpan preferensi pengguna melalui sesi

$('.wpnm-button').klik(fungsi() {

//Tampilkan bulan atau matahari

$('.wpnm-button').toggleClass('aktif');

//Jika mode gelap dipilih

if ($('.wpnm-button').hasClass('active')) {

//Tambahkan kelas mode gelap ke badan

$('body').addClass('mode-gelap');

cookieStorage.setCookie('yonkovNightMode', 'true', 2628000000, '/');

} kalau tidak {

$('body').removeClass('mode-gelap');

setTimeout(fungsi() {

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

//Periksa Penyimpanan. Tampilkan preferensi pengguna

if (cookieStorage.getCookie('yonkovNightMode')) {

$('body').addClass('mode-gelap');

$('.wpnm-button').addClass('aktif');

}

})

  • Tambahkan kelas mode gelap melalui filter kelas tubuh

Jadi kami telah menyiapkan cookie bernama "yonkovNightMode," Ini akan diaktifkan ketika pengguna memilih opsi mode gelap. Tetapi Anda harus mendapatkan cookie ini dengan PHP terlebih dahulu dan kemudian menambahkannya ke kelas tubuh.

Salin dan tempel cuplikan berikut di file functions.php di tema anak Anda.

<?php

/**

* Aktifkan mode tema gelap

* Bercabang dari https://wordpress.org/plugins/wp-night-mode/

*/

fungsi yonkov_dark_mode($kelas) {

$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ? $_COOKIE['yonkovNightMode'] : ”;

//jika cookie disimpan..

if ($yonkov_night_mode !== ”) {

// Tambahkan kelas tubuh 'mode gelap'

return array_merge($classes, array('mode gelap'));

}

kembalikan $kelas;

}

add_filter('body_class', 'yonkov_dark_mode');

Kamu sudah selesai

Jadi, Anda sebenarnya telah membuat prototipe yang berfungsi penuh dari tata letak mode gelap. Cuplikan diambil dari plugin WordPress open-source. Jadi Anda dapat menggunakannya ke salah satu situs WordPress Anda untuk menambahkan opsi mode gelap untuk pengalaman pengguna yang lebih baik.

2. Gunakan Tema WordPress Siap Pakai yang memiliki Opsi Mode Gelap

Bagaimana dengan memilih tema WordPress yang sudah jadi yang sudah memiliki tombol sakelar mode gelap yang terpasang. Dengan cara ini, Anda dapat menggunakan mode gelap di situs WordPress Anda tanpa menggunakan plugin. Ini juga akan membantu Anda menghindari penyesuaian karena sebagian besar tema perlu disesuaikan dengan Plugin Mode Malam atau kode CSS khusus.

Jadi apa saja tema WordPress yang mendukung mode gelap bersama dengan mode terang? Di sini, kami telah membawakan Anda beberapa tema WordPress populer dengan tata letak mode gelap. Mari kita cari tahu.

  • Dua Puluh Dua Puluh Satu: Ini adalah tema WordPress default yang hadir dengan tata letak mode gelap. Secara default, ini dinonaktifkan, dan Anda harus mengaktifkannya dari Opsi Tema.
  • Estera: Ini adalah tema WordPress populer untuk situs WooCommerce. Muncul dengan tombol sakelar mode gelap yang memungkinkan pengguna untuk beralih antara mode terang dan gelap.
  • HIghStarter: Tema WordPress ringan ini populer untuk situs portofolio. Ini memiliki sakelar mode gelap tanpa plugin yang diinstal secara terpisah. Dan itu memungkinkan pengguna untuk beralih antara mode terang dan gelap.
  • Mate: Ini adalah tema WordPress yang dirancang dengan indah yang memungkinkan pemilihan antara mode terang atau gelap langsung dari header situs.

Manual Atau Plugin Metode Mana Yang Digunakan Untuk Aktivasi Mode Gelap?

Kami telah membahas bagaimana Anda dapat mengaktifkan mode gelap secara manual di situs web WP Anda. Dan kami tahu banyak dari Anda akan menganggap mengaktifkan mode gelap itu merepotkan, terutama dengan bagian pengkodean.

Jadi kami menyarankan Anda untuk menganggapnya sebagai opsi kedua. Karena ketika harus memilih antara metode manual atau plugin, kami lebih suka menggunakan opsi plugin karena dapat dengan cepat dan mudah menambahkan tombol sakelar mode gelap ke situs.

Berbicara tentang plugin yang sempurna, kami memiliki plugin favorit untuk direkomendasikan di sini: Plugin Mode Gelap QS. Ini adalah plugin yang membawa skema gelap yang indah ke situs Anda dan memungkinkan Anda mengatasi tren 'menjadi gelap'.

Mari kita periksa mengapa Anda harus menginstal plugin mode gelap — khususnya Plugin Mode Gelap QS dan tidak menggunakan metode manual.

Plugin Mode Gelap QS: Solusi Mode Gelap Sempurna

Ada beberapa alasan mengapa QS Dark Mode Plugin bisa menjadi solusi dark mode yang sempurna untuk website Anda. Beberapa di antaranya adalah:

  • Gratis
  • Dukungan CSS khusus
  • Gaya sakelar gelap yang berbeda, termasuk animasi dan teks CTA yang berbeda
  • Menawarkan mode gelap berbasis waktu
  • Opsi untuk mengoptimalkan lokasi tombol
  • Berbagai skema warna gelap
  • Gambar berbasis mode gelap dan dukungan ukuran font
  • Didukung WooCommerce

Mengenai pemasangan plugin, sama seperti memasang plugin lain ke situs WordPress Anda. Tetapi jika Anda masih dalam perbaikan, kami dapat membantu Anda dengan beberapa petunjuk di sini. Mari kita periksa.

  • Unduh plugin QS Mode dan unggah file ke direktori yang bersangkutan, yang umumnya direktori /wp-content/plugins/plugin-name
  • Untuk menginstal plugin langsung dari layar plugin WordPress. Klik Plugins > Add New dari dasbor WP, selanjutnya cari plugin di bilah pencarian, dan klik install.
  • Aktifkan plugin QS Dark Mode dari layar 'Plugin'
  • Setelah diaktifkan, mode gelap Anda harus diaktifkan.
  • Anda dapat beralih ke mode gelap dengan mengklik sakelar di layar Anda
  • Klik sakelar lagi untuk mengaktifkan mode cahaya
  • Untuk menyesuaikan, Anda dapat memeriksa semua pengaturan di WP Admin Dark Mode Sidebar dari plugin

Bisakah Saya Menggunakan Skema Warna Saat Mode Gelap Aktif?

Mode gelap terlihat mengurangi jumlah warna putih atau cahaya biru yang berasal dari layar. Itu tidak berarti Anda harus menjadi hitam sepanjang waktu. Anda masih dapat memilih di antara skema warna bahkan ketika mode gelap diaktifkan, seperti yang dapat Anda lakukan dengan Plugin Mode Gelap QS.

Namun warna dipilih sedemikian rupa sehingga konten ditampilkan dalam kontras tinggi dengan latar depan terang dan warna bg gelap.

Kesimpulan

Jadi apakah mungkin untuk menambahkan mode gelap ke situs WordPress tanpa plugin. Tetapi kecuali Anda sendiri adalah pengembang tema atau pembuat kode, Anda tidak akan lebih suka menggunakan metode manual ini untuk melakukan itu.

Sebagai gantinya, akan lebih bijaksana dan lebih mudah untuk menambahkan plugin mode gelap. Kami telah menyebutkan plugin favorit kami, Plugin QS Dark Mode, yang dapat Anda pertimbangkan untuk membuat situs Anda lebih rapi dan menyejukkan mata.

Ingat, menjadi gelap bukan hanya tentang kesehatan mata Anda, tetapi juga tentang daya tarik estetika situs web Anda. Dengan melakukan itu, Anda dapat menambahkan aura ke keseluruhan pengalaman visual sekaligus meningkatkan keterlibatan pengguna.

Astra Pro vs Elementor Pro – Perbandingan Head To Head