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

เผยแพร่แล้ว: 2022-06-16

เมื่อ Instagram และเว็บไซต์และแอพหลักสองสามแห่งเพิ่มโหมดมืดในเดือนตุลาคม 2019 เราพบว่าผู้คนสนใจฟีเจอร์นี้เพิ่มขึ้นอย่างมาก

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

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

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

โอเค ข้อสุดท้ายอาจจะดูเป็นอัตวิสัยเล็กน้อย แต่เรากำลังยึดติดกับมัน

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

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

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

แต่ก่อนอื่น เรามาดูกันว่าโหมดมืดคืออะไรและคุณประโยชน์ที่โดดเด่นที่สุด อ่านต่อ!

​โหมดมืดคืออะไรและเหตุใดจึงมีประโยชน์

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

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

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

ตัวเลือกในการเปิดใช้งานโหมดมืดมีอยู่ในระบบปฏิบัติการและเว็บเบราว์เซอร์ที่ทันสมัยส่วนใหญ่

ประโยชน์ที่โดดเด่นที่สุดของโหมดมืด

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

ดังนั้น ประโยชน์ของโหมดมืดมีดังต่อไปนี้:

  • ปวดตาน้อยลง
  • ลดการใช้พลังงานและยืดอายุแบตเตอรี่
  • แสงสีขาวจากหน้าจอน้อยลง
  • ใช้เวลากับเพจของคุณมากขึ้น

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

โชคดีที่การติดตั้งปลั๊กอิน WP Dark Mode สามารถทำให้กระบวนการนี้ตรงไปตรงมา รวมทั้งให้คุณควบคุมลักษณะที่ปรากฏของโหมดมืดของเว็บไซต์ของคุณได้ทุกรูปแบบ

โหมดมืดกับโหมดกลางคืน

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

คำว่า "โหมดกลางคืน" มักใช้สำหรับคุณลักษณะที่มีอยู่ในสมาร์ทโฟนรุ่นใหม่ๆ ส่วนใหญ่ ซึ่งจะลบแสงสีน้ำเงินทั้งหมดหรือบางส่วนออกจากหน้าจอของคุณในเวลากลางคืน เพื่อลดผลกระทบของเวลาหน้าจอในรอบการนอนหลับของคุณ

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

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

วิธีเพิ่ม Dark Mode ให้กับเว็บไซต์ WordPress ของคุณโดยใช้ปลั๊กอิน WP Dark Mode

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

เพื่อนของเราจากบริษัทออกแบบเว็บไซต์ในไมอามี่ช่วยเราสร้างคำแนะนำทีละขั้นตอนซึ่งอาศัยปลั๊กอินพิเศษที่เรียกว่า WP Dark Mode

1. ติดตั้ง Plugin

แม้ว่าจะมีปลั๊กอิน WordPress โหมดมืดอยู่หลายตัว แต่เราพบว่า WP Dark Mode นั้นใช้งานง่ายและน่าเชื่อถือที่สุด

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

อย่างที่คุณคาดไว้ ไดเรกทอรีปลั๊กอินของ WordPress คือที่ที่คุณจะพบเครื่องมือนี้

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

จากที่นั่น คุณจะพบ WP Dark Mode แล้วคลิก Install Now และ Activate

2. เปิดการตั้งค่าที่ต้องการ

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

สิ่งเหล่านี้คือ เปิดใช้งาน Frontend Dark Mode และ Enable OS Aware Dark Mode

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

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

3. เปิดและปรับแต่ง Floating Switch

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

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

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

4. ทดลองกับชุดรูปแบบสีโหมดมืดที่แตกต่างกัน

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

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

หน้าจอนี้มีจานสีที่สามารถทำงานร่วมกับเอกลักษณ์ทางภาพของไซต์ของคุณได้

อย่างที่คุณอาจจินตนาการได้ ปลั๊กอิน WP Dark Mode เวอร์ชันฟรีมีตัวเลือกที่ค่อนข้างจำกัด แต่คุณควรจะสามารถหาวิธีแก้ไขที่เหมาะสมได้

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

​โบนัส — การเปิดใช้งาน Dark Mode บน WordPress Admin Dashboard

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

หากชุดรูปแบบสีเริ่มต้นของ WordPress สว่างเกินไปสำหรับรสนิยมของคุณ ปลั๊กอิน WP Dark Mode มีวิธีแก้ปัญหา นี่คือวิธีการ:

  1. ติดตั้งปลั๊กอิน WP Dark Mode — ไม่ต้องอธิบายมากที่นี่ ดูหัวข้อด้านบนสำหรับคำแนะนำเกี่ยวกับวิธีการทำตามขั้นตอนนี้ให้เสร็จสิ้น
  2. เปิดใช้งานโหมดแบ็กเอนด์มืด — ตัวเลือกนี้อยู่ในแท็บเดียวกับการตั้งค่าที่จำเป็นอื่นๆ ที่เราพูดถึงก่อนหน้านี้ ( การตั้งค่าทั่วไป ) คุณจะต้องไปที่ส่วนนี้และพลิกสวิตช์ที่มีชื่อว่า Enable Backend Darkmode อย่าลืมเลื่อนลงและคลิก บันทึกการตั้งค่า เพื่อใช้การเปลี่ยนแปลง
  3. สลับโหมดมืดบนแดชบอร์ดการดูแลระบบของ คุณ ตอนนี้แดชบอร์ดผู้ดูแลระบบจะมีสวิตช์ที่ด้านบน ให้คุณเปิดโหมดมืดได้ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับเว็บไซต์ที่มีผู้ดูแลหลายคน เนื่องจากแต่ละคนสามารถเปิดหรือปิดโหมดมืดได้อย่างอิสระ
  4. (ไม่บังคับ) ปรับรูปแบบสีของแดชบอร์ดผู้ดูแลระบบ — เมื่อเปิดโหมดมืดไว้ คุณอาจต้องการเปลี่ยนสีบางส่วนเพื่อทำให้ทุกอย่างดูสวยงามยิ่งขึ้น ในการดำเนินการนี้ ให้ไปที่ ผู้ใช้ > โปรไฟล์ แล้วเลือกจานสีที่คุณต้องการ เมื่อคุณตั้งค่าสีแล้ว ให้คลิก อัปเดตโปรไฟล์ เพื่อใช้การตั้งค่าใหม่

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

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

ผู้เขียน Bio: คริสโตเฟอร์เป็นผู้เชี่ยวชาญด้านการตลาดดิจิทัลที่ Digital Strategy One และบล็อกเกอร์อิสระ เขามุ่งเน้นไปที่แนวโน้มเทคโนโลยีเว็บใหม่และการกระจายเสียงดิจิทัลในช่องทางต่างๆ ในเวลาว่าง คริสโตเฟอร์เล่นกลองและ Magic: the Gathering