БЭМ меню WordPress только с помощью фильтров - Практика #1
HTML-код
- Опубликовано: 27 май 2018
- Привет. Мы уже многое узнали о меню WordPress в предыдущих видео, но не всё. К примеру, о walker ещё не говорили, то есть всю мощь процесса формирования меню мы не познали. Возможно ли без написания walker модифицировать меню? Да, конечно. Мы можем повлиять на генерацию меню при помощи передаваемых параметров функции wp_nav_menu() или через хуки, которые используются чуть ли не на каждом шаге формирования меню. И сейчас мы попробуем с помощью накопленных знаний из предыдущих видео сформировать меню по методологии БЭМ. К сожалению, я не знаком с этой методологией настолько, чтобы самому написать эталонную структуру меню, поэтому мне пришлось воспользоваться примером из сети и советами коллег из чатов. Именно такой верстки мы попытаемся достичь в этом видео. Если вы считаете, что верстка меню из примера в корне не отражает суть методологии БЭМ, то пожалуйста в комментариях покажите правильный пример, с удовольствием по нему запишу видео. Также подчеркну, это видео записано с предположением, что вы посмотрели предыдущие видео из серии уроков о меню в WordPress, а также знаете основы php и умеете работать с фильтрами WordPress. Поэтому я не буду разжевывать каждый момент. Ну всё, начнем!
Закрепите материал:
bit.ly/2kxF2cG - Код из урока.
bit.ly/2GxXJu8 - Все уроки о меню в WordPress
bit.ly/2Gv7kSe - wp_nav_menu() и её хуки.
bit.ly/2EjEoa6 - рекомендую хостинг.
Поддержать проект:
Яндекс и Карты - yasobe.ru/na/wp_plus
Карта Qiwi и Карты 4890494399032606
WebMoney Z976669281271
WebMoney R406002894047
PayPal www.paypal.me/campusboy
То что нужно для любителей БЭМ-наименования! Спасибо)
Потрясающе! СПАСИБО ВАМ ОГРОМНОЕ!
Дмитрий, спасибо! Отличная подача материала и по делу. Про БЭМ очень актуально.
Спасибо, Майк, за поддержку!
*бля, сколько я с валкером наипался. так нормально нифига не сделал. Спасибо за видос!* подписка
Очень круто!!! Большое спасибо за информацию!
Ребята спасибо! То что нужно, однозначно лайк и подписка.
Все четко по делу и без воды. Отлично!
Большое спасибо за отзыв!
БЭМ в примере, конечно немного странный. Но видео отличное. Ничего лишнего, кодинг на скорости. Это первое Ваше видео, которое я посмотрел. Подобного качества материал в русском сигменте я еще не встречал. Спасибо за за контент.
Спасибо за отзыв. Тут такое дело, что как ни сделай, всё равно скажут "по бэм не так", поэтому в ролике своей задачей ставил показать, как добраться до нужных элементов и как поменять на своё. А дальше каждый сам может сделать "вот так правильно" :-)
Очень круто! Спасибо!
Dima, this channel very helpful for me. Thenk's for your job!
Спасибо. Очень полезно!
Огромное спасибо!! Очень помогли!
Отлично, спс!
Спасибо!
идеально
ты крут
Спасибо за видео! Было бы здорово на таком же примере рассказать как работать с ВИДЖЕТАМИ, т.к. там тоже есть div, ul, li и классы, которые хотелось бы заменить на свои.
Максим, обязательно такое будет! Просто сейчас переходный момент, с вливанием Гутенберга в ядро систему виджетов хотят переделать, я жду когда станет более понятно, что хотят изменить.
Здравствуйте, как к - родителю (который имеет вложенный ) добавлять класс?
Если не удалять классы для li, можно использовать "in_array('menu-item-has-children', $classes)"
Но если классы по BEM, не нужные удаляются, то какая альтернатива для проверки условия, что - является родителем?
Здравствуйте. Такие меню лучше делать через Walker, у объекта которого есть свойство has_children, которая обновляется при каждом просчёте очередного элемента меню.
@@wpplus Да, спасибо, тогда же и сделал, walker->has_children ))
Без приставки walker не работало)
Спасибо за видео. Ваше видео с wp_walker menu уже было ? (если да, дайте ссылку пожалуйста, поиск не помог).
Пожалуйста. Нет, этого видео ещё нет.
Отличные уроки ! спасибо за очень подробную информацию! я просмотрел все Ваши 4 урока по созданию меню в Wordpress. Всё разобрано до мельчайших подробностей. Все функции и всё такое. Но. Я не понял только одного: Как создать МЕНЮ в Wordpress! Именно меню! А не тот маркированный список страниц, который у меня получается. Может я что-то где-то пропустил , не знаю. Подскажите, пожалуйста, как преобразовать этот маркированный список в нормальное меню. Что бы были кнопки, а не список с кружочками слева. Об этом почему-то ничего не сказано. Его надо с помощью CSS стилизовать? Я это могу сделать. Но оно же как-то должно делаться с помощью функций Wordpress. Я в одном видео на RUclips видел, как человек тоже делает меню, и у него оно получается в виде кнопок, при этом он ничего в CSS не пишет. А как он это делает, тоже не показано. Именно преобразование из списка в меню.
Спасибо за отзыв и хороший вопрос. Да, я действительно пока ничего в уроках не показывал, как навести "красоту" и даже об этом в одном из видео прямо говорю. У меня цель другая. Эти видео для тех, кто создаёт с нуля свою тему, и естественно я предполагаю, что человек знает php/css/js хотя бы на базовом уровне. Тут ведь в меню главное разобраться, как оно работает, как его кастомизировать и выводить, а "красивости" каждый сам делает свои, по своим задачам, ведь он разработчик и уж css точно знает. Так и тот человек, видео которого Вы смотрели, делал. Но он скорее всего делал на примере уже готовой темы и в ней уже были прописаны стили в файле, к примеру, style.css темы. И сразу красота :-) Мой плейлист ещё не закончен, я даже теорию до конца не успел рассказать, так что всё впереди - в будущем я буду брать любое меню с того же codepen.io (или вёрстку со стилями будут давать подписчики) и на примере показывать, как это дело "натянуть" на нашу функцию по выводу меню.
Здравствуйте.
Спасибо за отличные уроки!
Скажите пожалуйста, почему из данного примера теряются классы "active" с тегов если вложенность не одна, а к примеру 2 и более?
Как бы вернуть "active" всем родителям в активном пункте?
Заранее благодарен за ответ или рекомендацию.
Здравствуйте. Ну что значит "почему"? :-) Потому что не предусмотрено. Можете доработать так..
В функции filter_nav_menu_css_classes() вместо
if ( $item->current ) {
$classes[] = 'menu-node--active';
}
написать
if ( $item->current_item_ancestor || $item->current ) {
$classes[] = 'menu-node--active';
}
Это если я правильно понял задачу. Тогда вёрстка меню примет следующий вид pastebin.com/ZSsawCFi
Супер! Большое спасибо за помощь и такой быстрый ответ. Удачи Вам и Вашим проектам!)
Взаимно :-)
@wp-plus Здравствуйте, спасибо больше за урок. У меня один важный вопрос. У меня у вложенных клиентов UL I ill клиентов стоят иные классы, отличные от первого уровня. Например, если у первого уровня были navigatiin_nav_link, то у второго уровня navigatiin_nav_submenu_link. Как то возможно добавить к ним эти классы ?
Здравствуйте. Я не до конца понимаю у каких элементов что должно быть. Могли бы вы расшарить на pastebin.com желаемую вёрстку меню?
Как всегда на высоте Дим. Помню была задачка с меню, когда только начинал с wp работать, сделать так чтобы логотип был в середине меню по центру. Как бы ты решил?(надеюсь понятно изложил)
Хороший вопрос :-) Я подумаю! Но при такой вёрстке надо соблюдать, чтобы по сторонам всегда было одинаковое количество пунктов. И как бы автоматизация страдает в целом начинает :-)
Здравствуйте! Подскажите, у меня тема не предусматривает многоуровневое меню, до поры все устраивало. Сейчас с развитием сайта, необходимо многоуровневое меню. Возможно ли исправить эту проблему в коде и как это сделать?
Приветствую. Я не ясновидящий, поэтому из всех данных, что Вы дали могу лишь ответить так:
- "Возможно ли исправить эту проблему в коде" - Конечно.
- "и как это сделать?" - увы, я не могу дать Вам курс знаний по PHP, CSS и JavaScript (возможно меню работает на нем) в одном сообщении. Чтобы свободно править такие вещи, нужно знать эти технологии.
Тема-то хоть какая?
Я понимаю что не ясновидящий)))) хотя на первую часть вы ответили, что можно) Напишу разработчику темы, спасибо!
Дмитрий, приветствую!
А как сделать так:
- для полностью убрать весь класс (как это сделано у Вас в примере с id), но если есть у вложение , то для этого добавить класс.
Должно получится так:
Home
News
Economy
Поддержал проект, закинул на яндекс 50 руб.
Большое спасибо за поддержку канала. К сожалению, пока нет времени поэкспериментировать, может ближе к ночи появится. Отпишусь в любом случае.
@@wpplus нашёл решение (2 ответ), но почему-то решение не работает:
wordpress.stackexchange.com/questions/16818/add-has-children-class-to-parent-li-when-modifying-walker-nav-menu
Попробуйте вот так gist.github.com/campusboy87/6cc75646187201b75854cef49aee8a0d
будет ли продолжение этих уроков?
Конечно. Сейчас готовится текст по "Создание своего Walker для меню", пока у меня не получается все те сложности сформулировать просто. Как поборю, потом останется только примеры делать простых и сложные. У тебя есть какие-то предложения по этой теме?
нет. но тема интересная
На 2.20 минуте удаляем айди из шаблона, вот так - 'item_wrap' => '%3$s',, но у меня ето не работает, айди остается, возможно ли ето из-за обновлений вордпреса? буду рад за разяснение, Ваши уроки очень полезные и познавательные, никакой воды, так держать! от меня ПЛЮСИЩЕ!!! )))
Привет, делал по видео всё сработало, id ушёл.
а где обещанный разбор walker класса ?
В процессе "производства"
@Александр Орлов Добрый день. Спасибо, что пинганул. Хотел перед этим другие темы про CF7 раскрыть, но пожалуй по меню действительно надо добить, тема более востребована. Практически готов текст про "Плоское меню", которое будет преамбулой для Walker, показывающий проблему, почему этот самый Walker появился. Материал готов на 80%. Затем про сам Walker видео, текст под него на 50% готов и я пока застопорился в какое русло идти: дотошное объяснения всё и вся или быстрое и простой, чтобы чисто суть понять. Как считаешь, как лучше?
@Александр Орлов Спасибо за мнение и интересное предложение, добавил в список на реализацию., отличный получится пример!
Здравствуйте!
Помогите кому не лень =(
3:22 пишем функцию замены id элементов li списка ul, через фильтр.
в строке:
return $args->theme_location === 'header-menu' ? '' : $menu_id;
для чего « : $menu_id;»? и зачем столько аргументов? что бы точно не ошибиться с меню?!
И $args->theme_location === 'header-menu' - берёт каждый из четырёх аргументов, запихивает их в theme_location и сравнивает их с header-menu? так ведь?
Здравствуйте.
Проверка $args->theme_location === 'header-menu' ? '' : $menu_id нужна для того, чтобы работать именно с нашим меню. Если проверку убрать и всегда возвращать пустое значение, то атрибут id пропадёт у всех элементов li у всех меню, что есть на сайте. Тут вам решать, нужно ли такое поведение или нет.
Насчёт $menu_id - это моё упущение, потому что логичнее было назвать эту переменную как $item_id, потому что в ней хранится ID текущего обрабатываемого пункта меню, что позволяется делать атрибут id у li элемента уникальным, ведь id пункта меню в базе данных тоже всегда уникальный. И это важное правила использования id в css - он у каждого элемента должен быть уникальным и не никогда повторяться в рамках страницы в браузере.
Почему передаётся больше аргументов, чем требуется? На примере функции хука nav_menu_item_id и функции filter_menu_css_id(). Через этот фильтр идут 4 переменные, для примера я их показываю в коде сразу все, хотя нужны всего две. Во-первых, нужная переменная $args передаётся в функцию третьей, поэтому по правилам синтаксиса php, чтобы до неё добраться, приходится указать и вторую (ненужную в этом примере) переменную $item. Во-вторых, подчеркну, что все они указаны ради примера (наглядности), поэтому и четвёртая переменная $depth, которую в отличие от 1 факта можно было безболезнено опустить, была указана по этой мотивации. Итого, вы можете формировать атрибут id для элемента li на основе информации со всех этих переменых, это удобно.
Последний вопрос, я увы не понял. Могу лишь сказать, что мы делаем проверку $args->theme_location === 'header-menu', что изменять различные параметры только у меню, которое прикреплено к области меню header-menu, а остальные оставались неизменны.
Проще дать "люлей" верстальщику, чтобы нормально сверстал :)
Ничего себе ты загнул :-) Но БЭМ не прихоть, а потребность в большом проекте :-)
Это я тебе как верстальщик говорю, twentysixteen в помощь и погнал "верстать под WordPress" :) Верстка практически сама потом натягивается )))
Нифига ты крут. Ждём видоса мастер-класс натяжки вёрстки на WordPress. Хочу качественные туториалы))
Да не, я сейчас с WP почти не работаю, больше ушел в Fron-End. А снимать туториалы, это вообще не про меня) Я пытался как-то раз записать коллеге кодревью, в итоге - полтора часа воды. А самый первый раз так вообще обидно было, вроде как начал запись в хенгаутс, а потом через час понял что стрим не запустил youtube)
Слушай, а vue.js твоя моя понимать?
Подскажите пожалуйста как добавить DIV после (a)
ОРИГИНАЛЬНЫЙ КОД:
Главная
Политика конфиденциальности
Без рубрики
ТО ЧТО ХОЧЕТСЯ:
Главная
Политика конфиденциальности
Без рубрики
Ответил тут wp-kama.ru/function/wp_nav_menu/comment-page-5#comment-23944
Сума сойти, я уже несколько дней не могу сделать нормальное меню