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

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

Создаем адаптивную тему в 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:

страница 404

страница 404

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

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

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

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

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

Подписаться на обновление блога

Введите свой e-mail адрес: