HTML2WP. Серия #3.3. Делаем динамическое меню

Артем Абрамович

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

63 комментария к “HTML2WP. Серия #3.3. Делаем динамическое меню”

  1. Контент бесспорно полезный, но подача!!! Что значит подключить «по уму» и т.д! Вам то, наверняка понятно и все просто, но вот Я не настолько разбираюсь и мне хотелось бы услышать более развёрнутые ответы.
    Это моё мнение! Оно может не совпадать с мнением автора, но все же я его выскажу! Надеюсь на понимание! Благодарю, ещё раз, за полезный контент!

    Ответить
    • Совсем без проблем. Не претендую на истину в последней инстанции. Подключить по уму — означает правильное подключение согласно кодекса, под это говорилось во второй серии https://www.youtube.com/watch?v=_ciVi_AUOqo

      Ответить
  2. У меня проблема случилась и без помощи ну никак. Суть в том, что мое меню появляется при нажатии на обратный звонок. Т.е при нажатии на обратный звонок открывается форма обратного звонка и мое меню. (Меню в обратном звонке) Как исправить не знаю. Уже все волосы на голове вырвал(((

    Ответить
    • Интересно! Что-то не так с идентификаторами для активации. Скорее всего при активации всплывашки используется не правильный класс или идентификатор. Если отключить всплывашку — что происходит?

      Ответить
    • Что-то совсем все плохо. Пишите в личку, надо разбираться

      Ответить
  3. Добрый день! У меня такой вопрос по option-tree. Ситуация такая. Плагин подключен через тему http://prnt.sc/e81zdm. И если включить в цз-config ‘WP_DEBUG’, true То в админке выдает такую ошибку http://prnt.sc/e81xwf. А если еще поставить плагин «Theme Check», то там появляются еще такие http://prnt.sc/e81yse. Как вы с этим справляетесь ? или не трогаете их ? Заранее спасибо!

    Ответить
    • Доброго! На темчек внимания не обращаю, он требования такие пишет, что больше не рекомендации похоже, типа если у вас вот это то лучше использовать это…
      А нотисом да, ошибка известная, это глюк самих OptionTree при использовании php 7. Разработчик пообещал полгода назад исправить ссие, но пока ничего нет. В инете нашел решение, завтра в видео покажу как можно убрать сей нотис

      Ответить
    • Спасибо за ответ! А вот еще вопрос может была такая задача. Делал посадку верстки на wp сайт http://mosgorvannaru.webrywok.ru/services/restavratsiya-vann-akrilom/. И тут шли 3 плашки брендов и внутри цены. Пришлось сделать так. 1) Разбить на 3 таба http://prntscr.com/e89945 . 2) Сами цены вывести http://prnt.sc/e899ij Item list. Но это ограничивает только 3-мя табами. А нет возможности сделать list item в list item ? Спасибо!

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

      Ответить
    • Ну такой тоже был вариант. Но заказчик просил сделать все на 1 странице. Что бы ему не бегать и не искать.

      Ответить
    • Зачем бегать и искать. Надо просо на нужной странце ставить не выбор цен, а выбор постов а уже посты брендов с ценами выводить и все. И заказчику нет заморок ни вам

      Ответить
  4. Артем, Возможно ли у пункта меню, где есть вложенные списки — обозначить каким-то символом (стрелка вниз или что-то вроде этого. Имею ввиду автоматический метод, а не вручную это вносить), что бы такой пункт отличался, от пунктов меню, где нет многоуровневой навигации

    Хотелось бы ещё уточнить, все забываю, какой плагин используете в саблайне для автодополнения (я бы сказал автозавершения) пхп-кода и каким хоткеем все это счастье вызываете?

    Использую phpstrom(достаточно похожи, особенно в вопросе хоткеев ), хотелось бы принаровиться, быстро набирать код, а не пользоваться гитхабом и не перепечатывать вручную, такие большие куски (я по поводу wp_nav_menu).

    +пытался настроить в саблайне фтп, не осилил 🙁 пришлось вернуться в phpstrorm, но он крайне «тяжелый». Не подскажите, как подключиться (пытался настроить sftp — безуспешно). Может знаете, где почерпнуть инфы?(мне саблайн в плане быстродействия очень нравиться)

    Спасибо за урок!

    Ответить
    • По порядку отвечаю)
      1. Да, можно стилями иконку прикрутить, в меню есть для этого соответствующие классы
      2. Использую такие плагины
      1. emmet
      2. brackethighlighter
      3. SideBarEnhancements
      4. wordpress
      хоткеи настраивал под себя по видео с ютуба)
      3. Сейчас полностью перешел на phpstrom, это только для этого сериала использую саблайм. phpstrom — нереально удобная вещь.
      4. Там есть какой то плагин для этого, но у меня тоже не получилось нормально настроить фтп на саблайме. Где-то на ютубе было видео на эту тему

      Ответить
    • >> Да, можно стилями иконку прикрутить, в меню есть для этого соответствующие классы

      Ну по факту, это ручной метод (зайти в настройки меню и там ручками awesome прописать). Я имел ввиду, автоматический (примерно, как мы делали переопределение активного класса на active). Или это слишком геморно?

      >> Сейчас полностью перешел на phpstrom, это только для этого сериала использую саблайм. phpstrom — нереально удобная вещь.

      А в пхпшторм работает автозавершение кода? Именно по части wordpress, еслм да…как-то настраивали?

      Ответить
    • Нет не слишком, через теже фильтры можно любые классы добавлять, только все равно к этим классам придется стили прикручивать. Ну и можно сразу добавлять классы иконок, а не добавлять через меню. Но если надо уникальные иконки то лучше на классы текущих пунктов меню подвешивать

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

      Ответить
    • По поводу меню — согласен, оно не так часто обновляется, что бы «устать прикручивать ту или иную иконку.
      по phpstrom разобрался, я тут по хитрому делаю, так как у меня развернуто на хостинге, я создал проект и залил локально копию файлов сайта. Смотрю уроки и редактирую файлы на хостиге, а после завершения урока, если все нормально без косяков, я файлы находящиеся на удаленном сайте синхронизирую с локальным (своеобразный аналог бекапа).

      А кривовато автодополнение у меня работают, потому-то не получилось указать WordPress плагину (в пхпшторм) удаленную папку — с локальной проблем никаких.

      Ответить
    • Когда создается удаленный проект там можно указать что это вордпресс и указать папку с ним. А пхпштром все автоматом подхватывает

      Ответить
    • блин 🙁 вот я лох, точно, а не знаете можно изменить текущий, че-т порылся в настройках не нашел.

      Ответить
    • Можно, только я не помню как, там документация есть подробная, гляньте там

      Ответить
  5. По меню вопрос возник, сразу не бросилось в глаза.
    Даже в html шаблоне это есть. У каждого пункта меню есть по бокам линии с двух сторон, у первого элемента линии слева нет — http://shot.qip.ru/00Tvmq-5T5tGu25X/, потому что он первый 🙂 (линии мы мы формируем через border-right в селекторе .sf-menu > li > a ).
    Думал дело плевое, всего лишь прописать
    .sf-menu > li > a:first-child {
    border-left: 1px solid #56585a;
    }
    Но верстка при этом повела крайне странно (для наглядности я вместо боковой линии залью фон красным) — http://shot.qip.ru/00Tvmq-4T5tGu25W/, из-за чего такое???

    PS: вопрос решил через «костыль». Привязался через присвоенный ID при формирование пункта меню (в моем случае #menu-item-37) — что не есть хорошо… Хотелось бы понять почему через псевдокласс не получилось.

    Ответить
    • Не смотрел, но скорее всего используется другой псевтоэлемент — before или after

      Ответить
    • О них я почему-то не подумал, просто first-child last-child (так и nth-last-child / nth-first-child) очень часто используются в списках (я по крайне мере чаще всего встречал).
      По поводу beforeafter — они заняты, и соответственно не работают. Первый раз сталкиваюсь с таким неадекватным поведением меню при попытке подверстать пару штришков о_О

      Ответить
    • Что-то вас не в ту сторону заносит) Там вообще не используются псевдоэлементы http://snap.ashampoo.com/xSetjgAt. Просто к ссылке граница рисуется, а у первого нет, потому что граница идет только справа от элемента

      Ответить
    • Я про это и написал 🙂
      >> Даже в html шаблоне это есть. У каждого пункта меню есть по бокам линии с двух сторон, у первого элемента линии слева нет — http://shot.qip.ru/00Tvmq-5T5tGu25X/, потому что он первый 🙂 (линии мы мы формируем через border-right в селекторе .sf-menu > li > a ).

      В теории все просто, у первого пункта меню нет линии слева, т.к. отрисовываем 1px рамку справа! *Решение*: к данному селектору добавить псевдокласс first-child (первый элемент, поправте, если не прав) с правило border-left: 1px solid #56585a;. НО! если добавить добавить данный селектр…он каким-то фигом применяется ко всем элементам меню (соответственно к ранее нарисованым границам (border-right) прибавляется ещё 1px и они становятся визуально тольще. Скриншот: http://shot.qip.ru/00Tvmq-1T5tGu26h/

      У меня собственно поэтому и родился вопрос….почему селектор не отрабатывает должным образом?

      Ответить
    • В чего вы взяли что с двух сторон? Вся идея в том и состоит, что каждому элементу добавляется только с ОДНОЙ стороны

      Ответить
    • Это понятно, если ничего не корректировать в css — рамка в один пиксель создается справа, это я понял сразу, но вопрос то состоит, как добавить рамку слева *только* у первого пункта меню.
      • Изначально создается правило у всех элементов li добавить рамку в одни пиксель СПРАВА.
      и когда я добавляю селектор
      .sf-menu > li > a:first-child {
      border-left: 1px solid #56585a;
      }
      Что бы у первого пункта меню была линия слева (по аналогии с остальными пунктами меню).
      • Но выходит не так как хочется, рамка слева в 1 пиксель прибавляется каждому элементу.
      И получается, что на стыке (например) 2и3 пунктов идет наложение *border-right* (который был изначально) и *border-left* (который я хотел добавить к первому пункту, но он добавился ко всем) — на скриншоте это наглядно видно: http://shot.qip.ru/00Tvmq-1T5tGu26h/)

      Ответить
    • Проблему решил. В пылу дискуссии решил перепробовать различные варианты. Изначально перемудрил с формированием селектора, для добавления рамки слева, только у первого пункта меню необходимо в стили добавить следующее:
      .sf-menu > li:first-child {
      border-left: 1px solid #56585a;
      }
      и будет счастье, Все-таки иногда полезно подискутировать 🙂

      Ответить
    • А вона что, видимо не понял что требуется. МОжно и так, но лучше так

      .sf-menu > li a:first-child {

      border-left: 1px solid #56585a;
      }
      Более правильно к ссылке бордер прислюнивать

      Ответить
    • Вы у себя пробовали? (попробуйте, может у меня мистика какая-то происходит)
      Просто *такой селектор я сделал сразу же* и хрен, пошло наложение рамок. Давайте даже сделаю так.
      1. Изначальный вид меню (без внесения в него правок) — https://goo.gl/qkC8Bv

      2. *ПРИ ИСПОЛЬЗОВАНИЕ СЕЛЕКТОРА last-child у ссылки*:
      .sf-menu > li a:first-child {
      border-left: 1px solid #56585a;
      }
      Получается: https://goo.gl/ghho2r

      3. *ПРИ ИСПОЛЬЗОВАНИЕ СЕЛЕКТОРА last-child элемента li*:
      .sf-menu > li:first-child {
      border-left: 1px solid #56585a;
      }
      Получается: https://goo.gl/A16eQ7

      Надеюсь так понятно, постарался максимально подробно описать. Так что я остановился на третьем пункте 🙂

      Ответить
    • Пробовал, наложение действительно происходит. Но тут все зависит от того, что требуется получить. Если бордер слева на первом элементе, тогда третий вариант — оптимальное решение, если что-то иное, то надо думать как это сделать. Может быть через nth-cyld на первом элементе, но это аналог третьего решения. В общем, надо понимать, что требуется получить

      Ответить
  6. Здравствуйте. Непонятна работа со скриптами js. Как вы переподключали functions. Что и куда надо записать… Знак $ меняем на jQuery только в конце , я так понял?

    Ответить
    • Доброго! Так макет заверстан через одно место. Все скрипты подключаются через один файл. Потому и предложил все отдельными файлами делать: берем файл слайдера например и подключаем его отдельно в functions, потом инициализируем уже в файле scripts.js

      Ответить
    • А, вот что значит «переподключил». Понял, спасибо. Да, шаблон, конечно крут)))) Думаю, что хорошо, что такой — на сложном научусь — потом легче будет…

      Ответить
    • Никак, только калбек функцию писать. В чем проблема обратится через родительский элемент?

      Ответить
  7. Целый день убил на поиск решения, подскажите пожалуйста
    нужно реализовать меню подкатегорий в рубриках, такого плана:

    страница категории например — ‘мода»

    Меню на странице: *одежда *обувь *тренды и тд
    сам контент

    реализовал таким способом в arhive.php

    Меню таким образом выводится, но вот проблема собственно в том, что нужно чтобы такое же меню выводилось и в подкатегории например обувь, но там пусто.

    Ответить
    • пришла мысль прописать для каждой категории условие типа if( cat_is_ancestor_of(4, $cat) or is_category(4) ){
      wp_nav_menu( array(‘menu’ => ‘moda’ ));
      }
      и для каждой рубрики создать произвольное меню которое записывать в массив условия.
      не будет ли сильно нагружать запросами сайт данное решение?

      Ответить
    • Будет конечно. А чем вам штатный функционал меню не угодил? Там вроде вручную можно как угодно вложенность настроить
      Ну и для таких сложных меню проще уолкен функцию прописать, чем так мучиться

      Ответить
    • мне нужно сделать вывод меню в arhive.php, чтобы в каждой рубрике было свое меню перед контентом , а так же чтобы это меню отображалось и в дочерних подрубриках.
      схематично видно на сайте woman.ru т.е в категории мода свое меню подкатегорий и тд по аналогии.
      Как это сделать вручную я не нашел
      что за уолкен функция?

      Ответить
  8. Что то совсем не понятно с прилипанием меню к верхней границе. В видео вначале идет подключение скрипта tmstickup.js в function.php затем автор говорит что у него не работает (кстати у меня тоже) якобы потому что элемент #stuck_container не активирован, а потом «Тыдыщ-щ» и у автора все получилось, а у меня нет. Как и где активировать этот элемент и надо-ли в файле script.js всеже убирать подлючение tmstickup.js???

    Ответить
  9. У меня не получается вывести меню в виде кнопок, оно получается в виде маркированного списка. Не знаю как исправить . Пробовал разные атрибуты ставить в функции, и все равно список.

    Ответить
    • Атрибуты тут не помогут, надо стилями делать. Или менять маркированный список на что-то другое, например на просто дивы

      Ответить
    • попробуйте в wp_nav_menu ==> ‘container’ => ‘div’, по крайней мере у меня так получилось. Если контейнер оставлять пустым, то у меня тоже списком выводило меню

      Ответить
  10. Я уже на этом уроке заглох))
    Нужен html макет. На гитхаб его нету, на сайте тоже.
    А без макета трудно работать дальше.
    Или я слепой и не вижу ссылку?

    Ответить
  11. А вот здесь началась жесть для новичков.
    Кому тяжеловаты функции и фильтры: погуглите на торрентах курс «Разработка интернет магазина WP + WooCommerce» от Академии Вёрстки.
    Там Исламов разжёвывает за функции и фильтры.
    Достаточно проработать материал до Woocommerce, а потом вернуться сюда — здесь уже тонкая детальная настроечка идёт.

    Ответить
  12. 9:35 можно ли принудительно прописать подключение jQuery или это лишне и он сам где-то подключается?
    wp_enqueue_script(‘jquery-online’, ‘https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js’);
    wp_enqueue_script(‘jquery-offline’, get_template_directory_uri() . ‘/js/jquery.js’);

    Ответить
    • Он есть в ядре и обычно автоматом подключается, если все-таки нет его, то можно включить wp_enqueue_script(‘jquery’);

      Ответить
    • @WPRUSe · Финты WordPress спасибо, а правильно ли я включил его из папки и из cdn?

      Ответить
    • @Braun Нет, не правильно. Зачем его откуда-то еще тащить, если он есть в ядре?

      Ответить
  13. Для новичков: так же ошибку вызывает вот эта запись
    function artbt_filter_current_item_menu_header ($classes, $item) {
    $item — нужно убрать. Видимо, связано с обновлением WP.

    Ответить

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

%d такие блоггеры, как: