Разработка сайтов

Верстка, адаптивная верстка, программирование, разработка на WordPress

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

Привет всем кто зашел на мой сайт. Сегодня хочу рассказать вам как изменить постраничную навигацию на сайте wordpress. В целом постраничная навигация разбивает общую ленту сайта на части, которые вы можете изменять в настройках «Параметры — Чтение — На страницах блога отображать не более — и здесь ставим сколько нам нужно отображать записей». По умолчанию в шаблона стоят ссылки «Предыдущая страница» и «Следующая страница». Это не очень хорошо выглядит. Немножко поискав по просторам Google нашел вот такое решение. Так выглядит постраничная навигация на моем сайте:

Screenshot from 2013-05-18 22:02:41Можете перейти по адресу webastudio.com/я делаю/  и самом низу посмотреть на это чудо. Если Вам нравится тогда давайте дальше. Все что нужно сделать это зайти в редактор вашей темы и найти файл functions.php. Здесь нужно вставить вот такой код:

[php]

function kriesi_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'>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged — 1)."'>&lsaquo;</a>";

for ($i=1; $i <= $pages; $i++)
 {
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
 {
echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
 }
 }

if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
echo "</div>\n";
 }
}

[/php]

Теперь нужно открыть файл index.php, именно в нем у меня находится главный цикл loop который выводить все записи, и найти вот такой код:

[php]
<div class="navigation">
<div class="navleft"><?php next_posts_link('&laquo; Предыдущие записи') ?></div>
<div class="navright"><?php previous_posts_link('Следующие записи &raquo;') ?></div>
</div>
[/php]

Как правило в всех шаблона его вставляют в класс navigation. Нужно заменить его на вот такой код:

[php]
<?php kriesi_pagination(); ?>
[/php]

Вот и все. Остается изменить файл css, если нужно. Под свою цветовую гамму сайта я изменил отображение постраничной навигации, вот такой код у меня в файле style.css:

[css]
.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}

.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#555;
background: #e0efff;
border:1px solid #4996e5;
}

.pagination a:hover{
color:#fff;
background: #3279BB;
}

.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}
[/css]

Все что нужно менять это класс pagination.

Сейчас мы говорили как сделать постраничную навигацию без помощи плагинов. Если не хотите затрачиваются и воспользоватся готовым решением тогда нужно скачать и установить плагин WP Page Numbers. О нем поговорим в следующих уроках.

На этом все, ставьте вконтакте или в фейсбуке, оставляйте комментарии и подписывайтесь на новые статьи.