Создаем адаптивную тему в bootstrap для WordPress

Урок пятый – делаем постраничную навигацию новой темы

Здравствуйте, уважаемые мои читатели и гости сайта “Блог Валерия Бородина”
Сегодня продолжаем изучать адаптивную верстку темы для WordPress в bootstrap и в нашем пятом уроке мы с вами изучим, как сделать навигацию по сайту в нашей новой теме для WordPress.

Верстка адаптивной темы в bootstrap это дело серьезное!

Прежде, чем перейти к изучению создания навигации по сайту. Давайте внесем кое какие изменения в наших с вами ранее сделанных записях.

Правим файл index.php:

Правим class span7 на span8
Правим class span3 на span4
Правим class row перед span7, на row-fluid

Теперь делаем навигацию в bootstrap для темы WordPress

Добавляем вот этот код в файл functions.php и наша навигация будет подключена:

/* Навигация */
 
function bootstrap_pagination($pages = '', $range = 2)
{
$showitems = ($range * 2)+1;
 
global $paged;
if(empty($paged)) $paged = 1;
 
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
 
if(1 != $pages)
{
echo "<div class='pagination pagination-centered'><ul>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>&laquo;</a></li>";
if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a></li>";
 
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<li class='active'><span class='current'>".$i."</span></li>":"<li><a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a></li>";
}
}
 
if ($paged < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>&raquo;</a></li>";
echo "</ul></div>\n";
}
}
/* Навигация */

В файле index.php нужно будет вставить вот такой код после закрытия тега </div>, который принадлежит к row-fluid.

<?php bootstrap_pagination();?>

Чтобы увидеть получилась ли навигация добавьте еще пару записей и в консоли во вкладке “Настройки” и “Чтение” поставьте временно цифру “2” “На страницах блога отображать не более”, потом поменяете обратно на “10”.

Вот так должна получиться у вас навигация:

Далее создаем еще дополнительные файлы в нашей новой теме: category.php и tag.php

Теперь давайте их наполним необходимым кодом, чтобы они у нас заработали.

Копируем содержимое файла index.php
Вставляем в category.php, archive.php

Отредактируем наш поиск по сайту:

Копируем содержимое index.php
Переносим в файл search.php
Перед функцией <?php if ( have_posts() ) …. вставляем <h4>Результаты поиска</h4>
Между функциями <?php endwhile; ?> и <?php endif; ?> вставляем вот этот код:

<?php else : ?>
<p>По вашему запросу ничего не найдено, предлагаем вам воспользоваться поиском по сайту.</p>
<?php get_search_form(); ?>

Сохраняем все исправленное содержимое файла и копируем его
Затем вставляем все это в файл tag.php
Текст который между тегами <p> и <h4>, можно заменить на свой

Далее редактируем наши файлы темы создаваемой в bootstrap:

Копируем содержимое index.php
Вставляем в single.php и удаляем вот это: while ( have_posts() ) и <?php endwhile; ?>
Также удаляем строку <?php bootstrap_pagination();?>, после этого сохраняем файл index.php
Потом нужно вставить в файл page.php содержимое файла single.php

Проверяем работоспособность нашей новой темы для WordPress. Открываем сайт и переходим в любую запись кликнув по заголовку или “читать далее”. Должно все работать!

Если возникли проблемы с отображением, тогда нужно все файлы открыть в текстовом редакторе и преобразовать кодировку в UTF-8!

Продолжаем редактировать наши файлы для темы WordPress и делаем файл 404.php

Открываем файл 404.php
Вставляем туда содержимое из файла single.php
Удаляем <div class=”content”> со всем содержащимся в нем кодом!
И заменяем удаленное вот на этот код:

<div class="content">
<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>
<div class="custom"><?php the_date(); ?> опубликовал <strong><?php the_author(); ?></strong> в рубрике <?php the_category(); ?></div>
 
<?php the_content(); ?>
<a href="<?php the_permalink(); ?>">Читать далее</a>
</div>

Далее смотрим, как у нас получилась страница 404:

Неправда ли неплохо?
Смотрим видеоурок:

Верстка адаптивной темы в bootstrap Урок пятый

Пока давайте закончим на этом.
И встретимся в следующем уроке, где с вами отредактируем нашу страницу записей и файл отвечающий за нее single.php. Также добавим туда комментарии. И отредактируем наш сайдбар.

А пока всего Вам хорошего! Удачи во всех ваших начинаниях! До встречи в шестом уроке!
С уважением, ваш Валерий Бородин

Все уроки по верстке в bootstrap адаптивной, уникальной темы для WordPress

Вы будете первым, кто поставит оценку!