Казино vip вулкан игровые аппараты играть бесплатно www.igrovoi-club-vulkan.com.

Как сделать на WordPress красивую постраничную навигацию?

Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о том, как сделать на WordPress такую красивую и удобную вещь как постраничную навигацию с помощью плагина WP-PageNavi или простого кода. Не знаю как вам, а мне лично встроенная навигация в движке WordPress совсем не нравится.

Как сделать на WordPress красивую постраничную навигацию?

Вот что это за навигация такая? Ладно, если блог был бы еще молодой, и на нем было бы не так много статей, но что если их уже более 200-300? В таком случае такая вот навигация может запросто отпугнуть многих ваших читателей, ведь никому не хочется нажимать на кнопку «предыдущая запись» до потери пульса, чтобы добраться до нужного материала. К тому же данная надпись выглядит столь незаметно, что ее могут просто не увидеть, что в итоге приведет к уменьшению просмотра страниц на посетителя, и времени проведенному на сайте, а это сейчас очень важные факторы при раскрутке любого сайта, которые нельзя игнорировать. Итак, если вы все же собрались делать постраничную навигацию, то можете воспользоваться любым способом представленным ниже.

 

Постраничная навигация для WordPress с помощью плагина WP-PageNavi.

Способ 1. Скачиваем плагин WP-PageNavi здесь и закачиваем его на блог, активируем, переходим в адмике блога в «настройки» «список страниц». Тут нам нужно настроить только один параметр это «количество страниц для показа». Я лично указал 10, чтобы моя навигация была очень видна посетителям. Кстати, если вдруг у вас вся постраничная навигация не влезет в шаблон вашей темы, то есть если она будет выглядеть примерно в таком виде:

плагин WP-PageNavi

то можете просто убавить это число или еще лучше — убрать из настроек плагина надпись «страница» и заменить их стрелочками. Ок, после этого нажимаем сохранить, и наблюдаем, как у нас появилась простая постраничная навигация на блоге. Если этого не произошло, то идем во «внешний вид» « редактор» открываем файл основной шаблон (index.php) и ищем примерно вот такой код: <?php posts_nav_link (); ?> или что-то в этом роде и меняем его на: <?php wp_pagenavi ();  ?> , сохраняем запись.

Ту же самую операцию проделываем и с файлами archive.php и search.php если хотите, чтобы данная навигация была не только на главной странице, но еще и в отдельных рубриках и при поиске. Гуд, хочу вас предупредить на всякий пожарный, что данный плагин не у всех работает, так что если у вас ничего не получилось, то можете установить себе аналогичный плагин WP-Page Numbers. Если будете его устанавливать, то вам также надо будет вставить специальный код <?php if (function_exists ('wp_page_numbers')) { wp_page_numbers (); } ?> в тех же самых файлах.

 

Красивые стили-оформления для постраничной навигации плагина WP-PageNavi и WP-Page Numbers.

Вы наверняка уже заметили, что у меня постраничная навигация выглядит намного лучше и привлекательнее чем у вас. Это связано с тем, что у меня стоит дополнительный плагин WP-Page Numbers style, который работает как для WP-PageNavi так и для WP-Page Numbers. Если вдруг вы в кодах, как и я, так сказать не профи, чтобы самим прописывать CSS-стили оформления в файлах плагина, то можете просто поставить себе данный плагин. После того как установите его, у вас в адмике появится новая вкладка PageNavi Style. В ней вы можете выбрать любой на свой вкус стили-оформления постраничной навигации.

плагин WP-Page Numbers style

Всего в плагине 20 видов стилей со всеми цветами, которые только есть. Также, если вам вдруг ничего из списка не понравится, то вы можете во вкладке Select StyleSheet  поменять настройки с «Existing Styles» на  «Custom», перед вами появится редактор, где вы сможете указать нужные вам настройки, цвета и т.д. Если что, вот вам их перевод:

Heading Color — цвет заголовка.

Background Color — цвет заднего фона.

Active / Current Background Color — цвет кнопки при наведении на нее курсора мыши.

Font Size — размер шрифта.

Link Color — цвет ссылки.

Link Mouse Hover / Active Color — цвет ссылки при наведении на нее курсора мыши.

Link Border Color — цвет границы кнопки с номером страницы.

Link Border Mouse Hover/Active Color — цвет границы, при наведении курсора мыши.

Align Navigation — выравнивание на странице: по центру, по левому или правому краю.

 

Как сделать постраничную навигацию без плагина WP-PageNavi?

Если вы не из любителей ставить очередные плагины ради того чтобы улучшить функционал и удобства блога, то можете пойти обходным путем — просто установить код, который и будет выводить данную навигацию, но перед этим сделайте резервную копию блога на всякий случай.

Способ 2. Переходим во «внешний вид» « редактор»  и открываем файл функции темы (functions.php) и в самом конце перед тегом ?> вставляем вот такой код и сохраняем запись.

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'] = 3; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = '&laquo;'; //текст ссылки «Предыдущая страница»
$a['next_text'] = '&raquo;'; //текст ссылки «Следующая страница»
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>';
}

Кстати, в коде есть некоторые пояснения на русском, так что можете поиграться немного с числами, если вам это нужно. Теперь, как и с плагином WP-PageNavi заходим в файлы: functions.php, index.php и archive.php находим там строчку <?php posts_nav_link (); ?>  и после нее или еще несколько строчек, добавляем код  <?php if (function_exists ('wp_corenavi')) wp_corenavi (); ?>

код постраничной навигации для wordpress

Способ 3. Данный способ аналогичен второму, но все же код немного отличается. В файле функции темы (functions.php) в самом конце перед тегом ?> вставляем вот такой код и сохраняем запись.

function navigation () {
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 = 0; //1 — выводить текст «Страница N из N», 0 — не выводить
$a['mid_size'] = 2; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 5; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = '&laquo; Предыдущая '; //текст ссылки «Предыдущая страница»
$a['next_text'] = 'Следующая &raquo;'; //текст ссылки «Следующая страница»
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>';
}

В файлах: functions.php, index.php и archive.php находим там строчку <?php posts_nav_link (); ?>  и после нее или еще несколько строчек добавляем код <div><?php navigation (); ?></div>. Теперь заходим в файл таблица стилей (style.css) и где-нибудь вставляем этот код стилей, где коды файла начинаются с точки, и сохраняем запись.

.navigator {margin:10px 7px;
background:#fff;
border:1px solid #aaa;
padding:15px;
overflow:hidden;
font-size:13px;
color:#000;}

.navigator a{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}

.navigator span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.navigator a:hover{background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 13px;
padding: 10px;
text-decoration: none;}

.navigator span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.navigator span.current {background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 15px;
padding: 10px;
text-decoration: none;}

.navigator span.extend {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.str{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}

код постраничной навигации для wordpress

Способ 4. В файле функции темы (functions.php) в самом конце перед тегом ?> вставляем вот такой код и сохраняем запись.

function my_pagenavi ($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>»;
}
}

В файлах: functions.php, index.php и archive.php находим там строчку <?php posts_nav_link (); ?>  и после нее или еще несколько строчек добавляем код <?php if (function_exists ('my_pagenavi')) { my_pagenavi (); } ?>. Теперь заходи в файл таблица стилей (style.css) и как в предыдущем примере вставляем этот код и сохраняем запись.

.pagination {
clear: both;
font-size: 12px;
margin-top: 10px;
text-align: center;
}

.pagination span, .pagination a {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}

.pagination a:hover{
border-color: #000;
}
.pagination .current{
font-weight: bold;
}

код постраничной навигации для wordpress

Способ 5. Скачиваем этот файл, берем из него код и вставляем в (functions.php) в самом конце перед тегом ?> и сохраняем запись. Если что заранее извиняюсь за неудобства, так как код был слишком большим для публикации. Теперь в файлах: functions.php, index.php и archive.php находим там строчку <?php posts_nav_link (); ?> и после нее или еще несколько строчек добавляем код <?php if (function_exists ('kama_pagenavi')) kama_pagenavi (); ?>

код постраничной навигации для wordpress

Если что, все коды были проверены на работоспособность, так что один из примеров у вас должен работать в любом  случае. На этом все, удачи.

Похожие публикаций:

Плагин подписки на комментарии - Subscribe to comments.
Популярный плагин кэширования WordPress - Hyper Cache
Как сделать на WordPress форму регистрации и авторизации?

Поделиться с друзьями и коллегами.

Система Orphus
  1. Александр:

    что то не получается первым и пятым способом, тема стоит стандартная Twenty Ten, не чего подобного нет : в . жду ответа

    • Макс:

      Вы не можете установить плагин?

    • Александр:

      Плагин установил, но не чего не меняется

    • Макс:

      А код плагина в шаблон установили? Если да то, скорее всего не в то место.

    • Александр:

      Всё разобрался, в стандартной теме Twenty Ten, нужно редактировать только loop.php

Прокомментировать

Максим Вячеславович – автор блога firstprize.ru, вольный SEO специалист, вебмастер, Web-разработчик на WordPress и человек-оркестр с опытом в некоторых других областях. Личное кредо — хочешь сделать что-нибудь хорошо, сделай это сам. В моменты особого вдохновения создаю видеоклипы и ковыряюсь в кодах. Основные профессиональные инструменты —Dreamweaver, Adobe Photoshop, Site-аuditor. Спасибо за внимание, заходите снова!