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

Автор:human

Как создать шаблон для 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). "'>«</a></li>" ;
if ( $paged > 1 && $showitems < $pages ) echo "<li><a href='" .get_pagenum_link( $paged - 1). "'>‹</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). "'>›</a></li>" ;
if ( $paged < $pages -1 && $paged + $range -1 < $pages && $showitems < $pages ) echo "<li><a href='" .get_pagenum_link( $pages ). "'>»</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; ?> вставляем нижеприведенный код
1
2
3
&lt;?php else : ?&gt;
&lt;p&gt;По вашему запросу ничего не найдено, предлагаем вам воспользоваться поиском по сайту.&lt;/p&gt;
&lt;?php get_search_form(); ?&gt;
  • Сохраняем содержимое файла и копируем
  • Вставляем в файл 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”> со всем его содержимым
  • Замените на нижеприведенный код
1
2
3
4
5
6
7
&lt;div class = "content" &gt;
&lt;a href= "&lt;?php the_permalink();?&gt;" &gt;&lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;&lt;/a&gt;
&lt;div class = "custom" &gt;&lt;?php the_date(); ?&gt; опубликовал &lt;strong&gt;&lt;?php the_author(); ?&gt;&lt;/strong&gt; в рубрике &lt;?php the_category(); ?&gt;&lt;/div&gt;
&lt;?php the_content(); ?&gt;
&lt;a href= "&lt;?php the_permalink(); ?&gt;" &gt;Читать далее&lt;/a&gt;
&lt;/div&gt;

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

 

Об авторе

human administrator

    Оставить ответ

    Войти с помощью: 

     

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