Навигация по записям
Krepysh-ufa.ru

Строительный портал

Навигация по записям

WP-PageNavi постраничная навигация WordPress

Всем привет! Если читатель вашего блога может переходить по страницам только следующим путем: Назад – Вперед или по таким ссылкам Предыдущее – Новые сообщения , тогда у вас стоит стандартная, не удобная навигация. Если у вас сообщений за сотню или больше , то это представляет для посетителя большие неудобства. Вам её надо поменять на более удобную постраничную навигацию, чтобы пользователю было удобно двигаться произвольно, то есть, он смог попасть даже на последние страницы вашего сайта.

Современная, красивая постраничная навигация для блога WordPress организуется с помощью популярного плагина WP-PageNavi. На официальном сайте wordpress.org данный модуль занимает четвертое место по скачиванию. На момент написания этого поста, его скачали уже 4065194 раз. Как устроена удобная навигация по страницам Вы можете посмотреть у меня на блоге. Если готовы к переменам на своем веб-ресурсе, тогда приступим.

Постраничная навигация WordPress с помощью плагина WP-PageNavi

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

Как установить и настроить плагин WP-PageNavi

Установить данный модуль можно стандартным путём, через раздел “Плагины” – “Добавить новый”, в поле для поиска плагинов вводим его название и нажимаем кнопку искать. Затем, после успешной установки незабываем активировать плагин. В разделе “Параметры” у вас появится пункт Список страниц вот и по ней кликаем. Откроется страница “Настройки плагина”, где вам надо всего лишь внести кое какие изменения – ваш текст написания и так далее. Плагин поддерживает русский язык, поэтому в настройках сложностей нет (есть подсказки):

Настройки плагина WP-PageNavi

Настройки плагина WP-PageNavi

Как видно из скриншота, Вы можете заменить текст на свой или оставить всё как есть. Отметьте -Использовать стиль pagenavi-css.css или нет. Если вам нужно настроить CSS стиль WP-PageNavi сделать это можно в файле плагина. Надо для этого перейдите в раздел “Плагины” – “Редактор”, выберете в качестве плагина для изменения WP-PageNavi и найдите в открывшемся списке файл wp-pagenavi/pagenavi-css.css. По настройкам все понятно. Следующий шаг такой.

В вашей теме в файлах index.php, archive.php и search.php , необходимо найти призывы к next_posts_link () и previous_posts_link () и заменить их. В теме TwentyTen, это выглядит так:

Может в других темах выглядеть и так:

Ищите, что то похожее и вам надо заменить эти строчки этим:

Все. Готово. Теперь будет плагин работать. Если вам стиль навигации не подходит под дизайн вашего блога и Вы хотите придать особенный вид для неё, тогда вам надо читать статью далее.

Плагин WP PageNavi Style добавляет больше цветовых вариантов для Wp-PageNavi

Плагин WP PageNavi Style

Да, Вы не ошиблись, для того, чтобы можно было воспользоваться готовыми стилями для постраничной навигации WP-PageNavi, надо установить дополнительный плагин WP PageNavi Style от этого же разработчика. Установите таким же образом этот модуль, активируйте его и у вас появится пункт WP PageNavi Style в боковой колонке админки. Нажмите её для настроек и выбора стиля для вашей новой навигации:

Настройка плагина WP PageNavi Style

Как видно из скриншота, можно выбирать различные красивые панельки и расположение её. Набор стилей плагина:

Набор стилей плагина Плагин WP PageNavi Style

Какой большой выбор. Если не хотите использовать готовые стили, установите – Custom и настройте стиль по своему:

Custom и настройте стиль по своему

Все. Еще один момент. Если Вы готовы установить постраничную навигацию в ручную, то есть без плагина, тогда читаем далее.

Как установить постраничную навигацию WordPress без плагина

Этот код настолько распространен, что на какой блог ставить ссылку не известно. Поэтому обойдемся без неё.

Откройте файл “Функции темы” (functions.php), прокрутите страницу вниз и перед закрывающим тегом ?> вставьте такой код (не забудьте на всякий случай сделать резервную копию, если пойдет, что не так:

Затем, меняем стандартный код вывода во всех файлах, где есть навигация – index.php, category.php, archive.php и так далее. Меняем вместо:

Далее, надо добавить стиль css. Откройте файл вашего шаблона “Таблица стилей” (style.css) и в самый низ вставьте етот код:

Готово. Если вам не очень понятно, как сделать навигацию в ручную, лучше воспользуйтесь плагином. А у меня на этом все. До встречи.

Делаем навигацию в WordPress без использования плагина

Навигация в WordPress — это замечательный способ показать, пользователям Вашего блога или сайта, общее количество материала, который они могут прочитать и изучить на вашем ресурсе. В сегодняшнем практикуме рассмотрим как дополнить стандартные функции навигации WordPress и создадим новую функцию навигации по записям внутри категорий.

Корректируем стандарты

По умолчанию в WordPress на странице самой записи ( single.php ) присутствуют ссылки Следующая страница и Предыдущая страница , они ведут на записи сортированные по дате и не учитывают разбивку на рубрики и метки. В шаблоне темы они обычно выводятся в блоке следующим образом:

Вроде бы отличное решение, все круто, но хочется чтобы пользователь по этим ссылкам переходил только в пределах определенной рубрики. Преимуществ у этого желания реально масса и чтобы его удовлетворить нам нужно чуточку подкорректировать Вашу тему или заменить код Выше на новый приведенный:

Используя такой простой код, Вы выведете внизу или вверху статьи навигационный блок ссылок внутри категории. Вместо ссылок «Вперед» и «Назад» будут отображаться названия статей.

Пишем функцию

С навигацией на странице записи разобрались, а у нас же еще есть главная страница, страница архивов и страница категорий! Что с ними делать? На них выводится определенное количество записей (задаем в панели управления — настройки — чтение) и под ними ссылки Вперед и Назад ведущие на предыдущие или следующие записи этой рубрики. Именно с этими ссылками нам предстоит разобраться, а точнее сделать их эффективными, то есть разбить на страницы, пронумеровать их и вывести в нужном месте категории, рубрики или на главной странице ( index.php, archive.php, category.php ).

Читать еще:  Отделка дома из бруса

Поехали, открываем файл functions.php темы которую Вы используете и в самый конец вставляете следующую функцию (пошаговое объяснение следует далее):

Для вызова функции в шаблоне нужно пользоваться следующим кодом:

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

Первый параметр это количество страниц, используется только если в Вашем шаблоне организован пользовательский цикл (как конкретней его использовать я напишу чуть позже).

Второй параметр устанавливает количество ссылок для вывода на экран. Диапазон указывает скрипту, как много ссылок до и после текущей страницы надо выводить перед выводом стрелок (ссылок на следующую страницу и на последнюю страницу).

Например, при использовании диапазона по умолчанию (2), если вы находитесь на первой странице, скрипт выводит ссылки на две страницы 2 и 3 , а если Вы перешли к примеру на 6 страничку то скрипт будет отображать две ссылки назад 4 и 5, две ссылки вперед 7 и 8, одинарные стрелочки (на предыдущую и следующую страницу) и двойные стрелки (на первую страницу и на последнюю).

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

Следующим шагом открываем доступ к глобальной переменной $paged . В WordPress эта переменная используется для хранения номера текущей отображаемой страницы, если она пустая, то мы присваиваем ей значение 1. Страница, которая в текущий момент выводится на экран не имеет ссылки и выделяется другим цветом.

Теперь мы знаем, какую страницу сейчас смотрит посетитель, но нам нужно также знать, сколько страниц всего есть в блоге. Мы предполагаем, что не используем пользовательский цикл, и что переменная $pages не была установлена при вызове скрипта. В этом случае мы можем использовать еще одну глобальную переменную для получения количества страниц:

Помимо наших логических и арифметических действий, нам также понадобилась функция WordPress get_pagenum_link() , которая возвращает URL страницы WordPress, соответствующей переданному номеру: get_pagenum_link(2) вернет ссылку на страницу 2 блога.

Далее определяем какие ссылки нужно выводить для нумерации страниц, на основе нескольких условных выражений if и циклов.

HTML & CSS

Функция формирует элементарный HTML код:

Придадим ему стилей:

Пользовательские циклы

А помните в самом начале когда мы только начали разбирать функцию планировалось рассмотреть ее применение в пользовательских циклах, возможно если Вы их используете для вывода своих записей, то Вам пригодится следующая информация: «Результат пользовательского цикла не сохраняется в глобальной переменной $wp_query , которую мы использовали для получения количества страниц»

Поэтому в таком случае нужно использовать функцию kriesi_pagination() с указанием первого аргумента.

Допустим Вы используете на своем сайте простой пользовательский цикл

и после него Вы можете тут же вызвать нашу функцию используя следующий код:

Вот и все, можете посетить сайт автора этой волшебной функции: www.kriesi.at.

Заключение

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

Желаю Вам простого внедрения Вашей новой функции и навыков!

Ссылки на предыдущие / следующие WordPress записи: функции next_post_link, previous_post_link и др.

  • format (строка) — определяет общий формат генерируемой ссылки, где с помощью переменной %link можете задавать какой-то текст до и после нее. По умолчанию это просто линк со стрелочкой: ‘%link »’
  • link (строка) — анкор ссылки на следующую запись в WordPress, параметр %title подставляет ее заголовок.
  • in_same_term (boolean) — определяет будут ли рассматриваться в работе только элементы из текущей категории. Допустимые значения true / false (1 / 0), по умолчанию второй вариант.
  • excluded_terms (строка или массив) — укажите >Судя из скриншота выше, понятно, что все эти параметры не являются обязательными. Вот пример использования функции на одном из моих сайтов:

Здесь я задаю свой формат для отображения линка + исключаю из выборки все элементы, принадлежащие разделу >

Если вам нужно вывести в WordPress следующий пост из той же категории, то пригодится код ниже (при этом игнорируется раздел >

Когда хотите работать только с текущей конкретной таксономией, указывайте ее название в параметрах (например, testimonial):

Функция previous_post_link

Принцип работы с предыдущими записями WordPress аналогичен приведенному выше описанию, как и синтаксис. Выглядит так:

  • format (строка) — задает формат создаваемой ссылки, за которую отвечает переменная %link (добавляйте текст/теги до и после нее). По умолчанию — ‘« %link’.
  • link (строка) — анкор линка, для вставки заголовка пишите %title.
  • in_same_term (boolean) — если значение true, то будут выводиться только объекты из того же раздела блога.
  • excluded_terms — убираем ненужные категории, указывайте >В одном из блогов использую:

В коде все стандартно кроме исключения категории >

Здесь делаем жирный шрифт + вместо заголовка элемента пишется определенная фраза (хотя лучше в перелинковке использовать тайтл). Выводятся объекты только текущей категории кроме той, у которой >

Функция the_post_navigation

Данное решение объединяет обе ссылки на предыдущие и следующие записи WordPress. Это сделано для удобства, заменяет вызов двух функций одной. Если вам нужно получить на выходе HTML код без отображения, применяйте get_the_post_navigation().

Синтаксис the_post_navigation максимально простой:

Где $args — набор разных не обязательных параметров:

  • $prev_text — анкор предыдущей ссылки (по умолчанию %title).
  • $next_text — аналогично текст линка но уже на следующий пост (изначально %title).
  • $in_same_term (true/false) — позволяет показывать статьи только из текущей таксономии.
  • $excluded_terms — исключаемые >Таким образом, мы видим, что здесь имеются такие же переменные, как и в прошлых «единичных» функциях previous_post_link, next_post_link: анкоры, выборка по таксономиям и т.п. Использование решения просто сделает ваш код более компактным, да и нет смысла повторять одни и те же параметры два раза.

Рассмотрим самую простую ситуацию, когда нужно вывести навигацию по элементам из той же категории:

‘следующий: %title’, ‘next_text’ => ‘предыдущий: %title’, ‘in_same_term’ => true, ‘taxonomy’ => ‘category’, ‘screen_reader_text’ => ‘Еще почитать’, ) ); ?>

Функция posts_nav_link

Если я правильно понимаю, то ее можно использовать не только для отображения в единичной записи, но и в архивных страницах категорий, заметках по месяцам, датам и т.п. То есть в single.php она будет отвечать за ссылки на предыдущие/следующие WordPress статьи, а в архивных — за навигацию по страницам.

  • $sep — разделитель, отображаемый между ссылками (раньше был . сейчас —).
  • $prelabel — текст линка предыдущих элементов (по умолчанию: « Previous Page).
  • $nxtlabel — текст для следующей страницы/постов (Next Page »).

Вот интересный пример с картинками вместо текстовых линков:

Только не забудьте загрузить изображения prev-img.png и next-img.png в директорию images в вашем шаблоне. Думаю, аналогично добавляется и другой HTML код, если, допустим, нужно использовать какие-то DIV или class при выравнивании.

Итого. По навигации там еще есть несколько других разных функций, которые вы можете найти в кодексе. Надеюсь, с этими все более-менее понятно. Насчет posts_nav_link, если честно, не уверен, позволяет ли выводить предыдущие и следующие записи на единичной странице, т.к. не тестировал, хотя в описании это упоминается. Думаю, в таком случае более эффективно и желательно использовать the_post_navigation, что поновее и с куда бОльшим числом параметров.

Если есть какие-то вопросы по навигации между постами или дополнения, пишите ниже.

Постраничная навигация WordPress с помощью the_posts_pagination()

  • 2020-03-08
    • 18
    • Июля
      2016

Доброго времени суток

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

Еще 18 декабря 2015 вышла новая версия WordPress. Версия 4.1 включала в себя несколько новых функций одна из которых как раз и есть нужная нам – the_posts_pagination(). Разработчики WordPress побеспокоились о нас с вами и добавили такую замечательную функцию. Теперь Вы можете не устанавливать плагины типа WP-PageNavi или использовать код на подобии того, что я показывал в статье – Постраничная навигация в WordPress без плагина.

Чтобы вывести навигацию, Вам просто нужно добавить вызов функции в нужное место на странице и все. Делать это нужно в файлы, где выводится цикл. Например, в index.php, archive.php, category.php, search.php и тд. Вам нужно найти цикл, он выглядит примерно так:

Дале Вам нужно после endwhile; добавить нашу функцию the_posts_pagination(). В итоге у Вас получится:

Так же, если у Вас там есть вызов плагина wp_pagenavi() или самописного кода wp_corenavi();, можете удалить их. теперь они ни к чему. Их работу выполнит наша новая функция the_posts_pagination(). В результате у Вас внизу страницы должно появится вот такое поле с постраничной навигацией.

Если посмотреть на данную навигацию со стороны кода, HTML кода, который сгенерируется на странице, то он будет выглядеть примерно так:

Как видите, каждому элементу присвоены свои классы. При желании добавляете стили в файл style.css лежащий в папке с темой. Например, можно использовать стили которые я написал за 5 минут для данного урока:

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

Данная функция имеет несколько настроек, которые помогут Вам немного настроить пагинацию, если конечно это нужно. Я напишу все настройки сразу, а Вы при желании ненужные строки просто удалите. То есть данный код вставляется в то же место где Вы просто вставляли the_posts_pagination();

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

Давайте по порядку разберем, за что отвечает каждая из строк настроек.

  • ‘show_all’ => false, – Показывать или нет все страницы которые есть на сайте. По умолчанию нет, потому как если их много будет что-то страшное
  • ‘end_size’ => 2, – Количество страниц которые будут показаны в начале и в конце. Например, если в по умолчанию в начале и в конце по 1 цифре выглядит это так 1..6,7,8..99 и все. В данном примере мы установили значение 2. Значит у нас получится – 1,2..6,7,8..98,99. То есть чем больше значение, тем больше доступных в начале и конце.
  • ‘mid_size’ => 2, – Количество страниц вокруг текущей страницы. По умолчанию 1, значит у нас получится 1..6,7,8..99 – текущая страница – 7, по бокам по одной странице. В данном примере установлено 2 и станет вот так – 1..5,6,7,8,9..99. Текущая тоже сем и по бокам по две доступные страницы.
  • ‘prev_next’ => true, – Указывает нужно ли выводить кнопки по бокам, для переключения вперед или назад. То есть – предыдущая/следующая страница.
  • ‘prev_text’ => ‘«’, – То что будет в кнопке назад. Можете написать текст, символ или добавить иконку, используя статью – Иконки из шрифта Font Awesome
  • ‘next_text’ => ‘»’, – То же самое, только кнопка назад.
  • ‘add_args’ => false, – Массив аргументов (переменных запроса), которые нужно добавить к ссылкам.
  • ‘add_fragment’ => ”, – В скобках можно добавить текст, который добавится к ссылкам. Пагинация продолжит работать без сбоев. Например, у Вас ссылка на третью страницу http://localhost/?paged=3, если Вы добавите в скобки слово page, то ссылка станет такой – http://localhost/?paged=3page.
  • ‘before_page_number’ => ‘страница’, – Данный текст выведется перед каждым номером страницы. Например – страница1, страница2 и тд. Пример можно посмотреть
  • ‘after_page_number’ => ‘!’, – Этот текст выведется после номера страницы. На скриншоте выше это видно. В данном примере это просто знак восклицания.
  • ‘screen_reader_text’ => ‘Смотреть другие страницы’, – Текст над пагинацией. По умолчанию это – Навигация по записям , но если вы в скобки введете свой текст, например как в примере – Смотреть другие страницы, то он заменит стандартный.

Вот и все настройки данной функции. Используя их и стили, можете настроить вывод навигации од себя и свою тему WordPress. Статья получилась не маленькая, но если разберетесь, то поймете, что сложного ничего нет. Данная функция упростит жизнь тем, кто хочет добавить постраничную навигацию себе в тему. Теперь больше не нужно использовать сторонних плагинов, создающих дополнительную нагрузку на сайт.

На этом все, спасибо за внимание.

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂

WP Magazine

Про WordPress на русском языке

Функции пагинации в WordPress 4.1

Обновление: версия 4.1 вышла 18 декабря. Подробное описание в нашей новой статье →

В WordPress версии 4.1 появятся несколько новых функций для упрощения навигации в темах: the_post_navigation , the_posts_navigation и функция пагинации the_posts_pagination .

Для постраничной навигации многие темы для WordPress внедряют поддержку таких плагинов, как WP-PageNavi, а начиная с темы Twenty Fourteen, некоторые авторы последовали примеру стандартной темы и стали выполнять пагинацию с помощью встроенной функции ядра paginate_links .

Использование этой функции часто требует большое количество кода и иногда включает логику для работы с постоянными ссылками модуля WP_Rewrite, данными о запросе WP_Query и прочее. Начиная с WordPress версии 4.1 разработчики ядра обернули эту логику в одну простую функцию.

the_posts_pagination()

Функция the_posts_pagination() вставляет блок пагинации в тему WordPress:

” data-medium-file=”https://wpmag.ru/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination-wordpress-300×46.png” data-large-file=”https://wpmag.ru/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination-wordpress.png” src=”https://wpmag-22.cdn.pjtsu.com/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination-wordpress.png?w=780″ alt=”Пагинация в теме Twenty Fifteen” w />

Пагинация в теме Twenty Fifteen

В качестве единственного параметра функция the_posts_pagination() принимает массив, который передается в функцию paginate_links() . Это значит, что весь функционал который мы ранее выполняли с помощью paginate_links() , также легко реализовать и с помощью новой упрощенной функции the_posts_pagination() .

Например, можно добавить символ № перед каждым номером страницы:

По умолчанию the_posts_pagination() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:

  • show_all — показывать все страницы
  • end_size — количество страниц в начале и конце списка
  • mid_size — количество страниц слева и справа от текущей страницы

Данный код будет отображать первую, вторую, предпоследнюю и последнюю страницы, независимо от текущей. А вокруг текущей страницы будет по две страницы с каждой стороны. На примере темы Twenty Fifteen это будет выглядеть следующим образом:

” data-medium-file=”https://wpmag.ru/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination-300×50.png” data-large-file=”https://wpmag.ru/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination.png” src=”https://wpmag-22.cdn.pjtsu.com/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination.png?w=780″ alt=”Пагинация в теме Twenty Fifteen” w />

Пагинация в теме Twenty Fifteen

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

the_posts_navigation

Функция 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

Функцию the_post_navigation() можно использовать в шаблоне вывода одной записи. Данная функция отображает ссылки на следующую и предыдущую записи относительно текущей. Она также хорошо подходит для использования в шаблонах прикрепленных файлов.

Аргументами prev_text и next_text можно изменить текст, куда строкой %title можно вставить заголовок следующей или предыдущей статьи:

Заключение

Данные встроенные функции WordPress позволяют существенно уменьшить количество кода в темах, а значения их аргументов по умолчанию подойдут для большинства тем, что позволят их использовать без каких-либо параметров.

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

Напоминаем, что WordPress версии 4.1 выйдет в декабре 2014 года вместе с новой стандартной темой Twenty Fifteen.

Ссылка на основную публикацию
×
×
Adblock
detector