Как выделить отдельный пункт меню жирным шрифтом. Wordpress выделить активный пункт меню


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

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

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

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

1. Переходим с административного меню в Внешний вид -> Меню.

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

2. В правом верхнем углу нажимаем кнопку «Настройки экрана» и ставим галочку на «Произвольные ссылки».

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

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

3. Нажмите по вкладке «Произвольные ссылки». В «URL» укажите символ #, а в «Текст ссылки» — текст для Вашего пункта меню. После этого нажмите кнопку «Добавить в меню».

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

4. Установите созданный пункт меню так, как Вам нужно и нажмите кнопку «Сохранить меню».

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

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

Напоминаю, в случае если у Вас возникают вопросы или что-то не получается —  смело пишите в комментариях.

Здравствуйте, друзья! В этом небольшом уроке мы поговорим о том, как создать некликабельный (без ссылки) пункт в меню в WordPress. Сделать его можно очень просто и без особых усилий. Для примера давайте сделаем выпадающее меню, родительский элемент которого будет некликабельным. И так, начнем! Как создать пункт меню без ссылки в WordPress 1. Переходим с административного меню в Внешний вид -> Меню. 2. В правом верхнем углу нажимаем кнопку "Настройки экрана" и ставим галочку на "Произвольные ссылки". После этого в колонке с разрешенными для добавления элементами меню появится новая вкладка - "Произвольные ссылки". 3. Нажмите по вкладке "Произвольные ссылки". В "URL" укажите символ…

Оценка урока

Рейтинг: 4.74 ( 18 голосов ) 100

wp-lessons.com

Выделить пункт меню | Joomla, WordPress

Первый пример относится к движку WordPress. Второй пример относится к движку Joomla.

Пример 1. Как выделить пункт меню WordPress.

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

Решили сделать следующим образом:

shapka-1

1 картинка — вид шапки сайта до редизайна

shapka-2

2 картинка — вид шапки сайта после редизайна

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

Делается это путём прописывания css стилей для элемента меню Бухгалтерия.

Шаг 1.: Захоим в админку Вашего сайта —  Внешний Вид — Меню.

2013-08-16_194512

Шаг 2.: Нужно включить возможность прописывать стили для элементов меню. По умолчанию для элементов меню прописывание стилей отключено. Делается это просто: Вверху экрана на странице Внешний вид — меню: есть кнопка — Настройки экрана. Нажимаем. Вылазит окошко, возле графы Классы CSS ставим галочку. Все, возможность приписывать css стили для элементов меню включена.

2013-08-16_194653

[info]

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

2013-08-16_195248

[/info]

Шаг 3.: Прописываем  в графе Классы CSS  название стиля. Название может быть любое, главное что б они соответствовали.  (Его же далее будем расписывать в файле style.css Вашей темы )

2013-08-16_194709

Шаг 4.: Прописываем нужные нам параметны CSS для лемента меню Бухгалтерия.

2013-08-16_195853

В моем случае написано только .about {font-weight: bold;}, где фраза font-weight  — отвечает за насыщенность шрифта, а bold — означает что начертание будет полужирное. Вообщем в скобках можете прописывать что угодно.

[php]

.about {

font-weight: bold;

float: right;

и т.д.

и т.д.

}

[/php]

Обновляете, и все, готово. По WordPress Все.

Постовой статьи: створити сайт предлагает киевская студия.

Пример 2: Как выделить пункт меню Joomla.

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

2013-08-16_1952481

Если открыть исходный код, то ссылка теперь в коде будет прописываться с этим классом — вот так:

2013-08-16_195242

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

Вот на этот класс и навешиваете bold в стилях сайта.

[php].about {font-weight: bold;} [/php]

Конец.

max-webs.com

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

18 сентября 2014 Алексей Ершов  Просмотров: 13 972

Добрый день!

В предыдущей статье я сообщил вам о создании на блоге страницы “Поддержать блог”. После добавления этой страницы в меню появился еще один стандартный пункт такой же как “О сайте”, “Карта сайта” и т.п. Мне захотелось выделить его каким-то другим цветом, чтобы он отличался от других и немного привлекал на себя внимание. =)

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

В WordPress при выводе списка страниц к каждому элементу этого списка добавляются классы page_item и page-item-xxx, где xxx – это номер страницы.

Аналогично и для рубрик: cat-item и cat-item-xxx, где xxx – это номер рубрики.

Например, в мое блоге для пункта “Поддержать блог” был добавлен класс page-item-996.

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

 

определение класса конкретного пункта меню

 

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

В моём случае мне нужно прописать свойства для класса page-item-996.

Открываем файл style.css. Это можно сделать, например, через админку Внешний вид – Редактор – Таблица стилей (style.css). Либо подключиться к серверу через WinSCP и открыть файл /wp-content/themes/название_шаблона/style.css

В конец файла style.css добавляем необходимые нам свойства. Вот что добавил я.

#pagemenu li.page-item-996 a { color: gold; } #pagemenu li.page-item-996:hover a { color: #0099cc; } #pagemenu li.page-item-996.current_page_item a { color: #0099cc; }

 

#pagemenu li.page-item-996 a {

    color: gold;

}

#pagemenu li.page-item-996:hover a {

    color: #0099cc;

}

#pagemenu li.page-item-996.current_page_item a {

    color: #0099cc;

}

 

Первая конструкция определяет цвет текста ссылки пункта меню страницы 996 как золотой.

#pagemenu – указывает, что все следующее далее будет касаться только блока с id=pagemenu.

li.page-item-996 – сужает действие заданного свойства (цвета) до конкретного элемента списка.

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

Т.е. если вам нужно изменить только цвет, то достаточно добавить:

#pagemenu li.page-item-996 a { color: gold; }

 

#pagemenu li.page-item-996 a {

    color: gold;

}

 

Цвет, естественно, зададите какой нужно вам.

Вторая конструкция, которую я добавил – задает цвет текста при наведении курсора мыши (hover).

Третья конструкция – определяет цвет текста, когда пункт активен (выбран). К активному пункту добавляется класс current_page_item.

Вот и все. Сохраняйте внесенные изменения и проверяйте на сайте все ли получилось так как вы хотели.

У меня получилось вот так:

 

цвет неактивного пункта меню после внесенных изменений

цвет активного пункта меню после внесенных изменений

 

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

Аналогичные изменения, как вы поняли, можно делать и для рубрик, только в этом случае работать с классом cat-item-xxx.

Если что не понятно – спрашивайте.

До новых публикаций!

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

wordpress-life.ru


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта