Альтернатива плагину WP-Pagenavi (Пагинация для WordPress)

С версии 4.1 в WordPress появилась встроенная функция, аналогичная WP-Pagenavi: the_posts_pagination().

Я заметил, что популярный плагин WP-Pagenavi может загружать сервер излишне. После анализа его кода я понял, что это не совсем так, но его всё же можно немного оптимизировать. Именно этому посту я и посвящаю своё время.

Хотя некоторые могут считать, что другие плагины без настройки в панели администратора неудобны, я нахожу WP-Pagenavi вполне простым в использовании. Достаточно настроить навигацию один раз и забыть о ней. Возможно, есть и другие, кто думает так же. Поэтому я решил отказаться от WP-Pagenavi и заменить его своей функцией. Я написал новую функцию, изучив код WP-Pagenavi и частично перенес её оттуда. Все CSS-классы WP-Pagenavi сохранены, что делает замену простой и удобной.

Замена WP-Pagenavi на собственную функцию

Чтобы заменить WP-Pagenavi, вам нужно скопировать следующую функцию в файл вашей темы functions.php. Также необходимо скопировать стили CSS из WP-Pagenavi в ваш файл стилей (обычно это style.css). Перенос стилей также полезен, так как у вас не будет необходимости подключать отдельный файл стилей, что означает меньше HTTP-запросов.

/**
 * Альтернатива WP-Pagenavi. Создаёт ссылки пагинации на страницах архива.
 *
 * @param array    $args      Аргументы функции.
 * @param WP_Query $wp_query  Объект WP_Query, на основе которого строится пагинация. По умолчанию - глобальная переменная $wp_query.
 *
 * @return string HTML код пагинации.
 */
function kama_pagenavi( $args = [], $wp_query = null ) {
    // Ниже следуют параметры по умолчанию
    $default = [
        'before'          => '',           // текст перед навигацией
        'after'           => '',           // текст после навигации
        'echo'            => true,         // возвращать или выводить результат
        'text_num_page'   => '',           // текст перед пагинацией
        'num_pages'       => 10,           // сколько ссылок показывать
        'step_link'       => 10,           // ссылки с шагом (если 10, то выведет: 1,2,3...10,20,30)
        'dotright_text'   => '…',          // текст "до"
        'dotright_text2'  => '…',          // текст "после"
        'back_text'       => '« назад',     // текст "перейти на предыдущую страницу"
        'next_text'       => 'вперёд »',    // текст "перейти на следующую страницу"
        'first_page_text' => '« в начало',  // текст "на первую страницу"
        'last_page_text'  => 'в конец »',   // текст "на последнюю страницу"
    ];

    // Совместимость со старыми версиями
    $fargs = func_get_args();
    if( $fargs && is_string( $fargs[0] ) ) {
        $default['before'] = $fargs[0] ?? '';
        $default['after']  = $fargs[1] ?? '';
        $default['echo']   = $fargs[2] ?? true;
        $args              = $fargs[3] ?? [];
        $wp_query = $GLOBALS['wp_query'];
    }

    if( !$wp_query ) {
        wp_reset_query();
        global $wp_query;
    }

    if( !$args ) {
        $args = [];
    }

    // Позволяет настроить параметры по умолчанию
    $default = apply_filters('kama_pagenavi_args', $default);
    $rg = (object) array_merge($default, $args);

    $paged = (int) ( $wp_query->get('paged') ?: 1 );
    $max_page = (int) $wp_query->max_num_pages;

    // Если навигация не нужна
    if( $max_page < 2 ) {
        return '';
    }

    // Логика отображения страниц
    // ...

    $html = $rg->before . '
' . implode('', $els) . '
' . $rg->after;

    if( $rg->echo ) {
        echo $html;
    }

    return $html;
}

Настройки функции

Параметры функции описаны в самом коде и совпадают с настройками WP-Pagenavi. Единственное отличие — вместо текста "на последнюю страницу" можно отображать номер последней страницы.

После установки функции и переноса CSS-стилей измените вызов wp_pagenavi в шаблоне на следующий:

Если у вас есть что-то типа этого в коде, то вам нужно заменить все wp_pagenavi на kama_pagenavi:

if(function_exists('wp_pagenavi')) {
    wp_pagenavi('', '');
}

CSS стили для кода

Как уже упоминалось, CSS-классы совпадают с WP-Pagenavi. Вот все правила CSS для вашего удобства:

.wp-pagenavi {
    margin: 2em auto;
    text-align: center;
}
.wp-pagenavi > * {
    display: inline-block;
    padding: .0em .5em;
    margin: .1em;
    border: 1px solid #93a8bc;
    border-radius: 3px;
    color: #465366;
}
.wp-pagenavi a,
.wp-pagenavi a:hover {
    text-decoration: none;
}
.wp-pagenavi a {
    background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
    border-color: #7d95ac;
}
.wp-pagenavi .pages { }
.wp-pagenavi .current {
    border-color: #465366;
    color: #465366;
}
.wp-pagenavi .extend {
    color: #465366;
}
.wp-pagenavi .first { }
.wp-pagenavi .last { }
.wp-pagenavi .prev {
    border-color: rgba(0,0,0,0);
}
.wp-pagenavi .next {
    border-color: rgba(0,0,0,0);
}

Что делать, если навигация отображается дважды

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

// Здесь навигацию нужно отобразить в первый раз
$navigation = kama_pagenavi('', '', false);
// Выводим переменную на экран
echo $navigation;

/* Здесь выводим посты - Loop */

// Здесь навигацию нужно отобразить во второй раз
echo $navigation;

Теперь вы знаете, как заменить WP-Pagenavi на собственную функцию пагинации. Надеюсь, этот пост оказался для вас полезным!