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

MnogoBlog > WordPress > Управление содержимым wordpress > Меню > Как создать и вывести меню в wordpress – это просто с функцией wp_nav_menu
6 комментариев

Здравствуйте, сегодня опять поговорим о создании меню (вертикальное и горизонтальное) в 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=имя меню'); ?>

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

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

    ↓
  6. 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);

    Спасибо!

    ↓

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