Создание темы для WordPress. Часть 5. Добавление меню навигации страниц
Доброго времени суток. Мы с Вами продолжаем создавать собственную тему для CMS WordPress. Так в прошлой статье мы создали файл page.php для отображения страниц. А сегодня остановимся на добавлении меню навигации в нашу тему. Ну, что ж, давайте приступим.
В предыдущей статье мы создали страницу и создали файл для отображения страниц в шаблоне WordPress. Теперь нам надо создать меню навигации для страниц. Для этого перейдем в файл header.php и изменим его. Добавив один div и в него поместим тег ul, в котором будет отображаться наше меню. Для отображения навигационного меню в теме WordPress используется тег wp_list_pages.
Так должен выглядеть файл header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type')?>; charset=<?php bloginfo('charset')?>" />
<title><?php bloginfo('name')?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<span></span><a href="http://web-programming.com.ua">Уроки по созданию собственной темы для WordPress<br>на сайте http://web-programming.com.ua</br></a>
</div>
<div id="nav-menu">
<ul id=nav>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>
</div>
<hr>
<div id="clear"></div>
Отлично, теперь добавим несколько стилей для отображения навигационного меню в файл style.css
div#nav-menu{
height:20px;
width:1000px;
margin:0;
background:gray;
}
div#nav-menu ul li{
list-style-type: none;
float: left;
padding-left: 25px;
}
div#nav-menu ul li a{
text-decoration: none;
}
Думаю, что тут пояснять не надо, что я сделал.
Исходник данного поста Вы можете скачать отсюда.
Давайте проверим, что у нас получилось. Устанавливаем нашу тему и активируем ее. Переходим на сайт и видим:
Так, как у меня создано три страницы, то и отображаются три ссылки на эти страницы. Теперь переходя по ссылке в навигационном меню мы попадаем на соответствующую страницу.
На этом пост, посвященный добавлению навигационного меню для темы WordPress я заканчиваю. В следующей статье мы рассмотрим файл, который отвечает за отображение комментариев. Так, что не пропускайте выхода новых материалов, подписавшись на RSS-рассылку данного блога.
Всем приятного освоения CMS WordPress.
