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

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

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

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

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

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), так что можете протестировать данную статью именно на этой теме.