Как сделать пункт меню неактивным

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

В шаблонах SI-SCHOOL- 2 и SI-SCHOOL-3 есть возможность сделать верхнее горизонтальное меню с выпадающими подпунктами. При этом родительский пункт меню остается "кликабельным". Не всем это нравится. Хотя, по моему мнению, иногда - это даже удобно. Например когда родительский пункт меню ведет на список материалов категории, а подпункты - на отдельные материалы этой же категории. В общем - дело вкуса.

Но вопрос этот мне задали уже несколько раз. Поэтому - отвечаю.

Второй способ. Использовать JavaScript.

Вот код скрипта:

Вставьте код скрипта в файл index.php шаблона в самый низ, перед закрывающим тегом

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

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

Для чего нужен пункт меню без ссылки?

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

Для чего это нужно? Например, вы хотите создать пункт, в котором будет информация о сайте. И эта информация на разных страницах - О сайте, Карта сайта, Об авторе и т.д. А данным пунктом всё это дело можно объединить.

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

Как создать пункт меню без ссылки?

Итак, в админке заходим в раздел Внешний вид → Меню. В левой колонке открываем элемент Произвольные ссылки. И в поле URL вводим решётку или адрес на любую страницу сайта. А текст ссылки тот, который хотим видеть в меню. Жмём кнопку Добавить в меню.

Теперь находим этот элемент в правой колонке окна. Открываем его и удаляем всё из строки URL. Оставляем её пустой. Вот такая хитрость)

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

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

А вот так при наведении курсора:

Мы видим, что шрифт без наведения получился тёмно-синий. Не факт, что у вас будет так же. Это индивидуальный момент. И зависит от установленной темы сайта.

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

Вот, собственно, и всё. Как видите, сделать это очень просто. А для чего именно применять этот способ, решите уже сами на своё усмотрение.

На следующем занятии важная тема о перелинковке. Поговорим о видах и важности для SEO.

Полезная статья - Как убрать описание рубрик со страниц пагинации для улучшения SEO-параметров сайта.

Сайт сделан на WordPress. Один из пунктов меню имеет подпункты:

Если нажать на меню : - просто выведет все имеющиеся блюда.

Но тогда остальные подпункты выводиться не будут. Можно как-то по-другому сделать?

2 ответа 2

или просто запишите javascript: void(0) в окошко URL при редактировании меню.

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

С чего бы оно куда-то перемещалось? Нет конечно. Ну разве что для этого будет специально написан какой-то яваскрипт.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css wordpress или задайте свой вопрос.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Личность

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

Дружба

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

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

Физический

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

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

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

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

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

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

Семья

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

Ребенок — ваше генетическое потомство. Или кого-то, кого вы усыновили и о ком заботитесь.
Родственник. Кто-то, кого вы считаете частью своей большой семьи.
Родитель — ваш прародитель. Или кто-то, кто усыновил и заботится (или заботился) о вас.
Родной брат (сестра) — человек, с которым у вас общие родители.
Супруга (супруг) — человек, с которым вы состоите в браке.
Нет — используйте это, если вы хотите оставить категорию семьи пустой.

Романтичный

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: