Мобилдик жооп берүүчү Wordpress менюсун түзүү

Жооптуу, мобилдик иштөөгө даяр WordPress менюсун кантип түзүү керек

Сиз жооп берүүчү жана мобилдик колдонууга даяр WordPress менюсун түзгүңүз келеби? Мобилдик колдонуучулар буга чейин көптөгөн веб-сайттарда рабочий колдонуучулардан ашып кетишкен. Жооптуу мобилдик менюну кошуу колдонуучуларга веб-сайтыңызда навигациялоону жеңилдетет. Бул макалада биз сизге кантип оңой жооп берүүчү жана мобилдик иштөөгө даяр WordPress менюсун түзүүнү көрсөтөбүз.

Бул деталдаштырылган окуу куралы. Жаңы баштагандар үчүн плагин ыкмасын (коддоштуруу жок) жана өнүккөн колдонуучуларыбыз үчүн коддоо ыкмасын көрсөтөбүз. Бул окуу куралынын аягында сиз слайддан чыгуучу мобилдик менюну, ачылуучу мобилдик менюну жана мобилдик менюну которууну кантип түзүүнү үйрөнөсүз. Даярсызбы? Баштайлы.

Видео окуу куралы

MundoCMSке жазылыңыз Эгерде сизге видео жакпаса же көбүрөөк нускама керек болсо, окууну улантыңыз.

Метод 1 - Плагинди колдонуу менен WordPress'ке жооп берүүчү меню кошуу

Бул ыкма жөнөкөй жана үйрөнчүктөр үчүн сунушталат, анткени ал эч кандай жекече коддоону талап кылбайт. Бул ыкмада биз мобилдик экранда жылган гамбургер менюсун түзөбүз.

Жооптуу меню плагин демо
Сиз эмне кылышыңыз керек болгон биринчи нерсе - Responsive Menu плагинин орнотуу жана иштетүү. Көбүрөөк маалымат алуу үчүн, WordPress плагинин кантип орнотуу боюнча биздин кадам-кадам жолду караңыз. Жандырылгандан кийин, плагин WordPress администратор тилкеңизге "Жооптуу меню" деген жаңы меню пунктун кошот. Аны чыкылдатуу сизди плагин орнотуулар барагына алып барат.
Жооптуу меню орнотуулары
Адегенде экрандын туурасын киргизишиңиз керек, ошондо плагин жооп берүүчү менюну көрсөтө баштайт. Демейки маани - 800px, ал көпчүлүк веб-сайттар үчүн иштеши керек. Андан кийин, сиз жооп берүүчү менюңуз үчүн колдонгуңуз келген менюну тандооңуз керек. Эгер сиз менюну түзө элек болсоңуз, анда менюга кирип, менюну түзө аласыз Көрүнүш »Менюлар. Этап-этабы менен көрсөтмөлөрдү алуу үчүн WordPress-те навигация менюсун кантип кошуу боюнча биздин жолду караңыз. Экрандагы акыркы вариант - учурдагы жооп бербеген менюңуз үчүн CSS классын берүү. Бул плагинге кичинекей экрандарда жооп бербеген менюсун жашырууга мүмкүндүк берет. Орнотууларыңызды сактоо үчүн "Жаңыртуу параметрлери" баскычын басууну унутпаңыз. Эми сиз веб-сайтыңызга кирип, серепчиңиздин экранынын өлчөмүн өзгөртүп, жооп берүүчү менюну көрүп тура аласыз.
Жооптуу меню плагин демо
Жооптуу меню плагини сизге жооп берүүчү менюңуздун жүрүм-турумун жана көрүнүшүн өзгөртүүгө мүмкүндүк берген көптөгөн башка параметрлер менен келет. Сиз бул параметрлерди плагин жөндөөлөрүнүн бетинен изилдеп, керек болсо тууралай аласыз.

Метод 2 – Плагинди колдонуу менен ылдый түшүүчү менюну тандоо

Жооптуу менюну кошуунун дагы бир жолу - ачылуучу тандоо менюсун кошуу. Бул ыкма эч кандай коддоо көндүмдөрүн талап кылат, ошондуктан, ал үйрөнчүктөр үчүн сунуш кылынат.
Жооптуу тандоо менюсу
Сизге керек болгон биринчи нерсе - Responsive Select Menu плагинин орнотуу жана иштетүү. Көбүрөөк маалымат алуу үчүн, WordPress плагинин кантип орнотуу боюнча биздин кадам-кадам жолду караңыз. Активдештирилгенден кийин, сиз барышыңыз керек Көрүнүш » Сезимтал тандоо плагин орнотууларын конфигурациялоо үчүн.
Меню орнотууларды тандаңыз
Сиз "Темаларды жайгаштырууларды иштетүү" бөлүмүнө ылдый сыдырышыңыз керек. Демейки боюнча, плагин бардык тема жерлеринде иштетилген. Аны белгилүү бир тема жайгашкан жерлерге тандап иштетүү менен өзгөртө аласыз. Өзгөртүүлөрүңүздү сактоо үчүн "Бардык орнотууларды сактоо" баскычын басууну унутпаңыз. Эми сиз веб-сайтыңызга баш багып, серепчиңиздин экранынын өлчөмүн өзгөртсөңүз болот, анда жооп берүүчү тандоо менюсу иштеп жатат.

Метод 3: Которуу эффектиси менен мобилдик жооп менюсун түзүңүз

Мобилдик аппараттын экранында менюну көрсөтүү үчүн колдонулган эң кеңири таралган ыкмалардын бири - которуштуруу эффектин колдонуу. Бул ыкма сизден WordPress файлдарыңызга ыңгайлаштырылган кодду кошууну талап кылат. Эгер сиз буга чейин муну эч качан жасабаган болсоңуз, веб үзүндүлөрдү WordPressке кантип чаптоо боюнча биздин колдонмону карап чыгыңыз. Сиз алгач Notepad сыяктуу текст редакторун ачып, бул кодду чапташыңыз керек. (function() { var nav = document.getElementById('сайттын навигациясы'), баскыч, меню; if (!nav) { return;} баскыч = nav.getElementsByTagName('button')[0]; меню = nav. getElementsByTagName ('ul')[0];if(!button){return;} //Эгер меню жок же бош болсо жашыруу баскычы if(!menu ||!menu.childNodes.length){button.style.display = 'none '; return; } 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('toggled-on', »); menu.className = menu.className.replace('enabled', » ); } else {button.className + = 'enabled'; menu.className + = 'enabled'; }}; }) (jQuery); Эми бул navigation.js деп аталган файлды иш тактаңызга сакташыңыз керек. Андан кийин бул файлды WordPress сайтыңыздагы /wp-content/themes/your-theme-dir/js/ папкасына жүктөө үчүн FTP кардарын ачышыңыз керек. Сиздин-тема-каталогуңузду учурдагы темаңыздын каталогу менен алмаштырыңыз. Эгерде сиздин тема каталогуңузда js папкасы жок болсо, сиз аны түзүшүңүз керек. JavaScript файлын жүктөгөндөн кийин, кийинки кадам сиздин WordPress сайтыңыз бул JavaScriptти жүктөгөнүн текшерүү. Темаңыздын functions.php файлына төмөнкү кодду кошушуңуз керек болот. wp_enqueue_script('wpb_togglemenu', get_template_directory_uri(). '/js/navigation.js', array('jquery'), '20160909', true); Эми биз WordPress темабызга навигация менюсун кошушубуз керек. Навигация менюсу адатта теманын header.php файлына кошулат.

Темаңыз тарабынан аныкталган теманын орду ата-эне деп аталат деп ойлойбуз. Болбосо, WordPress темаңыз тарабынан аныкталган теманын жайгашкан жерин колдонуңуз. Акыркы кадам, биздин менюбуз мобилдик түзмөктөрдө көргөндө которгучтун иштеши үчүн туура CSS класстарын колдонушу үчүн бир аз CSS кошуу. /* Навигация менюсу */ .main-navigation {margin-top: 24px; жогорку маржа: 1.714285714rem; текстти тегиздөө: борбор; } .main-navigation li {margin-top: 24px; жогорку маржа: 1.714285714rem; шрифт өлчөмү: 12px; шрифт өлчөмү: 0.857142857rem; катар бийиктиги: 1.42857143; } .main-navigation бар {түсү: #5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {түсү: #21759b; } .main-навигация ul.nav-меню, .main-навигация div.nav-меню ул {дисплей: жок; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {дисплей: inline-block; } // мобилдик колдонуу үчүн CSS @ media screen y (мин-туурасы: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu ul {чек-төмөнкү: 1px катуу #ededed ; үстүнкү чек: 1px катуу #edited; экран: онлайн кулпу! маанилүү; текстти тегиздөө: солго; туурасы: 100%; } .main-navigation ul {маржа: 0; текст чегинүү: 0; } .main-navigation li a, .main-navigation li {дисплей: inline-block; тексттин жасалгасы: жок; } .main-navigation li a {чек-төмөнкү: 0; түс: #6a6a6a; катар бийиктиги: 3.692307692; текстти өзгөртүү: чоң тамга; бош: nowrap; } .main-navigation li a: hover, .main-navigation li a: фокус {түсү: #000; }. негизги навигация li {маржа: 0 40px 0 0; маржа: 0 2.857142857rem 0 0; салыштырмалуу позиция; } .main-navigation li ul {маржа: 0; толтуруу: 0; позициясы: абсолюттук; Top 100%; z-индекс: 1; бийиктиги: 1px; туурасы: 1px; жашыруун толуп кетүү; клип: rect(1px, 1px, 1px, 1px); }. негизги навигация li ул ул {жогорку: 0; солго: 100%; } .main-navigation ul li: hover ul, .main-навигация ул li: фокус ул, .main-навигация .фокус ул {чек-сол: 0; клип: мурастоо; толуп кетүү: мурастоо; бийиктиги: мурастоо; туурасы: мурастоо; } .main-navigation li ul li a {фон: #efefef; төмөнкү чек: 1px катуу #edited; дисплей блогу; шрифт өлчөмү: 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: фокус {фон: # e3e3e3; түс: #444; } .main-navigation .main-меню-пункту a, .main-навигация .учурдагы-меню-бабасы a, .main-навигация .учурдагы_бет_пункту a, .main-навигация .учурдагы_бет_атасы a {түсү: #636363; шрифттин салмагы: калың; } .menu-toggle {дисплей: жок; }} Эми сиз веб-сайтыңызга баш багып, серепчиңиздин экранынын өлчөмүн өзгөртүп, жооп берүүчү которуштуруу менюңуздун иштеп жатканын көрө аласыз.
Менюну алдын ала көрүү
Проблемаларды чечүү: WordPress темаңызга жараша, сиз CSSти тууралашыңыз керек болушу мүмкүн. Темаңыз менен CSS карама-каршылыктарын аныктоо үчүн Inspect Elements куралын колдонуңуз.

Метод 4 – WordPressте мобилдик слайдер менюсун кошуңуз

Мобилдик менюну кошуунун дагы бир кеңири таралган ыкмасы - жылма панелдин менюсун колдонуу (1-методдо көрсөтүлгөндөй). Метод 4 сизден WordPress тема файлдарына код кошууну талап кылат жана 1-ыкмадагыдай эле натыйжаларга жетүүнүн башка жолу. Биринчиден, сиз блокнот сыяктуу жөнөкөй тексттик редакторду ачып, төмөнкү кодду бош текст файлына кошушуңуз керек. . (функция ($) {$ ('#toggle').которуу (функция () {$ ('#popout').жандандыруу ({сол: 0}, 'жай', функция () {$ ('#toggle' ).html ('жакын'); }); }, функциясы () { $ ('# калкыма'). animate({сол: -250}, 'жай', function()...

Таштап Жооп