Как создать и вывести меню в wordpress – это просто с функцией wp_nav_menu

Здравствуйте, сегодня опять поговорим о создании меню (вертикальное и горизонтальное) в wordpress через панель управления, а также о том, как вывести его в любом месте вашего сайта с помощью функции wp_nav_menu, все будет намного проще, чем мои ранее написанные руководства по созданию меню.

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

Нижеуказанное руководство основано на моей предыдущей статье –

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

Однако, здесь мы будем делать все проще (не будем трогать файл functions.php или использовать скрипты, чтобы сделать меню выпадающим), а именно научимся делать вертикальное меню или горизонтальное не выпадающее меню.

Приступим же!

1. Заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Меню”.

Здесь создаем нужное нам меню.

Например, создадим меню из рубрик, но не из всех, а только тех, которые нам нужны и назовем данное меню – “rubrici”, вот так это будет выглядеть:

создание меню на wordpress для новичков

 

2. Для вывода меню в wordpress будем пользоваться следующей функцией:

<?php wp_nav_menu('menu=имя меню'); ?>

Все просто, в вышеуказанном коде, вместо “имя меню” подставляете название созданного вами меню и вставляете код в любом месте вашего сайта.

Для меню, созданного в нашем примере данная функция будет выглядеть следующим образом:

<?php wp_nav_menu('menu=rubrici'); ?>

 

3. Вставляем меню в нужном месте нашего сайта.

Давайте, например, вставим наше меню “rubrici” в шапку, в самом вверху.

Для примера возьмем стандартную тему wordpress – Twenty Twelve.

Для этого в панели управления wordpress заходим в пункт – “Веншний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем – header.php.

В его коде находим открывающий тег body, а сразу после него идет тег, открывающий блок “page” – вот после него и вставим вывод нашего меню “rubrici” с помощью функции – wp_nav_menu:

 


...

<body <?php body_class(); ?>>

<div id="page" class="hfeed site">

<?php wp_nav_menu('menu=rubrici'); ?>

<header id="masthead" class="site-header" role="banner">

...

Сохраняем изменения и переходим на свой сайт, смотрим, что у нас получилось:

вставляем свое меню в тему Twenty Twelve

 

Как видите меню у нас получается вертикальное, и это хорошо, если вам нужно вертикальное меню, однако, допустим, что нам нужно горизонтальное меню, тогда нам нужно прописать стили оформления для нашего меню – “rubrici”.

 

4. Прописываем стили меню.

Для начала, обернем функцию вывода нашего меню в новый блок, например “menu2”, для того чтобы прописать для него стили оформления.

То есть код в файле header.php (путь 3 данного руководства) будет выглядеть так:

 


...

<body <?php body_class(); ?>>

<div id="page">

<div id="menu2">

<?php wp_nav_menu('menu=rubrici'); ?>

</div>

<header id="masthead" role="banner">

...

 

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

А для этого в панели управления wordpress, в левом меню, выбираем пункт “Внешний вид”, далее его подпункт “Редактор”, а справа среди шаблонов выбираем файл – style.css.

Переходим в его коде в самый низ и вставляем следующий фрагмент:

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

 

После чего переходим на сайт и смотрим, что у нас получилось:

горизонтальное меню на wordpress

 

Как видите наше меню превратилось из вертикального в горизонтальное, осталось только подкорректировать стили оформления под свой сайт.

Например в данном примере нам нужно растянуть по ширине каждый пункт меню – за это отвечает атрибут:

 width: 70px;

Меняю его на:

 width: 170px;

После чего мое меню будет выглядеть следующим образом:

 

как создать горизонтальное или вертикальное меню в wordpress

 

На этом все!

Не забудьте прочитать “похожие статьи”

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


knopkisoc

Как создать и вывести меню в wordpress – это просто с функцией wp_nav_menu: 6 комментариев

  1. dg

    Спасибо! очень полезно!

    Остался один маленький вопрос: как сделать новое меню в том же стиле, что и классическое верхнее меню в twenty twelwe? с равнением слева и между этими полосочками?

  2. dg

    Оригинальный код там выглядит вот так

    <a class="assistive-text" href="#content" title="”>
    ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

    Если просто поменять эту строчку

    ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

    на

    то новое меню появляется по середине и без полосочек сверху и снизу…

    Помогите как сохранить прежний стиль…

    Заранее спасибо!

  3. dg

    баля….)) забыл вставить тэг пхп…

    Оригинальный код там выглядит вот так

     
    <nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    

    Если просто поменять эту строчку

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    

    на

    <?php wp_nav_menu('menu=имя меню'); ?>
    

    то новое меню появляется по середине и без полосочек сверху и снизу…
    Помогите как сохранить прежний стиль…

    Заранее спасибо!

  4. adward

    Клиент требует убирать из меню те страницы сайта (меню основано на страницах), для которых стоит статус “Черновик” или “На утверждении”.

    Можно ли каким нибудь способом, либо:
    a) не формировать это меню в момент сборки, или же
    б) присваивать такому пункту какой либо, скажем, класс, например class=”hiddenitem”

    В данный момент меню формируется следующим образом:

    $args = array(
    	'theme_location'=&gt;'equipment-menu',
    	'container'=&gt;'div',
    	'container_class'=&gt;'children_menu_top',
    	'container_id'=&gt;'menu',
    	'menu_class'=&gt;'sf-menu',
    	'menu_id'=&gt;'children_menu',
    	'before'=&gt;'&lt;span&gt;',
    	'after'=&gt;'&lt;/span&gt;&lt;div class=&quot;validm&quot;&gt;&lt;/div&gt;',
    	'fallback_cb'=&gt;false
    );
    wp_nav_menu($args);
    

    Спасибо!

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