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

1. ไปที่เครื่องมือแก้ไขไซต์

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

ไปที่ตัวแก้ไขเว็บไซต์ WordPress ผ่านทางลักษณะ> ตัวแก้ไข

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

คลิกบนพื้นที่เนื้อหาเว็บเพจหลักทางด้านขวาของหน้าจอ

คลิกที่พื้นที่เนื้อหาหลักทางด้านขวาของหน้าจอ (มีกรอบเป็นสีฟ้าอ่อนและแสดงด้วยลูกศรสีน้ำเงินใน imate ด้านบน) สิ่งนี้จะนำคุณไปสู่ ​​Block Editor ภายใน Site Editor

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

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

2. แก้ไขเทมเพลตของคุณ

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

คลิกที่ส่วนเทมเพลตส่วนหัวที่ด้านบนของตัวแก้ไขไซต์

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

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

3. เพิ่มส่วนหัวของคุณในกลุ่ม

คลิกไอคอนสามจุดของแถบเครื่องมือบล็อกแล้วคลิกจัดกลุ่มเพื่อจัดกลุ่มส่วนหัวของ WordPress

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

ขณะนี้บล็อกส่วนหัวของหน้าเว็บกลายเป็นบล็อกกลุ่มแล้ว

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

คลิกไอคอนการจัดตำแหน่งในแถบเครื่องมือบล็อกและเลือกความกว้าง

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

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

หากต้องการกลับไปที่บล็อกกลุ่ม ให้คลิกที่ไอคอน "เลือกกลุ่ม" ในแถบเครื่องมือบล็อกส่วนหัว (ลูกศรสีชมพู)

WordPress ประยุกต์: วิธีสร้างหลักสูตรเว็บไซต์ที่มีประสิทธิภาพโดย Davies Media Design

4. ตั้งค่ากลุ่มเป็น “เหนียว”

ไปที่แถบด้านข้างการตั้งค่าบล็อก WordPress และเลือก Sticky จากตำแหน่งแบบเลื่อนลง

เมื่อเลือกกลุ่มแล้ว ให้ไปที่แท็บ "บล็อก" ใต้แถบด้านข้างการตั้งค่าทางด้านขวาของหน้าจอ (ลูกศรสีแดงในภาพด้านบน)

คลิกรายการเมนูที่มีข้อความ "ตำแหน่ง" (ลูกศรสีเขียว) ตอนนี้คุณจะเห็นเมนูแบบเลื่อนลงที่นี่ซึ่งมีป้ายกำกับว่า "ค่าเริ่มต้น" (ลูกศรสีชมพู) คลิกเมนูแบบเลื่อนลงและเลือกตัวเลือก "เหนียว" (ลูกศรสีน้ำเงิน)

คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลงเว็บไซต์ WordPress ของคุณ

ไปที่ด้านบนสุดของเครื่องมือแก้ไขแล้วคลิกปุ่ม "บันทึก" (ลูกศรสีแดง) จากนั้นคลิก "บันทึก" อีกครั้ง ตอนนี้คุณจะมีการนำทางหลักของเมนูแท่งสำหรับเว็บไซต์ WordPress ของคุณ!

5. จัดสไตล์เมนู Sticky

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

คลิกแท็บสไตล์ในแถบด้านข้างการตั้งค่าบล็อก WordPress

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

ใต้ "สี" ฉันจะคลิกตัวเลือก "พื้นหลัง" (ลูกศรสีน้ำเงิน) จากนั้นเลือกตัวอย่างสีขาวเพื่อตั้งค่าสีพื้นหลังเป็นสีขาว (ลูกศรสีเขียว)

ฉันจะคลิก "บันทึก" สองครั้งอีกครั้งเพื่อบันทึกการเปลี่ยนแปลง

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

ดูตัวอย่างส่วนหัวเว็บไซต์ Sticky ของคุณใน WordPress โดยคลิกไอคอนแสดงตัวอย่าง

คุณสามารถดูตัวอย่างไซต์ของคุณได้โดยคลิกไอคอนอุปกรณ์ (ลูกศรสีแดง) จากนั้นคลิก "ดูไซต์" (ลูกศรสีเขียว)

เมื่อคุณเลื่อนเมนู Sticky Menu ของคุณจะยังคงอยู่ที่ด้านบนสุดของเว็บไซต์ของคุณ

คุณสามารถเลื่อนเว็บไซต์ของคุณและดูเมนูนำทางแบบติดหนึบยังคงอยู่ที่ด้านบน (ลูกศรสีเขียว)!

คลิกปุ่มย้อนกลับเพื่อกลับไปที่ตัวแก้ไขเว็บไซต์ WordPress

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

หากต้องการกลับไปที่พื้นที่ผู้ดูแลระบบ WP เพียงคลิกที่โลโก้ที่มุมซ้ายบน

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

Davies Media Design จดหมายข่าวอีเมลแอปสร้างสรรค์ฟรี

สมัครรับจดหมายข่าว DMD

ลงทะเบียนเพื่อรับบทช่วยสอนใหม่ การอัปเดตหลักสูตร และข่าวสารล่าสุดเกี่ยวกับแอปสร้างสรรค์ที่คุณชื่นชอบฟรี!

คุณสมัครเรียบร้อยแล้ว!