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

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

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

ขั้นตอนที่ 1: ไปที่ตัวแก้ไขบล็อก

จากแดชบอร์ด WordPress ของคุณ ไปที่ ลักษณะ>ตัวแก้ไข (ลูกศรสีแดงในภาพด้านบน) สิ่งนี้จะนำคุณไปสู่เครื่องมือแก้ไขไซต์

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

ขั้นตอนที่ 2: เพิ่ม CSS ที่กำหนดเอง

จากนั้นคลิกที่ไอคอน "สไตล์" ที่มุมขวาบนของตัวแก้ไขบล็อก

คลิกไอคอน "เพิ่มเติม" (ไอคอนสามจุดแนวตั้ง) จากนั้นคลิก "CSS เพิ่มเติม"

วางโค้ด CSS ต่อไปนี้ลงในช่องข้อความ "CSS เพิ่มเติม":

.current-menu-item {
  color: #e23f1b;
}

แทนที่ค่าระหว่างสัญลักษณ์ “#” และ “;” สัญลักษณ์ที่มีรหัสเลขฐานสิบหกสำหรับสีใดๆ ที่คุณต้องการใช้ (คุณสามารถรับค่ารหัสสีเลขฐานสิบหกภายใน WordPress ได้โดยการแก้ไขสิ่งใด ๆ ที่มีค่าสี หรือโดยใช้เครื่องมือสีเช่น ฮิวมิ้นต์ or Coolors).

คลิกปุ่ม "บันทึก" ที่ด้านบนของ Block Editor จากนั้นคลิก "บันทึก" อีกครั้ง

ขั้นตอนที่ 3: ดูหน้า

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

การแก้ไขปัญหา

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

ธีมที่ไม่บล็อกหรือธีมบล็อกของบุคคลที่สาม

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

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

จากนั้นคลิก "การนำทาง" คลิกไอคอน "แก้ไข" ถัดจากชื่อเมนูหลักของเว็บไซต์ของคุณ

คลิกที่เมนูนำทางเพื่อแก้ไข จากนั้นคลิก "ไปที่บล็อกการนำทางหลัก" ในแถบด้านข้างการตั้งค่าบล็อกหากไม่ได้อยู่ที่นั่นตามค่าเริ่มต้น

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

โดยคลิกไอคอน "ตัวเลือก" ถัดจากรายการ จากนั้นคลิก "ลบ ____" จากนั้นคลิกไอคอน "+" ที่ด้านล่างของรายการหน้า

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

Pin It เมื่อ Pinterest