Самое лучшее адаптивное меню для блога на wordpress.

мобильное меню
Привет читатель WPsovet.ru. В статьях про адаптацию, я привел наглядный пример того, как надо все делать. Но забыл про одну составляющую, это адаптивное меню навигации, которое появляется когда расширение экрана меняется, Ну что ж давайте разберем этот вопрос.

Я пробовал несколько способов, хотел сделать с помощью css, но там нужен очень длинный код, в котором новички не очень разбираются. Пробовал плагин, хороший вариант, но мне не понравилось, что с него идет много не валидных запросов, а так хороший вариант, в других статьях разберу подробнее. В итоге я остановился на скрипте, ставил его в адаптации к многим темам и все хорошо работало, не буду тянуть и начну разбор.

Содержание.

  1. Добавляем.
  2. Делаем область.
  3. Вывод во всех статьях.
  4. Задаем стили.
  5. Заключение.

Внедряем дополнительное меню в HTML .

Ниже представлен код, его надо вставить после вывода основного, в коде сайта.

<div class="menuwrapp_mobile"><span id="mob-searh"><?php get_search_form (); ?></span>
<a class="mobilemenu_toggle" href="#" ><?php _e ( 'Menu'); ?></a>
<?php if ( has_nav_menu ( 'primary' ) ) { ?>
<?php wp_nav_menu ( array ('container'=> '', 'theme_location' => 'primary mobile', 'items_wrap' => '
<ul class="menu_mobile">%3$s</ul>
' ) ); ?>
<?php } else { ?>
<?php wp_nav_menu ( array ( 'menu_class' => 'menu_mobile' ) ); ?>
<?php } ?>
</div>

Вывод основного идет обычно в файле header.php, вы этот место сразу же найдете, там будут написаны слова типа «menu». Чтобы было понятнее приведу снимок с экрана, под цифрой 1 основное, под цифрой 2 мобильное.
куда вставить меню

Предупреждаю, что темы разные, и вывод может быть в разных файлах, например в Index.php. После вставки, уже пойдет отображение на сайте, не пугайтесь, так и должно быть.

Но принцип поняли:

  1. Находим код старой навигации.
  2. Вставляем новый код адаптивного.

Добавляем новую область.

Теперь берем этот код, и вставляем его в самый низ файла function.php, перед закрывающим тегом ? >.

function extra_setup () {
register_nav_menu ('primary mobile', __ ( 'Navigation Mobile'));
}
add_action ( 'after_setup_theme', 'extra_setup' );

Для понятия опять приложу скриншот.
мень в функциях
Как видите ничего сложного нет, все только скопировать и вставить. Теперь идем по пути внешний вид-меню. И попадаем на страницу где нам надо создать адаптивное меню с названием «primary mobile» в области «Navigation Mobile». Далее заполняем его нужными страницами и рубриками и сохраняем, смотрим картинку.
в админпанели

  1. Пункт «Внешний вид».
  2. выбираем данный раздел.
  3. Вводим в это поле «primary mobile».
  4. Ставим галочку в этом чекбоксе.
  5. Список раздело, страницы, рубрики, записи, которые хотим добавить в мобильную версию.
  6. Выбираем нужные элементы.
  7. При нажатии этой кнопки, все выделенные элементы из прошлого пункта, перенесутся в область 8.
  8. Здесь уже представлен список того что добавляли, можете их менять местами и тому подобное.
  9. Сохраняем все настройки.

Теперь выводим скрипт во все статьи.

А теперь отгадайте, куда мы будем вставлять все скрипты? Правильно, в файл footer.php пред закрывающим тегом </ body>, вот этот код.

<script type="text/javascript">
jQuery (document).ready (function (){
jQuery ('.mobilemenu_toggle').click (function (eventObject) {
eventObject.preventDefault ();
}).toggle (function (){
jQuery (this).parents ('.menuwrapp_mobile').find ('.menu_mobile').slideDown (200);
}, function (){
jQuery (this).parents ('.menuwrapp_mobile').find ('.menu_mobile').slideUp (200);
});
});
</script>

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

Дело осталось за малым прописываем стили.

Теперь осталось просто оформить внешний вид, куда ж мы без CSS, вот дошли до него, просто вставляете этот код в файл style.css.

.menuwrapp_mobile {display:none;}
@media screen and (min-width:240px) and (max-width:1000px) {
Сюда нужно вписать ID или class основного меню {display:none;}
#mob-searh{display:block;float:right;margin:0;padding:5px 5px 0 0;}
#mob-searh .searchform {background:#444;border:1px solid #000;height:26px;margin:0 0 2px;padding:0 5px;width:150px;}
#mob-searh .searchform .in-search {height: 26px;width: 134px;}
.menuwrapp_mobile{margin:0;position:relative;display:block;background-color:#333;}
.mobilemenu_toggle{color:#fff!important;display:block;padding:10px 20px;font-weight:bold;text-align:left;text-transform:uppercase;margin:0;}
.mobilemenu_toggle:hover{color:#fff;}
.menu_mobile {background:#e5e5e5;border:1px solid #D4D4D4;font-size:18px;overflow:hidden;padding:0;display:none;}
.menu_mobile .sub-menu{background:none;display:block;position:static;}
.menu_mobile li {border-top:1px solid #d3d3d3;margin:0;list-style:none;}
.menu_mobile a{background: none;color:#333;display:block;font: bold 14px/40px Arial;padding: 0 0 0 15px;text-align:left;}
.menu_mobile a:hover {opacity:0.9;text-decoration:none;background:#bad768;color:#666;}
.menu_mobile .sub-menu a{padding-left:30px;}
.menu_mobile .sub-menu .sub-menu a{padding-left:30px;}
}

Видите строчку №3, там сказано «Сюда нужно вписать Id или class «, для этого я снова выложу картинку и описание к нему.
замена классов

  1. Нажимаем правой кнопкой мыши на строчке вывода.
  2. Выбираем из выпадающего списка «Проверка кода элемента»
  3. HTML, в принципе он нам не нужен.
  4. Тот самый стиль который нам надо прописать, но конечно же у вас будет свой.

Теперь прописываем этот стиль вместо слов, и сохраняем файл.

Данный код надо вставлять до вывода медиастилей иначе, могут быть конфликты. Смотрим картинку, заодно узнаете где я вставил стиль с прошлого скриншота.

замена в коде сайта

Заключение.

Вот и все, если вы все сделали правильно, то при сжатии окна браузера на отметке в 1000px у вас будет появлятся мобильное адаптивное меню. Я не исключаю возможности что при всех манипуляциях, сайт у вас может немного скривиться, а это в 99% случаев не избежно, придется маленько подправить съехавшие элементы.

В этой ситуации я вам ничем уже не помогу, если только обращайтесь в комментария ко мне, я постараюсь что-нибудь придумать. Если же у вас ничего не получиться, то придется мне уже лезть в вашу тему, но об этом спрашивайте в форме комментирования.

 

Понравилась статья? Поделиться с друзьями:
Комментариев: 19
  1. Александр

    Хорошая статья, как нибудь попробую. Кстати заметил что ты пользуешься плагином WP-Syntax, но у тебя вместо кавычек получается знак «>», так вот чтоб этого не было поставь вот так, Пример: pre lang=»PHP» line=»1″ escaped=»true», вот эта функция escaped=»true» убирает эти закорючки.

    1. Александр

      То есть вместо вот этого знака >, < выходят закорючки

    2. Лифанов Валентин (автор)

      Вот этим этот плагин и одолел меня, напиши мне на почту поподробнее, а то в комментариях все это срабатывает, куда и что вставлять, почта valentin37reg@gmail.com, буду очень признателен.

      1. Александр

        Щас напишу на почту, жди письма

        1. Лифанов Валентин (автор)

          Ok спасибо.

          1. Александр

            Уже написал, надеюсь объяснил понятно

  2. Андрей

    Уважаемый, вы только можете брать чужое, а ссылку на источник не учили указывать?

    Укажите источник.

    1. Лифанов Валентин (автор)

      Я этот код брал и скачивал из интернета, на файлообменнике из какого-то курса, точно не помню хоть убейте давно это было, но крест даю к вам даже не совался у вас на сайте вот только сейчас побывал, и ничего у вас не брал, статью не рерайтил все додумывал сам. Авторство я себе не присваиваю.

    2. Лифанов Валентин (автор)

      Автор вы, признайтесь честно?

  3. Андрей

    Я автор, код был взят из одной темы. Давно? Но число «Дата:2015-12-30» говорит об обратном. Интересно, что же это за файлообменник, может ссылку дадите? Так, для интереса. Есть обычное правило: правило хорошего тона.

    1. Лифанов Валентин (автор)

      Это мой не первый блог, я эту тему уже поднимал на своем другом уже не работающем блоге, я говорю давно, год назад это точно, этому блогу меньше трех месяцев, вот так. Вы говорите что из темы, занчит и вы не автор, а автор тот кто ту тему написал, или я не прав :) ну серьезно, значит вы так же себе присвоили чужие труды, логика такая же получается. Ссылку дать не могу, так как ее просто нет, я говорю год назад.

  4. Андрей

    Вы бы хоть потрудились сами его сделать, а не брать готовое решение, и не рассказывать потом сказок.

    1. Лифанов Валентин (автор)

      Зачем мне самому придумывать если я нашел хороший способ который работает везде, и этим делюсь с другими. Сказок вроде не рассказывал, люди пользуются им нравится. А по поводу авторства, давайте свяжемся с автором темы, и спросим его разрешения на использование его скриптов вне темы, так будет намного справедливее, в английском я соображаю (если тема не русская), письмо смогу ему написать, если он даст отказ то удаляем обе статьи, как вам такой вариант?

  5. Светлана

    Молодец, Валентин. Все доступно расписано, что даже чайник разберется. Классные у тебя статьи, а главное нужные. Что же делать, придется брать с тебя пример. :cool: :cool: :cool:

    1. Лифанов Валентин (автор)

      Привет, Светлан. Стараюсь, скоро будет моя личная разработка этого меню, только там все будет на css.

  6. Александр

    Валентин привет! Хочу тебя поправить на счет кода PHP в меню, есть очень грубая ошибка, но начну наверно из далека. Себе то ты сделал нормально, а вот в посте код нужно подправить. Как говорил я так пока и ковыряюсь иногда в движке вордпресс, ну и решил протестить твою меню. По умолчанию выводились только страницы, добавил новое меню, но к нему помимо страниц добавил рубрики, а тоге выводились только страницы в меню и вот тут я начал ковырять и код твой и функции которые в нем.

    И так, для самых маленьких:
    Идентификатор не желательно писать через пробел, к примеру твой primary mobile, лучше будет написать вот так primary-mobile, можно слитно, а можно через нижнее подчеркивание.

    Зарегистрировать меню можно еще вот так

    if (function_exists('register_nav_menu')) {
            register_nav_menu('primary-mobile', 'Navigation Mobile');
    }

    Условие говорит о том, что если мы находим функцию регистрации меню, то регистрируем свое меню

    1. Лифанов Валентин (автор)

      Сань привет еще раз. Твои комменты крутые, я даже некоторые специально не опубликовываю. оставляю их в неопубликованных, чтобы потом быстрее найти информацию из них, ты уж извини :)

      1. Александр

        Братец, ты делай как считаешь нужным, но ошибки исправь

        1. Лифанов Валентин (автор)

          Исправлю обязательно.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

15 queries in 0,271 seconds.