วิธีเปิดใช้งานโหมดกลางคืนใน WordPress

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

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

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

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

วิธีเปิดใช้งานโหมดกลางคืนบนแดชบอร์ด WordPress

เราเริ่มต้นด้วยปลั๊กอิน Dark Mode สำหรับ WordPress ซึ่งช่วยให้คุณเปิดใช้งานโหมดกลางคืนบน WordPress Dashboard ใช้งานง่ายและฟรี

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

เมื่อติดตั้งปลั๊กอิน Dark Mode แล้ว ผู้ใช้ WordPress แต่ละคนจะมีตัวเลือกในการเปิดใช้งานบนแดชบอร์ดในโปรไฟล์ของพวกเขา:

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

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

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

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

วิธีเปิดใช้งานโหมดกลางคืนสำหรับผู้เยี่ยมชม WordPress ของคุณ

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

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

ปลั๊กอินนี้ เช่น Dark Mode นั้นฟรีโดยสมบูรณ์ และคุณมีอยู่ใน WordPress Plugin Directory

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

ในอินเทอร์เฟซการจัดการเมนู คุณต้องเปิดตัวเลือกหน้าจอที่มุมขวาบนเพื่อเปิดใช้งานตัวเลือกในการเพิ่มคลาส CSS ดังที่คุณเห็นในภาพหน้าจอต่อไปนี้:

เมื่อคุณทำเสร็จแล้ว เมื่อคุณจะแก้ไขรายการเมนูที่เราได้เพิ่มเข้าไปก่อน คุณจะเห็นฟิลด์เพิ่มเติมที่คุณสามารถเพิ่มคลาส CSS ได้ ที่นี่คุณต้องรวมคลาส CSS wp-night-mode คลาสนี้เป็นคลาสที่ WP Night Mode ต้องการระบุว่าควรใช้ไอเท็มใดเป็นสวิตช์โหมดกลางคืน

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

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

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

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

กลับไปที่เครื่องมือปรับแต่งแล้วคุณจะเห็นตัวเลือก CSS เพิ่มเติม หากคุณเลือก คุณจะเขียนกฎ CSS ได้ที่นั่น กฎเหล่านี้อาจเป็นประเภทต่อไปนี้:

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

โปรดทราบว่าสิ่งที่ปลั๊กอินทำจริงๆ คือการใช้คลาส CSS wp-night-mode-on ในแท็ก body ของเว็บไซต์ของคุณ ดังนั้น หากคุณต้องการแก้ไขพื้นหลังขององค์ประกอบ HTML และทำให้มืด สิ่งที่คุณต้องทำคือค้นหาตัวเลือกสำหรับองค์ประกอบนั้น และใช้การแก้ไขเมื่อแท็ก body มีคลาส wp-night-mode-on

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

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

คุณเป็นผู้ใช้ปกติของโหมดกลางคืนในแอปพลิเคชันของคุณหรือไม่? อย่าลืมแสดงความคิดเห็นด้านล่างด้วยความคิดเห็นของคุณ!

ภาพเด่นโดย Priscilla Du Preez บน Unsplash