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

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

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

Далее рассмотрю пример меню, которое сейчас стоит на моем сайте – горизонтальное не выпадающее.

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

Приступим же к созданию :)

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);
}

2. Вставлять меню будем в шапку (header) своего шаблона, так как это самый распространенный вариант.
И для этого в левом меню панели управления сайтом выбираем все также закладку “Внешний вид”, далее подпункт “Редактор” и справа среди “Шаблонов” выбираем файл “Шапка” (header.php).
Внутри файла header.php будем вставить код вызова нашего меню. Данный код нужно вставить там, где мы хотим видеть наше выпадающее горизонтальное меню.

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

[spoiler title=”Если кому-нибудь интересно, что в данном коде за что отвечает?” open=”0″ style=”1″]

Взял с сайта http://wordpressinside.ru/functions/wp_nav_menu/:
$menu – выбранный идентификатор для меню – ID, slug или название меню.
$container – меню UL по умолчанию «оборачивается» в контейнер DIV с помощью данной настройки.
$container_class – указывает класс контейнера, по умолчанию его значение menu-{menu slug}-container, то есть в нашем случае, например, будет класс menu-first-container.
$container_id – можно добавить контейнеру ID, по умолчанию не указано.
$menu_class – класс для элемента меню UL, его значение – menu.
$menu_id – ID для элемента ul, по умолчанию равно значению menu-{slug}
$echo – если вы не хотите отображать меню, а возвращать значение функции используйте для этой настройки значение 0.
$fallback_cb – если меню не существует, вызывается функция wp_page_menu.
$before – задает текст, который выводится перед ссылкой А.
$after – текст после ссылки А, по умолчанию он, как и предыдущий, пустые.
$link_before – выводит фразу перед текстом ссылки, не задано.
$link_after – выводится после текста ссылки, тоже пустое.
$depth – задает количество уровней иерархии для вывода меню, значение по умолчанию 0 выводит все меню целиком.
$walker – какой-то непонятный пользовательский «walker object», наверное больше понадобится продвинутым разработчикам.
$theme_location – локация темы, где будет использовано меню, должна быть активирована через register_nav_menu() для того чтобы пользователь смог ее выбирать. Тоже какая-то не совсем понятная настройка, судя по всему, при работе с виджетами.
[/spoiler]

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

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

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

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

#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;
}

Последний абзац css кода скроет из виду подменю, если вы его случайно установите в панели управления (пункт ВНЕШНИЙ ВИД – МЕНЮ).

Вот и все!!!