Создание темы для WordPress. Часть 5. Добавление меню навигации страниц

Ромчик
0

Создание своей темы для WordPressДоброго времени суток. Мы с Вами продолжаем создавать собственную тему для 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="https://web-programming.com.ua">Уроки по созданию собственной темы для WordPress<br>на сайте https://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.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2017 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика