Окт 23, 2015 - 1 Comments - Без рубрики -

Twenty Fifteen: Добавляем верхнее горизонтальное меню

Сегодня будем создавать горизонтальное верхнее меню в стандартной теме wordpress — Twenty Fifteen.

В теме Twenty Fifteen уже есть 2 области меню: «Основное меню» и «Меню социальных ссылок» — однако, располагаются они в боковой колонке (сайдбаре).

В данной же статье мы будем создавать горизонтальное меню в верхней части сайта, вот 3 этапа, которые необходимо выполнить:

1. Регистрируем новое меню в файле functions.php.
2. Размещаем HTML код меню в файле header.php.
3. Прописываем CSS стили для создаваемого нами верхнего горизонтального меню в файле стилей — style.css.

В результате у нас получиться следующее меню:

fifteen2

Приступим же к созданию верхнего горизонтального меню в теме Twenty Fifteen.

1. Регистрируем новое меню в файле functions.php.

Заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл functions.php, переходим в конец его кода и вставляем:

function top_header_menu() {

register_nav_menu('top-header-menu',__( 'Верхнее меню' ));

}

add_action( 'init', 'top_header_menu' );

Теперь если вы перейдете в пункт «Внешний вид» и его подпункт «Меню», а после создадите новое меню, то wordpress предложит вам указать его расположение уже из 3 областей темы:

fifteen1

2. Размещаем HTML код меню в файле header.php.

Заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл header.php ищем в нем следующую строчку:

<div id="sidebar" class="sidebar">

и перед ней вставляем следующий код:

<div id="navbar" class="top-navbar">
                                <nav id="site-navigation" class="navigation top-navigation" role="navigation">                                                      
                                        <?php wp_nav_menu( array( 'theme_location' => 'top-header-menu', 'menu_class' => 'top-nav-menu' ) ); ?>                                     
                                </nav><!-- #site-navigation -->
                        </div><!-- #navbar -->

3. Прописываем CSS стили для создаваемого нами верхнего горизонтального меню в файле стилей — style.css.

Заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл style.css и в конце его кода вставляем:

.top-navigation {
        clear: both;
        margin: 0 auto;
        max-width: 1080px;
        min-height: 45px;
        position: relative;
        float:right;
}

ul.top-nav-menu,
div.top-nav-menu > ul {
        margin: 0;
        padding: 0 40px 0 0;
}

.top-nav-menu li {
        display: inline-block;
        position: relative;
}

.top-nav-menu li a {
        color: #141412;
        display: block;
        font-size: 15px;
        line-height: 1;
        padding: 15px 20px;
        text-decoration: none;
}

.top-nav-menu li:hover > a,
.top-nav-menu li a:hover,
.top-nav-menu li:focus > a,
.top-nav-menu li a:focus {
        background-color: rgba(154,154,154,0.8);
        color: #fff;
}

.top-nav-menu .sub-menu,
.top-nav-menu .children {
        background-color: rgba(154,154,154,0.8);
        border: 2px solid #f7f5e7;
        border-top: 0;
        padding: 0;
        position: absolute;
        left: -2px;
        z-index: 99999;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
}

.top-nav-menu .sub-menu ul,
.top-nav-menu .children ul {
        border-left: 0;
        left: 100%;
        top: 0;
}

ul.top-nav-menu ul a,
.top-nav-menu ul ul a {
        color: #fff;
        margin: 0;
        width: 200px;
}

ul.top-nav-menu ul a:hover,
.top-nav-menu ul ul a:hover,
ul.top-nav-menu ul a:focus,
.top-nav-menu ul ul a:focus {
        background-color: rgba(154,154,154,0.8);
}

ul.top-nav-menu li:hover > ul,
.top-nav-menu ul li:hover > ul,
ul.top-nav-menu .focus > ul,
.top-nav-menu .focus > ul {
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
}

.top-nav-menu .current_page_item > a,
.top-nav-menu .current_page_ancestor > a,
.top-nav-menu .current-menu-item > a,
.top-nav-menu .current-menu-ancestor > a {
        color: #111111;
        font-style: italic;
}



/* Navbar */
.top-navbar {
        background-color: rgba(254,254,254,0.8);
        border-color:rgba(200,200,200,1);
        border-bottom-style:solid;
        border-bottom-width:1px;
        margin: 0 auto;
        max-width: 1400px;
        width: 100%;
        position:fixed !important;
        z-index:1;      
}

PS: Можно создать дочернюю тему и производить все вышеуказанные действия по созданию горизонтального меню в ней.
О том как создать дочернюю тему в wordpress читайте здесь — «codex.wordpress.org/Дочерние_темы»

* Для того чтобы вставить код в комментариях используйте теги [php] код [/php]

This entry passed through the Full-Text RSS service — if this is your content and you’re reading it on someone else’s site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.


Один комментарий: Twenty Fifteen: Добавляем верхнее горизонтальное меню

  1. Юлия

    Добрый день! Спасибо за простой и действующий способ создать верхнее меню в данной теме! Но вот проблема: меню является фиксированным, и при просмотре с мобильных устройств его разделы выстраиваются в ряд, закрывая половину экрана. Как устранить эту проблему? Пробовала заменить fixed, меню перестает быть фиксированным (меня это устраивает), но тогда пропадает красивый полупрозрачный эффект меню, остаются только слова, что выглядит плохо.

    15 Июл 2016 - Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Человек ? *