Посторінкова навігація без плагіна у WordPress (альтернатива WP-PageNavi)
8, Чер, 2012
Багато блогерів бажають замінити стандартну блогівську форму гортання сторінок на посторінкову і такі люди, зазвичай, вибирають плагін “WP-PageNavi”, але багато хто не знає, що можна обійтись простим, невеликим кодом і при цьому зменшити до мінімуму нагрузку на блог.
Давайте ж розглянемо даний метод, розроблений відомим блогером: Dimox.
Функція має невеликий розмір і стандартно записується в functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function wp_corenavi() { global $wp_query, $wp_rewrite; $pages = ''; $max = $wp_query->max_num_pages; if (!$current = get_query_var('paged')) $current = 1; $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999)); $a['total'] = $max; $a['current'] = $current; $total = 1; //1 - виводить текст "Сторінки N з N", 0 - не виводить $a['mid_size'] = 2; //скільки посилань показувати з права і з ліва від сторінки $a['end_size'] = 1; //скільки посилань показувати спочатку і в кінці $a['prev_text'] = '« Попередня'; //текст ссилки "Попередня сторінка" $a['next_text'] = 'Наступна »'; //текст ссилки "Наступна сторінка" if ($max > 1) echo '<div>'; if ($total == 1 && $max > 1) $pages = '<span>Сторінка ' . $current . ' з ' . $max . '</span>'."\r\n"; echo $pages . paginate_links($a); if ($max > 1) echo '</div>'; } |
В функції всього 5 змінних які описанні коментарями.
Щоб вивести в потрібному місці навігацію, додаємо наступний код:
1 |
<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?> |
HTML код, який в нас виходить, має наступний вигляд:
1 2 3 4 5 6 7 |
<div class="navigation"><span class="pages">Сторінка 1 з 9</span> <span class='page-numbers current'>1</span> <a class='page-numbers' href='http://wpfan.com.ua/page/2/'>2</a> <a class='page-numbers' href='http://wpfan.com.ua/page/3/'>3</a> <span class="page-numbers dots">…</span> <a class='page-numbers' href='http://wpfan.com.ua/page/9/'>9</a> <a class="next page-numbers" href="http://wpfan.com.ua/page/2/">Наступна »</a> </div> |
Як бачимо всі CSS класи вже прописані і ми з легкістю можемо оформити під свій дизайн.
Додаю вихідний CSS для ознайомлення:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.navigation { background: #FDFDFD; border: 1px solid #ABABAB; } .pages { text-decoration: none; border: 1px solid #E8E8E8; padding: 3px 3px; } .page-numbers { padding: 4px 6px; margin: 0 3px; background: #F4F6F8; border: 1px solid #ABABAB; } .page-numbers:hover{ padding: 4px 6px; margin: 0 3px; background: #E7E9EB; border: 1px solid #ABABAB; } |
В результаті маємо чистий код, без плагіна і без навантаження на самий блог, що дає нам ще один плюс у видачі пошукових систем.
Успіхів.
1