Когда блог растёт и наполняется интересными материалами, соответственно растёт колличество рубрик и архивов, которые начинают заполнять собой всё пространство боковой панели. Ещё ничего, если у тебя 3-х колоночный шаблон. А когда боковая панель только одна, приходится думать где разместить ссылки страницы, чтобы они не затерялись в множестве ссылок. Первое, что приходит на ум, это разместить их в виде горизонтального меню под шапкой блога.
В специальном разделе wordpress.org можно обнаружить много различных способов сделать горизонтальное меню. Но мне все они показались не удобными или не красивыми. После неспешных поисков был найден очень простой и в то же время функциональный способ.
Отличный отпугиватель собак «Superdogchaser» для защиты от агрессивных собак.
Приступим
Чтобы вывести список страниц блога в виде горизонтального меню нужно отредактировать два файла твоего шаблона WordPress, style.css и header.php. Зайди в панель управления блогом и нажми Дизайн -> Редактор тем, открой файл style.css твоего шаблона и скопируй в него следующий код:
#supernav { font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif; position: absolute; top: 201px; left: 50%; width: 720px; margin: 0 0 0 -360px; padding: 5px 16px; /* duplicate the tab size */ text-align: left; display: block; } #supernav li { margin: 0; padding: 0; text-transform: lowercase; display: inline; } #supernav a { color: #FFFFFF; background: #63AAE7; font-weight: normal; height: 19px; padding: 5px 16px; /* round corner tab - not for IE */ -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; } #supernav a:hover { color: #111; background: white; text-decoration: none; /* round corner tab - not for IE */ -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; } #supernav .current_page_item a { color: #111; background: white; text-decoration: none; /* round corner tab - not for IE */ -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; } #hack { background: white; height: 2px; width: 450px; display: inline; position: absolute; top: 220px; left: 50%; margin: 0 0 0 -350px; padding: 0; z-index: 2; }
Нажми «Обновить файл». После этого открой header.php и вставь следующий код в самом конце файла:
<?php //highlight 'Blog' if not Page if (is_page()) { $highlight = "page_item"; } else { $highlight = "page_item current_page_item"; } ?> <div> <ul id="supernav"> <li class="<?php echo $highlight; ?>"><a href="<?php echo get_settings('home'); ?>">Blog</a></li> <?php wp_list_pages('title_li='); ?> </ul> </div> <div id="hack"></div>
Закончив нажми «Обновить файл». Теперь проверь, что получилось, открыв сайт.
У тебя могут возникнуть некоторые вопросы по настройке меню. отвечу сразу на самые очевидные.
Как мне выровнять меню?
Просто поменяй значения «top» и «left» идентификатора «#supernav»
Как вставить в меню произвольный URL?
Никак. Этот способ работает только со страницами WordPress.
Написано по мотивам WordPress Navigation Bar.
Блог Webdown – о заработоке в Интернете, seo, интернет-бизнесе.
Полезный пост. Пока пользуюсь плагином dTree, но у него свои закорючки. Возможно, использование горизонтального меню будет эффективнее..
У меня в шаблоне меню и так горизонтальное)
Во многих шаблонах одно из стандартных менюшек горизонтальное, а вообще раньше выходил из положения находя Web редакторы, которые специализировались на создании выпадающих меню через CSS и даже Javascript, но это не очень удобно т.к. в код попадает много дряни.
проще шаблончик с таким вот расположением страниц скачать, чем в этом коде копаться.
А я вот ищу как сделать такое же меню, только для категорий. Хочется сделать своими руками, но знаний к сожалению не хватает…
BlogWork много категорий будет не очень смотреться там.
А как сделать чтоб оно постоянно висело вверху, даже если страницу вниз спустили?
Раста это сложный скрипт, да и бесить будет людей со слабой машиной.
‘это меню работает только в IE?
и всего две кнопки,как сделать больше?
А как сделать типа link_before, только чтобы вставить произвольный код не в самой ссылке а перед ней.
пример сюда вставляем кодссыльили сюда
Или вместо этого, как задать класс для первой или последней ссылки (псевдо классы не предлогать, ie не понимает). Заранее спасибо.
чорт, теги нельзя показывать, там где пример: li сюда вставляем код a href # ссыль /a или сюда /li
Сделал себе меню по Вашей статье.
статья по тему с моего блога: Редактирование меню в WordPress
Попробовал разобраться со статьей, но увы. Не могли бы вы написать свою аську или стукнуть мне – 921045
Здравствуйте! Не поможете разобраться, как сделать вторую строчку горизонтального меню под шапкой (уж сильно разрослось количество страниц)
Она у меня есть, но становится видимой лишь при наведении.
Скрипт такой:
div id=»tabs»>
<li ><a href="» title=»Home» >Home
Спасибо заранее! Сама не могу -пробовала и так и этак((
я просто добавлял вручную – но мне нужны были не страницы, а категории…
Скажите, как сделать его не хэдере а под ним?
Личное дело каждого, но имхо оно не нужно.
Как wp_list_pages() заставить выводить горизонтальное меню?
Какой код нужно вставить в header.php в самом конце файла? Его почему-то здесь нет…