Как управлять и оптимизировать меню WordPress как профессионал

Сегодня я хочу поговорить о ключевом элементе многих веб-сайтов: меню.

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

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

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

Вашим лучшим проектам WordPress нужен лучший хостинг!

WPMarmite рекомендует Bluehost: отличная производительность, отличная поддержка. Все, что нужно для отличного старта.

Попробуйте Блюхост

Два способа настроить меню WordPress

Если вы когда-либо просматривали панель администратора WordPress, ваш первый порыв при создании меню навигации, вероятно, состоял в том, чтобы перейти в « Внешний вид» > «Меню» .

Если это так, вы не ошиблись, так как вам легко это сойдет с рук.

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

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

Итак, готовы окунуться в Customizer? Сделайте глубокий вдох, согните, поехали!

В настройщике

В разделе « Внешний вид» > «Настроить » нажмите на пункт «Меню», затем на кнопку «Создать новое меню». Дайте ему имя и назначьте ему место на вашем сайте (иначе ваше меню не будет отображаться ).

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

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

• Пользовательские ссылки
• Страницы
• Сообщения
• Категории
• Теги

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

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

Добавление пунктов в меню

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

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

Для этого меню должно иметь 3 характеристики:

1. Ограниченное количество предметов.
2. Лаконичные и четкие заголовки.
3. Мало, если вообще есть, подменю.

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

Почему, спросите вы?

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

Это немного похоже на ресторанное меню, чем больше, тем сложнее выбрать.

Так что не забудьте добраться до сути.

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

Добавление страниц в ваше меню WordPress

При нажатии на кнопку «Добавить элементы» вы сразу же увидите ранее созданные вами страницы.

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

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

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

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

Если страницы являются основными элементами, которые вы добавите в свои меню, они не единственные, предлагаемые WordPress.

Добавление ссылок в ваше меню

Для удобства навигации вам может понадобиться использовать настраиваемые ссылки в меню, чтобы направлять посетителей на другой сайт (например, на сайт партнера; не направляйте посетителей на любой сайт!)

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

Добавление позиций в ваше меню

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

Добавление категорий в ваше меню

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

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

Поэтому нажмите «Категории», чтобы увидеть список категорий, созданных на вашем сайте WordPress. Однако вы заметите, что дополнительная категория была добавлена ​​без вашего запроса на первое место.

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

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

Вставка тегов

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

Не забудьте сохранить свое меню, чтобы WordPress помнил, что вы сделали.

Присоединяйтесь к подписчикам WPMarmite

Получите последние сообщения WPMarmite (а также эксклюзивные ресурсы).

ПОДПИШИСЬ СЕЙЧАС

Организация пунктов меню в WordPress

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

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

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

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

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

Создание подменю

Если вам нужно добавить много элементов (остерегайтесь перегрузки), вы можете создать подменю, переместив элемент немного вправо под другим элементом, снова перетащив его.

В примере выше категории «Закуски», «Основные блюда» и «Десерты» являются подменю страницы «Рецепты».

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

Как правило, если у вас слишком много уровней подменю, ваше меню плохо структурировано.

Чтобы добавить не интерактивный элемент меню (например, элемент, содержащий подменю), добавьте пользовательскую ссылку и вставьте символ # в поле «URL». После добавления элемента удалите # , чтобы не повредить SEO.

Теперь давайте посмотрим на процесс…

Изменение пунктов меню

К этому моменту ваше меню почти готово, но вы понимаете, что допустили ошибку. Как удалить элемент из меню WordPress?

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

Появляющееся перед глазами поле «Навигационная метка» позволяет изменить название пункта в вашем меню.

Ссылка «Удалить» присутствует, чтобы удалить пункт из вашего меню.

Скрытые опции в меню WordPress

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

Чтобы отобразить эти известные параметры, щелкните шестеренку в разделе « Внешний вид» > «Настроить» > «Меню»:

Если установить эти флажки, в пунктах меню появятся новые поля:

Давайте посмотрим, чему соответствуют эти параметры:

• Link Target : позволяет отображать окно, чтобы открыть целевую страницу в новой вкладке. В случае внешней ссылки установка этого флажка позволит дольше удерживать пользователей на вашем сайте.
• Атрибут заголовка : этот параметр используется для отображения описания пункта меню при наведении на него курсора. Поэтому его полезность снижается, и в настоящее время он используется очень мало.
• Классы CSS : если вы хотите настроить внешний вид пункта меню с помощью CSS, поместите в это поле нужные вам классы.
• Link Relationship (XFN) : если вы ссылаетесь на сайт и хотите указать отношения между вами, вы можете использовать свойства XFN. На практике я этим никогда не пользовался. Скорее всего, вам это не понадобится.
• Описание : некоторые темы позволяют отображать описание под заголовком меню, но встречаются они довольно редко.

Итак, теперь вы знаете, как редактировать меню с помощью WordPress. Перейдем к последним деталям в…

Настройки меню

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

Есть несколько флажков на выбор:

• Автодобавление страниц : если установить этот флажок, страницы, которые вы создаете, будут автоматически добавляться в ваше меню. Это не представляет большого интереса, потому что ваше меню не будет настроено. Поэтому не устанавливайте этот флажок.
• Место отображения : перечисленные здесь флажки позволяют определить, где отображать только что созданное меню.
  Чтобы ваше меню отображалось на вашем сайте, необходимо установить один из этих флажков.
  Доступные места в меню будут иметь разные заголовки в зависимости от вашей темы. Обычно вы найдете поле для главного меню (основное меню) .

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

Ускорьте свой сайт с помощью WP Rocket

Превратите свой сайт в ракету с помощью самого мощного плагина кэширования, признанного экспертами WordPress.

Попробуйте WP Rocket

Управление локациями

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

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

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

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

Список меню на этой вкладке будет отличаться в зависимости от вашей темы.

Щелкнув на «Редактировать», вы попадете на соответствующую страницу редактирования меню.

Когда все меню будут на своих местах, не забудьте нажать «Сохранить изменения».

Размещение меню в других местах на вашем сайте WordPress

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

Для этого создайте новое меню и не назначайте ему местоположение.

Затем перейдите в раздел « Внешний вид» > «Виджеты » и добавьте виджет «Меню навигации» в область виджетов по вашему выбору.

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

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

Вывод

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

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

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

Сколько меню WordPress у вас есть на вашем сайте? Где на вашем сайте вы их размещаете?

Расскажите нам обо всем этом в комментариях под этим постом.