WordPress Fix: меню в WordPress — настройка стилей

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

[adsense]

Как добавить поддержку меню в ваше тему WordPress

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

add_theme_support( 'menus' );

Как вывести меню в WordPress

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

< ?php wp_nav_menu(); ?>

Эта функция имеет массу параметров. Вот некоторые из них:
container_class — название класса для блока div, в который будет заключено меню
container_id — id для блока div, в который будет заключео меню
menu — позволяет задать id для списка, на котором будет строиться меню
before — текст, который требуется вывести перед ссылкой <a>
after — текст, который требуется вывести после ссылки </a>
depth — глубина меню — то количество уровней меню, которое будет видно. По стандарту 0 — показываются все уровни
Давайте разберем эти параметры на примере:

< ?php wp_nav_menu(array( 'menu' => 'Categories', 'container_class' => 'main-menu', 'container_id' => 'header') ); ?>

Такая функция выведет меню под названием Categories, которое будет расположено в блоке div с id="header" и class="main-menu". В итоге мы получим вот такой код:

Кастомизация (стилизация) пользовательского меню в WordPress

После того, как мы добавили поддержку пользовательских меню в нашу тему WordPress и вывели меню в нужном месте с нужными параметрами остается сделать стилизацию меню — придать нашему меню законченный внешний вид. Делать мы это будем с помощью CSS (желающие могут применить свойства CSS3). Вот стили, которые мы будем редактировать:

#header .main-menu{} // класс контейнера
#header .main-menu ul {} // меню первого уровня
#header .main-menu ul ul {} //меню второго уровня
#header .main-menu li {} // пункт меню
#header .main-menu li a {} // ссылка в пункте меню
#header .main-menu li ul {} // выпадающее меню
#header .main-menu li li {} // пункт выпадающего меню
#header .main-menu li li a {} // ссылка в пункте выпадающего меню

Кроме этих стандартных классов, существуют еще дополнительные классы для меню, которые помогают максимально кастомизировать меню. Вот они:

.current_page_item{} // текущая страница
.current-cat{} // текущая категория
.current-menu-item{} // любой другой текущий элемент
.menu-item-type-taxonomy{} // класс для категорий
.menu-item-type-post_type{} // класс для страниц
.menu-item-type-custom{} // класс для пользовательского типа
.menu-item-home{} // класс для домашней страницы

Все эти классы не привязаны к конкретным спискам. Классы для различных типов menu-item-type обычно не используются, но знать о них не помешает.

Индивидуальный класс CSS для каждого пункта меню

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

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

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

Как видите ничего сложного в меню для WordPress нет и при желании вы легко достигнете нужного вам результата. Ну, а если у вас есть свой бизнес, то Вам будет интересен форум http://www.biznet.ru/, где Вы сможете обсудить актуальные проблема бизнеса, задать и ответить на вопросы. Есть так же разделы посвященные юридическим и бухгалтерским вопросам.