Создаем выпадающее горизонтальное меню WordPress (подробно).

Здесь я расскажу Вам как сделать выпадающее меню, которое настраивается из панели управления вашим сайтом, причем постараюсь рассказать подробно, то есть понятно даже новичку.

Скачать исходники для статьи можно ниже

Шаблон данного сайта, на котором я веду свой блог, изначально не поддерживал выпадающее меню, да и вообще меню установленное на нем было ужасно, поэтому я решил поискать решения по созданию нужного мне меню в интернете, однако, это оказалось непростой задачей. Единственно путное решение, которое я нашел — это было создание меню через онлайн сервис http://purecssmenu.com/ (более подробно про него вы можете прочитать по следующему url: http://ktonanovenkogo.ru/html/sozdanie-vypadayuschih-menyu-na-servise-purecssmenu.html)- однако у этого решения есть минус, меню нужно создавать вручную на онлайн сервисе, прописывая каждую ссылку, а мне хотелось создавать его непосредственно в панели управления сайтом.

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

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

Недавно, нашел в интернете еще один способ создания горизонтального выпадающего меню, аналогичный нижеуказанному (также добавляется код Walker, только немного измененный), с единственным небольшим плюсом, что на данном сайте (http://cssmenumaker.com) есть готовые примеры менюшек с указанием их CSS кода, о данном способе можете почитать в моей новой статье:

Создаем горизонтальное выпадающее меню wordpress (Способ 2)

Наше меню будет выглядеть вот так, однако, если немного поработать со стилем (шаблон «Список стилей» — про него рассказано ниже по тексту), то вы получите такое же меню как на моем сайте.

menu

1. Первое, что вам нужно сделать — это зарегистрировать ваше меню в файле functions.php вашей темы. Для этого заходим в панель управления вашим сайтом, выбираем в левом меню закладку «Внешний вид», далее выбираем подпункт «Редактор», далее справа в шаблонах ищем файл  functions.php  (функции темы). Открываем его, переходим на последнюю строчку, которая выглядит как закрывающийся тег ?>, вот до него мы и вставляем нижеприведенный код.

function theme_setup() {
    register_nav_menu('Navigation', __('Navigation'));
}
add_action( 'init', 'theme_setup' );
if ( !is_nav_menu('Navigation') ) {
    $menu_id = wp_create_nav_menu('Navigation');
    wp_update_nav_menu_item($menu_id, 1);
}

После этого переходим в левом меню панели управления во вкладку «Внешний вид», далее выбираем подпункт «Меню» и видим, что у нас в окошке «Области темы» появилось сообщение о том, что наша  тема оформления поддерживает 1 меню и предлагается выбрать меню, которое мы хотели бы использовать.

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

Меню мы создали, назвали его, и выбираем его в окне «Области темы».

2. Следующий шаг, который нам предстоит сделать — это добавить в файл functions.php еще несколько строчек кода (открываем данный файл также как и в пункте 1). Дело в том, что разработчики WordPress почему-то не предусмотрели специального класса для родительских пунктов, поэтому придется вставить их самостоятельно. +

Также, как и в первом пункте, в файле functions.php идем на самую последнюю строчку, которая выглядит как закрывающийся тег ?>,  и вставляем нижеприведенный код.

class extended_walker extends Walker_Nav_Menu{
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
 
        if ( !$element )
            return;
 
        $id_field = $this->db_fields['id'];
 
        //display this element
        if ( is_array( $args[0] ) )
            $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
 
        //Adds the 'parent' class to the current item if it has children
        if( ! empty( $children_elements[$element->$id_field] ) )
            array_push($element->classes,'parent');
 
        $cb_args = array_merge( array(&$output, $element, $depth), $args);
 
        call_user_func_array(array(&$this, 'start_el'), $cb_args);
 
        $id = $element->$id_field;
 
        // descend only when the depth is right and there are childrens for this element
        if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
 
            foreach( $children_elements[ $id ] as $child ){
 
                if ( !isset($newlevel) ) {
                    $newlevel = true;
                    //start the child delimiter
                    $cb_args = array_merge( array(&$output, $depth), $args);
                    call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
                }
                $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
            }
            unset( $children_elements[ $id ] );
        }
 
        if ( isset($newlevel) && $newlevel ){
            //end the child delimiter
            $cb_args = array_merge( array(&$output, $depth), $args);
            call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
        }
        //end this element
        $cb_args = array_merge( array(&$output, $element, $depth), $args);
        call_user_func_array(array(&$this, 'end_el'), $cb_args);
    }
}

3. Я буду вставлять меню в шапку (header) своего шаблона, так как это самый распространенный вариант. И для этого в левом меню панели управления сайтом выбираем все также закладку «Внешний вид», далее подпункт «Редактор» и справа среди «Шаблонов» выбираем файл «Шапка» (header.php).

Внутри файла header.php вставляем следующий код, причем данный код должен быть до тегов:

</head>
<body>

Сам код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            var timeout    = 500;
            var closetimer = 0;
            var ddmenuitem = 0;
 
            function jsddm_open()
            {  jsddm_canceltimer();
            jsddm_close();
            ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
 
            function jsddm_close()
            {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
 
            function jsddm_timer()
            {  closetimer = window.setTimeout(jsddm_close, timeout);}
 
            function jsddm_canceltimer()
            {  if(closetimer)
            {  window.clearTimeout(closetimer);
            closetimer = null;}}
 
            $(document).ready(function()
            {  $('#jsddm > li').bind('mouseover', jsddm_open)
            $('#jsddm > li').bind('mouseout',  jsddm_timer)});
 
            document.onclick = jsddm_close;
        </script>

4. Следующее, что нам нужно сделать — это вставить код вызова нашего меню в фале шапки (header.php). Данный код нужно вставить там, где мы хотим видеть наше выпадающее горизонтальное меню.

<?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'depth' => 2, 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'jsddm', 'menu_id' => 'jsddm', 'walker' => new extended_walker())); ?>

На своем сайте я заключил данный код в тег div, для того, чтобы применить к нему стиль оформления menu2 (код данного стиля приведен в следующем пункте 5), который создает отступ слева, вот так он у меня выглядит:

<div id="menu2">	
<?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'depth' => 2, 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'jsddm', 'menu_id' => 'jsddm', 'walker' => new extended_walker())); ?>
</div>

5. Осталось добавить css стилей для нашего меню. Для этого опять выбираем в левом меню панели управления ярлык «Внешний вид», далее подпункт «Редактор», далее справа среди шаблонов выбираем файл «Список стилей» (style.css), в нем также идем в конец и вставляем следующий код:

#jsddm {
    margin: 0;
    padding: 0;
}
#jsddm li {
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
}
#jsddm li a {
    display: block;
    background: #20548E;
    padding: 5px 12px;
    text-decoration: none;
    border-right: 1px solid white;
    width: 70px;
    color: #EAFFED;
    white-space: nowrap;
}
#jsddm li a:hover {
    background: #1A4473;
}
#jsddm li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 1px solid white;
}
#jsddm li ul li {
    float: none;
    display: inline;
}
#jsddm li ul li a {
    width: auto;
    background: #9F1B1B;
}
#jsddm li ul li a:hover {
    background: #7F1616;
}

Вышеуказанный код определяет внешний вид нашего меню, поэтому меняя его параметры, можно изменить цвет, размер шрифта, его формат и многое другое.

Ну, например:

6 строчка: float: left;- задает расположение вашего меню, т. е. в данном случае оно будет располагаться слева, если поставить float: right; — то будет располагаться справа.

8 строчка: font: 12px Tahoma, Arial; — задает размер шрифта и вид шрифта текста, используемого в вашем меню.

12 строчка:  background: #20548E; — отвечает за цвет кнопочек основных пунктов вашего меню, причем можно поставить вместо цвета и фоновый рисунок, я заменил данную строчку на своем сайте на «background: url(images/nav-button-bg.gif) repeat-x;»  (то есть фоном кнопочек у меня рисунок и он повторяется по оси х).

13 строчка: padding: 5px 12px; — это отступ текста кнопочек основных пунктов вашего меню от краев кнопки, причем данный параметр может состоять из 4 пунктов (padding: 5px 12px 7px 10 px;). Отступы здесь задаются против часовой стрелки: сначала сверху, потом слева, потом снизу и справа (padding: верх слева снизу справа;).

16 строчка: width: 70px; — данная строчка отвечает за ширину кнопочек основных пунктов вашего меню.

20 строчка: #jsddm li a:hover {background: #1A4473;} — задает цвет выделения основных пунктов меню при наведении мыши.

36 строчка: background: #9F1B1B; — задает цвет фона подпунктов меню.

38 строчка:  #jsddm li ul li a:hover {background: #7F1616;}- здесь #7F1616 задает цвет выделения подпункта меню при наведении мыши.

[spoiler title="Вот как выглядит код моего меню в файле style.css." open="0" style="1"]

#jsddm {
                margin: 0;
                padding: 0;
                }
            #jsddm li {
                float: left;
                list-style: none;
                font:bold 12px Tahoma, Arial;
                }
            #jsddm li a {
                display: block;
                background: url(images/nav-button-bg.gif) repeat-x;
                padding: 5px 12px;
                text-decoration: none;
                border-right: 1px solid white;
                width: 90px;
                color: #ffffff;
                white-space: nowrap;

                }
            #jsddm li a:hover {background: #1A4473;}
                #jsddm li ul {
                margin: 0;
                padding: 0;
                position: absolute;
                visibility: hidden;
                border-top: 1px solid white;
                }
            #jsddm li ul li {
                float: none;
                display: inline;
                }
            #jsddm li ul li a {
                width: auto;
                background: #7a9c26;
                }
            #jsddm li ul li a:hover {background: #1A4473;}

#menu2 {
	padding: 78px 0 0 0;
}

[/spoiler]

6. Все готово!!!

PS: Протестировал данный код на разных темах, к сожалению, не на всех все гладко работает, некоторые темы приходится настраивать индивидуально, для того чтобы данное меню заработало.
100 % данный код работает на теме Twenty Eleven (которая идет по умолчанию с движком WordPress), так что можете протестировать данную статью именно на этой теме.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Создаем выпадающее горизонтальное меню WordPress (подробно).: 30 комментариев

  1. Олег

    Спасибо за материал!

    Небольшая ошибка — в пункте 5 название стиля в Вашем примере должно быть не jsddm, а menu2.

    В программировании не силен, поэтому вопрос — это меню поддерживает только один уровень вложенности подпунктов? Как добавить 2-ой уровень?
    Нужна вот такая иерархия:

    Пункт меню
    — Подпункт 1
    —- Под-подпункт 1

    Следующий вопрос — у меня почему-то не отображается панелька добавления записей в меню. В разделе «Внешний вид» — «Меню» есть только:

    1. Выбор области темы
    2. Добавление произвольных ссылок
    3. Добавление Страниц
    4. Добавление Рубрик

  2. Олег

    Вопрос: после установки плагина WP-PostRatings возникла такая проблема. При обновлении страницы подменю отображается один раз при наведении на пункт меню. Вторично подменю не выпадает.
    При отключении WP-PostRatings все в порядке. Подскажите неучу где искать проблему и ка ее устранить?

  3. Артур

    Добрый день!
    Спасибо за меню, все сделал но у меня оно не верно отображается в хроме и файрфоксе или в IE и опере. В зависимости от настроек margin. Между строками образуется большой интервал.
    Я смотрю у Вас на сайте тоже меню но все нормально. Как быть? Вот пример http://fiolet-kzn.ru/diskontnaya-sistema

  4. Владимир

    Прикольно.
    Способ подключения менюшки таким образом давно знаком (Нравится что так можно хоть 5 штук меню включать) но теперь есть два вопроса:
    1. Как бы это меню обозвать по русски
    Понимаю правится вот это в functions
    function theme_setup() {
    register_nav_menu(‘Navigation’, __(‘Navigation’));
    }
    (ну и в заголовке)
    и
    2. Как сделать так чтоб работала только сама выпадающая менюшка — сам пункт к кторому она прикреплена не являлся пунктом

  5. Deimos

    Здрасти.когда делаю пункт 2..у меня вообще сайт падает.что делаю не так?

    после 1 шага..все ок отобразилось что 1 меню поддерживает.как дальше то?

  6. Ростислав

    Здравствуйте. Прочитал вашу статью и хочу вас очень поблагодарить. Искал такое решение уже давно и вуаля)). Но у меня вопрос. Как быть когда на сайте должна быть локализация (многоязычие). При использовании виджытов я только создавал меню на разных языках и меню самостаятильно переключалось на нужный язык. Как быть при использовании вашего метода? как привязать различные меню на разных языках? Спасибо за ответ на перед. хорошего дня

  7. Татьяна

    после 1 пункта выдается сообщение
    Parse error: syntax error, unexpected T_FUNCTION in /home/u373305096/public_html/wp-content/themes/tpsunrise/functions.php on line 169
    пока не удалила вставку через file-manager ничего не могла делать :(

  8. Anton

    Здравствуйте, поставил меню, все работает как надо но есть такой вопросик, можно ли сделать второе меню для категорий чуть ниже первого таким же способом? попытка не увенчалась успехом и после вторжения в functions.php сайт успешно лег.

  9. Уведомление: Не выпадающее горизонтальное меню | MnogoBlog

  10. Николай

    Спасибо всё работает,правда успех был не с первого раза главное что всё работает.Есть такой вопрос как установить другие кнопки чтобы были не прямоугольные , а например овальные или ещё какие нибудь.

  11. Константин

    Николай, кнопки можно сделать любой формы, поставив для нее фоновое изображение со свойством прозрачности (формат изображения в png или gif), для этого в пункте 5 (css стили для меню), в строчке 12 пропишите: background: url(путь до картинки.gif).

  12. Олег

    Спасибо все работает, но выпадающие кнопки не соответствуют курсору. То-есть когда на них наводишь курсор они исчезают. В каком файле можно их подправить.

    1. Константин Автор записи

      Олег, поменяйте местоположения кода вывода меню, добавьте его в блок с имеющимся уже в вашем шаблоне менюшки («art-nav»),приблизительно так:

      <div class="art-nav">
      
      <?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'depth' => 2, 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'jsddm', 'menu_id' => 'jsddm', 'walker' => new extended_walker())); ?>
      
      	<ul class="art-menu">
      		<?php art_menu_items(); ?>
      	</ul>
      </div>
      

      Соответственно, чтобы удалить старое меню нужно удалить строчки:

      <ul class="art-menu">
      		<?php art_menu_items(); ?>
      	</ul>
      

      Посмотрите http://mnogoblog4.p.ht/

  13. Дмитрий

    Добрый день!
    Спасибо, все отлично работает.
    Не подскажете еще где в стилях прописать другой цвет чтобы фон кнопки менялся не только при наведении, но и когда он активен? То есть, чтобы видеть на какой странице мы в данный момент находимся.

  14. Уведомление: Создаем горизонтальное выпадающее меню wordpress (Способ 2) | MnogoBlog

  15. Уведомление: Как писать текст для сайта | ProBlogi - Про Блоги | Материалы о блогах и блоггинге

  16. Уведомление: Как создать и вывести меню в wordpress - это просто с функцией wp_nav_menu | MnogoBlog

  17. Александр

    Здравствуйте, Дмитрий! Вылезла проблема в процессе регистрации меню в functions.php шаблона Device ое Гудвина. К сожалению, в оригинальной теме горизонтальное меню вообще не предусмотрено, а при вставке кода для регистрации меню выдаётся ошибка синтаксиса в строчке «$menu_id = wp_create_nav_menu(‘Navigation’);» Как быть, по Вашему мнению, в чём же затык?
    Ссылка на шаблон:
    http://www.goodwinpress.ru/besplatnyj-shablon-dlya-wordpress-device/

  18. Ринат

    ДАЙ ВАМ БОГ ЗДОРОВЬЯ!!!! Всю ночь сидел, но все-таки сделал меню! Очень помогли, успехов!

  19. Ринат

    Не подскажете в чем может быть проблема? В опере и мазиле при переходе на определенные страницы меню пропадают стили для меню и оно отображает просто вертикально? В хроме все иждеально

  20. Оксана

    Добрый день!
    Спасибо за совет! Очень помог:)
    Но :) не могу добиться, чтобы меню «ложилось» на слайдер и на одно строке с меню был расположен поиск.
    Спасибо за помощь! :)

  21. Константин Автор записи

    Оксана, можно изменить атрибут z-index у слайдера или у шапки (если меню в шапке), к сожалению, сайт ваш недоступен…

  22. Марина

    Здравствуйте. Воспользовалась вашей инструкцией по установке горизонтального меню. Все получилось! Единственный вопрос: у меня у некоторых подпунктов меню есть свои подпункты. Сейчас они не отображаются. Подскажите, пожалуйста, как отобразить подпункты 2 уровня (сама не разберусь, так как коды не знаю)

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>