Марафон v2.0

Урок 184 Новое WordPress меню: как сделать и как добавить в старый шаблон

wordpress_menyu

Спонсор  поста: Вы хотите раскрутить свой блог в социальных сетях? Тогда Вам однозначно нужна кнопка ретвита!

Всем привет! Многие, наверное, из моих уроков уже поняли, что я был не любителям обновлять WordPress. Но с переездом на новый хостинг, техподдержка все-таки уговорила меня обновить WordPress. Для пущей убедительности они создали тестовый сайт (правда он создан был для безошибочного переезда), полностью идентичный моему (из файлов и базы данных моего блога) и обновили его. Теперь я рад, что они уговорили меня это сделать :). Также теперь у меня есть дополнительная площадка, где я могу “поиграться” с дизайном и др. “прикольными” вещами :). Да и обновляю я теперь WordPress регулярно (прямо из админки нажимаю кнопку “Обновить WordPress”).

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

Пример буду приводить на основе нового шаблона, который я поставил на самый первый блог (теперь уже сайт журнального типа :)) ZonaHelp.ru в честь его 2-летнего дня рождения! Да-да, сегодня ZonaHelp.ru исполнилось 2 года (дата создания 22.12.2009), а значит уже прошло 2 года, как я стал блоггером. Прошу оценить новое оформление и структуру обновленного сайта (правда осталось сделать некоторые доработки) в комментариях. Буду рад услышать пожелания/замечания/отзывы.

Итак, поехали!

WordPress меню

Что нам потребуется?

  • WordPress версии 3.x и более.
    Если версия Вашего Вордпресса 2.x, то вот урок про то, как обновить WordPress.
  • Шаблон с поддержкой нового меню WordPress.
    Обычно на таких шаблонах в примечании пишут, что он совместим с WordPress вплоть до версии 3.x. Если же Ваш шаблон не поддерживает новое меню, то в конце урока Вы найдете инструкцию того, как добавить новое меню в старый шаблон Вордпресса.
  • Внимательность в чтении данного урока.
    Пожалуй, я немного загнул планку :).

Как сделать меню в WordPress

  1. Заходим в админку Вордпресса –> Внешний вид –> Меню:
    wordpress меню
  2. Находим “Заголовок меню” и заполняем его, к примеру, назовем “Главное меню” и нажимаем на кнопку “Создать меню”:
    wordpress горизонтальное меню
  3. В левом нижнем углу, Вы увидите некую “Области темы”:
    добавить меню wordpress
  4. Как видите, в моем случае данный шаблон поддерживает 2 меню. Если посмотреть на шаблон, то они находятся вот здесь:
    Меню Ворпресс
  5. Возвращаемся обратно в раздел “Меню”. И уже там нужно добавить еще одно меню: нажимаем на “плюсик”:
    ссылки меню wordpress
  6. Снова задаем название и нажимаем на кнопку “Создать меню” (второе меню я назвал “Под шапкой” – на рисунке отмечено стрелкой №2):
    Как сделать меню в wordpress
  7. И теперь то самое отличие, от прежних меню: в эти только созданные меню можно добавить ссылки на что угодно! Это могут быть: выбранные страницы сайта, рубрики или вообще просто ссылка на отдельный пост. То есть теперь в меню выводится не все подряд, а только то, что выберем МЫ. Блин, для новичков – это просто рай! Не нужно лезть в код темы, искать там вывод меню, прописывать параметр exclude (если Вы не знаете что это, теперь оно Вам почти не нужно 🙂 ).
    То есть, смотрите: допустим, в “Главное меню” я решил добавить стандартные страницы: Главная, Обо мне, Контакты. Для этого в “Страницы” я перехожу на вкладку “Все” и отмечаю там галочкой необходимые страницы, а после отметок просто нажимаю на кнопку “Добавить в меню”:
    wordpress главное меню
  8. Если нам нужно добавить какую-то рубрику, производим аналогичные действия чуть пониже в “Рубрики”. Также можно добавить любую ссылку, к примеру, на данном блоге я бы добавил ссылку на страницу, где я раздаю бесплатно фильтр Sape для поднятия тИЦ. Для этого в “Произвольные ссылки” в URL добавляем адрес страницы, пишем текст для ссылки и нажимаем на кнопку “Добавить в меню”:
    верхнее меню wordpress
  9. После того, как Вы добавите необходимые страницы в выбранное меню, не забудьте нажать на кнопку “Сохранить меню”:
    wordpress изменить меню
  10. Аналогичные действия (с 7 по 9 шаг) производим со вторым меню, которое у меня называется “Под шапкой”. Обычно в “Главное меню” я пихаю страницы сайта, в “Под шапкой” определенные рубрики (все зависит от особенности шаблона сайта и самого сайта):
    Произвольное меню wordpress
  11. Остался последний шаг, привязать созданное меню с шаблоном для вывода на сайте (до этого шага созданные меню на сайте мы не заметим). Для этого спускаемся ниже до “Области темы” и к каждой “области” присваиваем созданные меню:
    wordpress рубрики в меню
  12. И нажимаем “Сохранить”. Вуаля! Новое меню, которое подточено под Вас, радует Ваши глаза и Ваших посетителей :). Поздравляю с успехом! Правда, не сложно? Зато, какие возможности!

Выпадающее меню в WordPress

С появлением нового меню, также очень просто стало делать выпадающее меню в WordPress, причем многоуровневые. Смотрите, как это выглядит на деле:

wordpress выпадающее менюДумаете это сложно сделать? Ни “фига”! Для этого все в тех же настройках “Меню”, после добавления страниц в наше созданное меню, передвиньте пункты меню немного вправо, вот и все! Перетаскивание производится аналогично виджетам до тех пор, пока пункт меню “не встанет” под меню:

ниспадающее меню wordpress
Блин, вся эта простота мне ну очень сильно понравилась. Разработчики просто молодцы!

Сортировка страниц

Теперь Вам не нужно мучиться с сортировкой страниц в меню, как я рассказывал здесь, путем добавления “Порядков” к каждой странице. Также не нужно использовать дополнительные плагины для того, чтобы отсортировать пункты меню так, как Вам хочется. Чтобы все стояло “на своем месте” достаточно переместить их, как нужно. То есть, если Вам нужно, чтобы страница “Контакты” стояла сразу за главной страницей, то просто поместите его под “Главная страница”:

Сортировка страниц wordpress

Видео “Как создать новое WordPress меню”

Процесс, который я описал выше, нашел в виде видеозаписи, который записал всеми любимый Гудвин:

Если у Вас шаблон старый и не поддерживает новое меню

Если же Вы расстроились тем, что Ваш шаблон не поддерживает новое меню WordPress, то не спешите расстраиваться. У Вас должна быть версия WordPress 3.x (если это не так, просто обновитесь) и прочтите вот эту инструкцию, где Гудвин показал, как очень просто добавить новое меню в старую тему Вордпресс.

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

Действительно, WordPress – это просто! 🙂

Новый марафон 2.0 от WPnew
С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

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

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

59 комментариев

по хронологии
по рейтингу сначала новые по хронологии
Недоблогер http://nedoblog.com

С днем рождением, так сказать 🙂

p.s. дизайн красивый 🙂

Рэнди http://animalistika.ru

Хах, и ты тут) На две минуты раньше заскочил)

Пётр, вообще не понял чем же это меню лучше стандартных страниц, кроме как сортировкой)

Марина Лазарева http://frilka.com

А, вот как раз "сортировка" и важна! Не во всех темах есть возможность выставить страницы и рубрики в нужной последовательности. И кстати, эта функция с меню, тоже не везде поддерживается.

К тому же, когда делаем вложенные страницы, важно делать их в нужной последовательности, по приоритетам. А не всегда у блоггеров все по плану, поэтому такая сортировка спасает.

Копалась в этой теме, искала подходящие плагины, когда добралась до этой функции фордпресс вздохнула 🙂

Недоблогер http://nedoblog.com

правило СМО: оставляй коммент первым 😀

AlexandrGF http://rusplaces.ru

Или отвечай на первый, как сделал Рэнди))) Тоже заметно)

Недоблогер http://nedoblog.com

Не, самое классное - это троллить в комментах, эффект в несколько раз лучше)

Евгений http://legobeatz.ru

Интересненько, я вот боюсь обновлять ВП, вдруг ошибка или еще что, или плагины не подойдут... Интересно очень другое, Петр очень прошу вас, сделайте пожалуйста урок, чтобы создать такое же меню, как у вас... Создал у себя на сайте подобной (с закладками), но не такое красивое и без js. Очень хочу как у вас сделать )

Рэнди http://animalistika.ru

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

Всё развивается и лично от себя советую обновиться. Мне намного легче стало работать с новой версией WP, хотя у меня и так стояла не старая) Работать стало быстрее из за новой функции в админке. Теперь не нужно щёлкать по каждому значку что бы найти нужное в меню, всё само всплывает. И т.д.

Евгений http://legobeatz.ru

Ну или подскажите с помощью какого плагина оно создается. Заранее чрезмерно благодарен!

Марина Лазарева http://frilka.com

Жень, если ты имеешь в виду статические страницы (главное меню), то этот урок, как раз об этом. Если же тебе симпатично мену рубрик (справа), то это прелести темы 🙂

Евгений http://legobeatz.ru

Очень жаль, что такой красивый сайдбар доступен только в этой теме( Ну да ладно, обойдусь плагином для подобного, но мене красивого сайдбара...

Артур http://komputer-life.ru/

а я просто страницы добавил и не парюсь с эти меню

Инканта http://www.incanta.ru

Красный цвет ссылок стоит поменять, а то на сером фоне это называется выколи мне глаз. А так не плохо!

Александр http://webexperty.ru/

Спасибо, полезная статья! Ваш блог мне очень помог в решении многих вопрос, продолжайте в том же духе. Удачи вам во всем =)

Сергей

С меню понятно все, а как вывести рубрики в боковой сайдбар ? Все переделал все испробовал не выводится (((

Автор
Пётр Александров

У вас вывод в сайдбар идет через виджеты или через правку sidebar.php?

vawsan http://os-config.ru

Вордпресс становится все лучше и лучше) Сначала менюшки добавили, потом превьюшки новостей)

Евгений http://legobeatz.ru

У вас на данный момент 666 страниц в индексе яндекса )

Автор
Пётр Александров

:)))) Вы следите за мной? 🙂

P.s. Я не сильно суеверный 🙂

Сергей http://feeget.ru/

Нормальная статья. Хорошо расписал Петр. Для некоторых сайтов не хватает такого меню.

Илья http://new-webmasters.ru

Спасибо, надо будет попробовать обновиться!

Ruannalu http://dengiledi.ru/

У меня на первом же сайте стояло такое меню и я до сего дня не подозревала, что в WP бывает по-другому :).

Поздравляю с юбилеем! Я в восторге от нового шаблона!

prozorov http://housemeddoc.ru/

А я обновился до версии 3.3. Все плагины стоят какие рекомендовал Петр, все работает отлично, никаких прыжков с шаманским бубном не было.

Марина Лазарева http://frilka.com

Как обычно прекрасен! Был опыт с созданием меню, но так расширенно не использовала эту функцию. Благодарю! 🙂

П.С: видеоплеир нестандартный - сам делал видеохостинг? Я как раз вчера статью о видеохостах написала 🙂

Марина Лазарева http://frilka.com

Сразу не заметила, теперь вижу, что это видеохост screenr.com 🙂 Почему не ютуб или что-то другое из популярных?

Автор
Пётр Александров

Ну видео не мое, как указано в статье 🙂 Не я выбирал, где размещать видео 🙂

Bambooot http://bambooot.ru/

Поздравляю! Красивая тема - классный сайт! Сразу видно изменения, сайт стал более статусным! А как называется эта тема?

Автор
Пётр Александров

Она платная, называется periodic.

Елена http://pitanie-dlya-zdorovya.ru/

Я тоже побаиваюсь обновляться до версии 3.3 почти про все плагины написано, что совместимость с WP 3.3-неизвестно:-)

Шаблон тоже давно мечтаю поменять, но так боюсь убить труд всех двух месяцев 🙂

Валерий http://udivimenia.ru

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

Автор
Пётр Александров

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

Максим http://alliance-dubai.net/

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

.left-navigation ul li{ background:url(images/) no-repeat left top; padding:0px 0px 10px 12px; font-size:12px; font-weight:bold; color:#02003c; margin-top:5px; border-bottom:#c9c9c9 1px solid;}

Посоветуйте как избавиться от лишних буллетов.

Автор
Пётр Александров

Попробуйте вместо

[php] <li id="nav_menu-3" class="widget widget_nav_menu>[/php]

поставить

[php] <div id="nav_menu-3" class="widget widget_nav_menu>[/php]

Максим http://alliance-dubai.net

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

.left-navigationAll ul li{ background:url(images/) no-repeat left top; padding:0px 0px 10px 12px; font-size:12px; font-weight:bold; color:#02003c; margin-top:5px; border-bottom:#c9c9c9 1px solid;}

.left-navigationAll ul li a{ color:#02003c; text-decoration:none;}

.left-navigationAll ul li a:hover{ color:#e71f10;}

также в таблице стилей для перечня есть:

ul li {

list-style: none outside none;

margin: 0;

padding: 0;

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

Максим http://alliance-dubai.net/

Поправил все таки. Все равно спасибо за участие. У вас отличный блог.

SeiCreativ http://seicreativ.de/

всем привет! а я вот парюсь с меню! в моей шапке есть 4 подпункта . home, about, contact, FAQ. первые два заполняются нормально, а остальные!!! сначала там выходила ошибка 404. потом стали выходить другие страницы с блога, хотя я ничего не меняла, теперь я их попыталась убрать, но они не убираются, намертво прибиты к шаблону))) так же неполусается создать новые. ну как мне например убрать contact и вместо него вставить что-нибудь другое например galery?????

Автор
Пётр Александров

Если их не в разделе "Страницы" в админке Вордпресс или в настройках темы (тоже в админке), то возможно эти пункты в header.php.

SeiCreativ http://seicreativ.de/

Да. Вы правы! Вот так это выглядит у меня: <a href=""><img src="/images/" width="100%" height="100%"/>" width="100%" height="100%"/>" width="82px" height="36px" alt="Home" />

<a href="/?page_id=2"><img src="/images/spacer.gif" width="82px" height="36px" alt="About" />

<a href="/?page_id=2"><img src="/images/spacer.gif" width="82px" height="36px" alt="Contacts" />

<a href="/?page_id=2"><img src="/images/spacer.gif" width="82px" height="36px" alt="FAQ" />

Если я меняю там названия в коде, например, About на Über mich, то в меню все равно остается слово About. Например, страницу FAQ я бы вообще хотела убрать, но если я убираю код, то слово остается, только я не могу уже на него нажать. Почему? Может быть, просто тупо поменять шаблон???

А во-вторых, как же мне присобачить, чтобы, когда на них нажимаешь, открывались соответствующие страницы???

Автор
Пётр Александров

Поменяйте уже шаблон, если он для вас такой сложный 🙂

А чтобы "присобачить", нужно соответствующую ссылку на страницу вставить в кавычках после фразы a href

dialogwoman http://dialogwoman.ru

Петр подскажите какая тема у вас стоит на ZonaHelp.ru?

Анастасия

я сделала выпадающее меню, добавила ссылку в удобное мне место в header.php.

НО странички не выпадают, как я хотела, а отражаются на столбиком...как думаете, в чем может быть дело? мучаюсь уже 2 дня...

спасибо!

Max Cook http://x-cook.ru

А вот подскажите пожалуйста, кто знает, как изменить тему (какой может код прописать в header или index), если она поддерживает 2 меню, НО! НЕ ПОДДЕРЖИВАЕТ выпадающее меню. Пытался настроить - не выпадет. Что изменить и как переделать??

P.S.: Тема Malina. Менять не хотелось бы, уже начал контент и все прочее под нее "затачивать" просто.

Благодарю за помощь заранее.

Автор
Пётр Александров

К сожалению, я не знаю..

Наталья Нтр http://elsiam.ru

Все делаю согласно инструкции, но у меня почему-то до 3-его уровня вложения не работают. Делаю до третьего уровня - нажимаю и функция не активна. Что только не перепробовала! Вордпресс обновлен и тема поддерживает два меню. Если знаешь, Петр, подскажи, где надо посмотреть?

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

yulyaxa http://mamulkikrasotulki.ru

У меня тоже тема поддерживает 2 меню. Попробовала - все работает. Вы либо что-то не так делаете или проблема в теме.

yulyaxa http://mamulkikrasotulki.ru

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

Даниил

Мужик прям выручаешь!!!

Регина

Просто супер!!!!!!!!!!!!!! Люблю вас!!!!! Спасибо!!!! Я из за этих меню уже хотела сайт бросать!!! Вы даже не представляете как мне помогли!!!!

Автор
Пётр Александров

Рад был помочь)

Здравствуйте Петр не подскажите как создать такое меню

Автор
Пётр Александров

Урок есть, называется "Как сделать панель вкладок".

спасибо

Александр

Подскажи пожалуйста, возможно ли сделать двойное меню(незнаю как по другому назвать...)

т.е. как на этом сайте допустим.

www dreams-factory ru

Уже несколько дней роюсь, немогу нарыть ничего.. )

Может урок есть - было бы здорово! )

Или может это как- т о называется правильно..

Денис http://consultingms.ru/

Здравствуйте!

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

Дима http://amanter.ru/

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

У меня возникла проблема после обновления. Перестало работать выпадающее меню, перестало выпадать.

Николай http://lowHostel.ru

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

Людмила http://vkuszhyzni.ru

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

Спасибо!! Только изучаю WP, очень помогли!!!

Дмитрий

Здравствуйте Петр, хотел у вас спросить, где можно найти информацию, как сделать боковое меню , "два в одном" или как это называется. Пример на вашем сайте (Рубрики/Популярное -в одном блоке)? Спасибо.

Наверх Рейтинг@Mail.ru