Пагинация WordPress в стиле Bootstrap используя WP-Pagenavi

Если вы используете WordPress и тему на основе Bootstrap 3, то вам нужно интегрировать это элегантный компонент с нумерацией страниц. Вы можете сделать это, написав свою функцию или с помощью плагина WP-PageNavi.

pagination

Лично мне очень нравится плагин WP-PageNavi и я его использую почти во всех проектах.

По умолчанию HTML  код пагинации после активации плагина имеет вид:

<div class="wp-pagenavi">
    <span class="pages">Page 1 of 5</span>
    <span class="current">1</span>
    <a class="page larger" href="/page/2/">2</a>
    <a class="page larger" href="/page/3/">3</a>
    <a class="page larger" href="/page/4/">4</a>
    <a class="page larger" href="/page/5/">5</a>
    <span class="extend">...</span>
    <a class="nextpostslink" href="/page/2/">»</a>
    <a class="last" href="/page/5/">Last »</a>
</div>

А в Bootstrap 3 этот же код должен выглядеть так:

<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>

В интернете я видел как переделать этот код используя jQuery, но я не люблю нагружать клиента и буду использовать php код на сервере.

add_filter( 'wp_pagenavi', function($html){
    // Remove div.
    $html = trim(preg_replace('/<\/?div([^>]*)?>/u', '', $html));
    // Wrap links with li.
    $html = preg_replace('/(<a[^>]*>[^<]*<\/a>)/u', '<li>$1</li>', $html);
    // Wrap links with span considering class name.
    $html = preg_replace_callback('/<span([^>]*?)>[^<]*<\/span>/u', function($matches){
        if( false !== strpos($matches[1], 'current') ){
            // This is current page.
            $class_name = 'active';
        }elseif( false !== strpos($matches[1], 'pages') ){
            // This is page number.
            $class_name = 'disabled';
        }elseif( false !== strpos($matches[1], 'extend') ){
            // This is ellipsis.
            $class_name = 'disabled';
        }else{
            // No class.
            $class_name = '';
        }
        return "<li class=\"{$class_name}\">{$matches[0]}</li>";
    }, $html);
    // Wrap with ul as you like.
    return <<<HTML
<div class="row text-center">
    <ul class="pagination">{$html}</ul>
</div>
HTML;
}, 10, 2 );

Если вы хотите, чтобы нумерация страниц отображалась посередине то замените 26 строку кода на:

    <ul class=»pagination pagination-centered»>{$html}</ul>

Более подробно о  том, как может выглядеть нумерация страниц в Bootstrap 3 можно прочитать тут

Leave a Comment