Номерирани WordPress страници без плъгини

27 февр. 2014 | Без плъгини
Номерирани WordPress страници без плъгини

На този етап WordPress идва без страницирана навигация. Стандартно навигирането между отделните страници става чрез линковете « Previous Posts (страница назад) и Next Posts » (страница напред). Това е твърде неудобно, имайки предвид, че не можете да минете наведнъж няколко страници напред или назад. Мнозина решават този проблем, чрез инсталирането на съответни за целта плъгини, най-популярният между които е WP-Pagenavi. Досадното (поне според мен) при повечето плъгини е, че имат един куп екстри в тях, които може никога да не ви потрябват, а също и добавят допълнителен CSS файл в <head> </head> частта на сайта ви.

В този урок ще ви покажем как да номерирате страниците си без да използвате какъвто и да било плъгин, а само чрез добавяне на малко код във файла functions.php на вашата WordPress тема. ВАЖНО: ако все пак темата ви включва в себе си плъгина WP-Pagenavi, най-напред непременно го деактивирайте и след това преминете към следващите стъпки, за да не се стигне до грешка или да видите празна бяла страница.

1. Най-напред ще добавим функцията pagenavi(), която ще направи страницирането (спокойно можете да я кръстите и по друг начин). За целта сложете кода по-долу някъде във functions.php файла и запазете промените.

function pagenavi( $p = 2 ) { // колко страници ще се виждат преди и след активната
if ( is_singular() ) return;
global $wp_query, $paged;
$max_page = $wp_query->max_num_pages;
if ( $max_page == 1 ) return;
if ( empty( $paged ) ) $paged = 1;
// echo '<span>Страница: ' . $paged . ' от ' . $max_page . ' </span> '; // страници
if ( $paged > $p + 1 ) p_link( 1, 'Първа' );
if ( $paged > $p + 2 ) echo '... ';
for( $i = $paged - $p; $i <= $paged + $p; $i++ ) {
if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
}
if ( $paged < $max_page - $p - 1 ) echo '... ';
if ( $paged < $max_page - $p ) p_link( $max_page, 'Последна' );
}
function p_link( $i, $title = '' ) {
if ( $title == '' ) $title = "Страница {$i}";
echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$i}</a> ";
}

В нашия случай 7-ми ред е закоментиран, тоест няма да се вижда съдържанието между таговете <span> и </span>. Ако искате да го виждате, махнете двете наклонени черти (//) в началото на реда.

2. Ще извикаме функцията wp_pagenavi(). Става чрез добавянето на следния код във файловете index.php, arhives.php и/или някои други, в зависимост от конкретната тема. Потърсете в тези файлове код от рода на:

<?php if(function_exists('wp_pagenavi')) { ?>
<?php wp_pagenavi(); ?>
<?php } else { ?>
<div class="navigation"><?php posts_nav_link('« Older Posts','Newer Posts »'); ?></div>
<?php } ?>

и го заместете с този:

<?php pagenavi(); ?>

3. Стилизиране на номерацията чрез CSS. Използвайте кода по-долу като го добавите в CSS файла на темата. В случая номерацията ви ще изглежда като тази в картинката най-отгоре – със синята рамка е активната страница (current), а с червената е посочената с мишката (hover). Променете цветовата схема и размерите по ваш вкус.

.page-numbers {margin:10px 1px 0px 1px; padding:3px 7px 3px 7px; text-decoration:none; background:#fff; color:#666; border:1px solid #bfbfbf;}
.page-numbers:hover {background:#fff; color:#666; border:1px solid #B30B00;}
.current, .current:hover {color:#666; background:#fff; border:1px solid #5c7d9e;}