نحوه ایجاد یک منوی پاسخگو وردپرس آماده برای موبایل

شما باید به بخش “فعال کردن مکان های زمینه” پایین بروید. به طور پیش فرض ، این افزونه در همه مکان های تم فعال می شود. با روشن کردن انتخابی آن برای مکانهای تم خاص ، می توانید آن را تغییر دهید.

برای ذخیره تغییرات خود ، فراموش نکنید که بر روی دکمه ذخیره همه تنظیمات کلیک کنید.

اکنون می توانید از وب سایت خود بازدید کرده و صفحه مرورگر خود را تغییر اندازه دهید تا منوی انتخاب پاسخگو را مشاهده کنید.

روش 3: ایجاد منوی پاسخگو برای موبایل با جلوه ضامن h4>

یکی از متداول ترین روش های استفاده شده برای نمایش یک منو در صفحه های تلفن همراه ، استفاده از جلوه ضامن است.

این روش شما را ملزم می کند که کدهای سفارشی را به پرونده های وردپرس خود اضافه کنید. اگر قبلاً این کار را انجام نداده اید ، نگاهی به راهنمای ما در چسباندن قطعه از وب در وردپرس .

ابتدا باید یک ویرایشگر متن مانند دفترچه یادداشت باز کنید و این کد را جای گذاری کنید.

( تابع() {
var nav = document.getElementById ('سایت-ناوبری') ، دکمه ، منو ؛
اگر (! nav) {
برگشت؛
}

دکمه = nav.getElementByTagName ('دکمه') [0]؛
menu = nav.getElementByTagName ('ul') [0]؛
اگر (! دکمه) {
برگشت؛
}

// دکمه پنهان کردن اگر منو از دست رفته یا خالی است.
if (! menu ||! menu.childNodes.length) {
button.style.display = 'هیچکدام'؛
برگشت؛
}

button.onclick = تابع () {
if (-1 === menu.className.indexOf ("nav-menu")) {
menu.className = 'nav-menu'؛
}

if (-1! == button.className.indexOf ('toggled-on'))) {
button.className = button.className.replace ("روشن-روشن" ، "")؛
menu.className = menu.className.replace ("روشن-روشن" ، "")؛
} دیگری {
button.className + = 'روشن-روشن'؛
menu.className + = 'روشن-روشن'؛
}
}؛
}) (jQuery)؛

اکنون باید این پرونده را به عنوان navigation.js در دسک تاپ خود ذخیره کنید.

در مرحله بعدی ، برای بارگذاری این پرونده در پوشه / wp-content / themes / your-theme-dir / js / در سایت وردپرس خود ، باید یک سرویس گیرنده FTP را باز کنید.

فهرست-موضوع خود را با فهرست موضوع فعلی خود جایگزین کنید. اگر فهرست موضوع شما پوشه js ندارد ، پس باید آن را ایجاد کنید.

بعد از بارگذاری فایل JavaScript ، مرحله بعدی این است که مطمئن شوید سایت وردپرس شما این JavaScript را بارگذاری می کند. شما باید کد زیر را به functions.php موضوع خود اضافه کنید فایل

 
wp_enqueue_script ('wpb_togglemenu'، get_template_directory_uri (). '/js/navigation.js'، array ('jquery')، '20160909'، true)؛

اکنون باید منوی پیمایش را در قالب WordPress خود اضافه کنیم. معمولاً منوی پیمایش به پرونده header.php یک تم اضافه می شود.

ما فرض می کنیم که مکان موضوعی که توسط طرح زمینه شما تعریف شده است اولیه نامیده می شود. اگر اینگونه نیست ، از مکان تم تعریف شده توسط قالب وردپرس خود استفاده کنید.

مرحله آخر افزودن CSS است تا منوی ما از کلاسهای CSS مناسب برای تغییر وضعیت در هنگام مشاهده در دستگاه های تلفن همراه استفاده کند.

/ * منوی پیمایش * /
.main-navigation {
margin-top: 24px؛
حاشیه بالا: 1.714285714rem؛
text-align: مرکز؛
}
.main-navigation li {
margin-top: 24px؛
حاشیه بالا: 1.714285714rem؛
اندازه قلم: 12px؛
اندازه قلم: 0.857142857rem؛
طول خط: 1.42857143؛
}
.main-navigation a {
رنگ: # 5e5e5e؛
}
.main-navigation a: شناور ،
.main-navigation a: focus {
رنگ: # 21759b؛
}
.main-navigation ul.nav-menu،
.main-navigation div.nav-menu> ul {
نمایش: هیچ؛
}

.main-navigation ul.nav-menu.toggled on ،
.menu-toggle {
نمایش: بلوک درون خطی ؛
}

// CSS برای استفاده در دستگاه های تلفن همراه

صفحهmedia و (عرض حداقل: 600 پیکسل) {

.main-navigation ul.nav-menu،
.main-navigation div.nav-menu> ul {
border-bottom: 1px solid #ededed؛
top-top: 1px solid #ededed؛
نمایش: inline-block! مهم؛
text-align: چپ؛
عرض: 100٪
}
.main-navigation ul {
حاشیه: 0؛
text-indent: 0؛
}
.main-navigation li a،
.main-navigation li {
نمایش: بلوک درون خطی ؛
دکوراسیون متن: هیچ؛
}
.main-navigation li a {
مرز پایین: 0؛
رنگ: # 6a6a6a؛
ارتفاع خط: 3.692307692؛
تبدیل متن: بزرگ؛
فضای سفید: nowrap؛
}
.main-navigation li a: شناور ،
.main-navigation li a: focus {
رنگ: # 000؛
}
.main-navigation li {
حاشیه: 0 40px 0 0؛
حاشیه: 0 2.857142857rem 0 0؛
موقعیت: نسبی؛
}
.main-navigation li ul {
حاشیه: 0؛
بالشتک: 0؛
موقعیت: مطلق؛
بالا: 100٪
z-index: 1؛
ارتفاع: 1 پیکسل
عرض: 1 پیکسل
سرریز: پنهان
کلیپ: rect (1px ، 1px ، 1px ، 1px)
}
.main-navigation li ul ul {
بالا: 0؛
سمت چپ: 100٪؛
}
.main-navigation ul li: شناور> ul ،
.main-navigation ul li: focus> ul،
.main-navigation .focus> ul {
مرز چپ: 0؛
کلیپ: وراثت؛
سرریز کردن: ارث بردن
قد: وراثت؛
عرض: ارث بردن
}
.main-navigation li ul li a {
زمینه: #fefef؛
border-bottom: 1px solid #ededed؛
نمایش: بلوک؛
اندازه قلم: 11px؛
اندازه قلم: 0.785714286rem؛
طول خط: 2.181818182؛
بالشتک: 8px 10px؛
بالشتک: 0.571428571rem 0.714285714rem؛
عرض: 180 پیکسل
عرض: 12.85714286rem؛
فضای سفید: طبیعی؛
}
.main-navigation li ul li a: شناور ،
.main-navigation li ul li a: تمرکز {
پس زمینه: # 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 {
رنگ: # 636363؛
font-weight: پررنگ؛
}
.menu-toggle {
نمایش: هیچ؛
}

}

اکنون می توانید از وب سایت خود بازدید کرده و صفحه مرورگر خود را تغییر اندازه دهید تا منوی ضامن پاسخگو خود را در عمل مشاهده کنید.

عیب یابی: بسته به طرح زمینه وردپرس ممکن است لازم باشد CSS را تنظیم کنید. از ابزار عنصر را بازبینی کنید برای درگیری CSS با موضوع شما.

(تابع ($) {
$ ('# ضامن'). ضامن (
    تابع() {
        $ ('# popout'). animate ({چپ: 0} ، "کند" ، عملکرد () {
            $ ('# toggle'). html (' ") )
        })
    } ،
    تابع() {
        $ ('# popout'). متحرک سازی ({سمت چپ: -250} ، "کند" ، عملکرد () {
            $ ('# toggle'). html (' ") )
        })
    }
)
}) (jQuery)؛

wp_enqueue_script ('wpb_slidepanel'، get_template_directory_uri (). '/js/slidepanel.js'، array ('jquery')، '20160909'، true)؛

 'اولیه' ، 'menu_class' => 'nav-menu'))؛ ؟>

 'اولیه' ، 'menu_class' => 'nav-menu'))؛ ؟>

صفحهmedia و (عرض حداقل: 769px) {
#تغییر وضعیت {
نمایش: هیچ؛
}

}

صفحهmedia و (حداکثر عرض: 768 پیکسل) {
# پاپوت {
موقعیت: ثابت
قد: 100٪
عرض: 250 پیکسل
زمینه: rgb (25 ، 25 ، 25)؛
زمینه: rgba (25 ، 25 ، 25 ، .9)؛
رنگ سفید؛
بالا: 0px؛
سمت چپ: -250px؛
سرریز: خودکار؛
}


#تغییر وضعیت {
شناور: درست؛
موقعیت: ثابت
بالا: 60 پیکسل؛
راست: 45 پیکسل؛
عرض: 28 پیکسل؛
ارتفاع: 24 پیکسل؛

}

.nav-menu li {
مرز پایین: 1 پیکسل جامد #eee؛
بالشتک: 20px؛
عرض: 100٪
}

.nav-menu li: شناور {
زمینه: #CCC؛
}

.nav-menu li a {
رنگ: #FFF؛
دکوراسیون متن: هیچ؛
عرض: 100٪
}
}