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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Цель ссылки — если его активировать, вы можете настроить отдельные пункты меню, чтобы открываться в новой вкладке при нажатии. Это особенно полезно для сторонних ссылок.
• Атрибут title (заголовок) — текст здесь появляется как всплывающая подсказка в браузере, когда кто-то наводит курсор на ссылку меню.
• Классы CSS — позволяет добавлять пользовательские классы CSS к элементам меню, чтобы применить к ним пользовательский стиль. Подробнее об этом ниже.
• Отношение к ссылке (XFN) — специальный атрибут, который вы можете добавить к внешним ссылкам, чтобы показать ваше отношение к сайту, на который вы ссылаетесь. Подробности ниже.
• Описание — позволяет добавить описание пункта меню для посетителей, которое будет отображаться, если ваша тема его поддерживает.

Связь между ссылками (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 для стилизации вашего меню:

• Контейнер меню: «#site-header .primary-menu-wrapper»,
• Элемент списка меню: «#site-header ul.primary-menu»,
• Элементы навигации: «#site-header .primary-menu li»,
• Ссылки на элементы навигации: «#site-header .primary-menu li a»,
• Элементы списка подменю: «#site-header .primary-menu li ul»,
• Пункты выпадающего подменю: «#site-header .primary-menu li li»,
• Ссылки на пункты выпадающего подменю: «#site-header .primary-menu li li a».

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

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

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

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

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

Пока ясно?

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

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

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

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

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

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

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

    #site-header {
        background: #ced0ce;
    }

Вот результат:

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

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

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

    .navigation-top {
        background: #ced0ce;
    }

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

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

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

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

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

    #site-header .primary-menu li a {
        color: #000;
    }

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

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

    #site-header .primary-menu li a:hover {
        text-decoration: underline dotted;
    }

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

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

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

    .highlight-shop a {
        color: #cd2653 !important;
    }

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

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

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

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

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

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

    function twentytwenty_menus() {
        $locations = array(
            'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
            'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
            'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
            'footer'   => __( 'Footer Menu', 'twentytwenty' ),
            'social'   => __( 'Social Menu', 'twentytwenty' ),
        );
        register_nav_menus( $locations );
    }
    add_action( 'init', 'twentytwenty_menus' );

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

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

1. найти его расположение в файлах темы и,
2. переместить меню навигации туда, где вы хотите, чтобы оно отображалось.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    #site-header {
        position: fixed;
        width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

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