WordPress. Навигация и пагинация
20.03.2019
Теги: CMS • Web-разработка • WordPress • Навигация • Функция
Навигация на странице записи
Функция the_post_navigation()
Выводит на экран HTML блок ссылок на следующую и предыдущую записи. Используется на странице отдельной записи. Эта функция объединяет в одну отдельные функции: next_post_link() и previous_post_link(). Функция создана для удобства, с ней вставлять блок навигации можно одной строкой.
the_post_navigation($args);
Массив $args может содержать ключи:
prev_text(строка). Текст, который будет показан, как анкор ссылки на предыдущую запись. По умолчанию:'%title'.next_text(строка). Текст, который будет показан, как анкор ссылки на следующую запись. По умолчанию:'%title'.screen_reader_text(строка). Заголовок блока навигации. По умолчанию:__('Post navigation').in_same_term(логический). Должно бытьtrue, когда нужно, чтобы ссылка была на записи таксономии, указанной в ключеtaxonomy. По умолчанию:false.excluded_terms(строка/массив). Идентификаторы элементов таксономии, который нужно исключить. В виде массива или в строке через запятую. По умолчанию: пустая строка.taxonomy(строка). Название таксономии, когдаin_same_termравноtrue. По умолчанию:'category'
Пример вызова функции:
the_post_navigation([ 'prev_text' => __('prev post: %title'), 'next_text' => __('next post: %title'), 'in_same_term' => true, 'taxonomy' => __('flowers'), // ссылки на записи с тегом flowers 'screen_reader_text' => __('Post navigation'), ]);
Функция next_post_link()
Выводит ссылку на следующую по дате запись. Используется на странице отдельной записи.
Функция previous_post_link()
Выводит ссылку на предыдущую по дате запись. Используется на странице отдельной записи.
Навигация для списка записей
Функция the_posts_navigation()
Выводит ссылки на следующую и предыдущую страницы постов. Используется на страницах списка записей.
the_posts_navigation($args);
Массив $args содержит параметры, с помощью которых можно изменить анкоры ссылок: «Старые записи» и «Новые записи». По умолчанию параметры выглядят так:
$args = array( 'prev_text' => __( 'Older posts' ), 'next_text' => __( 'Newer posts' ), 'screen_reader_text' => __( 'Posts navigation' ), );
<nav class="navigation posts-navigation" role="navigation"> <h2 class="screen-reader-text">Навигация</h2> <div class="nav-links"> <div class="nav-previous"> <a href="http://wptest.ru/page/3/">Предыдущие записи</a> </div> <div class="nav-next"> <a href="http://wptest.ru/">Следующие записи</a> </div> </div> </nav>
Функция next_posts_link()
Выводит ссылку на следующий список записей. Используется на страницах списка записей.
Функция previous_posts_link()
Выводит ссылку на предыдущий список записей. Используется на страницах списка записей.
Постраничная навигация
Функция the_posts_pagination()
Выводит на экран ссылки пагинации на следующие и предыдущие наборы постов. Используется на страницах списка записей.
the_posts_pagination($args);
Массив $args может содержать элементы:
$args = array( 'show_all' => false, // показаны все страницы участвующие в пагинации 'end_size' => 1, // количество страниц на концах 'mid_size' => 1, // количество страниц вокруг текущей 'prev_next' => true, // выводить ли боковые ссылки «предыдущая/следующая» 'prev_text' => __('« Previous'), 'next_text' => __('Next »'), 'add_args' => false, // массив переменных запроса, которые нужно добавить к ссылкам 'add_fragment' => '', // текст, который надо добавить ко всем ссылкам 'screen_reader_text' => __( 'Posts navigation' ), );
<nav class="navigation pagination" role="navigation"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><a class="prev page-numbers" href="http://www.server.com/">Назад</a> <a class="page-numbers" href="http://www.server.com/">1</a> <span aria-current="page" class="page-numbers current">2</span> <!-- текущая страница --> <a class="page-numbers" href="http://www.server.com/page/3/">3</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="http://www.server.com/page/11/">11</a> <a class="next page-numbers" href="http://www.server.com/page/3/">Далее</a> </div> </nav>
Пример постраничной навигации
Допустим, при верстке шаблона был использован фреймворк Bootstrap 4. Чтобы не создавать стили для постраничной навигации с нуля, нам нужно задать свой шаблон, с классами bootstrap. Этот шаблон выглядит так:
<nav aria-label="Постраничная навигация"> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link">Предыдущая</span> </li> <li class="page-item"> <a class="page-link" href="#">1</a> </li> <li class="page-item active"> <span class="page-link">2</span> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#">Следующая</a> </li> </ul> </nav>
Для начала получаем массив ссылок постраничной навигации:
$items = paginate_links(['type' => 'array']); print_r($items);
Array
(
[0] => <span aria-current='page' class='page-numbers current'>1</span>
[1] => <a class='page-numbers' href='http://www.server.com/page/2/'>2</a>
[2] => <a class='page-numbers' href='http://www.server.com/page/3/'>3</a>
[3] => <span class="page-numbers dots">…</span>
[4] => <a class='page-numbers' href='http://www.server.com/page/11/'>11</a>
[5] => <a class="next page-numbers" href="http://www.server.com/page/2/">Далее →</a>
)
И проходим по нему циклом, извлекая URL и текст ссылок:
$items = paginate_links(['type' => 'array']); $links = []; foreach ($items as $item) { $url = $txt = $type = ''; if (preg_match('~href=("|\')([^"\']+)\1>([^<]+)</a>~', $item, $match)) { $url = $match[2]; $txt = $match[3]; $type = 'link'; } if (preg_match('~page-numbers current("|\')>([^<]+)</span>~', $item, $match)) { $txt = $match[2]; $type = 'curr'; } if (preg_match('~page-numbers dots("|\')>([^<]+)</span>~', $item, $match)) { $txt = $match[2]; $type = 'dots'; } $links[] = ['type' => $type, 'url' => $url, 'txt' => $txt]; } print_r($links);
Array
(
[0] => Array
(
[type] => curr
[url] =>
[txt] => 1
)
[1] => Array
(
[type] => link
[url] => http://www.server.com/page/2/
[txt] => 2
)
[2] => Array
(
[type] => link
[url] => http://www.server.com/page/3/
[txt] => 3
)
[3] => Array
(
[type] => dots
[url] =>
[txt] => …
)
[4] => Array
(
[type] => link
[url] => http://www.server.com/page/11/
[txt] => 11
)
[5] => Array
(
[type] => link
[url] => http://www.server.com/page/2/
[txt] => Далее →
)
)
А теперь выводим эти ссылки так, чтобы применились стили bootstrap:
<?php if (!empty($links)): ?> <nav aria-label="Постраничная навигация"> <ul class="pagination"> <?php foreach ($links as $link): ?> <?php if ($link['type'] == 'link'): ?> <li class="page-item"> <a class="page-link" href="<?= $link['url']; ?>"><?= $link['txt']; ?></a> </li> <?php elseif ($link['type'] == 'curr'): ?> <li class="page-item active"> <span class="page-link"><?= $link['txt']; ?></span> </li> <?php elseif ($link['type'] == 'dots'): ?> <li class="page-item disabled"> <span class="page-link"><?= $link['txt']; ?></span> </li> <?php endif; ?> <?php endforeach; ?> </ul> </nav> <?php endif; ?>
В результате получим такой html-код:
<nav aria-label="Постраничная навигация"> <ul class="pagination"> <li class="page-item active"> <span class="page-link">1</span> </li> <li class="page-item"> <a class="page-link" href="http://www.server.com/page/2/">2</a> </li> <li class="page-item"> <a class="page-link" href="http://www.server.com/page/3/">3</a> </li> <li class="page-item disabled"> <span class="page-link">…</span> </li> <li class="page-item"> <a class="page-link" href="http://www.server.com/page/11/">11</a> </li> <li class="page-item"> <a class="page-link" href="http://www.server.com/page/2/">Далее →</a> </li> </ul> </nav>
Можно оформить этот код в виде функции, для многократного использования в темах:
/* * Функция для вывода постраничной навигации с использованием классов Bootstrap 4 */ function echo_posts_pagination($echo = true) { $items = paginate_links(['type' => 'array']); if (empty($items)) { return null; } $links = []; foreach ($items as $item) { $url = $txt = $type = ''; if (preg_match('~href=("|\')([^"\']+)\1>([^<]+)</a>~', $item, $match)) { $url = $match[2]; $txt = $match[3]; $type = 'link'; } if (preg_match('~page-numbers current("|\')>([^<]+)</span>~', $item, $match)) { $txt = $match[2]; $type = 'curr'; } if (preg_match('~page-numbers dots("|\')>([^<]+)</span>~', $item, $match)) { $txt = $match[2]; $type = 'dots'; } $links[] = ['type' => $type, 'url' => $url, 'txt' => $txt]; } if (empty($links)) { return null; } $html = '<nav aria-label="Постраничная навигация">' . "\n"; $html .= ' <ul class="pagination">' . "\n"; foreach ($links as $link) { if ($link['type'] == 'link') { $html .= ' <li class="page-item">'; $html .= '<a class="page-link" href="'.$link['url'].'">'.$link['txt'].'</a>'; $html .= '</li>' . "\n"; } elseif ($link['type'] == 'curr') { $html .= ' <li class="page-item active">'; $html .= '<span class="page-link">'.$link['txt'].'</span>'; $html .= '</li>' . "\n"; } elseif ($link['type'] == 'dots') { $html .= ' <li class="page-item disabled">'; $html .= '<span class="page-link">'.$link['txt'].'</span>'; $html .= '</li>' . "\n"; } } $html .= ' </ul>' . "\n"; $html .= '</nav>' . "\n"; if ($echo) { echo $html; return null; } return $html; }
<nav aria-label="Постраничная навигация"> <ul class="pagination"> <li class="page-item active"><span class="page-link">1</span></li> <li class="page-item"><a class="page-link" href="http://www.server.com/page/2/">2</a></li> <li class="page-item"><a class="page-link" href="http://www.server.com/page/3/">3</a></li> <li class="page-item disabled"><span class="page-link">…</span></li> <li class="page-item"><a class="page-link" href="http://www.server.com/page/11/">11</a></li> <li class="page-item"><a class="page-link" href="http://www.server.com/page/2/">Далее →</a></li> </ul> </nav>
Поиск: CMS • PHP • Web-разработка • WordPress • Навигация • Функция • Пагинация • the_post_navigation • the_posts_navigation • the_posts_pagination