Разработка меню в 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










Отправить


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

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