نحوه افزودن منوی اسلاید پنل در مضامین وردپرس

اخیراً یکی از کاربران ما از ما پرسیده است که چگونه می توانند منوی پیمایش خود را با منوی پانل اسلاید jQuery جایگزین کنند؟ از منوی اسلاید پنل می توان برای بهبود چشمگیر تجربه کاربر در سایت های تلفن همراه استفاده کرد. در این مقاله ما به شما نشان خواهیم داد که چگونه می توانید یک منوی صفحه اسلاید را در مضامین وردپرس اضافه کنید.

توجه: این یک آموزش سطح متوسط ​​است و به دانش کافی HTML و CSS نیاز دارد.

جایگزینی منوی پیش فرض با منوی صفحه اسلاید در وردپرس h4>

هدف در اینجا این است که در حالی که منوی پیش فرض قالب ما را نگه دارید ، یک منوی صفحه اسلاید به کاربران در صفحه های کوچکتر نشان دهید تا کاربران در لپ تاپ ها و دسک تاپ ها بتوانند منوی کامل را مشاهده کنند. قبل از شروع ، مهم است که بدانیم تم های وردپرس متنوعی وجود دارد a> ، و بعداً باید با کمی CSS کنار بیایید.

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

example.com را با نام دامنه خود جایگزین کنید code a> ، و همچنین your-theme را با فهرست زمینه اصلی خود جایگزین کنید. این فایل را به صورت slidepanel.js در دسک تاپ خود ذخیره کنید. این کد از jQuery برای تغییر منوی صفحه اسلاید استفاده می کند. همچنین جلوه ضامن را متحرک می کند.

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

مرحله بعدی طراحی یا یافتن نماد منو است. نماد منو که بیشتر مورد استفاده قرار می گیرد ، نمادی است با سه خط. می توانید با استفاده از فتوشاپ یکی ایجاد کنید یا یکی از تصاویر موجود در google را پیدا کنید. برای این آموزش ما از نماد منوی 27x23px استفاده می کنیم. پس از ایجاد یا یافتن نماد منوی خود ، نام آن را به menu.png تغییر دهید و آن را در پوشه تصاویر در پوشه تم خود بارگذاری کنید.

مرحله بعدی این است که enveue file javascript برای صفحه اسلاید در وردپرس. اساساً فقط این کد را در پرونده توابع.php طرح زمینه خود کپی و جایگذاری کنید.

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

اکنون که همه موارد راه اندازی شده است ، باید منوی پیش فرض طرح زمینه خود را تغییر دهید. معمولاً بیشتر مضامین منوهای پیمایش را در پرونده header.php موضوع نمایش می دهند. پرونده header.php را باز کرده و خط مشابه این را پیدا کنید:

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

هدف در اینجا این است که منوی ناوبری طرح زمینه خود را با کد HTML بپیچید تا منوی صفحه اسلاید شما در صفحه های کوچکتر نمایش داده شود. ما می خواهیم آن را در

 

 'اولیه' ، '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٪
}
}