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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีการ 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 ของคุณ

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

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

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

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 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 to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

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

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

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

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

1 UberMenu

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

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

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

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

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

2 LMM

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

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

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

3 เมนู Fly 8Degree

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

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

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

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

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

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

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

• วิธีการเปลี่ยนชื่อภาพบนบล็อก WordPress
• วิธีการสร้างเมนูที่ลอยอยู่บน WordPress
• ปลั๊กอิน WordPress 8 เพื่อสร้าง megamenu ในบล็อกของคุณ
• เคล็ดลับในการสร้างเมนูที่ทันสมัยสำหรับบล็อกของคุณ
• ปลั๊กอิน WordPress 6 เพื่อจัดการหมวดหมู่และหมวดหมู่ย่อยในบล็อกของคุณ

สรุป

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

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

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

...