Ноя
28

Делаем нестандартное меню в WordPress

Для начала давайте определимся, что такое стандартное и нестандартное меню в WordPress. Лично для меня, да и, думаю, для многих стандартное меню WordPress ассоциируется с чем-то простым и незамысловатым, такое меню встречается в большинстве шаблонов, оно бывает горизонтальным, либо вертикальным. Например, на моем блоге горизонтальное меню, как вы видите, выглядит очень просто, в прочем, как и вертикальное. В WordPress меню,  в основном, генерируется с помощью стандартных пользовательских функций, таких как wp_list_categories(), wp_list_pages(), wp_nav_menu(), которое может “регулироваться” какими-нибудь дополнительными свойствами(порядок отображения, сортировка  и т.д). Существуют также способы добавлять специфические иконки для пунктов меню и описание, примеры которых можно найти в сети. Сегодня я хочу предложить вам свой вариант нестандартного меню, которое, впрочем имеет свои плюсы и минусы по стравнению со стандартным.

Меню, пример которого я хочу вам продемонстрировать, будет выглядеть вот таким вот образом:

Как видите, пункты меню таким вот нестандартным способом вы вряд ли напишите в заголовках разделов или страниц в административной панели WordPress и уж вряд ли организуете его стандартным способом в функциях wp_list_categories(), wp_list_pages(), wp_nav_menu(). Давайте, не будем терять время и приступим к созданию меню.

Будем считать, что вы уже определились с иконками для разделов меню, создали соответствующие рубрики и страницы и выбрали место для расположения этого самого меню. В нашем случае рассмотрим пример горизонтального меню в “шапке” сайта. Для начала напишем HTML-код нашего меню в файле header.php шаблона, сделаем заголовки так, как мы хотим, чтобы они выглядели в меню:

<ul class="nav">
    <li class="articles">
	<a href="#">
	   <strong>.статьи</strong>
	   {<br />Статьи по <br />JS и CSS<br />}
	</a>
    </li>
    <li class="tricks">
	<a href="#">
	   <strong>.трюки</strong>
	   {<br />Задачи, решения<br /> по JS и CSS <br />}
	</a>
    </li>
    <li class="profile">
	<a href="#">
	   <strong>.видео</strong>
	   {<br />Видеоматериалы,<br /> их уроки <br />}
	</a>
    </li>
    <li class="portfolio">
	<a href="#">
	   <strong>.портфолио</strong>
	   {<br />Мои работы<br /> и код <br />}
	</a>
    </li>
    <li class="contacts">
	<a href="#">
           <strong>.верстаю</strong>
	   {<br />Вёрстка сайтов,<br />обо мне, контакты<br />}
	</a>
    </li>
</ul>

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

.nav {
		background: url(images/navBg.jpg) left top repeat;
		border: 1px solid #fff;
		border-width: 1px 0 0;
		overflow: hidden;
	}

		.nav li {
			float: left;
			height: 4.833em;
			background: url(images/navLi_left1.gif) left no-repeat;
			padding: 0 3px;border-bottom: 5px solid #212121;
		}

		.nav li:hover,.nav li.active{
			border-bottom: 5px solid #e26426;
		}

			.nav li a {
				color: #000;
				display: block;
				height: 100%;
				padding-left: 40px;
				padding-right: 5px;
				font: .833em Verdana, Geneva, sans-serif;
				background-image: url(images/sprite.png);
				background-repeat: no-repeat;

			}

			.nav li a strong { font-size: 1.2em;}

			.nav li.articles a{
				background-position: 3px 14px;

			}

			.nav li.tricks a {
				background-position: 3px -169px;
			}

			.nav li.portfolio a {
				background-position: 3px -572px;
			}

			.nav li.profile a {
				background-position: 3px -370px;
			}

			.nav li.contacts a {
				background-position: 3px -756px;
			}

			.nav li.articles a:hover,.nav li.articles.active a  {
				background-position: 3px -75px;
			}

			.nav li.tricks a:hover,.nav li.tricks.active a  {
				background-position: 3px -269px;
			}

			.nav li.portfolio a:hover,.nav li.portfolio.active a  {
				background-position: 3px -663px;
			}	

			.nav li.profile a:hover,.nav li.profile.active a  {
				background-position: 3px -482px;
			}

			.nav li.contacts a:hover,.nav li.contacts.active a  {
				background-position: 3px -854px;
			}

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

<ul class="nav">
    <li class="articles">
	<a href="/articles">
	   <strong>.статьи</strong>
	   {<br />Статьи по <br />JS и CSS<br />}
	</a>
    </li>
    <li class="tricks">
	<a href="/tricks">
	   <strong>.трюки</strong>
	   {<br />Задачи, решения<br /> по JS и CSS <br />}
	</a>
    </li>
    <li class="profile">
	<a href="/video">
	   <strong>.видео</strong>
	   {<br />Видеоматериалы,<br /> их уроки <br />}
	</a>
    </li>
    <li class="portfolio">
	<a href="/portfolio">
	   <strong>.портфолио</strong>
	   {<br />Мои работы<br /> и код <br />}
	</a>
    </li>
    <li class="contacts">
	<a href="/about">
           <strong>.верстаю</strong>
	   {<br />Вёрстка сайтов,<br />обо мне, контакты<br />}
	</a>
    </li>
</ul>

В данном случае я указал произвольный вариант постоянных ссылок, а не по умолчанию, который имеет вид ?p=123, например, для записей. Все уже практически сделанно, меню работает, осталось только указать пунктам меню состояние active при нажатом состоянии. Для этого вернемся к нашему HTML-коду и допишем условие, при котором активный пункт меню и будет принимать это состояние.

<ul class="nav">
    <li class="articles<?php if (is_category(18)) echo ' active'; ?>">
	<a href="/articles">
	   <strong>.статьи</strong>
	   {<br />Статьи по <br />JS и CSS<br />}
	</a>
    </li>
    <li class="tricks<?php if (is_category(16)) echo ' active'; ?>">
	<a href="/tricks">
	   <strong>.трюки</strong>
	   {<br />Задачи, решения<br /> по JS и CSS <br />}
	</a>
    </li>
    <li class="profile<?php if (is_category(28)) echo ' active'; ?>">
	<a href="/video">
	   <strong>.видео</strong>
	   {<br />Видеоматериалы,<br /> их уроки <br />}
	</a>
    </li>
    <li class="portfolio<?php if (is_page(97)) echo ' active'; ?>">
	<a href="/portfolio">
	   <strong>.портфолио</strong>
	   {<br />Мои работы<br /> и код <br />}
	</a>
    </li>
    <li class="contacts<?php if (is_page(41)) echo ' active'; ?>">
	<a href="/about">
           <strong>.верстаю</strong>
	   {<br />Вёрстка сайтов,<br />обо мне, контакты<br />}
	</a>
    </li>
</ul>

Зная ID категорий и страниц, мы можем дописать условие, при котором ссылка, которая в нашем случае является пунктом меню, будет принимать актиное состояние. Проще говоря, условие  <?php if (is_page(97)) echo ‘ active’; ?> можно перевести так: “Если выбрана ссылка на страницу с ID=97, то для нее выводится класс, соответствующий классу active в стиле CSS”.

Вот, собственно и все, рабочий вариант этого меню вы можете посмотреть на блоге верстальщика Усачева Максима.

VN:F [1.9.16_1159]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.16_1159]
Rating: 0 (from 0 votes)
Category Категории: Возможности
Tags Теги: , ,

Понравилась статья? Поделитесь ею в социальных сервисах!

Подпишитесь на обновление блога!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные Wordpress? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за мной в Twitter.

8 комментариев к “Делаем нестандартное меню в WordPress”

  • Нет аватара
    Наталья 13.02.2012 в 02:12

    Помоготе пожалуйста!! До профессионального вем-мастера мне ещё далеко, хотелось бы сделать слева меню со списком стран и флагами. В вашей статье “Делаем нестандартное меню в WordPress” очень подробно прописано, но мне необходимо вертикальное меню, а самостоятельно- боюсь напортачить. Не могли бы дать подсказку как прописать в стиле CSS расположение каждого пунта, с учетом разных картинок и текста. И как прописать фон меню Картинка с названием. Помогите, если есть такая возможность уже 3 недели ежедневно изучаю все тонкости, но пока самой не справиться

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 13.02.2012 в 21:58

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

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Сергей 11.04.2012 в 11:40

    Добрый день,

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Сергей 11.04.2012 в 12:28

      Я так понимаю определяется в файле bottom-menu.php

      <a class="assistive-text" href="#content" title="”>
      <a class="assistive-text" href="#secondary" title="”>

      ‘menu-header’, ‘theme_location’ => ‘primary’ ) );
      else
      wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘sf-menu’,'fallback_cb’ => ‘admired_page_menu’ ) );?>

      VA:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    david 16.10.2012 в 02:27

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Максим 30.08.2013 в 21:25

    Добрый день! Как мне сделать, чтобы пункт меню, созданный в админке вордпресс гостю отображался с названием Вход (при нажатии на этот пункт меню у меня открывается модальное окно с формой входа), а зарегистрированному пользователю отображался этот же пункт меню, только со ссылкой

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Максим 30.08.2013 в 21:28

    со ссылкой на выход с сайта… Или сделать просто 2 пункта меню, только для гостей будет первый пункт меню виден, а второй скрыт, а для остальных будет первый пункт меню скрыт а второй виден… (Извиняюсь за два комментария, лагнул инет…) Заранее спасибо за помощь!

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Евгений 09.10.2013 в 09:00

    Добрый день.

    Хорошая статья про меню! Класс!
    Но у меня не выделяется выбранное меню!
    ID страниц прописаны и проверены..
    Т.е. при наведении на определенное меню изображение меняется, а при выборе раздела потом не горит выбранный раздел (меню).
    Можете подсказать где ошибка? (print-51.ru)

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)

Оставить комментарий

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

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

Блог про wordpress и все, что с ним связано – возможности системы, секреты и хаки, плагины, шаблоны, оптимизация, seo, безопасность и т.п. Проект для начинающих и продвинутых пользователей.

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога по E-mail:

E-mail:

Последние комментарии

Друзья проекта