Искате ли да създадете отзивчиво меню във вашия блог на WordPress?

Потребителите на мобилни устройства са повече от потребителите на настолни компютри в наши дни. Добавянето на адаптивно мобилно меню улеснява потребителите при навигацията във вашия уебсайт.

В този урок ще ви покажем как лесно да създадете отзивчиво меню в WordPress.

Но преди, ако никога не сте инсталирали WordPress открийте Колко плъгини да инсталирате в WordPress. et Как да се намери, инсталиране и активиране на WordPress тема на вашия блог 

След това обратно към защо сме тук.

Тук ще става въпрос за задълбочаване, като ви покажем както метода с приставка за начинаещи, така и метода на кодиране за напреднали потребители.

Първи метод: Създайте мобилно меню с плъгин за WordPress

Този метод е по-лесен и се препоръчва за начинаещи, тъй като не изисква специални умения за кодиране.

При този метод ще създадем меню (с икона за хамбургер), който се плъзга на мобилния екран.

Първото нещо, което трябва да направите, е да инсталирате и активирате Приставка за адаптивно меню на WordPress , За повече подробности, вижте нашето ръководство за това как да инсталирате приставка за WordPress .

След активиране на приставката, добавката ще добави нов елемент в менюто, озаглавен „ отзивчиви Menu ". Щракването върху него ще ви отведе до страницата с настройки на WordPress плъгин.

Първо трябва да въведете размера, от който трябва да се появи мобилното меню. По подразбиране е 800px, което би трябвало да работи за повечето уебсайтове.

След това трябва да изберете менюто, което искате да използвате на мобилни устройства.

Последната опция на екрана ви позволява да предоставите CSS клас за менюто си. Това ще позволи на приставката да скрие неотзивчивото ви меню на малки екрани.

Не забравяйте да кликнете върху « Опции за актуализиране За да запазите вашите настройки.

Предлагаме ви също да откриете нашето 10 WordPress приставки за създаване на менюта във вашия блог

Вече можете да посетите уебсайта си и да преоразмерите екрана на браузъра си, за да видите отзивчивото меню в действие.

Приставката « отзивчиви Menu »Предлага много други опции, които ви позволяват да промените поведението и външния вид на вашето отзивчиво меню. Можете да разгледате тези опции на страницата с настройки на приставката и да я коригирате според нуждите.

Метод 2: Как да добавите ръчно меню за мобилни устройства

Един от най-често използваните методи за показване на меню на мобилни екрани е използването на лоста.

Този метод изисква да добавите персонализиран код към вашите WordPress файлове.

В едно от предишните ни уроци ви показваме как да създадете приставка за WordPress.

Първо трябва да отворите текстов редактор като Notepad и да поставите този код.

(функция () {nav var = document.getElementById ('навигация по сайта'), бутон, меню; ако (! nav) {return;} бутон = nav.getElementsByTagName ('бутон') [0]; меню = nav. getElementsByTagName ('ul') [0]; ако (! бутон) {return;} // Скрий бутона, ако менюто липсва или е празно, ако (! меню ||! 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 ('включен')) {button.className = button.className.replace ('включен', ''); menu.className = menu.className.replace ('включен -on ',' ');} else {button.className + =' включен '; menu.className + =' включен ';}};}) (jQuery);

Сега трябва да запазите този файл с името " navigation.js На бюрото си.

След това трябва да отворите FTP клиент, за да изтеглите този файл до местоположението "/ wp-content / themes / your-topic / js /" на вашия уебсайт WordPress.

Заменете израза „ Вашата тематика » с името на вашата папка WordPress тема текущ. Ако вашата директория с теми няма папка js, тогава трябва да създадете такава.

След качването на JavaScript файла, следващата стъпка е да се уверите, че вашият WordPress уебсайт ще зареди JavaScript файловете. Ще трябва да добавите следния код към „ functions.php " твой WordPress тема.

Открийте нещо друго Какво можете да направите с файла function.php?

 wp_enqueue_script ( "bpc_togglemenu" get_template_directory_uri () "/js/navigation.js, масив (" 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 е a WordPress плъгин посветен на създаването на много адаптивно, отзивчиво и достъпно за потребителя мегаменю. Функционален е след инсталирането си, без необходимост от някаква специална конфигурация.

Това е лесен за използване плъгин, но достатъчно мощен, за да създава изключително персонализирани и креативни мега менюта.

Вижте и нашите 9 WordPress приставки за създаване на ценови решетки в блог

Ще намерите наред с други: 3 шаблона за менюта, напълно отзивчиво оформление, съвместимост с мобилни устройства (iPhone, iPad, Android), поддръжка на докосване и др ...

Изтегляне | демонстрация | уеб хостинг

2. СПТ

Liquida Mega Menu, наричано още LMM, е a WordPress плъгин предназначени за потребители и разработчици. Той има прост и интуитивен интерфейс, интегриран в таблото за управление на WP, което ви позволява да създавате и персонализирате неограничен брой мега менюта, без никакви умения за програмиране.

Той се предлага с десетки функции, независимо дали за обикновени или напреднали потребители. Като функционалност, той предлага наред с други: автоматична и ръчна интеграция, поддръжка за многосайт, грижа за детските теми, напълно персонализиран стил за менюта, персонализирани местоположения на менюта, лепкаво меню и т.н.

Изтегляне | демонстрация | уеб хостинг

3. Меню 8Degree Fly

8Degree Fly Menu е първокласен плъгин за WordPress, който ви позволява да добавите меню на платно към вашия уебсайт, за да му придадете вид, който подчертава и лесно вашата информация. Той използва функцията на менюто на WordPress по подразбиране, за да създаде своите менюта.

Ще можете да добавите допълнителни елементи към елементите от менюто по подразбиране, като икони, лозунги на менюто, заглавие на псевдогрупиране и дълго описание.

За да прочетете също така: 10 WordPress приставки за оптимизиране на страничните ленти и лепкавите заглавки

Той също така се предлага с WYSIWYG редактор, който да ви помогне да разберете вашето дълго описание по удобен за потребителите начин.С този редактор можете също да използвате кратки кодове.

Изтегляне | демонстрация | уеб хостинг

Други препоръчани ресурси

Също така ви каним да се консултирате с ресурсите по-долу, за да отидете по-далеч в управлението на вашия уебсайт и блог.

• Как да преименувате изображения на WordPress блог
• Как да създадете плаващо меню в WordPress
• 8 WordPress плъгини за създаване на мегамено на вашия блог
• Някои съвети за създаване на модерни менюта за вашия блог
• 6 WordPress плъгини за управление на категории и подкатегории в блога ви

Заключение

Така ! Това е всичко за този урок, надявам се, че ще ви позволи да създадете меню за мобилни потребители. чувствай се свободен да споделете съвета с приятелите си в социалните си мрежи.

Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress.

Но междувременно ни кажете за вашите Връзка и предложения в специалния раздел.

...