Как в wordpress сделать меню с подменю: Как сделать выпадающее меню в WordPress

Изначально нужно установить этот плагин. Идем в раздел Плагины/Добавить Новый и в поисковой строке вбиваем  JQuery Vertical Mega Menu Widget. После нажимает Установить и Активировать для запуска плагина в работу.

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

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

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

После чего, все добавленные пункты отобразятся справа. 

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

На этом робота с меню закончена, для того, чтобы меню отобразилось на сайте, нам остался один этап. С помощью ранее установленного плагина, мы настроим отображение меню в желаемом для нас виде. Переходим в раздел Внешний вид/Виджеты. Слева в доступных виджетах, мы находим JQuery Vertical Mega Menu Widget

После чего, вы можете просмотреть готовый результат уже на своем сайте.

Меню навигации сайта WordPress — Azbuka WordPress

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

Меню навигации WordPress

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

Меню может располагаться вверху/внизу и справа/слева на странице сайта.

Почти все темы WordPress содержат хотя бы один тип расположения меню.

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

Вы можете добавить меню из панели администратора WordPress — Внешний вид — Меню.

На экране появится новое окно «Создать меню», состоящее из двух областей. В левой области находятся ваши страницы, произвольные ссылки и рубрики. А в правой – настраиваемые пункты меню.

Давайте создадим ваше первое меню.

Укажите имя для вашего меню, например. «Мое первое меню», а затем нажмите кнопку «Создать меню».

Перед вами появятся настройки меню:

Как вы можете заметить, тема сайта Azbuka WordPress предлагает 3 варианта расположения меню: main, secondary, footer.

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

Затем выберите страницы, которые вы хотите добавить — отметьте страницы, перечисленные в левой области, и нажмите «Добавить в меню».

Затем выберите местоположение вашего меню и сохраните.

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

Размещение элементов меню

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

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

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

Создание выпадающего меню навигации WordPress

Выпадающее меню является навигационным меню. С родительскими и дочерними элементами.

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

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

Теперь добавим пункт подменю для вашего нового меню.

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

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

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

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

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

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

Добавление произвольных ссылок в меню навигации WordPress

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

Разверните вкладку произвольной ссылки в левом окне. Вы заметите, что там есть два поля. Первое поле предназначено для URL-адреса вашей ссылки, второе — для текста.

Важно: не забывайте прописывать ссылку с http: или https:, иначе она не будет работать.

Редактирование пункта меню

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

Это не означает, что вы не можете его изменить.

Разверните элемент и отредактируйте так, как вам нужно.

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

Удаление из меню

Также разверните элемент меню и внизу вы увидите красный текст «Удалить».

Области размещения навигационных меню

Каждая тема WP предлагает свои виды расположения навигационного меню.

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

Добавление навигационного меню в сайдбаре

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

В админке выберите пункт «Внешний вид» — «Виджеты» и добавьте виджет «Произвольное меню» в сайдбар.

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

Теперь перейдите на сайт и проверьте, как отображается меню в сайдбаре.

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

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

Я надеюсь, вам понравилась статья.

Вам может быть интересно:

Пошаговое руководство «Как сделать сайт на WordPress».

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

И наши рекомендации, как правильно выбрать тему WordPress.

Если у вас есть вопросы — пишите в комментариях.

И подписывайтесь на нас в Facebook, Instagram и Twitter.

Как в WordPress создать выпадающее меню?

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

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

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

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

• Astra.
• Темы StudioPress.
• OceanWP.
• Ultra.
• Divi.

Перейдите в меню «Внешний вид» — «Меню» и нажмите кнопку «Создать новое меню».

Далее введите название меню навигации.

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

Чтобы добавить в меню навигации ссылки верхнего уровня, выберите страницы, которые вы хотите добавить в меню. Это можно сделать в левом столбце. Затем нажмите кнопку «Добавить в меню».

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

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

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

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

Темы оформления WordPress могут отображать меню в разных местах. Каждая тема оформления поддерживает определенные области для размещения меню. Они перечислены в разделе «Настройки меню». Выберите вариант рядом с параметром «Область отображения» и нажмите кнопку «Сохранить меню».

Теперь посетите сайт, чтобы увидеть выпадающее меню в действии.

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

Можно добавить подпункт ниже другого подпункта, чтобы создать многоуровневое выпадающее меню.

Используемая тема оформления автоматически отобразит подпункты в виде подменю внутри выпадающего меню.

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

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

Затем перейдите на вкладку «Меню» и выберите необходимое меню навигации. После этого вы увидите визуальный редактор с областью предварительного просмотра сайта.

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

Мы надеемся, что эта статья помогла вам понять, как создать выпадающее меню в WordPress.

Данная публикация является переводом статьи «How to Create a Dropdown Menu in WordPress (Beginners Guide)» , подготовленная редакцией проекта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все процедуры я описывать не буду, так как эта тема достойна отдельной статьи, скажу только что выводиться стандартное меню с помощью функции <?php wp_nav_menu(); ?>.

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

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

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

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

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

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

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

Как отобразить подменю (не раскрывающееся меню) под главным меню

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

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

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

(@theslingshotkillers)

Спасибо… и OMG.

Есть другой способ? Могу ли я создать дополнительное меню (вместо изменения подменю) и получить желаемый результат?
Или это испортит работу подменю (= связанные категории блога) с главным меню.

То, что вы говорите, действительно звучит сложно. У некоторых людей это как часть своей темы или плагинов Builder +. Я просто не знаю. И да, мне нужно, чтобы он реагировал на разные ПК, iPad, мобильные устройства.

(@theslingshotkillers)

Это невозможно с таким плагином? Или это выходит за рамки плагинов..

Conditional Menus

Hiya AnnaK,

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

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

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

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

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

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

(@theslingshotkillers)

Большое спасибо 🙂

Взгляну на мегаменус.Я вроде уже сделал, но ничего не получил, но попробую еще раз 000

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

Я также подумываю — если мегаменус не сработает для меня — просто найти другую ТЕМУ и начать «заново». Просто чтобы в итоге все было чище.

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

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

(@theslingshotkillers)

1. Я только что сделал на тесте. Не знаю, почему я не подумал об этом раньше.

У меня есть заголовок главного меню Travel Blog. И под заголовками этого подменю (например) 1, 2, 3
у меня есть заголовок главного меню Инструменты социальных сетей. И в этом подменю заголовки 4, 5, 6.

Подменю — это ВСЕ категории блога, связанные / добавленные в главное меню.

Я думал, это означает, что когда я нажимаю на «блог о путешествиях», в результате появляются ТОЛЬКО сообщения для категорий 1, 2 и 3.

Оказывается, здесь тоже появляются посты для категорий 4, 5, 6.

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

Я действительно начинаю (почти) не заботиться о внешнем виде вторичного меню. И держите раскрывающийся список. Если у меня будут правильные сообщения на определенных страницах .. 🙂

Может я чего-то упускаю ..

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

Я не хочу путать структуру wordpress. Не уверен, что кнопки делают это ..

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

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

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

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

Тогда навигация вписывается в обычные операции WP. Просто простые ссылки, где бы они ни появлялись. Меню навигации, кнопки, простые ссылки и т. Д.Возможно добавление ряда кнопок в текущее навигационное меню. Обратите внимание, что это не должны быть настоящие кнопки HTML-форм, а должны быть простые ссылки, стилизованные под кнопки. Вероятно, вы могли бы что-то сделать с Elementor в этом направлении.

Добавить ряд ссылок в шаблон заголовка дочерней темы было бы довольно просто. Большая часть работы будет выполняться в CSS, чтобы они выглядели как кнопки и вели себя отзывчиво. Изучение CSS — это хорошо для любого владельца сайта. Он позволяет существенно изменить внешний вид вашего сайта.Инструмент разработчика «Инспектор элементов» в вашем браузере играет важную роль в корректировке CSS вашего сайта. Это позволяет вам попробовать разные правила и сразу увидеть результаты. В инструменте ничего не сохраняется, это просто для проб. Как только вы найдете то, что работает, скопируйте соответствующий код из инструмента в свой файл style.css.

(@theslingshotkillers)

Это так полезно. Я не могу сказать вам, насколько вы сильно помогли.

Я проснулся вчера рано утром и просто очистил свой разум.Структура важнее макета. Макет я мог изменить. Итак… проблема решена.

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

Часть меню (с категориями) также решена после того, как узнал о нем гораздо больше — спасибо 🙂

Даже вчера успел сделать логотип сам.Я просто очень рад, что теперь могу двигаться вперед. Это все равно будет то, что я хочу, только не то, что я думал, что хотел.

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

Я многому научился, я получил желаемый результат, и я продвигаюсь вперед с веб-сайтом и его многочисленными скрытыми «сокровищами». Большое спасибо!!! 🙂

• Этот ответ был изменен 1 год, 8 месяцев назад пользователем AnnaK.

Добро пожаловать! То, что вы нашли решения, которые работают для вас, тоже делает меня счастливым 🙂 Моим напутственным посланием было бы не бояться попытки небольшого кодирования CSS, если у вас есть что-то, внешний вид которого можно улучшить. CSS довольно снисходительный, и награда за то, что вы приложили немного усилий к чему-то, о чем вы еще не знаете, очень велика. Ответ обычно можно найти, выполнив поиск. Метод проб и ошибок с помощью инструмента инспектора элементов браузера — вполне приемлемый подход.А если ничего не помогает, вы всегда можете попросить помощи на форумах. Мы любим помогать людям, которые пытаются помочь себе и попали в затруднительное положение. Люди ждут, что все это будет сделано за них, не очень 🙂

(@theslingshotkillers)

Я действительно надеюсь посмотреть несколько видеороликов на YouTube о CSS, когда скоро доберусь до места с лучшим Wi-Fi. Я знаю, когда еще так много предстоит сделать на веб-сайте и над его контентом, он, вероятно, в конечном итоге будет поставлен последним в очереди.Но этот урок научил меня тому, насколько это важно не только с точки зрения создания лучшего веб-сайта, но и с точки зрения того, как легче создавать его.

Еще раз спасибо. Найти разумные ответы для меня действительно большое облегчение!

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

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

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

Есть два способа добавить элементы подменю в навигацию WordPress: с помощью экрана меню и с помощью функции настройки.

Использование внешнего вида -> Экран меню

Во-первых, убедитесь, что элемент подменю находится под элементом меню, который будет его родительским — в этом случае родительский элемент будет Holiday Tips:

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

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

После перемещения элементов подменю не забудьте нажать Сохранить меню.

Если вам нужен второй уровень элементов подменю — подпункт — просто перетащите элемент дальше вправо под элементом подменю, например:

Не каждая тема поддерживает второй уровень подпунктов.

Использование внешнего вида -> Экран настройки

В меню Customizer щелкните Menus , а затем щелкните меню, которое хотите отредактировать:

Нажмите на меню, которое хотите отредактировать.

Нажмите на меню

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

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

Элемент будет отображаться с небольшим отступом вправо.

Затем щелкните стрелку вправо в следующем пункте подменю:

Когда вы закончите, нажмите ссылку Готово .

Стрелки позиционирования исчезнут.

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

WordPress — Руководства по Visualmodo

Подменю и раскрывающиеся списки WordPress

В этом руководстве по базе знаний visualmodo мы покажем, как легко использовать и настраивать подменю и выпадающие меню WordPress с помощью наших удивительных тем WordPress с помощью нашей системы меню visualmodo. Подменю или раскрывающееся меню появляется, когда у вас есть несколько страниц в макете элемента главного меню и вы наводите курсор на этот элемент главной страницы в меню навигации, как показано на изображении выше, при наведении курсора на элемент меню навигации «ПОРТФОЛИО» и отпускании -пух.

Для лучшей отправной точки убедитесь, что вы уже создали свое «главное меню», следуя этому другому руководству в нашей базе знаний https://visualmodo.com/knowledgebase/edit-wordpress-navigation-menu/

Как создать простое раскрывающееся меню?

Для создания простого раскрывающегося меню вам просто нужно перейти на панель инструментов wp> внешний вид> меню> создать меню и просто перетащить элементы меню под страницу главного меню навигации, как показано на прикрепленном изображении выше.ПРИМЕЧАНИЕ. Убедитесь, что вы нажали кнопку «Сохранить меню», чтобы сохранить изменения.

Как создать столбцы в раскрывающихся списках и подменю WordPress?

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

Когда вы откроете редактор пунктов меню, вы увидите все настраиваемые параметры пункта меню, пожалуйста, измените значение параметра на «1/2 — одна / половина» на вкладке «Ширина столбцов».

Как добавить фоновое изображение в раскрывающиеся меню и подменю WordPress?

Для этого вам просто нужно получить / скопировать URL-адрес изображения, который вы загрузили в область «Медиабиблиотека WordPress», и разместить его в области «Подменю Фоновое изображение» редактора пунктов меню.

Как включить полноразмерное раскрывающееся меню? (Мега меню)

Кроме того, вы можете добавить значки для подпунктов меню или для пунктов главного меню навигации. Используя код под полем «icon»: icon-plus — icon-name. Вы можете вызывать виджеты в области подменю под полем «Пользовательская область виджетов». Это вызовет добавляемые в WP виджеты> внешний вид> виджеты <область вкладки виджетов.В результате может измениться стандартное выпадающее положение (влево / вправо).

Подменю и раскрывающиеся списки WordPress — Visualmodo

Создание и организация меню в WordPress — Annenberg Digital Lounge

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

Редактирование основного меню

Чтобы получить доступ к меню, сначала убедитесь, что вы добавили / wp-admin в конец URL-адреса вашего веб-сайта.

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

Вы попадете на эту страницу:

1. Выбор меню для редактирования : Здесь вы можете выбрать меню для редактирования. По умолчанию WordPress предоставит вам меню Primary и меню Social .
2. Структура меню : В вашем основном меню уже должны быть созданы определенные страницы.Если вы посмотрите вправо от каждого блока, вы увидите, что это за сообщение (например, страница, запись в блоге и т. Д.), И выберите стрелку раскрывающегося списка, чтобы переименовать, изменить порядок или удалить страницу. Вы также можете легко изменить порядок страниц, перетаскивая их.
3. Настройки меню : Здесь вы можете выбрать, где вы хотите, чтобы ваше меню отображалось. Если установить флажок Primary , ваше меню останется наверху и будет хорошо видно. Меню Нижний колонтитул перемещает ваше меню в нижнюю часть каждой страницы.Меню Социальные ссылки , в зависимости от вашей темы, будет отображаться в основном меню. Вот пример, где будет размещено ваше меню основных и социальных ссылок:
4. Страницы : В левом меню вы увидите несколько разных вещей, которые вы можете добавить в свое меню. Этот первый добавляет Page . Страницы хороши для организации вашего контента по более широким категориям. Он автоматически покажет вам любые страницы, которые вы уже создали. Если вы хотите добавить новую страницу в свое меню, установите флажок слева от имени и нажмите Добавить в меню .Затем вы увидите его всплывающее окно в области, о которой мы говорили в # 2.
5. Сообщений : Следующее, что вы увидите в этом меню, это Сообщения . В сообщениях, в отличие от страниц, вы будете писать свои отдельные сообщения / статьи. Допустим, вы ведете блог о путешествиях о поездке в Испанию, Францию ​​и Германию. Вы можете создать по 3 разные страницы для каждой страны. На каждой странице вы можете добавлять сообщения и изображения, относящиеся к каждой. Вы можете добавлять сообщения так же, как и страницы.
6. Пользовательские ссылки : Здесь вы можете ввести внешнюю ссылку, которая должна отображаться в вашем меню.Это касается любых релевантных веб-сайтов, которые вы хотите, чтобы ваша аудитория могла найти в вашем меню.
7. Категории : Добавление категории аналогично добавлению страницы или сообщения. Вы увидите все категории, которые вы создали ранее, и сможете выбрать те, которые вам нужны, и добавить их в свое меню. Добавление категории в главное меню полезно, если вы хотите, чтобы все ваши сообщения с тегами были собраны в одном легкодоступном месте.

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

Создавать подменю очень просто! Итак, у вас есть основное меню, организованное так, как вы этого хотите.Однако вы хотите добавить подменю на одну из вкладок. Без проблем!

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

2) Все в вашем меню должно быть выровнено равномерно и должно выглядеть примерно так:

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

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

И все! Когда мы переходим на главную страницу и наводим курсор на «Блог», всплывающее подменю выглядит следующим образом:

Надеемся, вы нашли это полезным! Обязательно ознакомьтесь с другими нашими руководствами по WordPress!

пунктов подменю WordPress разделены на 2 столбца. Легкий способ.

Последнее изменение: 25 января 2019 г.

Вот что мы будем делать:

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

Допустим, у вас есть главное меню и около 12 подпунктов для пункта меню «Продукты». Вот как их разбить на 2 столбца в подменю:

1.Перейдите в Внешний вид -> Меню и выберите меню, которое хотите отредактировать.

2. Введите столбцы подменю в поле верхнего пункта меню «Классы CSS» (необязательно). В нашем случае — это Товары. См. Изображение для справки.
Если вы не видите поле «Классы CSS (необязательно)» в поле пункта меню, нажмите «Параметры экрана» в правом верхнем углу экрана и установите флажок «Классы CSS».

3. Нажмите кнопку СОХРАНИТЬ МЕНЮ.

4. WordPress назначает подменю класса для ul, содержащего подпункты li-s.В вашем CSS найдите (или добавьте) селектор .sub-menu и добавьте эту строку в объявление: width: 410px; . На самом деле вы можете установить любую ширину, какую захотите.

5. Затем добавьте этот блок CSS в свою таблицу стилей:

 .sub-menu-columns ul.sub-menu li {
дисплей: встроенный блок;
плыть налево;
ширина: 200 пикселей;
}
.sub-menu-columns ul.sub-menu li: nth-child (odd) {
плыть налево;
маржа справа: 10 пикселей;
}
.sub-menu-columns ul.sub-menu li: nth-child (even) {
float: right;
} 

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