Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

Як настроїти свої стилі для меню в WordPress

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Коли було написано статтю "WordPress плагіни для організації меню", я зрозумів, що в ній мова пішла про плагіни лише тому, що сам я ніколи не намагався до кінця зрозуміти систему налаштування та редагування меню. Саме тоді я зробив собі "зарубку на згадку" щодо того, щоб вивчити, як створюються навігаційні меню у WordPress. Раніше я навчився модифікувати існуючі меню; але цього разу пропоную вам разом зі мною навчитися створення власних меню "з нуля".

Як настроїти свої стилі для меню в WordPress

Як влаштована система меню WordPress

Починаючи з WordPress 3.0, розробники тем отримали можливість самостійно задавати навігаційні меню у власних темах для сайту. Більшість сучасних тем для WordPress поставляються відразу із заданим розташуванням та структурою меню навігації, так що у переважній більшості випадків у вас не буде потреби редагувати меню навігації. Але все ж таки, припустимо, що у вас з'явилася необхідність створити меню самостійно. Саме в цьому випадку вам потрібно спочатку розібратися, як працює система меню навігації WordPress.

На першому кроці при створенні меню розробники тем задають заголовки меню и розташування їх на сторінці шляхом реєстрації меню у структурі теми. Наступним кроком є прикріплення меню до заданих локацій та вибір стилів для відображення. Також розробник теми може встановити підтримку безлічі навігаційних меню у своїй темі. І останнім кроком у роботі з меню є редагування меню самими користувачами за допомогою вбудованого редактора Редактор меню.

Реєстрація та відображення меню навігації у WordPress

Реєстрація меню — порівняно проста процедура, і все, що вам потрібно, — це задати розташування меню, прописати його реєстрацію та задати ім'я для нового меню в темі сайту:

register_nav_menu( 'header-menu', 'Header Menu');
	// Or you can register multiple menus at once:
register_nav_menus(
   		array(
     			'header-menu' => __( 'Header Menu' ),
     			'Top-menu' => __( 'Top Menu' )
   		)
		  );

Після реєстрації нового меню ви зможете додавати його до ваших тем оформлення сайту. Виглядає це так:

<nav id="access" role="navigation">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav>

Працюємо над стилем оформлення меню для WordPress

Функція wp_nav_menu дозволяє задати контейнер для меню, а також значення параметрів container id, menu id и menu class. Робиться це для того, щоб пізніше можна було легко змінювати стиль вашого меню. Перед тим, як ви заглибитеся в налаштування стилю для меню WordPress, важливо розібратися в класах CSS , які використовуються у налаштуванні та роботі з меню для WordPress.

Давайте спочатку подивимося на те, як ми підганятимемо стиль для нашого меню навігації:

#access {
	background: #4572BF; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#4572BF, #6187C7);
	background: -o-linear-gradient(#4572BF, #6187C7);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4572BF), to(#6187C7)); /* older webkit syntax */
	background: -webkit-linear-gradient(#4572BF, #6187C7);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}

Тепер ми стилізуємо невпорядкований список, додамо ефекти і створимо вкладені меню:

#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
#access ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #efefef;
}
#access li:hover > a,
#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access ul li:hover > ul {
	display: block;
}

Стилізуємо готову сторінку:

#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
}

Як настроїти свої стилі для меню в WordPress

Вивчення класів CSS, що використовуються в системі меню для WordPress

Як настроїти свої стилі для меню в WordPress

WordPress відображає меню у вигляді невпорядкованого списку. Якщо ви новачок у роботі з CSS, тоді вам варто зупинитися, не читати цей пост далі, а натомість почитати досить старе за часом, але все ще актуальне керівництво "CSS Design: Taming Listsдля того, щоб знайти базове розуміння того, як з неупорядкованого списку створити гарне навігаційне меню для свого сайту.

У цьому невпорядкованому списку WordPress кожному компоненту меню призначає свій клас. Існує клас для контейнера, який містить весь невпорядкований список; є клас ідентифікатор контейнера, є клас CSS для меню та окремі класи для кожного типу та компонента меню з власним CSS.

Спочатку це може звучати трохи заплутано і незрозуміло, але на практиці все не настільки страшно. Тут так багато окремих класів, тому що WordPress дозволяє задавати дуже багато типів меню для свого сайту. Раптом ви захочете додати категорію, сторінку, що налаштовується внутрішнє або зовнішнє посилання. Кожен тип таких даних визначений в WordPress окремо, і так дизайнери мають ширший набір опцій для налаштування меню в залежності від обраного оформлення і стилю вашої теми.

Клас CSSОпис класу
.menu-itemОсновний клас, який додається до кожного пункту меню.
.menu-item-object-{object}Цей клас додається до кожного пункту меню, який є об'єктом типу категорії, посилання або тега і т.д.
.menu-item-object-category
.menu-item-object-tag
.menu-item-object-page
.menu-item-object-{custom}
.menu-item-type-{type}Тут параметр {Type} використовується або параметр “post_type”, або параметр “taxonomy”
.menu-item-type-post_type
.menu-item-type-taxonomy
.current-menu-itemКлас, який використовується на сторінці, яку зараз переглядає користувач
.menu-item-homeЦей клас пов'язаний з головною сторінкою сайту та меню, яке на ній відображається
.page_itemЗабезпечує зворотну сумісність, коли меню за промовчанням повертає wp_page_nav
.page-item-$ID
.current_page_item

Вивчення можливостей розробки на базі WordPress – процес порівняно легкий та захоплюючий. Особисто мені навіть трохи не віриться, наскільки я зміг просунутися від простого блогера до людини, яка непогано може розібратися в коді та роботі з CSS, HTML та функціями WordPress. З навігаційними меню WordPress не так складно впоратися, як може здатися на перший погляд. Для того, щоб поекспериментувати та надихнутися на власні кроки у цьому напрямі, скачайте кілька тем для WordPress та подивіться на те, як у них задані та працюють навігаційні меню.

Джерело: WPLift.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 15

Анатолій:

Хороша інформація, ось тільки так подано сухо.

Олександр:

на жаль, тема не розкрита: (

Konstantin Bobkov:

Чи є спосіб вивести таке меню із мініатюрами?

campusboy:

А я вдячний автору. Понад 3 години шукав інфу, пробував сам там css підганяти - нічого не вийшло, не дозволяють знання з нуля зробити. А тут вставив, запрацювало! І вже почав підганяти під себе. Дякую!

Андрій Смоляков:

Скажіть, будь ласка, хочу відредагувати файл СSS плагіну, а він собака така відсутня в розділі редактора плагінів. У редакторі тем там окремо прямий є праворуч заголовок «стилі» і нижче файли CSS, а немає нічого.

WPcafe.org:

Відредагуйте цей файл локально на комп'ютері та завантажте оновлену версію на сайт. Це найпростіший спосіб.

Андрій Смоляков:

Зараз так і роблю, але може є якийсь плагін редактора для WordPress?

Storky:

Допоможіть Wordpress 4.0 створення теми

Поставив порожню обгортку з underscores.me
і все одно не працює половина параметрів для wp_nav_menu()
беру з http://codex.wordpress.org/Function_Reference/wp_nav_menu

не працює $after, $menu_class задає клас контейнера, $container_class нічого не задає.

Так само пишуть, що до кожного повинен додаватися .menu-item, що теж не працює.

Що я роблю не так?

Анна:

Як відредагувати шрифт у меню?

evgen:

Доброго дня, може допомогти, у мене проблема з меню, а де правити не знаю, вже 2 дні сиджу. Меню відображається по-різному в різних браузерах. і тема хороша і нова.

WPcafe.org:

А що саме не так із вашим меню на картинці?

Вадим:

Доброго дня, використовуючи тему i-craft, будь ласка підкажіть як змінити розмір шрифту меню без зміни розміру шрифту на сайті ? якщо переглядати в інструментах розробника яким селектором задається стиль, то це body. Пробував додати в редакторі нове правило (font-size: 20 px;) для селекторів: menu, nav-container, site-navigation, navbar нічого не виходить

WPcafe.org:

Не потрібно додавати нове правило, потрібно знайти вже існуюче правило, яке відповідає за цей шрифт, та змінити його. Це також можна подивитися в інспекторі розробника в стилях.

Катерина:

Здравствуйте
а чи не зможете підказати, як розділити між собою пункти в горизонтальному меню? Тобто вони у готовому шаблоні йдуть просто на світлому фоні. Хочеться щоб між ними була риса хоча б роздільна. Спасибі якщо хтось відгукнеться

Дмитро:

Як змінити колір меню у існуючій темі?

Додати коментар або відгук