Создание темы для 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.