BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2016-09-27 / Вр:10:08 / просмотров: 4848

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

Постраничная навигация нужна для разбивки страниц и удобства перемещения по ним.
Можно воспользоваться плагином «WP-PageNavi», но зачем,  если есть более быстрый способ.

Итак, самый быстрый и простой способ создать постраничную навигацию для WordPress без плагина – это установить в файл «index.php» вашей темы вот такую функцию:

<?php echo paginate_links( $args ); ?>

В результате у вас сразу появится постраничная навигация по сайту, вот что-то подобное, как на одном из моих сайтов:

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

Встречал в интернете и другой способ.
Добавьте в файл «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 = 0; //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 class="navigation">';
if ($total == 1 && $max > 1) $pages = '<span class="pages">Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max > 1) echo '</div>';
}

Чтобы вывести функцию пагинации (постраничная навигация), добавьте вот этот код на страницу «index.php»:

<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>

Вот что-то подобное будет у вас:

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

Исходный код:

<div class="navigation">
<a class="prev page-numbers" href="/glavnaya/page/1/">«</a>
<a class="page-numbers" href="/glavnaya/page/1/">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="/glavnaya/page/3/">3</a>
<a class="page-numbers" href="/glavnaya/page/4/">4</a>
<a class="page-numbers" href="/glavnaya/page/5/">5</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="/glavnaya/page/10/">10</a>
<a class="next page-numbers" href="/glavnaya/page/3/">»</a>
</div>

Обратите внимание, что все необходимые стили для оформления есть. Открываем CSS файл и творим вид постраничной навигации по своему вкусу.
Всем пока!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

6 Ответов на комментарий - Постраничная навигация WordPress без плагина

  1. Сергей

    Получились только мелкие цифры 1 2 3 … 7 Далее → и
    1 2 3 4 … 7 » может еще что-то нужно добавить в стили. Подскажите пожалуйста, буду очень благодарен вам за помощь.

  2. Avatar photo Степан => автор блога
    .navigation {
        font-size: 36px;
    }
    

    Меняете только значение “36”

  3. Сергей

    Изменилось только размер цифр 1 2 3 4 … 7 » второго варианта, а ваш вариант так и остались маленькие цифры. Прямоугольной или квадратной аконтовки цифр так и нет нигде

  4. Avatar photo Степан => автор блога
    a.page-numbers {
        border: 1px solid;
        padding: 10px;
        margin: 3px;
        font-size: 15px;
        background-color: #ccc;
    }
    
  5. Сергей

    Огромное спасибо, сейчас все получилось!

  6. Avatar photo Степан => автор блога

    Пожалуйста, Сергей!

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716