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

Настроить дизайн меню — Поддержка

Тема определяет внешний вид меню на сайте. В этом руководстве будут рассмотрены способы изменения дизайна меню.

В этом руководстве

Изменение цветов меню

💡

Если в теме используется редактор сайта (т. е. присутствует раздел меню Внешний вид → Редактор), то цвет меню можно изменить в настройках блока «Навигация».

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

1. Перейдите в раздел Внешний вид → Настроить.
2. Нажмите Цвета и фоновые изображения, где будут отображаться круги. Каждый круг определяет цвет элементов сайта, например цвет ссылки и цвет фона.
3. Все темы отличаются друг от друга. Нажмите каждый круг и посмотрите, какие элементы меняют цвет. Выберите новый цвет — в окне предварительного просмотра справа будет показан новый цвет на сайте.
4. Если результат вам подходит, нажмите Сохранить изменения, чтобы применить новые цвета на сайте.

Если эти опции не позволяют получить нужный цвет, измените цвета меню с помощью кода CSS — отдельной опции в тарифных планах WordPress.com Premium, Business и Commerce и устаревшем плане Pro. Дополнительные сведения о поддержке CSS см. здесь.

Перемещение меню

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

• Найдите тему, которая отображает меню на нужной вам позиции. Расположение меню — один из основных факторов, влияющих на выбор темы. Выберите тему, в которой меню отображается в оптимальном месте. Узнайте больше о замене тем.
• Для размещения меню на любой странице или в области виджета используйте блок «Навигация».
• Проверьте области для меню в своей теме. Каждая тема содержит хотя бы одну область для меню, но некоторые темы поддерживают несколько таких областей.
• Используйте тему Редактор сайта, которая позволит вам полностью управлять размещением таких элементов, как меню навигации, логотип и т.
   д.

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

Меню на мобильном устройстве

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

Вместо этого во многих случаях элементы меню свёртываются в отдельную кнопку, которая выглядит примерно так.

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

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

Другие изменения оформления

Если этих инструментов недостаточно, чтобы внести на сайт изменение, обратитесь к инженеру поддержки и обсудите это с ним. Мы можем порекомендовать изменить тему или использовать CSS (только на тарифных планах WordPress Premium, Business и Commerce и устаревшем плане Pro), если предложенный вами дизайн можно реализовать.

Классы CSS

Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.

Классы CSS — это расширенное свойство меню, с помощью которого можно применить класс CSS к отдельным элементам меню.

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

1. Перейдите в раздел Внешний вид → Настроить → Меню.
2. Нажмите значок ⚙️ (шестерёнка), чтобы открыть расширенные настройки меню.
3. Убедитесь, что установлен флажок «Классы CSS», как показано на изображении справа.

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

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

Далее: Расширенные настройки меню.

Ваша оценка:

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

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

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

Оглавление

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

Как скрыть элементы вашего мобильного меню WordPress с помощью кода

Как скрыть мобильное меню WordPress с помощью плагина

В заключении

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

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

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

Чтобы скрыть все меню, вам нужно узнать идентификатор и класс CSS вашего меню. Это может варьироваться от темы к теме, и здесь вам пригодится инструмент проверки. Просто щелкните правой кнопкой мыши в любом месте вашего веб-сайта, если вы не отключили щелчок правой кнопкой мыши, и выберите Осмотреть из раскрывающегося меню. Вы также можете нажать кнопку F12.

Теперь, включив инструмент проверки, вы можете прокрутить вниз

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

Чтобы скрыть эту конкретную версию меню из мобильной версии веб-сайта, вам необходимо добавить на свой веб-сайт немного CSS. Перейдите к Внешний вид / Настроить на панели управления WordPress и выберите Дополнительный CSS раздел и Мобильный версия сайта. Вы можете переключаться между различными версиями своего веб-сайта в нижнем левом меню. Щелкните значок мобильного устройства, чтобы изменить мобильную версию веб-сайта.

Код, который нужно ввести в Дополнительный CSS поле:

.menu-button-container {
display:none;
}

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

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

Как скрыть элементы вашего мобильного меню WordPress с помощью кода

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

Чтобы скрыть какой-либо элемент, вам, опять же, потребуется добавить в меню немного CSS. Сначала перейдите к Внешний вид / Меню на панели управления WordPress нажмите Параметры экрана

в верхнем правом углу и проверьте CSS классы.

Теперь предположим, что мы хотим скрыть Команда элемент из главного меню для мобильных пользователей. Щелкнув по нему сейчас, вы увидите, что вы активировали поле с надписью Классы CSS (необязательно). Здесь вы можете назначить класс элементу меню. Мы присвоим класс прятаться на мобильном к Команда элемент и Сохранять наше меню.

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

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

Внешний вид / Настроить на панели управления WordPress и выберите Дополнительный CSS раздел.

Код, который нужно добавить в Дополнительный CSS поле это:

@media (max-width: 767px){
.hide-on-mobile{
display: none !important;
}
}

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

Как скрыть мобильное меню WordPress с помощью плагина

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

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

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

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

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

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

Но что, если вам просто нужна другая версия меню для мобильных устройств? Собственно, это основная функция этого плагина. В этом случае вам нужно будет создать меню для мобильной версии вашего сайта. Мы не будем здесь вдаваться в подробности создания нового меню. Если вам нужна помощь в создании меню, у нас есть полное руководство по добавлению меню в WordPress. Не забудьте проверить Левое мобильное меню или Правое мобильное меню при создании мобильного меню.

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

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

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

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

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

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

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

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

В заключении

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

Поделиться на Facebook Поделиться на Twitter Поделиться на Pinterest Поделиться на WhatsApp Поделиться на WhatsApp Поделиться по электронной почте

Moyens Staff 30 декабря، 2021

Настройка меню WordPress с помощью пользовательских классов

Логотип WPMU DEV

Настройка меню WordPress с помощью пользовательских классов

Хасан Ахтар Хасан Ахтар – 19 апреля 2022 г.

5 комментариев

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

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

Стандартное меню WordPress может выглядеть так:

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

Простое наведение курсора на красный фон потребует от вас знания нескольких селекторов CSS, а их имена довольно длинные.

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

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

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

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

В это поле можно ввести любое имя. Вы не хотите использовать какие-либо селекторы, такие как # или . (период). Просто введите текст класса, как показано на изображении ниже.

Я выбрал имя класса redback , который легко запомнить.

После того, как меню сохранено, вы можете ввести пользовательский CSS в любом месте, где вы обычно это делаете — либо в файле style.css, либо в пользовательском плагине CSS. Здесь я выбрал следующее правило CSS: его состояние наведения, чтобы использовать красный фон.

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

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

Элементы пользовательского меню WordPress

Меню WordPress CSS

Или ознакомьтесь с этой дополнительной статьей о меню WordPress:

9 Плагины меню WordPress jQuery + бонусное руководство для Приключенческий

Примечание редактора: этот пост был обновлен для обеспечения точности и актуальности.
[Первоначально опубликовано: декабрь 2012 г. / Исправлено: апрель 2022 г.]

Теги:

• CSS
• меню

Поделитесь этой статьей

Получайте свежие обновления WP прямо на свой почтовый ящик.

Введите ваше имя…

Введите адрес электронной почты…

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

Добавление класса CSS в меню WordPress

Возможность добавления класса CSS в меню WordPress позволяет изменять стиль определенного элемента меню.

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

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

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

Параметр класса CSS в меню

Вам не нужно писать собственный PHP-код или устанавливать какие-либо дополнительные плагины, чтобы иметь возможность установить свой собственный класс CSS в меню.

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

На панели инструментов WordPress есть два (2) места, где вы можете добавить пользовательский класс CSS к ссылке меню:

1. Страница меню.
2. Настройщик.

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

Страница меню

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

Во-первых, нам нужно создать собственный класс CSS.

Поскольку я хочу изменить цвет и толщину шрифта пункта меню, я использую следующий пользовательский CSS:

 .menu-link-red a {
  цвет: #b93054;
  вес шрифта: полужирный;
} 

Обратите внимание, я использую menu-link-red в качестве имени для моего класса CSS. Вы можете использовать любое имя, которое лучше соответствует вашим потребностям.

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

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

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

Пример страницы меню в панели управления WordPress.

1. На панели инструментов перейдите к Внешний вид → Меню .
2. На странице «Меню» найдите вкладку «Параметры экрана». Он должен быть расположен в правом верхнем углу страницы в области администрирования WordPress.
3. Под Показать дополнительные свойства меню , проверить Классы CSS .
4. Теперь разверните пункт меню, чтобы открыть CSS-классы (необязательно) ввода текста.
5. Введите имя класса под меткой CSS Classes (необязательно) .
6. Сохраните свое меню, чтобы применить класс.

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

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

Пример пользовательских изменений, внесенных в пункт меню в теме Prosperity .

Настройщик

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

В этом методе я использую тему Venture, чтобы показать, как создать другой стиль для ссылки меню с помощью Customizer.

Моя цель — сделать круглую ссылку меню с однотонным фоном.

Для этого я использую следующий пользовательский CSS:

 .menu-link-rounded a {
  цвет фона: #5454e6;
  отступ: 0 20 пикселей;
  радиус границы: 30px;
  тень текста: нет;
  вес шрифта: полужирный;
} 

Обратите внимание, вы можете назвать класс CSS по своему усмотрению. Для этого конкретного случая я использую menu-link-rounded в качестве имени моего класса CSS.

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

Предварительный просмотр параметров меню в настройщике.

В панели инструментов WordPress:

1. Перейдите к Appearance → Customize , чтобы открыть Customizer.
2. Щелкните ссылку Меню , чтобы открыть панель Меню.
3. Найдите значок шестеренки и щелкните по нему, чтобы убедиться, что Классы CSS проверяется под меткой Показать дополнительные свойства меню . Если этот параметр не отмечен, включите его, чтобы иметь возможность добавлять пользовательские классы в ссылки меню.
4. Выберите меню, в котором вы хотите разместить класс CSS.
5. Разверните пункт меню и введите имя класса под меткой CSS Classes (необязательно) .
6. Нажмите Опубликовать в верхней части панели, чтобы сохранить меню и применить к ссылке пользовательский класс.

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

Пример пользовательских изменений, внесенных в пункт меню в теме Venture .

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