วิธีการสไตล์เมนูนำทาง WordPress

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


เมนูการนำทางจัดแต่งทรงผมใน WordPress

เราจะแสดงสองวิธีที่แตกต่างกัน วิธีแรกสำหรับผู้เริ่มต้นเนื่องจากใช้ปลั๊กอินและไม่ต้องการความรู้เกี่ยวกับโค้ดใด ๆ วิธีที่สองสำหรับผู้ใช้ DIY ระดับกลางที่ต้องการใช้โค้ด CSS แทนปลั๊กอิน.

วิธีที่ 1: เมนูนำทาง WordPress จัดแต่งทรงผมโดยใช้ปลั๊กอิน

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

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

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

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

ผู้ใช้ WPBeginner สามารถใช้ CSS Hero Coupon นี้เพื่อรับส่วนลด 34% จากการซื้อ.

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

ต่อไปคุณจะต้องคลิกที่ปุ่ม CSS Hero ในแถบเครื่องมือผู้ดูแลระบบ WordPress ของคุณ.

เปิดตัว CSS Hero

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

CSS Hero Toolbar

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

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

ชี้และคลิกเพื่อปรับแต่งเมนู

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

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

คุณสมบัติ CSS

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

เปลี่ยนลักษณะที่ปรากฏขององค์ประกอบ

ในหน้าจอด้านบนเราเลือกพื้นหลังและมันแสดงให้เราเห็นอินเทอร์เฟซที่ดีในการเลือกสีพื้นหลังไล่ระดับสีรูปภาพและอื่น ๆ.

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

ดูตัวอย่างการเปลี่ยนแปลง CSS ของคุณแบบสด

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

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

วิธีที่ 2: เมนูนำทาง WordPress ด้วยตนเอง

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

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

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

<?php wp_nav_menu (); ?>

รายการที่ไม่เรียงลำดับของคุณจะมีชื่อคลาส ‘เมนู’ โดยที่แต่ละรายการมีคลาส CSS ของตัวเอง.

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

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

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

<?PHP
wp_nav_menu (อาร์เรย์ (
‘theme_location’ => ‘หลัก’,
‘menu_class’ => ‘เมนูหลัก’,
));
?>

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

ตอนนี้คุณสามารถจัดสไตล์เมนูนำทางโดยใช้โครงสร้าง CSS นี้.

// คลาสของคอนเทนเนอร์
#header .primary-menu {}

// คลาสคอนเทนเนอร์ที่ไม่มีการเรียงลำดับรายการแรก
#header .primary-menu ul {}

// รายการที่ไม่เรียงลำดับภายในรายการที่ไม่ได้เรียงลำดับ
#header .primary-menu ul ul {}

// แต่ละรายการการนำทาง
#header .primary-menu li {}

// สมอรายการนำทางแต่ละรายการ
#header .primary-menu และ a {}

// รายการที่ไม่เรียงลำดับหากมีรายการดรอปดาวน์
#header .primary-menu li ul {}

// แต่ละรายการการนำทางแบบเลื่อนลง
#header .primary-menu li li {}

// แต่ละรายการที่ลากลงรายการจุดยึดการนำทาง
#header .primary-menu li li a {}

คุณจะต้องแทนที่ #header ด้วยคลาส CSS คอนเทนเนอร์ที่ใช้โดยเมนูการนำทางของคุณ.

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

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

// Class สำหรับหน้าปัจจุบัน
.current_page_item {}

// Class สำหรับหมวดหมู่ปัจจุบัน
.ปัจจุบันแมว {}

// คลาสสำหรับรายการเมนูอื่น ๆ ในปัจจุบัน
.ปัจจุบันรายการเมนู {}

// Class สำหรับหมวดหมู่
.รายการเมนูประเภท-อนุกรมวิธาน {}

// คลาสสำหรับประเภทโพสต์
.รายการเมนูประเภท-post_type {}

// คลาสสำหรับลิงก์ที่กำหนดเองใด ๆ
.รายการเมนูประเภทกำหนดเอง {}

// Class สำหรับลิงค์บ้าน
.รายการเมนูบ้าน {}

WordPress ยังให้คุณเพิ่มคลาส CSS ที่กำหนดเองของคุณไปยังรายการเมนูแต่ละรายการ.

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

ตรงไปที่ หน้าตา»เมนู หน้าในผู้ดูแลระบบ WordPress ของคุณและคลิกที่ปุ่มตัวเลือกหน้าจอ.

เปิดใช้งานตัวเลือกคลาส CSS สำหรับรายการเมนูแต่ละรายการ

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

การเพิ่มคลาส CSS ที่กำหนดเองไปยังรายการเมนูใน WordPress

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

ตัวอย่างเมนูจัดแต่งทรงผมนำทางใน WordPress

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

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

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

การใช้เครื่องมือตรวจสอบเพื่อค้นหาคลาส CSS เพื่อแก้ไข

ดังที่ได้กล่าวมาลองมาดูตัวอย่างชีวิตจริงของเมนูนำทางสไตล์ใน WordPress.

1. วิธีการเปลี่ยนสีตัวอักษรในเมนูนำทางของ WordPress

นี่คือตัวอย่าง CSS ที่กำหนดเองที่คุณสามารถเพิ่มในธีมของคุณเพื่อเปลี่ยนสีตัวอักษรของเมนูการนำทาง.

# บนสุดเมนู li.menu-item a {
color: # ff0000;
}

ในตัวอย่างนี้ # top-menu คือ ID ที่กำหนดให้กับรายการที่ไม่ได้เรียงลำดับซึ่งแสดงเมนูการนำทางของเรา คุณจะต้องใช้เครื่องมือตรวจสอบเพื่อค้นหา ID ที่ใช้โดยชุดรูปแบบของคุณ.

การเปลี่ยนสีตัวอักษรของเมนูนำทาง WordPress

2. วิธีการเปลี่ยนสีพื้นหลังของแถบเมนูนำทาง

ก่อนอื่นคุณจะต้องค้นหา CSS ID หรือคลาสที่ใช้โดยชุดรูปแบบของคุณสำหรับเมนูนำทางโดยรอบ.

การค้นหาคลาส CSS สำหรับคอนเทนเนอร์เมนูการนำทาง

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

.การนำทางด้านบน {
สีพื้นหลัง: # 000;
}

นี่คือลักษณะที่ปรากฏบนเว็บไซต์ตัวอย่างของเรา.

การเปลี่ยนสีพื้นหลังของแถบเมนูนำทาง

3. วิธีการเปลี่ยนสีพื้นหลังของรายการเมนูเดียว

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

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

ตรงไปที่ หน้าตา»เมนู และคลิกที่ปุ่มตัวเลือกหน้าจอที่มุมขวาบนของหน้าจอ สิ่งนี้จะแสดงเมนูแบบเลื่อนลงที่คุณต้องทำเครื่องหมายในช่องถัดจากตัวเลือก “คลาส CSS”.

เปิดใช้งานตัวเลือกคลาส CSS สำหรับรายการเมนูแต่ละรายการ

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

การเพิ่มคลาส CSS ที่กำหนดเองไปยังรายการเมนู

ตอนนี้คุณสามารถใช้คลาส CSS นี้เพื่อจัดสไตล์รายการเมนูเฉพาะที่แตกต่างกัน.

.ติดต่อเรา {
สีพื้นหลัง: # ff0099;
border-radius: 5px;
}

นี่คือลักษณะของเว็บไซต์ทดสอบของเรา.

การเปลี่ยนสีพื้นหลังของรายการเมนูเดียวในเมนูนำทาง WordPress

4. การเพิ่ม Hover Effects ให้กับเมนูนำทางของ WordPress

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

เพียงเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในธีมของคุณ.

# top-menu li.menu-item a: hover {
สีพื้นหลัง: # fff;
color: # 666;
border-radius: 5px;
}

ในตัวอย่างนี้ # top-menu คือ CSS ID ที่ใช้โดยธีมของคุณสำหรับรายการเมนูการนำทางที่ไม่เรียงลำดับ.

นี่คือลักษณะที่ปรากฏบนเว็บไซต์ทดสอบของเรา.

ลักษณะพิเศษของเมาส์โอเวอร์ในเมนูนำทาง WordPress

5. สร้างเมนูการนำทางลอยเหนียวใน WordPress

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

คุณสามารถเพิ่มโค้ด CSS ต่อไปนี้ในธีมของคุณเพื่อทำให้เมนูนำทางของคุณเหนียว.

# เมนูด้านบน {
พื้นหลัง: # 2194af;
ความสูง: 60px;
ดัชนี z: 170;
กำไรขั้นต้น: 0 อัตโนมัติ
border-bottom: 1px solid #dadada;
ความกว้าง: 100%;
ตำแหน่ง: ถาวร
ด้านบน: 0;
ซ้าย: 0;
ขวา: 0;
จัดเรียงข้อความ: ขวา;
padding ขวา: 30px
}

เพียงแทนที่ # top-menu ด้วย CSS ID ของเมนูนำทางของคุณ.

นี่คือลักษณะที่ปรากฏในการสาธิตของเรา:

เมนูนำทางเหนียว

สำหรับคำแนะนำโดยละเอียดและวิธีอื่น ๆ ให้ดูคำแนะนำของเราเกี่ยวกับวิธีสร้างเมนูนำทางแบบลอยตัวใน WordPress.

6. สร้างเมนูการนำทางโปร่งใสใน WordPress

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

เพียงเพิ่มตัวอย่าง CSS ต่อไปนี้ในธีมของคุณเพื่อทำให้เมนูนำทางของคุณโปร่งใส.

# การนำทางไซต์ {
สีพื้นหลัง: โปร่งใส
}

นี่คือลักษณะที่ปรากฏบนไซต์ตัวอย่างของเรา.

เมนูนำทางโปร่งใสใน WordPress

คุณอาจต้องปรับตำแหน่งของภาพส่วนหัวเพื่อให้ครอบคลุมพื้นที่ด้านหลังเมนูโปร่งใสของคุณทั้งนี้ขึ้นอยู่กับธีมของคุณ.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map