Как создать шаблон для WordPress используя Bootstrap. Часть 5

Приветствую подписчиков, и тех, кто ждет продолжения уроков по созданию шаблона для wordpress используя bootstrap. В данном уроке, мы распределим код по файлам single.php, page.php, archive.php, 404.php и внедрим пагинацию (навигация по страницам) в наш шаблон.

Поправка

Но, прежде чем начать, я хотел внести поправку в наш шаблон. Для того, чтобы наш шаблон отображался корректно и выровнялся, нам нужно внести некоторые изменения.

В файле index.php

  • Исправим класс span7 на span8
  • Исправим класс span3 на span4
  • Исправим класс 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();?>

Использование bootstrap pagination в wordpress

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

Twitter Bootstrap пагинация (навигация по страницам)

Когда вы убедились в том, что всё работает, не забудьте, обратно выставить нужное количество отображаемых записей на странице (Стандартно 10).

Распределяем код по файлам

Во втором уроке, где я рассказывал, как создать wordpress шаблон, при перечислении нужных файлов я забыл о не менее важных файлах category.php и tag.php, поэтому создаем их в корне шаблона, и переходим к следующим пунктам.

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

Внимание! Если вы хотите, чтобы в категориях и в архиве выводились краткие записи, замените <?php the_content(); ?>, на <?php the_excerpt(); ?>.

Редактируем файл выдачи результатов поиска.
  • Копируем содержимое 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>, можно изменить на свое усмотрение
Переходим к следующим файлам, для этого нужно внести маленькую правку.
  • Копируем содержимое index.php
  • Вставляем в single.php, после чего, нужно удалить цикл. Для этого, удаляем while ( have_posts() ) : и <?php endwhile; ?>. 
  • Удаляем строчку <?php bootstrap_pagination();?>, только после этого сохраняем файл.
  • Вставляем в page.php содержимое single.php, в котором мы удалили цикл.

После этого, можно проверить все ли работает, для этого откройте сайт и перейдите в запись кликнув по заголовку или читать далее.

Внимание! Если у вас при открытии записи сбилась кодировка, переобразуйте ее в “UTF8 без BOM’ с помощью notepad++.

Редактируем файл, который выдает ошибку 404.
  • Откроем файл 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>

Наш урок подошел к концу, как обычно, если вам понравился урок, не забываем делиться в социальных сетях, каждое ваше нажатие “Мне нравиться”, “Рассказать друзьям” греет мне душу и мотивирует чаще делиться с вами интересной информацией. В следующем уроке мы доделаем страницу single.php, внедрим комментарии, а также откорректируем сайдбар.

Некоторые ребята просили меня выставить архив шаблона, раньше было нечего показывать, но сейчас, материала стало больше, и я решил показать результаты, если у вас что-то не получается, вы сможете сравнить свои результаты, с моими.

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

 

Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной

7 Комментария к “Как создать шаблон для WordPress используя Bootstrap. Часть 5”

  • Павел ·
    25.09.2014 в 13:46
    #

    Исправим класс span3 на span4

    Пришлось обратно исправить т. к. боковая панель “переместилась” ниже контентной части.

  • Михаил ·
    02.10.2014 в 16:34
    #

    При открытии записи чистый экран браузера. FireBug говорит что ошибка 500

    • Admin ·
      08.11.2014 в 21:28
      #

      Проверьте наличие файлов functions.php, style.css в корне шаблона. Проверьте правильно ли прописан путь, и не жалуется ли firebug на то что не может подключить style.css.

  • Arthur ·
    22.01.2016 в 17:40
    #

    Редактируем файл, который выдает ошибку 404.

    Откроем файл 404.php
    Вставим в него содержимое single.php
    Удалите со всем его содержимым
    Замените на нижеприведенный код

    Там нету этого же! Остановился на этом уроке.

    • Admin ·
      05.07.2016 в 18:17
      #

      Исправил в уроке 3 где //Тут будет код записи, извините за опечатку

  • Александр ·
    07.05.2016 в 11:21
    #

    “Удалите со всем его содержимым” — откуда этот класс взялся у меня в single.php его не было

    • Admin ·
      05.07.2016 в 15:40
      #

      Добрый день, извините это была опечатка, исправил в Часть 3, где //Тут будет код записи
      Добавьте этот блок, как в 3 части

  • Оставить отзыв

    (обязательно)

    (обязательно)


    Наши друзья
    - ARTtime - Блог о Photoshop и Дизайн
    - Блог о дизайне и арте
    Реклама