วิธีเพิ่มเมนูแผงสไลด์ในธีม WordPress

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

เมนูแผงสไลด์ในธีม WordPress: ทำไมต้องรวมไว้ด้วย

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

ขั้นตอนที่หนึ่ง: ติดตั้งปลั๊กอินเมนูตอบสนอง

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

ขั้นตอนที่สอง: เลือกธีม

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

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

ขั้นตอนที่สาม: ตั้งค่า

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

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

ก่อนที่คุณจะถ่ายทอดสด สิ่งสำคัญคือต้องทำการทดสอบเบื้องต้น เพื่อให้แน่ใจว่าทุกอย่างทำงานได้อย่างถูกต้อง คุณอาจต้องการใช้เบราว์เซอร์อื่นที่ไม่ใช่เบราว์เซอร์ที่คุณใช้ในการเข้าถึงไซต์ของคุณตามปกติ ในตัวอย่างนี้ เราใช้เบราว์เซอร์ Google Chrome ในการเข้าถึงไซต์บนอุปกรณ์พกพา เราดาวน์โหลดแอปที่ชื่อว่า “ Internet Explore สำหรับ Android” เรา คัดลอกและวาง URL ของไซต์นี้ลงในแอป และผลลัพธ์ก็น่าทึ่ง เราพบว่าเมนูได้รับการจัดรูปแบบอย่างถูกต้องทั้งในแนวนอนและแนวตั้ง และลิงก์ทั้งหมดทำงานตามที่คาดไว้ ระยะทางของคุณอาจแตกต่างกันไปเมื่อพูดถึงอุปกรณ์พกพา เราขอแนะนำให้คุณทดสอบเมนูของคุณบนอุปกรณ์และเบราว์เซอร์ให้ได้มากที่สุดก่อนที่จะเผยแพร่ หากคุณพบปัญหาใด ๆ ถึงเวลาแก้ไขแล้ว

ขั้นตอนที่ห้า: ถ่ายทอดสด

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

บทสรุป

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