Самое лучшее адаптивное меню для блога на 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% случаев не избежно, придется маленько подправить съехавшие элементы.

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

 

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 4 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Александр

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

    • Александр

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

    • Лифанов Валентин

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

      • Александр

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

        • Лифанов Валентин

          Ok спасибо.

          • Александр

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

  • Андрей

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

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

    • Лифанов Валентин

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

    • Лифанов Валентин

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

  • Андрей

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

    • Лифанов Валентин

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

  • Андрей

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

    • Лифанов Валентин

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

  • Светлана

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

    • Лифанов Валентин

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

  • Александр

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

    И так, для самых маленьких:

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

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

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

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

    • Лифанов Валентин

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

      • Александр

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

        • Лифанов Валентин

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

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

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.