Постраничная навигация WordPress: что это, как сделать без плагина на php, плагином

постраничная навигация Приветствую читателей блога. В этом посте читайте о постраничной навигации, как ее сделать плагином, создать с помощью php кода без плагина.

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

На wordpress ее организуют так, что на странице выводится блок информации из большого массива данных.

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

Обычно некие зачатки навигации уже заложены в шаблоне WordPress: ссылки Предыдущая страница – Следующая страница. Если блог небольшой, этого вполне достаточно.

Но когда со временем веб проект разрастается, посетителям становится неудобно перелистывать страницы.стандартная постраничная навигация

В переводе с английского «pagination» или пагинация — это порядковая нумерация страниц. Постраничная навигация разделяет общий текстовый материал сайта на отдельные страницы с порядковой нумерацией (1-2-3).

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

Использование плагинов

Самый простой выход для создания постраничной навигации — установить плагин.

СТАТЬИ ПО ТЕМЕ:

Как сделать, изменить wordpress главную страницу

Html выделить текст цветом (фон), рамкой

Отложенная, запланированная публикация WordPress

Самый известный WP-PageNavi. У него много установок, он обновляется, совместим с последней версией wordpress.

Обычно постраничную навигацию организуют на главной странице (INDEX.PHP), на вебстраницах архивных материалов (ARCHIVE.PHP), в результатах поиска (SEARCH.PHP). В эти шаблоны нужно вставить код вызова нужной функции.

Найдите в них код вызова функций next_posts_link и previous_posts_link. Они вызывают стандартную навигацию, о ней я писала в начале статьи.

Замените их функцией

<?php if ( function_exists( 'wp_pagenavi' ) ) wp_pagenavi(); ?>.

Пример.

wp-pagenavi плагин
wp-pagenavi
Сохраните изменения в файле. Сделайте настройки плагина: в разделе Параметры:

  • измените максимальное количество страниц;
  • выберите отображение в виде выпадающего списка;
  • используйте встроенные стили;
  • измените текст отображаемый на ссылках.

Другой доступный плагин WP-Paginate.

Без плагина, на php

В интернете есть множество кодов, рабочих, как утверждают авторы блогов, где эти коды опубликованы. Но, похоже, что КАЖДЫЙ КОД работает только с определенным шаблоном. Убедилась в этом, перепробовала массу вариантов. И привожу схему постраничной навигации без плагина (с использованием php), сработавшую на двух блогах с разными шаблонами.

галочка В редакторе вашей темы (шаблона) создайте новый файл pagenavi.php. Похожий файлик я уже создавала, когда устанавливала форму обратной связи без плагина. Опишу процесс еще раз.

СОЗДАТЬ документ в программе Блокнот

ВНЕСТИ в этот файл код

<?php
global $wp_query;
$max_page = $wp_query->max_num_pages;
$nump=10;
if($max_page>1){
$paged = intval(get_query_var('paged'));
if(empty($paged) || $paged == 0) $paged = 1;echo '<div>';
if($paged!=1) echo '<a href="'.get_pagenum_link(1).'">1</a>&nbsp;';
else echo '<u>1</u>';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 '<u>'.$i.'</u>';
}if($end<$max_page-1) echo "<b>…</b>";
if($paged!=$max_page)
 echo '<a href="'.get_pagenum_link($max_page).'"> Последняя &raquo;</a>';
else echo '<b>&nbsp;Последняя</b>';
echo '</div>' ;
}
?>

СОХРАНИТЬ файл как pagenavi.php (смотрите пример, как это делать).

сохранить как php неправильно
неправильно
сохранить как php неправильно
неправильно
как сделать форму обратной связи без
правильно
сохранить как php правильно
правильно

ПЕРЕМЕСТИТЬ файл pagenavi.php с помощью программы FILEZILLA в папку с вашим шаблоном PUBLIC_HTML — WP-CONTENT — THEMES (более подробно написано вот здесь).

закачать на серверСКОПИРОВАТЬ файл pagenavi.php в папку с вашей темой Wordpress
ЛИБО СКОПИРОВАТЬ через файловый менеджер из аккаунта на хостинге.

постраничная навигация через php

Как результат — файл pagenavi.php должен появиться в редакторе вашей темы.

галочка ВНЕСИТЕ изменения в тех файлах, где вы хотите видеть нумерацию страниц на сайте: index.php (главная страница), archive.php.

ДОБАВЬТЕ КОД, отвечающий за вывод постраничной навигации

<div class="pagenavi"><?php include(TEMPLATEPATH."/pagenavi.php");?></div>

НАЙДИТЕ МЕСТО для вставки кода

На открытой странице сайта наведите курсор на линк Предыдущая страница.

Откройте ПРОСМОТРЕТЬ КОД ЭЛЕМЕНТА, определите, что за этот элемент отвечает class more_posts (у меня, у вас может быть другой).

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

НАЙДИТЕ class more_posts на странице index.php.
место для вставки кода php
ЗАМЕНИТЕ кусок кода между тегами <div> и </div> на нужный (приведен выше).

И вот что получитсяВордпресс навигация Что-то не очень красиво? Конечно, нужно еще и стили для постраничной навигации прописать в файле style.css.

галочка ВНЕСИТЕ в файл style.css следующий код.

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

АДАПТИРУЙТЕ его к дизайну своего блога, попробуйте изменить background-color и другие параметры. У меня, вот что получилось, все ссылочки работают. Вордпресс постраничная навигация без плагина

Заключение

Теперь понятно, как сделать постраничную навигацию на php без плагина, используя плагин wordpress. Постраничная навигация будет видна, если записей на блоге больше, чем отображается на страницах блога (смотрите в настройках чтения). Пример: вы выводите по 6 записей на странице, а всего их 7. Тогда будут отображаться две странички.

Понравилась статья? Поделиться с друзьями:
Я новичок
Комментариев: 7
  1. Ольга

    Создать блог и заработать в интернете. Наконец-то на конкретных примерах (пусть и на западных) показано, как это можно сделать.

    Показательный момент — выбор ниши для блога (восхождение на Килиманджаро). Конечно, в нашей стране такая ниша была бы слишком узкой. Потому что целевые посетители вряд ли появились бы, население страны заботит другая проблема — как денег заработать.

    А желающие посетить Килиманджаро скорее бы обратились за информацией в клуб альпинистов какой-нибудь, а не на любительский блог.

    Но принцип правильный, просто надо найти нишу с платежеспособной целевой аудиторией. Плюс найти рекламодателей, готовых платить нормальные деньги за рекламу.

  2. Олег

    Про Адсенс не согласен, хороший способ монетизации. Чтобы зарабатывать 100 $ не обязательно 17000 посетителей. Все зависит от ниши и стоимости клика. На блогах о кулинарии не заработаешь столько на контексте, сколько на финансах и стройке при том же трафике.

    1. Ольга (автор)

      Олег, статья написана девушкой, которая живет в Англии и ведет англоязычные блоги. У нее есть соответствующий опыт. Возможно, на Западе другие приоритеты?

      И потом, она зарабатывает значительно больше другими способами, не раздражая посетителей рекламой Гугл Адсенс.

      1. Олег

        Да я бы не сказал, что Адсенс раздражает. Это ж не тизеры.

  3. Милла

    Добрый день.

    Про adsense, Олег, я действительно не знаю, как ими пользуются в РФ, но несколько лет назад им перестали пользоваться все мои знакомые блогеры и журналисты, так как статистика (независимое от google исследование: около 100 000 сайтов маркетингового агентства в Лондоне, где работает моя подруга) показала, что если сайт не относится к интерактивным или развлекательным, где контент уже достаточно насыщен «нестандартными» фото и играми, то adsense снижает вторичную посещаемость сайта.

    Для блогера, который зарабатывает репутацию годами, чтобы BBC или Psychologies, ему заказывали материалы (за материал мы получаем от £1,000 за стандартную страницу в 300 слов), не будет рисковать потерей трудом добытых и годами обслуживаемых читателей, и соответственно — заказов.

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

    Это, однако, не означает, что это не способ заработка, отнюдь нет, на нашем развлекательном сайте (http: // golfandgirls.com/) мы зарабатывает $50 в день на adsense! Но для серьезного блога, которым хочется гордиться, мне этот способ не подходит. Секрет в том, что ссылки такого же цвета как и у Google, и вся реклама висит в верхней половине сайта, поэтому читатели ошибочно идут по ссылкам, думая, что это наш контент. Но у нас более 6000 unique visitors в месяц, поэтому это нестрашно.

    Прокомментируйте, пожалуйста, если мне удалось ответить на ваш вопрос.

    1. Милла

      Олег, вы правы, я перечитала свой материал, и я неправильно обозначила:

      не unique visitors (уникальных посетителей), a page views (просмотров) 12,000-17,000! Это основано на моих 6 сайтах, у которых совершенно разная тематика.

      Ольга, будьте добры, исправьте в основном тексте.

      Спасибо!

      Милла

  4. Ольга

    Спасибо за ценные советы. И в частности: найти нишу с платежеспособной целевой аудиторией и рекламодателей, готовых платить нормальные деньги за рекламу.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: