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

สารบัญ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pin It เมื่อ Pinterest