как редактировать меню в вордпресс

Как настроить свои стили для меню в WordPress

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

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Когда была написана статья «WordPress плагины для организации меню«, я понял, что в ней речь пошла о плагинах лишь потому, что сам я никогда не старался до конца понять систему настройки и редактирования меню. Именно тогда я сделал себе «зарубку на память» относительно того, чтобы изучить, как создаются навигационные меню в WordPress. Ранее я научился модифицировать уже существующие меню; но в этот раз предлагаю вам вместе со мной научиться созданию собственных меню «с нуля».

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Как устроена система меню в WordPress

Начиная с WordPress 3.0 разработчики тем получили возможность самостоятельно задавать навигационные меню в собственных темах для сайта. Большинство современных тем для WordPress поставляются сразу с заданным расположением и структурой меню навигации, так что в подавляющем большинстве случаев у вас не будет необходимости редактировать меню навигации. Но все же, давайте предположим, что у вас появилась необходимость создать меню самостоятельно. Именно в этом случае вам надо сначала разобраться, как работает система меню навигации в WordPress.

На первом шаге при создании меню разработчики тем задают заголовки меню и расположение их на странице путем регистрации меню в структуре темы. Следующим шагом является прикрепление меню к заданным локациям и выбор стилей для отображения. Также разработчик темы может задать поддержку множества навигационных меню в своей теме. И последним шагом в работе с меню является редактирование меню самими пользователями с помощью встроенного редактора Menu Editor.

Регистрация и отображение меню навигации в WordPress

Регистрация меню — сравнительно простая процедура, и все что вам надо, — это задать расположение меню, прописать его регистрацию и задать имя для нового меню в теме сайта:

После регистрации нового меню вы сможете добавлять его к вашим темам оформления сайта. Выглядит это вот так:

Работаем над стилем оформления меню для 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 — процесс сравнительно легкий и увлекательный. Лично мне даже немного не верится, насколько я смог продвинуться от простого блоггера к человеку, который неплохо может разобраться в коде и работе с CSS, HTML и функциями WordPress. С навигационными меню в WordPress не так сложно справиться, как может показаться на первый взгляд. Для того, чтобы поэкспериментировать и вдохновиться на собственные шаги в этом направлении, скачайте несколько тем для WordPress и посмотрите на то, как в них заданы и работают навигационные меню.

Источник

Меню сайта

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

Создать меню

Ниже представлен порядок редактирования существующих меню сайта или создания произвольных меню сайта.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Области для меню, доступные в теме Rivington, — это Основное меню и Меню ссылок на социальные сети.

Пункты меню Ссылки на социальные сети оформлены как значки социальных сетей. В данном примере мы выбираем Основное меню.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Добавить

В дополнение к уже опубликованным страницам в пользовательское меню можно добавлять пункты меню разного типа:

Для добавления одного из этих пунктов меню:

Если вы хотите добавить в меню страницу или запись, которые не использовались ранее, задайте их имена в поле Добавить новую страницу или Добавить новую запись. Пустая страница//запись будет добавлена на ваш сайт и автоматически добавится в ваше меню.

Затем вы сможете добавлять содержимое на страницу или в запись через страницы//записи вашего сайта.

Область отображения меню

Если вы хотите, чтобы это меню отображалось на вашем сайте, выберите Область для меню. Для основной навигации корректный параметр зависит от используемой темы. Он часто указывается как «Основная», «Заголовок» или «Верхняя часть».

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

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Автоматически добавлять страницы в ваше меню

В пункте Опции меню поставьте флажок «Автоматически добавлять новые страницы верхнего уровня в это меню», если вы хотите, чтобы новые создаваемые страницы автоматически добавлялись в меню.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

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

Изменить порядок элементов меню

Для изменения порядка пунктов меню переместите пункт меню, нажав ссылку Изменить порядок:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Создать выпадающие меню

Вложение страницы создает подменю или выпадающее меню.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Создать неинтерактивный элемент меню

Вы можете создать неинтерактивный элемент меню, что полезно при создании выпадающих меню.

После добавления неинтерактивного элемента меню вы сможете добавить страницы или записи, которые вы хотите отображать в этом меню, после чегоизменить их порядок для создания вашего выпадающего меню.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Удалить пункты меню

Редактирование содержимого, которое отображается в меню вашего сайта, не приведёт к удалению страниц или записей, которые вы создали для своего сайта. При удалении элемента меню происходит только удаление ссылки на страницу из вашего меню.

Настроить текст пунктов меню

Чтобы изменить название пункта меню, отображаемое на сайте, отредактируйте метку навигации.

Например, страница может называться «Связаться с командой разработчиков», но вы хотите, чтобы в меню она просто отображалась как «Контакты».

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Изменить дизайн меню

При желании изменить анимацию появления меню, например, положение, выравнивание или размер, можно использовать пользовательские CSS, доступные в плане WordPress.com Premium или выше.

Сохранить изменения

Часто задаваемые вопросы

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

Источник

Как добавить и изменить меню в WordPress. Добавить и изменить меню темы

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Настройки, предоставленные разработчиками, значительно облегчают задачи по создании довольно продвинутой структуры меню. Именно созданием, настройкой и дальнейшим редактированием вертикального меню WordPress мы и займемся.

Как настроить и добавить меню WordPress сайта

Перед непосредственной настройкой мы заблаговременно выбрали и установили тему wordpress, в зависимости от которого будет по разному отображаться наша навигации по сайту.

Перед тем как добавить меню wordpress, хорошо продумайте то, что вы хотите там разместить. Если вы не знаете какие страницы поместить в меню, тогда составьте план вашего сайта на листочке, нарисуйте стрелочки возможные переходы на ваши внутренние страницы и выберите те из них, от которых следует больше всего ссылок. Это придаст вашей навигации большего веса и пользы для посетителей.

Описание настройки меню представлено как в текстовом виде, так и в небольшом видео уроке.

Изучая статью вы поймете как добавить меню wordpress. В нашу навигацию будут входить страницы созданные ранее, либо мы можем использовать рубрики для данной цели. Заходим с административной панели во вкладку “Внешний вид”/”Меню”.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

В верхнем правом углу видим ссылку “создать новое меню”, кликаем на него и нам открывается следующее диалоговое окно:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

В ячейке для ввода названия пишем нужное нам название, в нашем примере это “Главное меню”. После этого кликаем по кнопке и создаем нашу основную навигацию.

Далее нам нужно изменить меню wordpress сайта:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

После выбора приступим к настройке и отладке:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

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

Для выбора порядка отображения страниц их названия просто перетаскиваются мышью вверх вниз.

Так же здесь можно настроить выпадающее подменю сделав нужную страницу дочерней по отношению к другой.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

После настройки структуры нам нужно активировать наше творение. Заходим сверху в “Управление областями”, выбираем созданную тему и нажимаем “Сохранить изменения”. Для того что бы скрыть, удалить или редактировать пункты меню нужно убрать их из этого списка.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Как видите создание меню wordpress не так уж и сложно происходит, тем более что выполняется не так часто. Зачастую настройка происходит один раз при создании вашего сайта, после чего вероятнее всего будет только редактироваться вами.

В зависимости от вашей выбранной темы у вас должно получиться примерно такое меню:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

При правильном подключении и выводе меню, подпункты должны быть выпадающими. Если же ваша тема не поддерживает такое действие, тогда нужно будет подключить библиотеку скриптов.

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

Так же все проделанные действия вы можете провести в визуальном редакторе шаблона, что гораздо проще и наглядно. Просмотрев видео расположенное вверху статьи мы научимся как это сделать.

Добавление поддержки горизонтального меню WordPress

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

Если вы добавите эту функцию в нужном месте шаблона, она выведет меню “по умолчанию”, которое заданно в настройках платформы. Данная функция имеет ряд параметров, которые можно использовать.

Так же будет нужно проводить настройки внешнего вида, добавлять классы и правила к ним. Увы это уже совсем другая тема для разговора. Если данный вопрос вам интересен можете написать в комментариях и я сделаю вам подробный урок об этом.

Что должно находиться в основном меню сайта

Тщательно продумайте пункты меню которые должны отображаться в основном меню вашего сайта. Названия должны быть краткими, но в то же время весомыми и понятными.

Не стремитесь впихнуть в вашу навигацию огромное количество пунктов, это вам не только не поможет, а и принесет вред. Пользователь может запутаться в вашем меню и просто не найти нужное ему.

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

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

Вообщем это все что я хотел рассказать вам в этом уроке, надеюсь он был полезным и понятным, и вы разобрались как добавить меню WordPress. Если возникнут вопросы пишите их в комментариях или через “Обратную связь”.

Источник

12 отличных способов настроить меню навигации WordPress

Доброго здравия, друзья!

Очень рад вас видеть на страницах моего маленького блога посвященному самой популярной CMS — WordPress.

Сегодня я бы хотел рассказать вам о двенадцати самых лучших способах настроить меню навигации в WordPress.

Поиск способов настройки меню навигации WordPress — распространенный онлайн-запрос.

Это понятно, поскольку навигация — один из центральных элементов любого веб-сайта.

Она ориентирует посетителей и в целом вносит большой вклад в пользовательский интерфейс и удобство использования (или его отсутствие).

Если вы ищете способы настроить меню навигации на своем собственном веб-сайте WordPress, вы попали в нужное место.

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

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

В конце концов, я хочу, чтобы вы могли сделать это именно так, как вы хотите и что нужно вашим посетителям.

Готовы вместе разобраться в этой теме (да, я уже положил 100 рублей в банку с каламбуром)? Тогда вперед.

Как добавить и настроить меню на панели администратора WordPress

Давайте сначала поговорим о встроенных функциях WordPress.

CMS позволяет управлять всем, что связано с меню навигации, в разделе «Внешний вид — Меню».

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

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

Давайте рассмотрим это шаг за шагом.

1. Создайте меню

Когда вы впервые заходите в эту часть своего сайта, вы можете обнаружить, что она пуста, как указано выше.

Если это так, ваша первая задача — ввести название своего меню вверху.

После этого нажмите кнопку «Создать меню».

2. Добавьте пункты меню

Когда вы это сделаете, станут доступны параметры слева.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Здесь вы можете добавлять элементы в свое новое меню.

Например, в разделе «Страницы» просто установите флажок рядом с названием страницы, которая должна отображаться в меню навигации WordPress.

Нажмите «Просмотреть все» или «Поиск», если вы не можете найти нужную страницу в разделе «Самые свежие».

Когда вы нашли нужную страницу и отметили поле (одновременно можно выбрать несколько вариантов), нажмите «Добавить в меню» внизу.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Ваш выбор появится справа.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

«Сообщения» и «Категории» работают одинаково, только для других типов контента.

«Произвольные ссылки» немного отличаются тем, что вам нужно ввести URL-адрес, а также текст ссылки (метка, которая появится в меню навигации), прежде чем добавлять ее в меню.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Однако в остальном они ничем не отличается.

Примечание. Параметр «Пользовательский URL-адрес» — хорошее решение, если вы хотите добавить возможность отправлять людей на внешний URL-адрес из меню навигации.

WordPress также автоматически использует его для параметра «Домой» (Главная).

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

3. Настройте элементы меню и ярлыки

После того, как вы добавили пункты меню, самое время настроить их.

Первое, что вы можете сделать, это изменить их порядок.

Для этого просто перетаскивайте элементы мышью, пока они не будут расположены в нужном вам порядке.

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

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Когда вы щелкаете маленькие стрелки, они открывают дополнительные параметры.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Прежде всего, есть возможность изменить метку меню (текст, который будет отображаться в меню на сайте) на все, что вы хотите.

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

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

Кроме того, здесь вы можете сделать больше возможностей.

4. Воспользуйтесь преимуществами «Настроек экрана»

В верхней части экрана вы найдете «Настройки экрана», которые можно открыть одним щелчком мыши.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Здесь вы получаете доступ к дополнительным параметрам для настройки элементов меню навигации WordPress.

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

Вверху вы можете включить дополнительные параметры для части «Добавить элементы меню», а именно возможность добавлять теги и другие типы контента или таксономии на ваш сайт.

В нижней строке находятся дополнительные настройки для ваших пунктов меню:

Связь между ссылками (XFN)

XFN расшифровывается как XHTML Friends Network.

WordPress позволяет автоматически генерировать атрибуты XFN, чтобы вы могли показать свое отношение к авторам / владельцам сайта, на который вы ссылаетесь.

Теги XFN — это попытка добавить смысла соединениям (ссылкам) во всемирной паутине, и они становятся все более популярными.

Список доступных отношений смотрите ниже.

Когда вы добавляете новую ссылку, вы можете указать в этом разделе экрана отношения, которые вы разделяете в реальной жизни с автором страницы, на которую вы ссылаетесь.

Это автоматически добавит атрибут «rel = «X»» к HTML-коду ссылки (где X — указанная вами связь).

Определения отношений XFN

Чтобы указать ваши отношения, используйте следующее.

Личность

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

Дружба

Эти переключатели позволяют указать один из четырех различных типов дружбы:

Физический

Установите флажок «Знакомиться», если это тот, с кем вы действительно встречались лично.

Профессиональный

Эти два флажка позволяют указать ваши профессиональные отношения с автором сайта ссылки.

Географический

Используйте эти три переключателя, чтобы указать ваше географическое отношение к автору сайта ссылки.

Семья

Шесть переключателей, чтобы указать ваши семейные отношения.

Романтичный

Используйте эти четыре флажка, чтобы определить, какое у вас «романтическое» отношение к автору сайта.

Все ясно? Тогда давайте выложим это меню.

5. Опубликуйте свое меню

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

У вас есть два варианта сделать это: первый — выбрать место отображения в настройках меню.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

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

В качестве альтернативы, в разделе «Управление местоположениями» вверху вы также найдете список местоположений меню в вашей теме.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Здесь выберите из раскрывающегося списка, какое меню вы хотите назначить определенному месту, и нажмите «Сохранить изменения» внизу.

В любом случае ваше новое меню будет перенесено на ваш сайт.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Кстати, вы также можете добавить любое из меню, которое вы создаете, в любую область с виджетами на вашем сайте, например, вниз сайта или подвал.

Для этого просто перейдите в «Внешний вид — Виджеты», перетащите виджет «Меню навигации» в любую доступную область виджетов и выберите нужное меню из раскрывающегося списка.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Сохраните, и все готово.

Расширенные способы настройки меню навигации WordPress

Хорошо, это все, что касается встроенных в WordPress способов настройки меню навигации.

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

Вот о чем мы сейчас и поговорим.

В приведенных ниже примерах я буду использовать тему «Twenty Twenty», поэтому примеры кода не всегда применимы к любой другой теме.

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

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

Не забудьте позаботиться о своем адаптивном дизайне, чтобы меню хорошо смотрелось и на мобильных устройствах!

1. Найдите правильные селекторы CSS

Если вы хотите полностью изменить меню навигации WordPress в соответствии с вашими потребностями, вам не обойтись без CSS (или, в качестве альтернативы, конструктора страниц WordPress).

Для этого вам нужно понимать, что стандартное навигационное меню WordPress построено как неупорядоченный список HTML.

Типичный HTML-вывод меню WordPress выглядит примерно так:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Вышеуказанное дает вам следующие селекторы CSS для стилизации вашего меню:

Как уже упоминалось, это немного меняется от темы к теме.

Чтобы найти подходящие селекторы для того, с чем вы работаете, используйте «Инструменты разработчика» в браузере.

Обычно щелкните правой кнопкой мыши элемент, который хотите изменить, и выберите «Проверить элемент».

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Это откроет инструменты разработчика, где вы сможете увидеть как HTML-структуру вашего меню, так и CSS-селекторы и стили, примененные к ним.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Эти знания позволят вам изменить или перезаписать их (если вы собираетесь вносить много изменений, используйте дочернюю тему).

Затем давайте рассмотрим несколько примеров того, как вы можете настроить меню навигации WordPress таким образом.

2. Изменить цвета меню

Изменение цвета меню и пунктов меню — одно из самых простых изменений.

Здесь у вас есть несколько вариантов. Давайте рассмотрим их один за другим.

Изменить фон меню

Во-первых, это фон меню.

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

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Однако это не всегда так, некоторые темы имеют отдельные панели навигации.

Здесь вы можете настроить цвет фона меню, выбрав элемент оболочки самого меню.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Вот как выглядит разметка:

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

Игра с цветами шрифта

Когда вы меняете цвет фона, скорее всего, он больше не соответствует шрифту.

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

Как правило, поскольку меню навигации WordPress состоят из неупорядоченных списков («ul» в HTML) с элементами списка («li» в HTML), которые содержат ссылки («a» в HTML), вы можете настроить их таргетинг с помощью следующей разметки:

Приведенный выше код имеет следующий эффект:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Та же самая разметка также позволяет использовать псевдокласс «:hover» для добавления эффектов к пунктам меню, когда кто-то наводит на них указатель мыши следующим образом:

Пока вы на нем, вы также можете захотеть взглянуть на «:active», «:link» и «:visited». W3schools — хорошее место для начала.

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

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Когда вы теперь используете разметку ниже:

Вы получите такой эффект:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

3. Измените положение меню

Один из наиболее востребованных онлайн-способов настройки меню WordPress — это переместить меню навигации или изменить его положение.

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

Это происходит внутри вашей темы в файле «functions.php» с помощью функций «register_nav_menu» (для одного меню) или «register_nav_menus» (для создания более одной позиции меню одновременно).

Итак, если вы хотите узнать больше о меню вашего сайта, первым делом проверьте файл «functions.php» вашей (родительской) темы на наличие чего-то вроде приведенного ниже фрагмента.

Это сообщает вам как имя, используемое для меню в файлах шаблонов WordPress, так и в бэкенде (обратите внимание на соответствующие метки в функции, которую мы видели ранее в разделе «Управление местоположениями»).

Как только вы узнаете название меню, вы сможете:

В любом случае вам понадобится функция «wp_nav_menu», которая сообщает WordPress, где отображать содержимое зарегистрированных навигационных меню.

Например, мы уже знаем, как по умолчанию выглядит главное меню в Twenty Twenty.

Соответствующая разметка внутри файла «header.php» выглядит так:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Когда теперь измените файл, чтобы переместить меню под элементом «site-header» (опять же, используйте дочернюю тему), мы получим что-то вроде этого:

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

Конечно, для этого также потребовалось немного стилизации.

Функция «wp_nav_menu» предлагает гораздо больше возможностей для изменения его вывода, которые вы можете найти в официальной документации.

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

Создать «липкое» меню

Меню навигации WordPress обычно находятся в верхней части сайта и исчезают при прокрутке вниз.

В «липком» меню оно остается вверху, даже если вы двигаетесь вниз.

как редактировать меню в вордпресс. Смотреть фото как редактировать меню в вордпресс. Смотреть картинку как редактировать меню в вордпресс. Картинка про как редактировать меню в вордпресс. Фото как редактировать меню в вордпресс

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

Обычно это не так уж сложно. Основная часть — добавить свойство CSS «position: fixed» к элементу навигации.

Однако, в зависимости от разметки темы, вам может понадобиться еще несколько вещей.

Например, вот как выглядит код демонстрационного сайта:

Я уверен, что вы сможете выяснить это для своего собственного сайта, немного поработав детективом).

Как вы настраиваете меню навигации WordPress?

Навигация по сайту — это центральный элемент любого веб-сайта WordPress.

Без правильной настройки сайт становится практически непригодным для использования.

Есть множество способов внести изменения в ваши навигационные меню.

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

Если этого недостаточно, вы можете внести более сложные изменения с помощью небольшого количества CSS и PHP.

Теперь вы знаете все, что вам нужно для этого.

Дайте нам знать в комментариях ниже!

На этом я буду заканчивать эту статью — надеюсь она вам понравилась.

Давайте будем прощаться — до скорых встреч, заходите чаще и не болейте, ситуация в мире очень не стабильная.

Также — не забудьте подписаться на новые статьи моего блога.

Источник

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

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