วิธีเพิ่ม Dark Mode ให้กับเว็บไซต์ WordPress ของคุณ

เผยแพร่แล้ว: 2021-06-14

โหมดมืดกำลังเป็นที่นิยมมากในปัจจุบันทั้งในเว็บไซต์และแอป ความสามารถในการสลับไปมาระหว่างโหมดมืดและโหมดปกติทำให้ผู้ใช้มีอิสระในการอ่านหรือดูเว็บไซต์ตามความต้องการของเขา

โหมดมืดมีประโยชน์อย่างมากโดยเฉพาะเมื่อคุณอ่านเว็บไซต์ของคุณในเวลากลางคืน วิธีนี้ช่วยให้แน่ใจว่าแสงที่ส่องมายังดวงตาของคุณน้อยลง ส่งผลให้อาการปวดตาลดลง

นอกจากนี้ โหมดมืดมักจะลดการเปิดรับแสงสีน้ำเงินที่เป็นอันตราย และมักจะเพิ่มอายุการใช้งานแบตเตอรี่ของอุปกรณ์ที่คุณใช้เพื่ออ่านเว็บไซต์

คุณต้องการเพิ่มโหมดมืดในเว็บไซต์ WordPress ของคุณหรือไม่? ถ้าใช่ แสดงว่าคุณมาถูกที่แล้ว เพราะวันนี้ เราจะให้คำแนะนำฉบับสมบูรณ์เกี่ยวกับวิธีที่คุณสามารถเลือกโหมดมืดของ WordPress ในเว็บไซต์ WordPress ของคุณในส่วนหน้าและส่วนผู้ดูแลระบบ

โหมดมืดคืออะไร?

คุณสามารถค้นหาโหมดมืดในมือถือ พีซี หรือแล็ปท็อป และโหมดมืดจะลดปริมาณแสงสีขาวที่ปล่อยออกมาจากหน้าจอ แกดเจ็ตบางตัวมีโหมดกลางคืนที่ใช้โทนสีที่อุ่นกว่าแทนโทนสีที่เย็นกว่า โหมดมืดใช้แนวทางที่แตกต่างออกไปโดยเติมพื้นหลังด้วยเฉดสีเข้ม

ทำไมต้องเพิ่มโหมดมืดในเว็บไซต์ WordPress ของคุณ?

โหมดมืดช่วยให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้นในการดูเว็บไซต์ของคุณในเวลากลางคืน เนื่องจากช่วยลดแสงที่ปล่อยออกมาโดยตรง ซึ่งค่อนข้างจะระคายเคืองและเป็นอันตรายต่อดวงตา นอกจากนี้ การเพิ่มปลั๊กอินโหมดมืดในไซต์ WordPress ของคุณหมายความว่าคุณจะมีตัวเลือกในการเปิดและปิดโหมดมืด นอกจากนี้ คุณจะมีอำนาจมากขึ้นในการที่ไซต์ของคุณมองในโหมดมืด โหมดมืดยังทำงานเหมือนโหมดกลางคืนในเว็บไซต์ WordPress

ด้วยปลั๊กอิน WordPress โหมดมืด คุณไม่จำเป็นต้องใช้งานส่วนหน้าเท่านั้น แต่คุณสามารถใช้โหมดมืดสำหรับผู้ดูแลระบบ WordPress ได้เช่นกัน ซึ่งหมายความว่าคุณสามารถมีประสบการณ์การทำงานที่ดีขึ้น3 ตัวคุณเองในตอนกลางคืน

วิธีเพิ่ม Dark Mode ให้กับเว็บไซต์ WordPress ของคุณ

ด้านล่างเราจะสอนวิธีเพิ่มโหมดมืดในเว็บไซต์ WordPress ของคุณ โปรดทำตามขั้นตอนต่างๆ อย่างระมัดระวัง เนื่องจากวิธีนี้ง่ายมากและใช้เวลาเพียงไม่กี่นาทีในการดำเนินการให้เสร็จสิ้น

Droit Dark Mode บน WordPress.org

ขั้นตอนที่ 1: การติดตั้ง Plugin

ขั้นตอนแรกและสำคัญที่สุดคือการดาวน์โหลดและติดตั้ง Droit Dark Mode โดย DroitThemes นี่เป็นหนึ่งในปลั๊กอิน WordPress dark mode ที่ดีที่สุดในตลาดและคุณสามารถเข้าถึงเวอร์ชันฟรีเพื่อตรวจสอบคุณสมบัติก่อนที่จะจ่ายเงินจริง ๆ

มี 3 วิธีในการติดตั้งปลั๊กอิน WordPress

วิธีที่ 1: ในตอนแรก ควรดาวน์โหลดและคลายซิปปลั๊กอิน หลังจากนั้นเปิดเครื่องรูดไฟล์ 'droit-dark-mode.zip' และวางไว้ในไดเร็กทอรี ' /wp-content/plugins/ ' ในขั้นตอนสุดท้าย คุณต้องไปที่ Plugins » Admin และเปิดใช้งานปลั๊กอิน

วิธีที่ 2: อีกขั้นตอนหนึ่งที่คุณสามารถทำตามได้คือการติดตั้งปลั๊กอินโหมดมืด นี้ แดชบอร์ด » ปลั๊กอิน » เพิ่มใหม่ » ค้นหา 'Droit Dark Mode' » ติดตั้ง » Active

Droit Dark Mode บนหน้าค้นหาปลั๊กอิน

วิธีที่ 3: นอกจากนี้ยังมีขั้นตอนอื่น ในตอนแรก ควรดาวน์โหลด 'droit-dark-mode.zip' จากนั้นทำตามขั้นตอน: แดชบอร์ด > ปลั๊กอิน > เพิ่มใหม่ > อัปโหลดไฟล์ zip » ใช้งานอยู่

ขั้นตอนที่ 2: ตรวจสอบโหมดมืด

หลังจากเปิดใช้งาน ไปที่หน้าการ ตั้งค่า ผู้ดูแลระบบ WordPress » Droit Dark Mode และเลือกแท็บ การตั้งค่าทั่วไป คุณควรถูกส่งไปที่นั่นทันที เมื่ออุปกรณ์ของผู้เยี่ยมชมถูกตั้งค่าเป็นโหมดมืด พวกเขาจะดูเวอร์ชันโหมดมืดของเว็บไซต์ของคุณทันที

การตั้งค่าทั่วไปในโหมด Droit Dark

นอกจากนี้คุณยังจะพบตัวเลือก “สลับรูปแบบ” ที่คุณสามารถเปิดหรือปิดได้ตามต้องการ โดยค่าเริ่มต้น มันจะเปิดอยู่ สวิตช์นี้สามารถแสดงได้ทุกที่บนเว็บไซต์ของคุณ และผู้ใช้สามารถเลือกระหว่างโหมดมืดและโหมดปกติได้โดยใช้สวิตช์นี้

คุณจะพบสวิตช์นี้ตามค่าเริ่มต้นที่มุมล่างขวาของเว็บไซต์ของคุณ เยี่ยมชมเว็บไซต์ของคุณในฐานะผู้ดูทั่วไป และคุณสามารถคลิกสวิตช์เพื่อเปลี่ยนเว็บไซต์ของคุณในโหมดมืดได้อย่างง่ายดาย

ขั้นตอนที่ 3: การตั้งค่าขั้นสูง

Droit Dark Mode มีทั้งปลั๊กอินฟรีและเวอร์ชันที่ต้องชำระเงิน รุ่นฟรีไม่อนุญาตให้คุณมีตัวเลือกการปรับแต่งมากเกินไปในขณะที่รุ่นที่ต้องชำระเงินจะให้คุณปรับแต่งปลั๊กอินโหมดมืดนี้ในแบบที่คุณต้องการ

คุณสามารถค้นหาตัวเลือกการปรับแต่งได้ในหน้า การตั้งค่า » Droit Dark Mode » การตั้งค่าขั้นสูง และมีตัวเลือกการปรับแต่งเพิ่มเติม เมื่อคุณตัดสินใจว่าจะใช้โหมดมืดหรือสว่าง ระบบจะจัดเก็บไว้ตามค่าเริ่มต้น

การเปลี่ยนรูปแบบสวิตช์

ตัวอย่างเช่น หากต้องการปรับเปลี่ยนรูปแบบของตัวสลับโหมดมืด เพียงคลิกแท็บ การตั้งค่าการแสดงผล : มีรูปแบบสวิตช์หลายแบบให้เลือกและใช้งานบนเว็บไซต์ของคุณ คุณยังสามารถใช้วิดเจ็ต Elementor เพื่อเพิ่มปุ่มสวิตช์ให้กับเนื้อหาของโพสต์หรือหน้าใดก็ได้

บล็อก Gutenberg อาจใช้เพื่อเพิ่มปุ่มสวิตช์ให้กับเนื้อหาของโพสต์หรือหน้าใดก็ได้

จะดีแค่ไหนหากคุณมีตัวเลือกในการตั้งค่าสวิตช์ในตำแหน่งต่างๆ ตอนนี้ก็เป็นไปได้มากกว่าปลั๊กอินโหมดมืดของ Droit เพราะช่วยให้คุณสามารถวางสวิตช์ในตำแหน่งต่างๆ ในเว็บไซต์ของคุณโดยเริ่มจากซ้ายบน ซ้ายล่าง ขวาบน ล่างขวา กลางล่าง กลางบน และอื่นๆ

ในเวอร์ชันฟรี; คุณจะมีตัวเลือกตัวสลับโหมดมืด 2 ตัวเลือกให้เลือก

แสดงการตั้งค่าในโหมด Droit Dark

ผู้ใช้สามารถเปลี่ยนตำแหน่งสวิตช์และวางไว้บนเนื้อหา โพสต์ หรือหน้าใดก็ได้โดยใช้วิดเจ็ต Elementor หรือ Gutenberg Block สามารถย้ายสวิตช์ในตำแหน่งต่างๆ ได้เพียงคลิกสวิตช์แล้วดึงเมาส์ผ่านเพื่อค้นหาตำแหน่งที่ถูกต้อง

การเปลี่ยนสีของโหมดมืด

คุณจะมีพรีเซ็ตสีหลายแบบให้เลือกจากตัวเลือกสีที่ตั้งไว้ล่วงหน้า 10+ ค่าเพื่อเปลี่ยนสีของโหมดมืดอย่างรวดเร็วจากจานสี เพียงไปที่การตั้งค่าโหมดมืดของ Droit จากนั้นเลื่อนไปที่การตั้งค่าสไตล์ แล้วคุณจะพบการตั้งค่าตัวเลือกสีที่คุณสามารถปรับแต่งได้ตามที่คุณต้องการ

นอกจากนี้ ธีมหลักทั้งหมดในตลาดยังใช้งานได้กับปลั๊กอิน Droit Dark Mode ดังนั้นคุณจะได้รับการคุ้มครอง

ในเวอร์ชันฟรี คุณจะมีตัวเลือกให้เลือกระหว่าง 2 สี

ตั้งค่าสีล่วงหน้าในโหมด Droit Dark

วิธีเพิ่มโหมดมืดให้กับผู้ดูแลระบบ WordPress ของคุณ

จนถึงตอนนี้ เราได้แสดงวิธีเพิ่มปลั๊กอิน Droit Dark Mode ให้กับเว็บไซต์ WordPress ของคุณแล้ว ตอนนี้ผมจะแสดงให้คุณเห็นว่าเราจะเพิ่มสิ่งนี้ในผู้ดูแลระบบได้อย่างไร

อย่างที่คุณอาจทราบแล้วว่า WordPress มีชุดสีสำหรับผู้ดูแลระบบหลายแบบ แต่น่าเศร้าที่ไม่มีใครมีโหมดมืดและสามารถลดแสงได้ ดังนั้น วิธีแก้ปัญหาที่ง่ายและมีประสิทธิภาพที่สุดคือการใช้ปลั๊กอิน Droit Dark Mode

ขั้นตอนที่ 1: วิธีการเพิ่ม

เพียงไปที่แท็บการตั้งค่าทั่วไปในหน้าการตั้งค่า»โหมดมืด จากนั้นเปิดการตั้งค่า "เปิดใช้งานโหมดแบ็คเอนด์มืด" อย่าลืมบันทึกการตั้งค่าของคุณโดยคลิกปุ่มบันทึกการตั้งค่าที่ด้านล่างของหน้า: และตอนนี้ควรมีสวิตช์ที่ด้านบนของแถบผู้ดูแลระบบที่จะช่วยให้คุณสลับไปมาระหว่างโหมดสว่างและโหมดมืดได้อย่างง่ายดาย

เปิดใช้งานโหมดแบ็กเอนด์มืดบน Droit Dark Mode

ขั้นตอนที่ 2: ตัวเลือกและคุณสมบัติการปรับแต่งเพิ่มเติม

ให้เราดูคุณสมบัติบางอย่างที่คุณสามารถหาได้ในปลั๊กอินโหมดมืดในพื้นที่ผู้ดูแลระบบ

การเลือกสี

เลือกพรีเซ็ตสีสำหรับแดชบอร์ดผู้ดูแลระบบ ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ของคุณ คุณอาจตั้งค่าสีล่วงหน้าสำหรับแดชบอร์ดผู้ดูแลระบบที่มืดและสว่าง ซึ่งหมายความว่าคุณจะมีสิทธิ์เข้าถึงอย่างเต็มที่เพื่อเลือกสีตามตัวเลือกของคุณในขณะที่ทำงานบนเว็บไซต์ WordPress ของคุณ

เนื่องจากโหมดมืดไม่ใช่ชุดสีของผู้ดูแลระบบ คุณจึงสามารถรวมเข้ากับชุดสีที่มีอยู่แล้วใน WordPress ได้อย่างง่ายดาย โดยไปที่ ผู้ใช้ » โปรไฟล์ และเลือกตัวเลือกภายใต้ Admin Color Scheme จากเมนูแบบเลื่อนลง เป็นที่น่าสังเกตว่าคุณจะต้องปิดโหมดมืดเพื่อเข้าถึงตัวเลือกชุดสีของผู้ดูแลระบบ:

การตั้งค่าผู้ใช้

การตั้งค่าโหมดกลางคืนสำหรับหน้าและโพสต์ต่างๆ

คุณจะมีตัวเลือกในการเปิด/ปิดโหมดมืด และเลือกจานสีต่างๆ ในการโพสต์แต่ละรายการตามที่คุณเลือก นอกจากนี้ สำหรับแต่ละหมวดหมู่ คุณสามารถเปิด/ปิดโหมดมืดและระบุจานสีแยกต่างหากได้

ตัวเลือกการปรับแต่งเหล่านี้ใช้งานได้ดีโดยเฉพาะเมื่อคุณต้องการให้เว็บไซต์ของคุณโดดเด่นกว่าคู่แข่งรายอื่นๆ

ไฮไลท์สินค้าต่างๆ สารบัญ

สมมติว่าคุณต้องการเปิดหรือปิดใช้งานโหมดมืดหรือโหมดกลางคืนในผลิตภัณฑ์ที่แตกต่างกันและเฉพาะหรืออาจตั้งค่าสีอื่น ปลั๊กอินมืด WordPress นี้จะช่วยให้คุณทำอย่างนั้นได้

สมมติว่าคุณต้องการเน้นเนื้อหาเฉพาะ ปลั๊กอิน WordPress นี้ก็ง่ายเช่นกัน เพราะสำหรับหน้า/โพสต์ทุกประเภท คุณสามารถวางปุ่มสลับโหมดมืดก่อน/หลังเนื้อหาได้

สีที่กำหนดเองและสลับข้อความ

คุณยังสามารถเลือกและตั้งค่าสีที่กำหนดเองสำหรับย่อหน้า ลิงก์ ปุ่มหัวเรื่อง และองค์ประกอบ UI อื่นๆ ทั้งหมดของคุณ ตัวเลือกการปรับแต่งมากมายที่คุณจะเบื่อที่จะเห็นตัวเลือกต่างๆ

คุณยังสามารถแก้ไขข้อความของสวิตช์โหมดมืดในที่มืดหรือสว่างได้

การปรับแต่งภาพ

รูปภาพเป็นสิ่งแรกที่ดึงดูดความสนใจของผู้ดูในเว็บไซต์ใดๆ ด้วยเวอร์ชัน Droit Dark Mode pro คุณสามารถแก้ไขความสว่าง ความทึบ และความคมชัดของภาพได้อย่างง่ายดาย

เพิ่มหรือลดความสว่าง ความทึบ และคอนทราสต์ตามที่คุณต้องการเพื่อให้เข้ากับเนื้อหาของคุณได้อย่างลงตัว

เคล็ดลับเล็ก ๆ น้อย ๆ: คุณสามารถใช้โหมดมืดในการเขียนบทความในโปรแกรมแก้ไขบล็อกของ WordPress ได้ เลือกโหมดที่คุณต้องการใช้โดยคลิกที่สัญลักษณ์สีเล็กๆ ที่มุมซ้ายบน: คุณต้องการอะไรอีกสำหรับประสบการณ์การทำงานที่ง่ายดาย ที่จะช่วยให้คุณไม่ต้องเครียดกับสายตา

บทสรุป

คุณอาจมาที่นี่เพราะต้องการทราบวิธีเพิ่มโหมดมืดในเว็บไซต์ WordPress และวันนี้เราเพิ่งทำเสร็จ ในบทความนี้ เราได้พูดถึงทุกสิ่งที่คุณต้องการเพื่อเพิ่มโหมดมืดในเว็บไซต์ WordPress ของคุณ

การเพิ่มโหมดมืดลงในไซต์ WordPress โดยตรงนั้นเป็นไปไม่ได้ และด้วยเหตุนี้ คุณจะต้องมีปลั๊กอินเพิ่มเติม และสำหรับเราแล้ว ปลั๊กอิน Droit Dark Mode นั้นทำงานได้ดีมากในการมอบโหมดมืดในเว็บไซต์ของคุณรวมถึงแผงการดูแลระบบ การปรับแต่งที่ปลั๊กอินนี้มอบให้นั้นยิ่งใหญ่มาก และคุณจะสนุกไปกับมันโดยไม่บ่น