ปลดล็อกพลังของการนำทางของผู้ใช้: เรียนรู้วิธีสร้างเมนูแบบเลื่อนลงที่มีสไตล์ใน WordPress

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

นั่นคือเหตุผลที่เมนูแบบเลื่อนลงที่ออกแบบมาอย่างดีสามารถช่วยปรับปรุง UX และลดอัตราตีกลับได้

เมนูแบบเลื่อนลงจะแสดงรายการลิงก์เมื่อคุณวางเมาส์เหนือรายการในเมนู

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

เราจะแสดงวิธีสร้างเมนูแบบเลื่อนลงใน WordPress โดยไม่ต้องใช้โค้ดใดๆ แต่ก่อนอื่น เรามาเริ่มกันที่พื้นฐานก่อน

เมื่อใดที่คุณต้องการเมนูแบบเลื่อนลงแทนที่จะเป็นเมนูปกติ

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

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

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

• หน้าผลิตภัณฑ์
• หน้าติดต่อ
• หน้าร้านค้า
• หน้าบัญชี
• หน้ารถเข็นและอื่น ๆ

การแสดงหน้าทั้งหมดในรูปแบบเมนูปกติจะฉลาดไหม?

ดูสองภาพด้านล่าง -

• นี่คือภาพที่หนึ่งพร้อมเมนูปกติ

• นี่คือภาพที่สองพร้อมเมนูแบบเลื่อนลง

อันไหนดูดีกว่ากัน?… อันที่ 2 แน่นอนใช่มั้ย?

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

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

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

วิธีสร้างเมนูแบบเลื่อนลงใน WordPress ด้วยคุณสมบัติเริ่มต้น

การสร้างเมนูแบบเลื่อนลงใน WordPress นั้นง่ายมาก คุณไม่จำเป็นต้องเพิ่มรหัสพิเศษหรืออะไร เพียงลากและวางรายการเมนูอย่างเป็นระเบียบ คุณจะมีเมนูแบบเลื่อนลง

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

นี่คือขั้นตอนที่คุณต้องปฏิบัติตามเพื่อสร้างเมนูแบบเลื่อนลงใน WordPress

ขั้นตอนที่ 1: สร้างเมนูว่าง

ก่อนอื่นคุณต้องสร้างเมนูว่าง สำหรับสิ่งนั้น ให้ลงชื่อเข้าใช้แดชบอร์ด WordPress ของคุณแล้วไปที่ ลักษณะที่ปรากฏ–> เมนู จากนั้นคลิกที่ตัวเลือก สร้างเมนูใหม่

หลังจากนั้นคุณต้องตั้งชื่อเมนูให้ถูกต้องและคลิกที่ปุ่ม สร้างเมนู เพื่อเสร็จสิ้น

ขั้นตอนที่ 2: เพิ่มรายการเมนูไปยังเมนูที่สร้างขึ้นใหม่ของคุณ

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

จะเป็นการเพิ่มรายการเมนูในหนึ่งแถว

ขั้นตอนที่ 3: สร้างเมนูแบบเลื่อนลง

หลังจากสร้างเมนูแล้ว ก็ถึงเวลาสร้างเมนูแบบเลื่อนลง แต่ก่อนอื่น คุณต้องเลือกเมนูพาเรนต์ ในกรณีของเรา เราเลือก Store List เป็นรายการเมนูหลัก ในขณะที่ Shop and Store Manager เป็นรายการเมนูย่อย

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

ด้วยวิธีนี้คุณสามารถสร้างเมนูแบบเลื่อนลงได้มากเท่าที่คุณต้องการ

ขั้นตอนที่ 4: เลือกตำแหน่งสำหรับเมนูของคุณ

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

ขั้นตอนที่ 5: เผยแพร่เมนูแบบเลื่อนลงใหม่ของคุณ

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

ขอแสดงความยินดี คุณได้สร้างเมนูแบบเลื่อนลงบนเว็บไซต์ WordPress ของคุณแล้ว

โบนัส 01: วิธีปรับแต่งเมนูแบบเลื่อนลง

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

ก) การเพิ่มลิงค์ที่กำหนดเอง

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

จากนั้น คุณสามารถเพิ่มหมวดหมู่เป็นรายการเมนูย่อยภายใต้ลิงค์แบบกำหนดเอง แต่ละหมวดหมู่จะสามารถคลิกได้ แต่เมนูจะไม่คลิก

b) การจัดการการปรับแต่งด้วย Live Preview

ขณะที่คุณกำลังสร้างเมนูแบบเลื่อนลง คุณจะสังเกตเห็นปุ่ม Manage with Live Preview

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

c) ใช้ CSS เพื่อปรับแต่งเมนูแบบเลื่อนลงเพิ่มเติม

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

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

สิ่งนี้จะเพิ่มคลาส CSS ให้กับรายการเมนู คุณสามารถเพิ่มคลาส CSS ที่นี่และจะปรับแต่งเมนู

โบนัส 02: วิธีใช้รหัสเพื่อเพิ่มเมนูแบบเลื่อนลง

หากคุณต้องการใช้โค้ดเพื่อสร้างเมนูดรอปดาวน์ใน WordPress คุณสามารถเพิ่มโค้ดด้านล่างในไฟล์ function.php ของธีมได้

หากต้องการแสดงโพสต์ทั้งหมด ให้เว้น "-1" ไว้ หากต้องการแสดงโพสต์ 10 รายการ ให้แทนที่ "-1" ด้วยตัวเลข "10"

 $args = array( 'numberposts' => -1);?> <form action="<? bloginfo('url'); ?>" method="get"> <select name="page_id"> <?php global $post; $args = array( 'numberposts' => -1); $posts = get_posts($args); foreach( $posts as $post ) : setup_postdata($post); ?> <option value="<? echo $post->ID; ?>"><?php the_title(); ?></option> <?php endforeach; ?> </select> <input type="submit" name="submit" value="view" /> </form>

หน้าตาเมนูจะเป็นอย่างไร-

คำถามที่พบบ่อยเกี่ยวกับวิธีสร้างเมนูแบบเลื่อนลงใน WordPress

สร้างเมนูแบบเลื่อนลงอย่างถูกวิธี!

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

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

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