Постраничная навигация

Вітаю Вас відвідувач сайту milamarinenko.com.ua!

Cьогодні я розповім про посторінкову навігацію на WordPress.
Як я розповідав в попередніх статтях, плагіни можуть створювати багато зайвих запитів до бази даних, в слідстві чого падає швидкість завантаження сайту.
І ось на одному з моїх сайтів я працюю взагалі без зайвих плагінів, в результаті чого сайт просто літає!

Отже, про посторінкова навігацію в WordPress. Її Ви можете спостерігати, на головній сторінці, на сторінках розділів, пошуку, це все покращує юзабіліті, в результаті чого відвідувачеві стає простіше пересуватися по вашому проекту, і статистика поведінкових факторів буде поліпшуватися, а найголовніше – показник відмов теж може знизитись:

Починаючому вебмастеру може бути важкувато реалізувати посторінкову навігацію WordPress без плагінів, тому ось плагін який допоможе вам це зробити WP- PageNavi, а потім вже коли наберетеся досвіду, зробити все це без плагінів.

Ще хочу сказати перед тим, як почати робити посторінкову навігацію WordPress без плагінів, зробіть резервні копії вашого сайту, це потрібно робити завжди перед змінами на ваших сайтах, потім просто буде зручно все відновити, якщо у вас щось не вийшло або не сподобалося як це виглядає.
Також, якщо ви робите зміни в дизайні вашого проекту який вже має відвідуваність, використовуйте кешування плагіном Hyper Cache, завдяки цьому всі зміни будуть видні тільки Вам, а іншим відвідувачам буде показуватися стара кешована версія сторінок, це дуже зручно при зміні дизайну сайту.
Отже, створюємо посторінкову навігацію в WordPress без плагінів, для цього створюємо в блокноті файл і називаємо його pagenavi.php, далі – вставляємо в нього наступний код:

[info]<!–?php global $wp_query; $max_page = $wp_query—>max_num_pages;
$nump=6; /*Количество отображаемых подряд номеров страниц*/

if($max_page>1){
$paged = intval(get_query_var(‘paged’));
if(empty($paged) || $paged == 0) $paged = Первая;

echo ‘</pre>
<div class=”wp-pagenavi”>’;
/* echo ‘Страница ‘.$paged.’ из ‘.$max_page.’ ‘;*/
if($paged!=1) echo ‘<a href=”‘.get_pagenum_link(1).'”>« Первая</a> ‘;
else echo ‘<span style=”text-decoration: underline;”>1</span>’;

if($paged-$nump>1) $start=$paged-$nump; else $start=2;
if($paged+$nump<$max_page) $end=$paged+$nump; else $end=$max_page-1; if($start>2) echo “<b>…</b>”;

for ($i=$start;$i<=$end;$i++)
{
if($paged!=$i) echo ‘<a href=”‘.get_pagenum_link($i).'”>’.$i.'</a> ‘;
else echo ‘<span style=”text-decoration: underline;”>’.$i.'</span>’;
}

if($end<$max_page-1) echo “<b>…</b>”;

if($paged!=$max_page) echo ‘<a href=”‘.get_pagenum_link($max_page).'”> Последняя »</a>’;
else echo ‘<b> Последняя</b> ‘;
echo ‘</div>
<pre>
‘ ;
}
?>

[/info]Далі ви цей файл можете навіть редагувати через адмінку WordPress де знаходяться основні файли вашої теми, footer -підвал, header – шапка і так далі.Тепер зберігаємо цей файл і заливаємо його в вашу тему.

Тепер нам потрібно вивести посторінкову навігацію на головній сторінці, у розділах, сторінках пошуку.
Для цього нам потрібно вставити через адмінку WordPress, код- функцію виклику посторінковою навігації, у файли index.php, search.php і archive.php, конкретне місце я вам вказати не можу у кожного свої теми, ну я думаю ви з цим справитеся !
Ось цей код виклику посторінкового навігації :[info]

</pre>
<div class=”pagenavi”></div>
<pre>

[/info]Все! Навігація по сторінках у вас створена, але от тільки зовнішній вигляд її залишає бажати кращого, проте, щоб виправити нам цей істотний недолік, потрібно скористатися CSS.
Подивіться на код файлу pagenavi.php, в нього я включив контейнер справ клас = « PageNavi «, а це означає що ми вже можемо в файл стилів вашої теми додавати правила для вашої навігації.
Тепер через адмінку заходимо в редактор вашої теми у файл ( style.css ) і вставляємо туди наступні стилі оформлення навігації по сторінках в WordPress :[info]

.navigation {clear:both; width:500px; height:auto;text-align:center;margin:30px 0 30px 50px;padding-top:15px;}
.navigation .right, .navigation .left {width:230px; font-size:18px;text-align:right;margin:0;}
.navigation .left {text-align:left;}
.navigation a, .navigation a:visited {text-decoration:none;color:#939186;}
.navigation a:hover {color:#5D5643;text-decoration:none;}
.pagenavi {clear:both;display:block;font-size:14px;margin:0;padding:7px 0 7px 0;}
.pagenavi a {clear: both;width:auto;font-size:14px;padding:3px 7px 3px 7px;background-color:#F3EFE6;}
.pagenavi b {clear:both;width:auto;margin:0 6px 0 5px;text-decoration:none;}

[/info]Звичайно цей приклад стилів який я навів, ви повинні змінити під дизайн вашого блогу, кольори, розміри і так далі.