Постраничная навигация или как избавиться от плагина WP-PageNavi

Добрый день, друзья. Сегодня мы поговорим, про постраничную навигацию на сайте. Для тех кто еще не знает, то мы работаем с шаблоном Hueman. Я начал серию статей по его оптимизации и мы уже не мало в нем поменяли и увеличили скорость его работы. Хочется напомнить, что у данного шаблона, есть ряд встроенных обязательных плагинов. Вот мы как раз займемся тем, что избавится от одного из них, а именно от плагина WP-PageNavi. Я не хочу сказать что данный плагин работает плохо или он мне не нравится, просто привык чтоб все работало по возможности без вспомогательных средств. Опишу не много для чего нужен данный плагин.

Плагина WP-PageNavi

Данный плагин предназначен, чтобы организовать на сайте постраничную навигацию. Вот так он сделал это у нас на сайте.

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

Менять тут особо даже нечего, если только диапазоны страниц или стиль списка страниц. Ну, тут Вы делаете на свое усмотрение. Внешний вид страниц можно поменять в файле pagenavi-css.css

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

Постраничная навигация без плагина

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

За добавление страниц на сайт будет отвечать следующий код, который мы добавляем в файл functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/*Постраничная навигация */
function wp_navi() {
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'] = 1; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = '«'; //текст ссылки "«"
$a['next_text'] = '»'; //текст ссылки "»"
 
if ($max > 1) echo '';
}

Давайте теперь разберемся, что мы тут написали.

Нас интересуют строчки кода с 11 по 15.

Строка 11: ставим 1 (единицу), тогда будем видеть надпись Страница 1 из 2, если ставим 0 (ноль), тогда надписи про страницы не будет.
Строка 12-13: Оставил пока 1 (единицу), так как у меня пока страниц не много
Строка 14: Тут мы можем поставить любой символ, символизирующий нам, что можно перейти на страницу дальше
Строка 15: Тут мы можем поставить любой символ, символизирующий нам, что можно перейти на предыдущую страницу

Это были все настройки, который мы можем сделать. Теперь надо подключить данную функцию к нашему сайту. Если у Вас такой же шаблон, как и у меня, тогда открываем файл pagination.php. Он расположен по адресу: wp-content/themes/hueman/inc/

Открываем и видим следующее содержание:

1
2
3
4
5
6
7
8
9
10

В данном коде идет подключение плагина WP-PageNavi, но так как мы его отключили, то можно все там удалять, а вместо всего подключим нашу функцию. Получаем вот такой результат:

1
2
3

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

Если видите страницы, но они не похожи на те, что были ранее, то вам поможет код, который следует скопировать в файле style.css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.wp-pagenavi {
text-align : right;
font-weight : 600;
line-height : 20px;
float : none;
margin-right : -2px;
text-align : center;
}
.wp-pagenavi a, .wp-pagenavi span {
color : #aaa;
font-size : 16px;
padding : 7px 8px;
display : inline;
margin : 0 2px;
}
.wp-pagenavi span.pages {
font-size : 17px;
font-weight : 300;
display : block;
margin-bottom : 1em !important ;
border : none !important ;
}
.wp-pagenavi span.pages:before {
content : "\f15c";
font-family : FontAwesome;
margin-right : 6px;
}
.wp-pagenavi span.extend {
border : none !important ;
border-bottom : 3px solid transparent;
border-top : 1px solid transparent;
}
.wp-pagenavi a:hover, .wp-pagenavi a:active, .wp-pagenavi span.current {
color : #444;
}
.wp-pagenavi a {
color : #3b8dbd;
border : none;
border-bottom : 3px solid #ddd;
border-top : 1px solid #f1f1f1;
}
.wp-pagenavi a:hover, .wp-pagenavi a:active, .wp-pagenavi span.current {
background : none;
border : none;
border-bottom : 3px solid #3b8dbd;
border-top : 1px solid #f1f1f1;
}

Мы удалили ранее подключаемый плагин, поэтому надо подчистить за ним следы и удалить его остатки. Заходим в файл functions.php и удаляем следующий код:

1
2
3
4
5
6
7

array(
'name'                 => 'WP-PageNavi',
'slug'                 => 'wp-pagenavi',
'required'            => false,
'force_activation'     => false,
'force_deactivation'=> false,
),

После удаления данного кода, тема больше не будет запрашивать подключение данного плагина.

Подведем итог проделанной работы. Мы избавились от плагина WP-PageNavi, но при этом полностью оставили его функционал у нас на сайте.

Если у Вас остались вопросы по данной теме, пишите в комментариях. Буду помогать с их решением.

С уважением, Виктор