Вверх_ком

Когда блог растёт и наполняется интересными материалами, соответственно растёт колличество рубрик и архивов, которые начинают заполнять собой всё пространство боковой панели. Ещё ничего, если у тебя 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, интернет-бизнесе.

Связанные записи

• Как Создать Шаблон Страницы Wordpress (7)
• Как Создать Страницу Для Отображения Случайной Записи (16)
• Улучшаем Юзабилити Блога. Совет №5. Прокачай Поиск по Блогу (15)
• Список RSS-фидов Категорий (10)
• Совет Для Твоего Блога Wordpress: Настрой Свою Страницу 404 (7)