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

Разом із 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;
}

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

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

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

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

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

Джерело: WPLift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/