ข้ามไปยังเนื้อหาหลัก

วิธีการสร้างเมนูที่ตอบสนองสำหรับ WordPress มือถือ

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 701.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62 [แนะนำ]

คุณต้องการสร้างเมนูมือถือที่ตอบสนองต่อบล็อก WordPress ของคุณหรือไม่

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

ในบทช่วยสอนนี้เราจะแสดงวิธีสร้างเมนูตอบสนองบน WordPress ได้อย่างง่ายดาย

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

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

วิธีสร้างเมนู WordPress บนมือถือที่ตอบสนอง

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

วิธีแรก: สร้างเมนูมือถือด้วยปลั๊กอิน WordPress

วิธีนี้ง่ายและแนะนำสำหรับผู้เริ่มต้นเพราะไม่จำเป็นต้องมีทักษะการเข้ารหัสพิเศษใด ๆ

ในวิธีนี้เราจะสร้างเมนู (พร้อมไอคอนแฮมเบอร์เกอร์) ซึ่งสไลด์บนหน้าจอมือถือ

ปลั๊กอินเมนูตอบสนองของ WordPress

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

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

ปลั๊กอินเมนูแดชบอร์ดที่ตอบสนองของ WordPress

ก่อนอื่นคุณต้องป้อนขนาดที่จะปรากฏในเมนูมือถือ ค่าเริ่มต้นคือ 800px ซึ่งควรใช้ได้กับเว็บไซต์ส่วนใหญ่

หลังจากนั้นคุณต้องเลือกเมนูที่คุณต้องการใช้บนมือถือ

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

อย่าลืมคลิกที่« ตัวเลือกการปรับปรุง เพื่อบันทึกการตั้งค่าของคุณ

เราขอแนะนำให้คุณค้นพบของเรา ปลั๊กอิน WordPress 10 เพื่อสร้างเมนูในบล็อกของคุณ

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

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

เว็บไซต์ในการดำเนินการเมนูที่ตอบสนองต่อการมือถือ

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

วิธีการ 2: วิธีเพิ่มเมนูมือถือด้วยตนเอง

วิธีหนึ่งที่ใช้บ่อยที่สุดในการแสดงเมนูบนหน้าจอมือถือคือการใช้เลเวอเรจ

วิธีนี้ต้องการให้คุณเพิ่มรหัสที่กำหนดเองลงในไฟล์ WordPress ของคุณ

ในบทเรียนก่อนหน้านี้ของเราเราแสดงให้คุณเห็น วิธีสร้างปลั๊กอิน WordPress.

ก่อนอื่นคุณต้องเปิดโปรแกรมแก้ไขข้อความเช่น Notepad และวางรหัสนี้

(function () {nav var = document.getElementById ('การนำทางไซต์'), ปุ่ม, เมนู; (! nav) {return;} button = nav.getElementsByTagName ('ปุ่ม') [0]; menu = nav getElementsByTagName ('ul') [0]; if (! button) {return;} // ซ่อนปุ่มหากเมนูหายไปหรือว่างเปล่าหาก (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = ฟังก์ชัน () {ถ้า (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} ถ้า (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

ตอนนี้คุณต้องบันทึกไฟล์นี้ด้วยชื่อ " navigation.js บนโต๊ะทำงานของคุณ

จากนั้นคุณต้องเปิดไคลเอนต์ FTP เพื่อดาวน์โหลดไฟล์นี้ไปยังตำแหน่ง "/ wp-content / themes / your-theme / js /" บนเว็บไซต์ WordPress ของคุณ

แทนที่นิพจน์ " ของคุณธีม ด้วยชื่อโฟลเดอร์ธีม WordPress ปัจจุบันของคุณ หากไดเร็กทอรีธีมของคุณไม่มีโฟลเดอร์ js คุณต้องสร้างขึ้นมาใหม่

หลังจากอัปโหลดไฟล์ JavaScript ขั้นตอนต่อไปคือตรวจสอบให้แน่ใจว่าเว็บไซต์ WordPress ของคุณโหลดไฟล์ JavaScript คุณจะต้องเพิ่มรหัสต่อไปนี้ใน " functions.php จากธีม WordPress ของคุณ

ค้นพบสิ่งอื่น คุณสามารถทำอะไรกับไฟล์ functions.php

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jQuery ') 20160909' จริง.);

ตอนนี้เราต้องเพิ่มเมนูการนำทางในธีม WordPress ของเรา โดยปกติแล้วเมนูนำทางจะถูกเพิ่มลงในไฟล์ " header.php จากธีม WordPress ของคุณ

เมนู 'หลัก', 'menu_class' => 'เมนูนำทาง')); ?>

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

ค้นพบยังของเรา 5 ปลั๊กอิน WordPress เพื่อสร้างแบบฟอร์มการสมัครสมาชิก

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

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

/ * เมนูการนำทาง * / .main-navigation {margin-top: 24px; ขอบด้านบน: 1.714285714rem; จัดข้อความ: ศูนย์; } .main-navigation li {margin-top: 24px; ขอบด้านบน: 1.714285714rem; ขนาดตัวอักษร: 12px; ขนาดตัวอักษร: 0.857142857rem; บรรทัดความสูง: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS สำหรับใช้บนอุปกรณ์เคลื่อนที่ที่หน้าจอสื่อและ (ความกว้างขั้นต่ำ: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ขอบ; border-top: 1px solid #ededed; display: inline-block! important; จัดข้อความ: ซ้าย; ความกว้าง: 100%; } .main-navigation ul {margin: 0; เยื้องข้อความ: 0; } .main-navigation li a, .main-navigation li {display: inline-block; ตกแต่งข้อความ: ไม่มี; } .main-navigation li a {border-bottom: 0; สี: # 6a6a6a; บรรทัดความสูง: 3.692307692; แปลงข้อความ: ตัวพิมพ์ใหญ่; พื้นที่สีขาว: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; } .main-navigation li {margin: 0 40px 0 0; ขอบ: 0 2.857142857rem 0 0; ตำแหน่ง: ญาติ; } .main-navigation li ul {margin: 0; ช่องว่างภายใน: 0; ตำแหน่ง: แน่นอน; ด้านบน: 100%; ดัชนี z: 1; ความสูง: 1px; ความกว้าง: 1px; ล้น: ซ่อน; คลิป: rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {ด้านบน: 0; ซ้าย: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; คลิป: สืบทอด; ล้น: สืบทอด; ความสูง: สืบทอด; ความกว้าง: สืบทอด; }. main-navigation li ul li a {background: #efefef; border-bottom: 1px solid #ededed; แสดง: บล็อก; ขนาดตัวอักษร: 11px; ขนาดตัวอักษร: 0.785714286rem; บรรทัดความสูง: 2.181818182; ช่องว่างภายใน: 8px 10px; ช่องว่างภายใน: 0.571428571rem 0.714285714rem; ความกว้าง: 180px; ความกว้าง: 12.85714286rem; พื้นที่สีขาว: ปกติ; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {background: # e3e3e3; สี: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-บรรพบุรุษ> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; น้ำหนักตัวอักษร: ตัวหนา; } .menu-toggle {display: none; }}

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

โยกเมนู WordPress-กวดวิชา

ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง  

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

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 UberMenu

UberMenu เป็นปลั๊กอิน WordPress ที่อุทิศให้กับการสร้าง megamenu ที่ปรับแต่งได้ตอบสนองและสามารถเข้าถึงได้ สามารถใช้งานได้หลังการติดตั้งโดยไม่จำเป็นต้องมีการกำหนดค่าพิเศษ

ปลั๊กอินเมนู Ubermenu wordpress mega

เป็นปลั๊กอินที่ใช้งานง่าย แต่มีประสิทธิภาพเพียงพอที่จะสร้างเค้าโครงเมนูขนาดใหญ่ที่ปรับแต่งได้สูงและสร้างสรรค์

ดูเพิ่มเติมที่ 9 ปลั๊กอิน WordPress เพื่อสร้างกริดราคาในบล็อก

คุณจะพบกับเทมเพลตเมนู 3 แบบรูปแบบที่ตอบสนองได้อย่างสมบูรณ์ความเข้ากันได้กับอุปกรณ์มือถือ (iPhone, iPad, Android) การรองรับระบบสัมผัส ฯลฯ ...

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 LMM

Liquida Mega Menu เรียกอีกอย่างว่า LMM เป็นปลั๊กอิน WordPress ที่ออกแบบมาสำหรับผู้ใช้และนักพัฒนา มีอินเทอร์เฟซที่เรียบง่ายและใช้งานง่ายรวมกับแดชบอร์ด WP ช่วยให้คุณสร้างและปรับแต่งเมนูขนาดใหญ่ได้ไม่ จำกัด จำนวนโดยไม่ต้องมีทักษะในการเขียนโปรแกรมใด ๆ

Lmm wordpress ตอบสนองเมนู mega ขึ้นอยู่กับ bootstrap

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 เมนู Fly 8Degree

8Degree Fly Menu เป็นปลั๊กอิน WordPress ระดับพรีเมี่ยมที่ให้คุณเพิ่มเมนูแคนวาสบนเว็บไซต์ของคุณเพื่อให้รูปลักษณ์ที่เน้นข้อมูลของคุณด้วยวิธีง่ายๆ ใช้ฟังก์ชันเมนู WordPress เริ่มต้นเพื่อสร้างเมนู

เมนู 8degree fly ตอบสนองจากปลั๊กอินเมนูผ้าใบสำหรับ wordpress

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

อ่าน: ปลั๊กอิน WordPress 10 ตัวเพื่อปรับแต่งแถบด้านข้างและส่วนหัวเหนียว

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

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

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

สรุป

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

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

แต่ในระหว่างนี้โปรดแจ้งให้เราทราบเกี่ยวกับไฟล์ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ

...

บทความนี้ประกอบด้วยข้อคิดเห็น 2

  1. สวัสดี

    ขอบคุณสำหรับข้อมูลของคุณ

    ฉันไม่พบ "คลาส CSS สำหรับเมนูของคุณ" ฉันพบสไตล์ชีท css แต่ฉันไม่รู้ว่าจะคัดลอกและวางอะไร

    ขอบคุณล่วงหน้าสำหรับความช่วยเหลือของคุณ

    ปลายสัปดาห์ที่ดี

    มิเชล

แสดงความคิดเห็น

ที่อยู่อีเมล์ของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน