วิธีการเพิ่มสไตล์ให้กับเมนูนำทางของคุณ

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

วิธีการ 1: วิธีการจัดรูปแบบเมนู WordPress ของคุณด้วยปลั๊กอิน

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

ขั้นแรกสิ่งที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน " CSS ฮีโร่ ". สำหรับรายละเอียดเพิ่มเติมโปรดดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress

CSS Hero เป็นปลั๊กอิน WordPress พรีเมี่ยมที่ให้คุณออกแบบธีม WordPress ของคุณเองโดยไม่ต้องเขียนโค้ดบรรทัดเดียว (ไม่มี HTML หรือ CSS ที่จำเป็น).

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

ตอนนี้คุณต้องคลิกที่ปุ่ม ฮีโร่ CSS บนแถบเครื่องมือ WordPress ของคุณ

CSS Hero นำเสนอโปรแกรมแก้ไขแบบ WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ "สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ"). การคลิกปุ่มนี้จะนำคุณไปยังเว็บไซต์ของคุณโดยมีแถบเครื่องมือลอย CSS Hero ทางด้านขวา

คุณต้องคลิกที่ไอคอนสีน้ำเงินที่ด้านบนเพื่อเริ่มแก้ไข

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

ในภาพหน้าจอด้านบนคุณจะเห็นรายการเมนูเมนูการนำทางและที่เก็บเมนูการนำทางเป็นต้น

สมมติว่าเราต้องการเปลี่ยนสีข้อความของรายการทั้งหมดในเมนูนำทาง ในกรณีนี้เราจะเลือกเมนูนำทางที่แตะทั้งเมนู

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

คุณสามารถคลิกคุณสมบัติที่คุณต้องการแก้ไข CSS Hero จะนำเสนอคุณด้วยส่วนต่อประสานที่เรียบง่ายซึ่งคุณสามารถทำการเปลี่ยนแปลงได้

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

เมื่อคุณทำการเปลี่ยนแปลงคุณจะมีตัวอย่างสดของผลลัพธ์สุดท้าย

เมื่อคุณพอใจกับการเปลี่ยนแปลงแล้วให้คลิกปุ่ม "บันทึก" บน " ฮีโร่ CSS เพื่อบันทึกการเปลี่ยนแปลงของคุณ

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

วิธีที่สอง: วิธีเปลี่ยนรูปแบบของเมนูการนำทางด้วยตนเอง

วิธีนี้ต้องการให้คุณแก้ไขไฟล์ธีม WordPress ของคุณ คุณควรใช้หากคุณเป็นนักพัฒนาและมีความรู้เกี่ยวกับการสร้างธีม WordPress

วิธีที่ดีที่สุดคือปรับแต่งธีม WordPress ของคุณโดยสร้างธีมลูก หากคุณเปลี่ยน CSS เพียงอย่างเดียวฉันขอเชิญคุณอ่านบทแนะนำของเราเกี่ยวกับ วิธีเพิ่มโค้ด CSS ที่กำหนดเองบน WordPress.

เมนูการนำทางของ WordPress แสดงขึ้นในรายการที่ไม่ได้เรียงลำดับ (รายการหัวข้อย่อย).

หากคุณใช้แท็ก php ต่อไปนี้แท็กดังกล่าวจะแสดงรายการโดยไม่มีคลาส CSS ที่เกี่ยวข้อง

รายการสัญลักษณ์แสดงหัวข้อย่อยของคุณจะมี "เมนู" ของชื่อคลาสที่มีแต่ละรายการมีคลาส CSS ของตัวเอง

สิ่งนี้สามารถใช้งานได้หากคุณมีตำแหน่งเมนูเดียว อย่างไรก็ตามชุดรูปแบบส่วนใหญ่มีหลายแห่งที่คุณสามารถแสดงเมนูการนำทาง

การใช้เฉพาะคลาส CSS เริ่มต้นอาจทำให้เกิดความขัดแย้งกับเมนูในที่อื่น ๆ

นี่คือเหตุผลที่คุณต้องกำหนดคลาส CSS และตำแหน่งเมนู โอกาสที่ธีม WordPress ของคุณกำลังทำอยู่แล้วโดยการเพิ่มเมนูการนำทางโดยใช้โค้ดดังนี้:

'หลัก', 'menu_class' => 'เมนูหลัก',)); ?>

รหัสนี้บอก WordPress ว่านี่เป็นที่ที่ธีมแสดงเมนูหลัก นอกจากนี้ยังเพิ่มคลาส CSS " เมนูหลัก ในเมนูนำทาง

ตอนนี้คุณจะพบรูปแบบของเมนูนำทางของคุณโดยใช้โครงสร้าง CSS

#header เมนู .primary {} // ภาชนะชั้น #header เมนู .primary ยู {} // ภาชนะชั้นแรกรายการเรียงลำดับ #header เมนู .primary ยูยู {} // รายการเรียงลำดับภายในรายการเรียงลำดับ #header .primary -menu li {} // แต่ละรายการนำทาง #header li เมนู .primary {} // แต่ละรายการนำทาง # หัว li สมอเมนู .primary ยู {} // เรียงลำดับรายการหากมีการเลื่อนลงรายการ #header .primary -menu li li {} // แต่ละหล่นลงรายการนำทาง # หัว li li เมนู .primary ได้ {} // แผ่นแต่ละสมอลงรายการนำทาง

แทนที่ #header ด้วยคลาสคอนเทนเนอร์หรือ " ID ใช้โดยธีม WordPress ของคุณ

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

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