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

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

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

54 комментария к “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. Как вы с этим справляетесь ? или не трогаете их ? Заранее спасибо!

    Ответить
    • Спасибо за ответ! А вот еще вопрос может была такая задача. Делал посадку верстки на 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 – безуспешно). Может знаете, где почерпнуть инфы?(мне саблайн в плане быстродействия очень нравиться)

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

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

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

      Ответить
    • По поводу меню – согласен, оно не так часто обновляется, что бы “устать прикручивать ту или иную иконку.
      по 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) – что не есть хорошо… Хотелось бы понять почему через псевдокласс не получилось.

    Ответить
    • Это понятно, если ничего не корректировать в 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 такие блоггеры, как: