Появятся несколько новых функций для упрощения навигации в темах: the_post_navigation , the_posts_navigation и функция пагинации the_posts_pagination .
Для постраничной навигации многие темы для WordPress внедряют поддержку таких плагинов, как , а начиная с темы Twenty Fourteen, некоторые авторы последовали примеру стандартной темы и стали выполнять пагинацию с помощью встроенной функции ядра paginate_links .
Использование этой функции часто требует и иногда включает логику для работы с постоянными ссылками модуля WP_Rewrite, данными о запросе WP_Query и прочее. Начиная с WordPress версии 4.1 разработчики ядра обернули эту логику в одну простую функцию.
Функция the_posts_pagination() вставляет блок пагинации в тему WordPress:
В качестве единственного параметра функция the_posts_pagination() принимает массив, который передается в функцию paginate_links() . Это значит, что весь функционал который мы ранее выполняли с помощью paginate_links() , также легко реализовать и с помощью новой упрощенной функции the_posts_pagination() .
Например, можно добавить символ № перед каждым номером страницы:
The_posts_pagination(array("before_page_number" => "№",));
По умолчанию the_posts_pagination() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:
Например:
The_posts_pagination(array("end_size" => 2, "mid_size" => 2,));
Данный код будет отображать первую, вторую, предпоследнюю и последнюю страницы, независимо от текущей. А вокруг текущей страницы будет по две страницы с каждой стороны. На примере темы это будет выглядеть следующим образом:
Функция the_posts_pagination() добавляет ряд дополнительных классов к разметке, с помощью которых можно изменять внешний вид каждого элемента пагинации.
Функция the_posts_navigation() является менее привлекательной альтернативой функции the_posts_pagination() . Она выводит лишь ссылки на следующую и предыдущую страницы относительно текущей.
До WordPress 4.1 данные ссылки можно получить с помощью функций get_next_posts_link() и get_previous_posts_link() , которыми на сегодняшний день пользуются большинство авторов тем для WordPress. Начиная с версии 4.1 авторы могут существенно упростить вывод подобных ссылок:
С помощью ключей prev_text и next_text передаваемого массива, можно изменить текст ссылок. По умолчанию используется «Старые записи» и «Новые записи», что подойдет для большинства случаев.
Функцию the_post_navigation() можно использовать в шаблоне вывода одной записи. Данная функция отображает ссылки на следующую и предыдущую записи относительно текущей. Она также хорошо подходит для использования в шаблонах прикрепленных файлов.
Аргументами prev_text и next_text можно изменить текст, куда строкой %title можно вставить заголовок следующей или предыдущей статьи:
The_post_navigation(array("next_text" => "Следующая запись: %title", "prev_text" => "Предыдущая запись: %title",));
Данные встроенные функции WordPress позволяют существенно уменьшить количество кода в темах, а значения их аргументов по умолчанию подойдут для большинства тем, что позволят их использовать без каких-либо параметров.
Следует отметить, что все три функции выводят результат сразу на экран. Если вы хотите записать результат в переменную, сделать это можно добавив префикс get_ к любой из них, например get_the_posts_pagination() .
Напоминаем, что WordPress версии 4.1 выйдет в декабре 2014 года вместе с новой стандартной темой Twenty Fifteen.
Постраничная навигация – это то, на что каждый блоггер должен обращать особое внимание. Она заключается в отображении записей WordPress на постраничной основе. Обычно записи отображаются в иерархическом порядке, и, несмотря на то, что у вас есть опция выбора, такая, как «Старые записи» и «Новые записи», у вас отсутствует опция отображения записей на постраничной основе с пронумерованными страницами.
Используя постраничную навигацию, пользователь может сразу переходить на страницу 6 или 8, не переходя последовательно со страницы на страницу. Такая навигация также полезна для SEO, поисковики предпочитают такую навигацию, она позволяет ботам легко переходить по записям на страницах сайта. С помощью бесплатных плагинов WordPress, приведённых в этой статье, вы можете установить постраничную навигацию на ваш веб-сайт.
1 – WP Page Navi
WP Page Navi – популярный плагин, который позволит посетителям вашего сайта с лёгкостью переходить со страницы на страницу. Он заменит опцию «Старые записи»/«Новые записи» на навигацию с пронумерованными страницами. Плагин не требует больших ресурсов и не влияет на скорость загрузки страниц.
Этот плагин совместим с большинством существующих тем.
Этот плагин является неплохим средством для добавления постраничной навигации на ваш сайт WordPress, с его помощью вы можете добавить разбиение на страницы с номерами, отображающее номера начальной страницы, средней страницы и конечной страницы.
С его помощью вы можете даже добавить навигацию по комментариям к записям, это приведёт к облегчению загрузки страницы.
Основные моменты и особенности:
Имеется 6 таблиц стилей для соответствия вашему сайту, а также поддержка двух языков.
Основные моменты и особенности:
Page Links Plus – плагин, который выполняет функцию добавления навигации в запись. Бывают случаи, когда ваша запись становится такой большой, что вам надо разделить её на части. В таких случаях вам поможет плагин Page Links Plus, который разобьёт вашу запись на страницы, показывая связь между ними, позволяющую посмотреть всю запись целиком.
В плагине имеется множество настроек для того, чтобы получить желаемые результаты для вашей записи.
Основные моменты и особенности:
Alphabetic Pagination будет нумеровать записи и страницы вашего сайта в алфавитном порядке. Если вы занимаетесь продажами товаров на вашем сайте WordPress, то этот плагин будет творить чудеса, он будет нумеровать все ваши товары в алфавитном порядке.
Он может быть использован в любом месте вашего сайта с помощью шорткода.
Основные моменты и особенности:
Плагин Gallery Pagination for WordPress поможет вам в навигации по галереям изображений вашего WordPress сайта. Он будет отображать все изображения в галерее, что поможет пользователю перейти непосредственно к любому изображению без необходимости прокрутки изображений одного за другим.
Поддержка CDN поможет вам сделать галереи изображений дружественными для SEO. Имеется также кэширование для того, чтобы увеличить скорость загрузки страницы, а также Ajax, чтобы делать изменения без необходимости перезагрузки страницу.
Основные моменты и особенности:
Ajax поможет вам перейти к разделу без необходимости перезагрузки всей страницы.
Основные моменты и особенности:
Основные моменты и особенности:
Все основные браузеры поддерживают этот плагин, так что посетители вашего сайта не будут иметь проблем с просмотром контента при использовании для навигации данного плагина.
Основные моменты и особенности:
Привет всем!
Продолжаю писать статьи, посвященные навигации сайта на движке WordPress.
И в данном материале я покажу, как делается постраничная навигация без плагинов и с помощью всем известного WP-PageNavi. Как и в случае с , я покажу реализацию несколькими способами, чтобы вы выбрали наиболее подходящий для вас. Да и бывают случаи, когда какой-то способ не работает у кого-то. Поэтому, будет некая подстраховка.
Материал вышел очень объемный и, пожалуй, самый исчерпывающий в сети.
Постраничная навигация (пагинация) - это разбиение информации на страницы. Если взять массу сайтов на Wordpres, то данный феномен ярко выражен в видео списка номеров страниц внизу каждой страницы с анонсами. На моем блоге данная функция имеет следующий вид.
Дизайн может быть разный. Но суть ее одна и та же - разбиение информации на страницы. Как вы знаете, по умолчанию, на главной странице сайта выводятся анонсы записей, которых может быть определенное количество (зависит от выставленных настроек в пункте "Написание").
Если мы не будем разбивать их количество, то они будут выводиться на одной странице. А это не есть хорошо, так как неудобно будет пользоваться сайтом и главная страница будет долго грузиться, ведь с течением времени анонсов будет громаднейшее количество.
Как правило, сейчас в современных шаблонах Wodpress постраничная навигация уже встроена. Но имеется вариант, когда ее и нет. Тогда придется реализовать. Вместо нее может быть разбиение анонсов на страницы в виде ссылок на предыдущие и следующие записи. Это ярко выражено в стандартных шаблонах.
Такой вариант также неудобен, так как при заходе на 3 страницы назад мы не сможем в один шаг вернуться на изначальную страницу. Придется 3 раза кликать на предыдущие записи или на следующие. Постраничная навигация же позволяет более гибко управляться с данным моментом.
В общем, давайте перейдем к ее реализации и первым шагом встроим ее в шаблон без плагина. Данный способ я разобрал в видео-уроке. Рекомендую сначала его посмотреть, а потом уже проштудировать текстовую версию инструкции.
Сейчас я покажу способ, после которого у вас будет точно такая же постраничная навигация WordPress, как и у меня. Делается все очень просто. Потребуется 2 части кода, которые нужно будет разместить в файлах шаблона, а затем прописать стили, чтобы задать оформление. Приступим!
Вот первая часть кода. Ее необходимо разместить в файле 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"] = 1; //сколько ссылок показывать слева и справа от текущей $a["end_size"] = 1; //сколько ссылок показывать в начале и в конце $a["prev_text"] = ""; //текст ссылки "Предыдущая страница" $a["next_text"] = ""; //текст ссылки "Следующая страница" if ($max > 1) echo ""; }
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" ] = 1 ; //сколько ссылок показывать слева и справа от текущей $a [ "end_size" ] = 1 ; //сколько ссылок показывать в начале и в конце $a [ "prev_text" ] = "" ; //текст ссылки "Предыдущая страница" $a [ "next_text" ] = "" ; //текст ссылки "Следующая страница" if ($max > 1 ) echo " if ($total == 1 && $max > 1 ) $pages = "Страница " . $current . " из " . $max . "" . "\r\n" ; echo $pages . paginate_links ($a ) ; if ($max > 1 ) echo "" ; |
Я разместил код в самое начало файла после открывающего тега
В данном коде мы можем отрегулировать некоторые параметры:
wp_corenavi () ; |
Так как постраничная навигация должна отображаться везде, где выводится список анонсов,то необходиммо данный код разместить во всех файлах, где это происходит:
Кстати, в некоторых шаблонах вывод страниц рубрик и архивов может осуществляться одним файлом. У меня за это отвечает файл archive.php.
Если в вашем шаблоне отсутствует какая либо навигация для разбиения анонсов на страницы, то второй код мы размещаем после вывода контента. Если же у вас имеются предыдущие и следующие ссылки, что более вероятно, то такой вариант легче осуществим, так как вам просто нужно будет их заменить на предоставленный код выше.
Как правило, стандартная навигация в виде предыдущих и след. ссылок выводится с помощью подобного кода.
< div class = "nav-previous" > ← Older posts" , "twentyten" ) ) ; ?> < / div > < div class = "nav-next" > "Newer posts " , "twentyten" ) ) ; ?> < / div > |
У каждого данный код может быть разным, но его основная начинка будет одинаковой. Вам нужно будет найти код, который будет содержать код с названиями next_posts_link и previous_posts_link.
Когда найдете, то смело удаляете данное содержимое из файла и на его место копируете нужный код, выводящий постраничную навигацию.
Таким образом нужно заменить стандартную навигацию на постраничную во всех файлах, где имеется вывод анонсов. Названия файлов я давал выше.
Кстати, если у вас имеются проблемы с данным процессом, то можете обратиться ко мне за помощью в комментариях. Постараюсь помочь.
/* NAVIGATION */.navigation { float: left; width: auto; margin-left: 216px; margin-top: -2px; font-size: 16px; } .navigation > a { float: left; width: 32px; font-weight: 700; text-align: center; color: #637b93; text-decoration: none; margin-left: 1px; padding-top: 7px; } .navigation > .current { float: left; font-weight: 700; width: 29px; text-align: center; color: #c4c8cc; margin-left: 5px; padding-top: 7px; } .navigation > .prev { float: left; width: 32px; height: 34px; background: url("images/bow_left.png") no-repeat; margin-left: 0; } .navigation > .next { float: left; width: 34px; height: 34px; background: url("images/bow_right.png") no-repeat; margin-left: 14px; } .navigation > .dots { float: left; font-size: 14px; font-weight: 700; width: 32px; text-align: center; color: #c4c8cc; padding-top: 7px; }
/* NAVIGATION */ Navigation { float : left ; width : auto ; margin-left : 216px ; margin-top : -2px ; font-size : 16px ; Navigation > a { float : left ; width : 32px ; font-weight : 700 ; text-align : center ; color : #637b93 ; text-decoration : none ; margin-left : 1px ; padding-top : 7px ; Navigation > .current { float : left ; font-weight : 700 ; width : 29px ; text-align : center ; color : #c4c8cc ; margin-left : 5px ; padding-top : 7px ; Navigation > .prev { float : left ; width : 32px ; height : 34px ; background : url ("images/bow_left.png" ) no-repeat ; margin-left : 0 ; Navigation > .next { float : left ; width : 34px ; height : 34px ; background : url ("images/bow_right.png" ) no-repeat ; margin-left : 14px ; Navigation > .dots { float : left ; font-size : 14px ; font-weight : 700 ; width : 32px ; text-align : center ; color : #c4c8cc ; padding-top : 7px ; |
Также необходимо загрузить картинки стрелок перемещения вперед и назад на хостинг в папку images шаблона оформления. . Для загрузки можете пользоваться стандартным файловым менеджером хостинг провайдера. Я же .
Когда разместили коды в файлах functions.php, во всех файлах, выводящих страницы с анонсами и прописали стили, можем проверить работоспособность навигации. У меня все работает и в стандартном шаблоне она имеет следующий вид.
Способ без плагина мы разобрали. Уверен на все 100%, если все сделали, как описал выше, то у вас должно все работать на ура. Был еще второй вариант без плагина, но просмотрев его я понял, что по сути это тот же самый вариант, только немного измененный. Поэтому, я перехожу к способу реализации постраничной навигации с помощью плагина.
Для начала скачиваете плагин с официальной страницы и устанавливаете его на сайт.
После установки плагина нужно будет также разместить код, который выведет навигацию внизу страницы.
Теперь плагин будет выполнять свою задачу и номера страниц будут иметь следующее оформление.
С одной стороны оформление не ахти, а с другой очень даже ничего, так как не мозолит глаза. Пользователи любят простоту! Поэтому, можно все так и оставить. Если же хотите чего-то более красочного, то сейчас мы с вами рассмотрим некоторые варианты. А пока мы обсудим такую вещь, как настройка wp pagenavi. Настройки имеются и о них стоит поговорить.
Касаемо первого пункта настроек "Шаблоны списка страниц", то в нем ничего менять не нужно. Нас все устраивает. Мы двигаемся к пункту "Настройки списка страниц".
Отмечу, что со всеми параметрами в этом пункте нужно экспериментировать, чтобы найти оптимальное значение для себя. Я лишь объясню вкратце, за что отвечает каждый параметр.
Это все настройки, которые вам нужно выставить в соответствии со своими нуждами. Тут уже каждый по себя отрегулирует.
Самый простой вариант - установка дополнительного плагина, который имеет уже заготовленные стили, а также дает возможность настроить каждый параметр индивидуально. Называется плагин .
После его установки в админ-панели WordPress появляется новый пункт.
После перехода в него сразу можем выбрать уже имеющиеся заготовки дизайна.
Если же хотим настроим стили индивидуально, то в первом пункте настроек "Select Stylesheet" выбираем вариант "Custom" и настраиваем параметры всех элементов (границ и их цветов, цветов и размеров шрифтов, цвета ссылок при наведении курсора мышки и так далее).
Переведу вам все параметры.
Значения цветов вы можете искать в интернете или же в программе Photoshop, когда выбираете нужный цвет для заливки.
Вариант с плагином неплохой, но я всегда говорю, что нужно избавляться от лишних плагинов и в данном случае он таковым и является.
Второй вариант осуществляется с помощью редактирования файла стилей, который расположен в папке с плагином Wp-pagenavi на хостинге - pagenavi-css.css.
Данный файл подключается, когда в настройках плагина активна настройка "Использовать стиль pagenavi-css.css". Поэтому, если мы его отредактируем, то после обновления плагина, все стили заменятся на стандартные. Чтобы каждый раз на заменять данный файл и не прописывать стили заново я рекомендую сделать следующую вещь:
Таким образом эти стили будут работать независимо от плагина. И при обновлении они не будут сбиваться. Это, пожалуй, самый лучший вариант оформления навигации в данном плагине, который я сам бы сделал. Но, к счастью, я использую вариант без плагина, что и вам совету.
Итак, друзья. Материал получится очень хорошим, как на меня. Что вы думаете на этот счет? Надеюсь, что вы все сделали. Если что-то не получается, то в комментариях постараюсь помочь. Пишите, не бойтесь! Я также когда-то очень мучился и мне удалось разобраться.
На данной ноте уже хочу поскорей закончить этот пост, так как сил он отнял уйму. Это я и сделаю. Попрощаюсь и пойду отдыхать, а затем уткнусь в написание нового контента.
С уважением, Константин Хмелев!
Каждый сайт — это по сути целая система навигации и ссылок , по которым перемещаются роботы и посетители. Данная система может обладать разной степенью сложности. Как правило, в ее состав входит главное меню, содержащее в себе ссылки на все основные разделы и статичные страницы, дополнительные меню, (упорядоченный и структурированный список из ссылок на все страницы и разделы). Кроме того, в состав системы навигации интернет-ресурса может входить постраничная навигация .
Она представляет собой набор кнопок со встроенными в них гиперссылками, каждая из которых ведет на определенную страницу. При этом речь идет не о статичных страницах и страницах с постами, а о страницах, на которых размещаются анонсы постов (формат блога).
Что касается настроек, то здесь их не слишком много. Для начала следует указать названия первой и последней, а также следующей и предыдущей страниц. Эти кнопки будут показаны независимо от того, на какой странице вы находитесь в данный момент. Чтобы кнопки от WP Page Navi появились на блоге, необходимо удалить код стандартной навигации в шаблоне, как я уже писал наиболее вероятно, что он будет находится в шаблоне archive.php или content.php. И вместо кода вставить:
Обычно он начинается с такой строчки —
Все вопросы можно задавать в комментариях, если кому-то не ясно по тому или другому пункту. Мы всегда ответим на все вопросы.
