Как сделать неактивный пункт меню в вордпресс
Добавил пользователь Дмитрий К. Обновлено: 04.10.2024
Сейчас мы с вами научимся создавать меню для сайта на WordPress, редактировать его пункты и узнаем как задавать область отображения этого меню.
Кроме этого узнаем о продвинутых настройках пунктов меню, о которых не каждый "бывалый" владелец сайта знает, а так же как вывести меню в сайдбаре (виджете).
Как создать новое меню
В админке сайта в боковой консоли наводим мышку на пункт "Внешний вид" и здесь нас интересует пункт "Меню". Кликаем по нему.
Увеличить.
Внешний вид - Меню
Если у вас уже были созданы ранее меню, то они отобразятся в выпадающем списке. Нас интересует создание нового меню. Кликаем на соответствующую ссылку.
Увеличить.
Создать новое меню
Нам предлагают ввести название меню. Это название будет видно только вам в админке и поэтому "обзовите" его как-то понятно. Например "Верхнее меню", "Нижнее меню", "Меню с иконками" и т.п.
Почему лучше называть меню по признаку расположения или внешнему виду? Многие темы поддерживают одновременно вывод нескольких меню (в шапке, подвале, сайдбаре, отдельных страницах и т.п.). Таким образом вы всегда сможете по названию понять что за меню и выполнить работу по настройке быстрее.
Мы создали только что новое меню. Но оно пустое!
Как наполнить меню пунктами и отредактировать
Давайте его наполним. Для этого воспользуемся левым боковым сайдбарам в настройках меню.
Увеличить.
Добавляем пункты меню
А теперь на примере. Нам необходимо в верхнем меню разместить пункты:
Некоторые страницы у нас уже созданы и поэтому их достаточно выделить галками и нажать "Добавить в меню". Если каких-то страниц нет, то просто их создадите и они появятся здесь в списке.
Пункт меню "Мы на YouTube" будет вести на внешний сайт, поэтому необходимо будет создать произвольную ссылку в соответствующем пункте. Указываете путь до вашего канала YouTube и пишите текст ссылки.
Увеличить.
Произвольные ссылки меню
Пункты меню размещены. Но они не в той очередности, что нам нужна.
Увеличить.
Меню почти готово
WordPress позволяет выстраивать структуру меню при помощи перетаскивания пунктов в нужное место (т.н. drag & drop). Просто "схватите" левой клавишей мышки пункт меню и перетяните его на позицию между нужными вам пунктами.А потом отпустите кнопку.
Увеличить.
Перетягиваем пункт меню
Осталось указать что это меню должно отображаться сверху сайта.
Область отображения меню
Обратите внимание на пункт "Область отображения" снизу настроек созданного вами меню.
Увеличить.
Область отображения меню
У данной темы сайта 2 области меню: "Верхнее" и "Нижнее".
Если мы поставим галку напротив "Верхнее", то наше меню там и отобразится.
В других темах может быть больше вариантов размещения меню, а так же некоторые плагины могут добавлять свои области. Например:
Увеличить.
Сайт с несколькими областями меню
Обычно разработчики тем и плагинов подписывают названия областей так, чтобы было понятно всем.
Нажимаем "Сохранить меню" и все готово. Проверяем у себя на фронте сайта как отобразилось.
Аналогичным образом можете создать меню для подвала (нижнее) с другим набором пунктов.
Как сделать выпадающее меню
Сделаем в только что созданном меню элемент, в котором будет выпадающий список. Например пункт "Рубрики" и в нем наши рубрики.
Увеличить.
Создаем пункт Рубрики
Теперь добавляем в меню наши существующие рубрики сайта.
Увеличить.
Добавляем рубрики сайта
Они стали общим списком в конец меню. Нас это не устраивает.
Увеличить.
Рубрики в общем списке
А теперь схватим нужную нам рубрику левой клавишей мыши и перетащим ее прямо под пункт "Рубрики" немного со смещением направо.
Увеличить.
Смешение подпункта меню
Таким образом мы создали иерархию пунктов, оно же выпадающее меню. А в пункте "Прочие материалы" я сделал еще одно вложение, т.е. при наведении мышки на этот пункт появятся еще пункты.
Увеличить.
Создаем сложную структуру меню
Дополнительные опции пунктов меню
Сверху справа есть кнопка "Настройки экрана".
Разберем по порядку.
Цель ссылки
При включении этого пункта появляется возможность указать, что при клике на эту ссылку страница должна открыться в новой вкладке браузера. Если кто знаком с HTML, то эта галка просто добавляет пункту меню target="_blank"
Увеличить.
Открыть в новой вкладке
Атрибут title
Данный пункт добавляет поле ввода названия вашего пункта меню, которое будет появляться при наведении мышки на него. В разметке html это параметр title="" у ссылки (привет SEO).
Классы CSS (Классы для li)
Позволяет задать индивидуальный class для элемента li в списке. Используется верстальщиками в целях придания отдельно взятому пункту индивидуального стиля или "повесить" на пункт какой-то сценарий js. Обычному пользователю может никогда не пригодиться.
Отношение к ссылке (XFN)
Данное поле выводит значение в атрибуте rel. На практике чаще всего используют nofollow или noindex в целях поисковой оптимизации. Но у этого атрибута есть больше возможностей, о чем можете почитать здесь.
Описание
Это текст, который может появляться при наведении на пункт меню, либо рядом с названием пункта. Все зависит от самой темы и задумки разработчика. На практике редко используется.
Иконки
Это не стандартный функционал WordPress и полностью зависит от самой темы. На нашем примере используется тема Romb и в ней предусмотрены иконки для пунктов меню в верхней части сайта, а так же в произвольном меню. У иконок можно менять цвет.
Увеличить.
Иконки в меню
Достаточно выбрать любую иконку из появляющегося окна.
Увеличить.
Окно выбора иконок
Аналогично выбираем цвет иконки в появляющейся по клику палитре.
Как вывести меню в сайдбаре
Для этого перейдем в боковой консоли админки сайта "Внешний вид" - "Виджеты".
Добавим из списка виджет "Меню навигации" и в его настройках выберем созданное ранее меню.
Если брать упомянутую ранее тему Romb, то у нее для этого есть специальный виджет, который будет отображать еще и иконки меню, которые вы раньше выбрали.
Увеличить.
Меню с иконками
На этом все. Если будут вопросы - не стесняйтесь задавать в комментариях.
Привет! В моей жизни как всегда происходит множество событий, поэтому очень сложно выкроить время для блога. Вчера мы купили билеты в Шри-Ланку и скоро улетаем на 4 месяца, приезжайте в гости! А теперь я занимаюсь поиском самого красивого свадебного платья:))
Сегодня поговорим о том, как создать меню в WordPress, а также добавлять данные блоки в произвольных областях шаблона.
Мы научимся настраивать меню и редактировать его по своему усмотрению.
Редактирование и настройка меню в Вордпресс
Для начала разберем функционал, доступный нам в админ-панели блога. В новых шаблонах, совместимых с последними версиями WordPress, вывод меню достаточно прост и настройка не составляет особых трудностей.
Как видно на скриншоте, в левой панели можно выбирать элементы, которые будут составлять ваше меню. Это могут быть страницы, произвольные ссылки, либо рубрики блога.
Выбираем название того меню, которое мы создали.
Переходим на сайт и смотрим, что у нас получилось:
Как видим, все созданные нами разделы присутствуют, а дочерние рубрики появляются при нажатии на родительскую в выпадающем списке.
Это пример адаптивной темы. Вот так будет выглядеть меню в мобильной версии:
В данном случае в нашем распоряжении была всего одна область темы. Но что делать, если мы хотим добавить еще одно меню в другую часть шаблона WordPress?
Как добавить произвольное меню в WordPress без плагина?
Перед тем, как сделать меню в Вордпресс своими руками, вспомним, как создавать дочернюю тему.
После того, как мы создали дочернюю тему, в которую можно вносить изменения без ущерба для основной темы, добавим в ее файл function.php следующую функцию.
register_nav_menus( array( 'additionalmenu' => __( 'Additional Menu', 'Название Вашей Темы' ) ) );
Если вы не создаете дочернюю тему, то добавляем ее в основной файл функций вашей темы.
Данная функция позволит нам добавить дополнительное меню WordPress в наш шаблон и создаст для него еще одну область.
Должна появиться дополнительная область темы с названием, которое мы задали в функции.
В нашем случае создаем новое меню под названием Additional:
Но теперь нам нужно связать эту область с блоками шаблона. Например, нам нужно сделать дополнительное меню под шапкой сайта на WordPress. Заходим в файл header.php или копируем его в дочернюю тему. После тега body добавляем следующее:
У нас над шапкой образовалось дополнительное меню. Теперь нам нужно задать для него стили, выровнять пункты в строку и спустить блок под шапку.
Вносим следующие изменения в файл стилей style.css:
Смотрим, что получилось:
Отображение созданного нами меню еще далеко от идеала, но, при должном редактировании файла css WordPress, вы сможете привести его в соответствующий вашему блогу вид.
Далее разберем, как добавлять произвольное меню с помощью WordPress-виджетов.
Виджеты и плагины для добавления меню в WordPress
Предлагаю к просмотру видео о создании меню в WordPress:
В нашем случае блок меню добавлен в сайдбар. Для него мы выбрали разделы, созданного нами блока Additional.
Соответственно в боковой панели справа у нас отобразится следующий блок:
Кроме встроенного в тему стандартного виджета, также есть множество дополнительных плагинов, предназначенных для создания различных видов меню: вертикальные, горизонтальные, выпадающие и т.д.
Вот, к примеру, плагин для создания вертикального мультиуровневого меню в WordPress: Navgoco Vertical Multilevel Slide Menu.
Или обладающий расширенными функциями настройки виджет Dropdown Menu Widget.
Также популярны виджеты с JQwery эффектами для меню, например: JQuery Slick Menu Widget.
Разберем на примере принцип его работы.
Среди списка доступных виджетов должен появится новый, установленный нами. Перемещаем его в доступную область, в нашем случае сайдбар:
Раскрываем его настройки:
Выбираем название меню (разделы, которые мы создавали), Tab Text – название блока, который будет выводиться на сайте, место размещения (выберем Left – слева), Offset – отступ от верхнего края в пикселях, Animation Speed – скорость анимации (Fast). Можно выбрать Auto-Close Menu, чтобы блок исчезал автоматически. И выбираем цвет блока. Нажимаем сохранить и смотрим результат:
Слева в шапке появилось выдвижное меню. При клике на язычок, появляется отображение разделов:
При повторном нажатии, блок снова исчезнет.
Это лишь один из видов установки, редактирования и вывода меню в WordPress.
Выбирайте наиболее приемлемый и удобный способ создания меню для своего WordPress-блога. Удачи!
Вместе с WordPress в комплекте идет мощная система навигации при помощи меню, на основе которой разработчики и администраторы сайтов могут создавать кастомные красивые меню для собственных сайтов. Используя для этой цели редактор меню, пользователь вполне может самостоятельно добавлять и удалять навигационные меню, добавлять новые пункты и вкладки, создавать каскадные меню и выполнять ряд других кастомизаций по своему вкусу.
Когда была написана статья "WordPress плагины для организации меню", я понял, что в ней речь пошла о плагинах лишь потому, что сам я никогда не старался до конца понять систему настройки и редактирования меню. Именно тогда я сделал себе "зарубку на память" относительно того, чтобы изучить, как создаются навигационные меню в WordPress. Ранее я научился модифицировать уже существующие меню; но в этот раз предлагаю вам вместе со мной научиться созданию собственных меню "с нуля".
Как устроена система меню в WordPress
Начиная с WordPress 3.0 разработчики тем получили возможность самостоятельно задавать навигационные меню в собственных темах для сайта. Большинство современных тем для WordPress поставляются сразу с заданным расположением и структурой меню навигации, так что в подавляющем большинстве случаев у вас не будет необходимости редактировать меню навигации. Но все же, давайте предположим, что у вас появилась необходимость создать меню самостоятельно. Именно в этом случае вам надо сначала разобраться, как работает система меню навигации в WordPress.
На первом шаге при создании меню разработчики тем задают заголовки меню и расположение их на странице путем регистрации меню в структуре темы. Следующим шагом является прикрепление меню к заданным локациям и выбор стилей для отображения. Также разработчик темы может задать поддержку множества навигационных меню в своей теме. И последним шагом в работе с меню является редактирование меню самими пользователями с помощью встроенного редактора Menu Editor.
После регистрации нового меню вы сможете добавлять его к вашим темам оформления сайта. Выглядит это вот так:
Работаем над стилем оформления меню для WordPress
Функция wp_nav_menu позволяет вам задать контейнер для меню, а также значения параметров container id, menu id и menu class. Делается это для того, чтобы позже можно было легко менять стиль вашего меню. Перед тем, как вы углубитесь в настройку стиля для вашего меню WordPress, важно разобраться в классах CSS , которые используются в настройке и работе с меню для WordPress.
Давайте сначала посмотрим на то, как мы будем подгонять стиль для нашего меню навигации:
Теперь мы стилизуем неупорядоченный список, добавим эффекты и создадим вложенные меню:
Стилизуем готовую страницу:
Изучение классов CSS используемых в системе меню для WordPress
WordPress отображает меню в виде неупорядоченного списка. Если вы новичок в работе с CSS, тогда вам стоит остановиться, не читать этот пост дальше, а вместо этого почитать довольно ветхое по времени, но все еще актуальное руководство " CSS Design: Taming Lists " для того, чтобы обрести базовое понимание того, как из неупорядоченного списка создать красивое навигационное меню для своего сайта.
В этом неупорядоченном изначально списке WordPress каждому компоненту меню назначает свой класс. Есть класс для контейнера, который содержит весь неупорядоченный список; есть класс container ID, есть класс css для меню и отдельные классы для каждого типа и компонента меню с собственным css.
Для начала все это может звучать немного запутанно и непонятно, но на практике все не настолько страшно. Здесь так много отдельных классов, потому что WordPress позволяет вам задавать очень много типов меню для своего сайта. Вдруг вы захотите добавить категорию, страницу, настраиваемую внутреннюю или внешнюю ссылку. Каждый тип таких данных определен в WordPress отдельно, и так у дизайнеров есть более широкий набор опций для настройки меню в зависимости от выбранного оформления и стиля вашей темы.
| Класс CSS | Описание класса |
| .menu-item | Основной класс, который добавляется к каждому пункту в меню. |
| .menu-item-object- | Этот класс добавляется к каждому пункту меню, который является объектом вида категории, ссылки или тега и т.д. |
| .menu-item-object-category | |
| .menu-item-object-tag | |
| .menu-item-object-page | |
| .menu-item-object- | |
| .menu-item-type- | Здесь параметр используется либо для параметра “post_type”, либо для параметра “taxonomy” |
| .menu-item-type-post_type | |
| .menu-item-type-taxonomy | |
| .current-menu-item | Класс, который используется на странице, которую в данный момент просматривает пользователь |
| .menu-item-home | Этот класс связан с главной страницей сайта и меню, которое на ней отображается |
| .page_item | Обеспечивает обратную совместимость, когда меню по умолчанию возвращает к wp_page_nav |
| .page-item-$ID | |
| .current_page_item |
Функционал меню появился в версии WordPress 3.0. До этого вывод навигации обычно осуществлялся при помощи функций wp_list_categories() и wp_list_pages(). Конечно, иногда бывает нужно вывести категории сайта в виде меню и ещё чтобы дочерние категории были в виде выпадающих списков, но гораздо удобнее, если каждый элемент меню можно добавить, изменить или удалить по отдельности в админке сайта.
Также в меню WordPress вы можете изменять порядок элементов банальным перетаскиванием.
Что будет в видеоуроке?
Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.
В этом уроке, который длится практически 40 минут, мы сделаем первые шаги по интеграции интерфейса в админке WordPress, а именно – запрограммируем Меню нашей вёрстки:
А непосредственно в админке оно будет выглядеть вот так:
Я думаю, что вы уже знакомы с этим стандартным WordPress интерфейсом, но если нет:
- Этот интерфейс позволяет очень легко добавлять в меню как любой элемент контента (запись, рубрика, метка, страница и так далее), так и произвольную внешнюю ссылку.
- Порядок или вложенность элементов легко меняется перетаскиванием.
- В любой элемент можно легко добавить произвольный CSS-класс(ы), target menu-support">Добавление поддержки меню в тему
Давайте подробно рассмотрим весь процесс добавления меню. Для начала переходим в админке во Внешний вид > Меню… У вас нет такого пункта? Окей, значит вашей темой меню не поддерживаются, сейчас мы это исправим, рассмотрим даже два способа.
Способ 1. Включение меню через add_theme_support()
Для активации функционала меню вы можете использовать функцию add_theme_support(). Всё просто и легко, вставляем этот код в functions.php текущей темы и да, после этого мы можем зайти в админку и начать создавать меню.
От себя добавлю, что этот способ мне почти не пригодился, наверное он хорош только тогда, когда вы хотите использовать меню в виджетах (и только в виджетах, без регистрации областей отображения меню, о которых поговорим ниже).
В двух словах, область меню — это такая условная область, которая предназначена для вывода меню (объяснил 😹). Как всё это происходит по порядку:
Да, код — в functions.php .
Как создать меню
Давайте теперь разберемся, как создавать и как управлять меню. В принципе в админке WordPress всё сделано интуитивно, но на всякий случай мы всё подробно рассмотрим.
Итак, переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.
Тут мы используем стандартную тему WordPress Twenty Twenty One.
Поддержка таксономий и типов постов
Вы возможно заметили, что в меню по умолчанию присутствуют только записи, страницы, рубрики и метки (включаются в настройках экрана).
И у тех и у других принцип один и тот же — при регистрации таксономии (register_taxonomy()) или типа поста (register_post_type()) значение параметра функции show_in_nav_menus должно быть true .
Читайте также: