Wordpress классы css в меню

Как настроить стиль меню навигации в WordPress

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

Способ 1: Использование ручного изменения стиля меню навигации в WordPress

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

Лучший способ сделать пользовательские настройки в вашей теме WordPress является создание дочерней темы. Если вы только изменяете CSS, то вы можете увидеть наше руководство о том, как легко добавлять пользовательские CSS в WordPress без изменения файлов темы.

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

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

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

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

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

Именно поэтому вам нужно определить класс CSS и расположение меню. Скорее всего, ваша тема WordPress уже это делает, путем добавления меню навигации с помощью кода, примерно так:

Этот код сообщает WordPress, что это тема отображает начальное меню. Он также добавит класс CSS primary-menu к навигации по меню.

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

#header .primary-menu{} // container class #header .primary-menu ul {} // container class first unordered list #header .primary-menu ul ul {} //unordered list within an unordered list #header .primary-menu li {} // each navigation item #header .primary-menu li a {} // each navigation item anchor #header .primary-menu li ul {} // unordered list if there is drop down items #header .primary-menu li li {} // each drop down navigation item #header .primary-menu li li a {} // each drap down navigation item anchor

Замените #header на класс контейнера или ID, используемого вашей темой WordPress.

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

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

.current_page_item{} // Class for Current Page .current-cat{} // Class for Current Category .current-menu-item{} // Class for any other current Menu Item .menu-item-type-taxonomy{} // Class for a Category .menu-item-type-post_type{} // Class for Pages .menu-item-type-custom{} // Class for any custom item that you added .menu-item-home{} // Class for the Home Link

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

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

Зайдем на страницу Appearance »Menus и нажмем на кнопку настройки экрана.

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

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

Метод 2: Настроить стиль меню в WordPress при помощи плагинов

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

Вот когда пригодится WordPress плагин стилизации меню. Это избавляет вас от редактирования файлов темы или написания кода.

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

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

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

Теперь вам нужно нажать на кнопку CSS Hero в вашей панели администратора WordPress.

CSS Hero предлагает редактор WYSIWYG (что вы видите, то и получаете). Нажатие на кнопку приведет вас на ваш сайт с плавающей панелью инструментов CSS Hero видимой на экране.

Вам нужно нажать на синюю иконку в верхней части, чтобы начать редактирование.

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

В приведенном выше скриншоте, показывает нам пункт меню, навигации по меню, контейнер навигации меню и т.д.

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

Теперь CSS Hero покажет вам различные свойства, которые можно редактировать как текст, фон, границы, поля, отступы и т.д.

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

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

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

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Классы и индентификаторы CSS генерируемые WordPress | Все о WEB программировании

28.08.2013 Ромчик

Доброго времени суток. В данной статье я хочу поговорить о CSS классах и индентификаторах генерируемых WordPress. Зачем? — спросите Вы. Ведь CSS классы и индентификаторы зависят от темы WordPress. И Вы будете правы. Но есть такие классы CSS и индентификаторы, которые генерирует сама CMS WordPress. И, если Вы хотите создать тему WordPress для публичного релиза, то Вы должны использовать их. Кстати, в моем блоге Вы можете почитать уроки по созданию темы для WordPress

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

Основные CSS классы WordPress

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

.rtl {} .home {} .blog {} .archive {} .date {} .search {} .paged {} .attachment {} .error404 {} .single postid-(id) {} .attachmentid-(id) {} .attachment-(mime-type) {} .author {} .author-(user_nicename) {} .category {} .category-(slug) {} .tag {} .tag-(slug) {} .page-parent {} .page-child parent-pageid-(id) {} .page-template page-template-(template file name) {} .search-results {} .search-no-results {} .logged-in {} .paged-(page number) {} .single-paged-(page number) {} .page-paged-(page number) {} .category-paged-(page number) {} .tag-paged-(page number) {} .date-paged-(page number) {} .author-paged-(page number) {} .search-paged-(page number) {}

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

Основные стили в посте

Также WordPress добавляет свои классы для постов и вот список основных:

.post-id {} .post {} .page {} .attachment {} .sticky {} .hentry {} .category-misc {} .category-example {} .tag-news {} .tag-wordpress {} .tag-markup {}

Основные стили меню

Также с помощью генерируемых классов WordPress мы можем стилизировать меню. Вот некоторые классы:

#header .main-menu{} // container class #header .main-menu ul {} // container class first unordered list #header .main-menu ul ul {} //unordered list within an unordered list #header .main-menu li {} // each navigation item #header .main-menu li a {} // each navigation item anchor #header .main-menu li ul {} // unordered list if there is drop down items #header .main-menu li li {} // each drop down navigation item #header .main-menu li li a {} // each drap down navigation item anchor .current_page_item{} // Class for Current Page .current-cat{} // Class for Current Category .current-menu-item{} // Class for any other current Menu Item .menu-item-type-taxonomy{} // Class for a Category .menu-item-type-post_type{} // Class for Pages .menu-item-type-custom{} // Class for any custom item that you added .menu-item-home{} // Class for the Home Link

Стили WISIWYG редактора

Вот некоторые классы CSS, которые генерирует WordPress для WISIWYG редактора:

.entry-content img {} .alignleft, img.alignleft {} .alignright, img.alignright {} .aligncenter, img.aligncenter {} .alignnone, img.alignnone {} .wp-caption {} .wp-caption img {} .wp-caption p.wp-caption-text {} .wp-smiley {} blockquote.left {} blockquote.right {} .gallery dl {} .gallery dt {} .gallery dd {} .gallery dl a {} .gallery dl img {} .gallery-caption {} .size-full {} .size-large {} .size-medium {} .size-thumbnail {}

CSS классы для виджетов

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

.widget {} #searchform {} .widget_search {} .screen-reader-text {} .widget_meta {} .widget_meta ul {} .widget_meta ul li {} .widget_meta ul li a {} .widget_links {} .widget_links ul {} .widget_links ul li {} .widget_links ul li a {} .widget_archive {} .widget_archive ul {} .widget_archive ul li {} .widget_archive ul li a {} .widget_archive select {} .widget_archive option {} .widget_pages {} .widget_pages ul {} .widget_pages ul li {} .widget_pages ul li a {} .widget_links {} .widget_links li:after {} .widget_links li:before {} .widget_tag_cloud {} .widget_tag_cloud a {} .widget_tag_cloud a:after {} .widget_tag_cloud a:before {} .widget_calendar {} #calendar_wrap {} #calendar_wrap th {} #calendar_wrap td {} #wp-calendar tr td {} #wp-calendar caption {} #wp-calendar a {} #wp-calendar #today {} #wp-calendar #prev {} #wp-calendar #next {} #wp-calendar #next a {} #wp-calendar #prev a {} .widget_categories {} .widget_categories ul {} .widget_categories ul li {} .widget_categories ul ul.children {} .widget_categories a {} .widget_categories select{} .widget_categories select#cat {} .widget_categories select.postform {} .widget_categories option {} .widget_categories .level-0 {} .widget_categories .level-1 {} .widget_categories .level-2 {} .widget_categories .level-3 {} .recentcomments {} #recentcomments {} #recentcomments li {} #recentcomments li a {} .widget_recent_comments {} .widget_recent_entries {} .widget_recent_entries ul {} .widget_recent_entries ul li {} .widget_recent_entries ul li a {} .textwidget {} .widget_text {} .textwidget p {}

CSS классы для формы комментариев

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

/*Comment Output*/ .commentlist .reply {} .commentlist .reply a {} .commentlist .alt {} .commentlist .odd {} .commentlist .even {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {} .commentlist .vcard {} .commentlist .vcard cite.fn {} .commentlist .vcard span.says {} .commentlist .vcard img.photo {} .commentlist .vcard img.avatar {} .commentlist .vcard cite.fn a.url {} .commentlist .comment-meta {} .commentlist .comment-meta a {} .commentlist .commentmetadata {} .commentlist .commentmetadata a {} .commentlist .parent {} .commentlist .comment {} .commentlist .children {} .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author-admin {} .commentlist {} .commentlist li {} .commentlist li p {} .commentlist li ul {} .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.depth-{id} {} .commentlist li ul.children li.bypostauthor {} .commentlist li ul.children li.comment-author-admin {} #cancel-comment-reply {} #cancel-comment-reply a {} /*Comment Form */ #respond { } #reply-title { } #cancel-comment-reply-link { } #commentform { } #author { } #email { } #url { } #comment #submit .comment-notes { } .required { } .comment-form-author { } .comment-form-email { } .comment-form-url { } .comment-form-comment { } .form-allowed-tags { } .form-submit

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

Данная статья подготовлена по материалам сайта http://www.wpbeginner.com/

Добавляем произвольный класс к элементу меню WordPress с условием

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

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

//фильтруем класс в элементе меню навигации add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); function special_nav_class($classes, $item){ if(is_single() && $item->title == 'Блог'){ $classes[] = 'current-menu-item'; } return $classes; }

Код вы просто проверяет, является ли страница отдельной записью блога и называется ли элемент меню — Блог. Если критерии совпадают, то добавляется класс “Current-menu-item”. Нам нужно было добавить произвольный класс, чтобы решить вопрос с дизайном, над которым мы работали.

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

Если вы отчаянно искали такой код, то мы надеемся, что статья вам в этом помогла. Можно еще посмотреть в сторону других переменных $item. Например, $item->ID, $item->title, $item->xfn

Еще один способ решить проблему — с помощью CSS. Добавляем в таблицу стилей следующий код:

.single #navigation .leftmenublog div{display: inline-block !important;}

Все, что мы сделали, это добавили дополнительный div для вывода значка стрелочки в наше меню. Эта стрелочка отображается, только если класс был либо hovered over, или selected. Иначе же div устанавливался в display: none; С помощью класса body мы просто задали элементу div вывод только в определенном классе меню.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]

Rating: 5.0/5 (3 votes cast)

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

Добрый день!

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

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

В 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.

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

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

---

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

• 
  Как в word сделать ценники
• 
  Как добавить полосу прокрутки в html
• 
  Как в html сделать перенос строки
• 
  Php как установить
• 
  Как распечатать несколько документов word сразу
• 
  Как включить sendmail на php
• 
  Как удалить лишние пробелы из word
• 
  Непечатаемые символы в word как удалить
• 
  Как в word 2013 удалить страницу
• 
  Как распечатать несколько файлов word сразу
• 
  В css что значит