Разработка меню в WordPress и работа со стилями

Share on Pinterest
Share with your friends










Отправить

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

стили меню вордпресс1

Для начала нужно разобраться с моментом регистрации нашего меню в структуре конкретной темы, чтобы потом мы могли вносить определенные параметры и стили оформления. В этом нам поможет функция  register_nav_menu (), через которую мы сможем задать свойства заголовка меню, а также его местоположение на странице. Данные действия мы выполняем в файле functions.php:

register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'Top-menu' => __( 'Top Menu' )
)
);

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

стили меню вордпресс2

Теперь нам следует вынести меню в конкретном месте (файлы index.php, header.php или др.)

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

Итак, мы сформировали и вывели наше меню, однако мы не сделали ничего еще с его внешним видом (стиль оформления, стиль при наведении на пункт меню, стиль активного пункта меню). Нужно сделать так, чтобы наше меню вписалось в общее оформление блога или сайта. Сделать все необходимое для этого можно при помощи базовых знаний языков гипертекстовой разметки CSS и HTML.
Наше меню представляется в виде списка, структура которого хранится в контейнере, который создается вызовом функции wp_nav_menu. Непосредственно оформление данного списка мы можем сделать, изменив структуру файла style.css. Вот пример навигационного меню с многоуровневой выпадающей структурой:

#access {
background: #4572BF; /* сплошной цвет для старых браузеров */
background: -moz-linear-gradient(#4572BF, #6187C7);
background: -o-linear-gradient(#4572BF, #6187C7);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4572BF), to(#6187C7)); /* старый webkit синтаксис */
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; /* сплошной цвет для старых браузеров */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* старый webkit синтаксис */
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;
}

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

стили меню вордпресс3

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

#access.menu-item;

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

#access.menu-item-object-{object} ; 

Например:

#access.menu-item-object-category; //категория
#access.menu-item-object-tag; //тег
#access.menu-item-object-page; //страница

3. Класс, применимый ко всем элементам меню, в котором вместо {Type} нужно использовать параметры post_type или taxonomy (запись или таксономия).

 #access.menu-item-type-{type}; 

Например:

 #access.menu-item-type-post_type; // постоянная страница, любой тип записи 
#access.menu-item-type-taxonomy; // метка, категория или любая таксономия 

4. Класс, который присвоен текущей странице.

 #access.current-menu-item; 

5. Класс, при помощи которого происходит отображение меню главной страницы.

 #ac1cess.menu-item-home; 

6. Класс, непосредственно указывающий на некий индекс страницы, например, на ее ID

 #access.page_item; 

Например:

 #access.page-item-$ID; 
#access.current_page_item; 

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

Share on Pinterest
Share with your friends










Отправить


Похожие записи

Напишите ответ

Screenshot.png
Общаясь и проявляя активность в Клубе по WordPress

можно зарабатывать монеты и получить доступ в закрытый раздел