0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Делаем навигацию в 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.

Заключение

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

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

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 с помощью the_posts_pagination()

  • 2020-01-18
    • 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 минуты 🙂

9 лучших бесплатных плагинов WordPress для постраничной навигации

9 лучших бесплатных плагинов WordPress для постраничной навигации

Постраничная навигация – это то, на что каждый блоггер должен обращать особое внимание. Она заключается в отображении записей WordPress на постраничной основе. Обычно записи отображаются в иерархическом порядке, и, несмотря на то, что у вас есть опция выбора, такая, как «Старые записи» и «Новые записи», у вас отсутствует опция отображения записей на постраничной основе с пронумерованными страницами.

Используя постраничную навигацию, пользователь может сразу переходить на страницу 6 или 8, не переходя последовательно со страницы на страницу. Такая навигация также полезна для SEO, поисковики предпочитают такую навигацию, она позволяет ботам легко переходить по записям на страницах сайта. С помощью бесплатных плагинов WordPress, приведённых в этой статье, вы можете установить постраничную навигацию на ваш веб-сайт.

WP Page Navi – популярный плагин, который позволит посетителям вашего сайта с лёгкостью переходить со страницы на страницу. Он заменит опцию «Старые записи»/«Новые записи» на навигацию с пронумерованными страницами. Плагин не требует больших ресурсов и не влияет на скорость загрузки страниц.

Этот плагин совместим с большинством существующих тем.

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Требует мало ресурсов.
  • Дружественный к SEO.
  • Очень популярный.

2 – WP Paginate

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

С его помощью вы можете даже добавить навигацию по комментариям к записям, это приведёт к облегчению загрузки страницы.

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Использует навигацию по комментариям.
  • Дружественный к SEO.
  • Удобный для пользователей.

3 – Simple Pagination
Simple Pagination – это плагин, который позволит вам иметь навигацию как по вашим записям, так и по комментариям. Как подсказывает название, этот плагин очень прост в использовании. Вы можете даже подобрать стиль навигации, соответствующий теме вашего блога, с использованием таблиц стилей.

Имеется 6 таблиц стилей для соответствия вашему сайту, а также поддержка двух языков.

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Использует навигацию по комментариям.
  • Имеются таблицы стилей для разных типов отображения.
  • Имеются 6 типов стилей.

4 – Page Links Plus

Page Links Plus – плагин, который выполняет функцию добавления навигации в запись. Бывают случаи, когда ваша запись становится такой большой, что вам надо разделить её на части. В таких случаях вам поможет плагин Page Links Plus, который разобьёт вашу запись на страницы, показывая связь между ними, позволяющую посмотреть всю запись целиком.

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

Основные моменты и особенности:

  • Позволяет нумеровать записи и страницы.
  • Имеется опция для просмотра всей записи.
  • Имеется множество настроек.
  • Имеется доступная Pro версия.

5 – Alphabetic Pagination

Alphabetic Pagination будет нумеровать записи и страницы вашего сайта в алфавитном порядке. Если вы занимаетесь продажами товаров на вашем сайте WordPress, то этот плагин будет творить чудеса, он будет нумеровать все ваши товары в алфавитном порядке.

Он может быть использован в любом месте вашего сайта с помощью шорткода.

Основные моменты и особенности:

  • Имеется навигация по алфавиту.
  • Имеется поддержка торговли.
  • Может быть размещён в любом месте с помощью шорткода.
  • Может показать список пользователей в алфавитном порядке.

6 – Gallery Pagination for WordPress

Плагин Gallery Pagination for WordPress поможет вам в навигации по галереям изображений вашего WordPress сайта. Он будет отображать все изображения в галерее, что поможет пользователю перейти непосредственно к любому изображению без необходимости прокрутки изображений одного за другим.

Поддержка CDN поможет вам сделать галереи изображений дружественными для SEO. Имеется также кэширование для того, чтобы увеличить скорость загрузки страницы, а также Ajax, чтобы делать изменения без необходимости перезагрузки страницу.

Основные моменты и особенности:

  • Имеется навигация по галереям изображений.
  • Имеется поддержка CDN.
  • Дружественный к SEO.
  • Имеется кэширование.

7 – Advanced Post Pagination
Плагин Advanced Post Pagination будет осуществлять навигацию по вашим записям. Если ваша запись слишком большая, вы можете с помощью этого плагина разбить её на несколько страниц. Чтобы не запутаться в привычных цифровых кнопках, с помощью этого плагина вы можете поместить на кнопки текст и картинки. Вы можете использовать шорткод для того, чтобы разбивать запись на страницы так, как вам нравится.

Ajax поможет вам перейти к разделу без необходимости перезагрузки всей страницы.

Основные моменты и особенности:

  • Разбиение отдельной записи.
  • Использование текста и картинок на кнопках.
  • Использование шорткодов.
  • Использование Ajax.

8 – WP Smart Pagination
WP Smart Pagination – это удобный способ отображения записей с разделением на страницы, вместе с полем, в которое вы можете ввести номер страницы, что позволит вам моментально оказаться на нужной странице. Это очень полезно, если у вас на сайте много записей, что затрудняет пользователям переход к странице, которая находится очень далеко. В том случае, если у вас в наличии 4000 страниц записей, а пользователь хочет посмотреть 2555 страницу, этот плагин может оказать вам неоценимую услугу.

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Имеется поле для прямого перехода к нужной странице.
  • Соответствие темам.
  • Имеется модификация стилей.

9 – jPages Pagination For WordPress
Это jQuery плагин, вдохновлённый jPages, с помощью которого вы без труда сможете разбить на страницы ваши галереи изображений и комментарии. Это в полной мере отзывчивый плагин, который будет осуществлять навигацию по контенту для всех видов устройств с различными размерами экрана. jPages Pagination For WordPress – небольшой плагин, который позволит легко интегрировать навигацию с jQuery.

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

Основные моменты и особенности:

  • Используется jQuery.
  • Отзывчивый плагин.
  • Имеется поддержка основными браузерами.
  • Простая интеграция.

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

Если вам понравилась данная статья, вы можете поделиться ею, а также оставить комментарий в поле ниже.

Делаем постраничную навигацию для WordPress без плагина и с WP-PageNavi

Продолжаю писать статьи, посвященные навигации сайта на движке WordPress.

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

Материал вышел очень объемный и, пожалуй, самый исчерпывающий в сети.

Постраничная навигация (пагинация) — это разбиение информации на страницы. Если взять массу сайтов на Wordpres, то данный феномен ярко выражен в видео списка номеров страниц внизу каждой страницы с анонсами. На моем блоге данная функция имеет следующий вид.

Дизайн может быть разный. Но суть ее одна и та же — разбиение информации на страницы. Как вы знаете, по умолчанию, на главной странице сайта выводятся анонсы записей, которых может быть определенное количество (зависит от выставленных настроек в пункте «Написание»).

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

Как правило, сейчас в современных шаблонах Wodpress постраничная навигация уже встроена. Но имеется вариант, когда ее и нет. Тогда придется реализовать. Вместо нее может быть разбиение анонсов на страницы в виде ссылок на предыдущие и следующие записи. Это ярко выражено в стандартных шаблонах.

Делаем без плагина

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

Вот первая часть кода. Ее необходимо разместить в файле functions.php шаблона оформления.

Я разместил код в самое начало файла после открывающего тега

В данном коде мы можем отрегулировать некоторые параметры:

  • Строка 10 — если изменить значение 0 на 1, то рядом с номерами страниц будет выводиться надпись вида, например «Страница 3 из 45». Можете сделать такой вариант, но я считаю, что в данном случае он не нужен, так как в номерах страниц и так понятно, сколько страниц на сайте. А активная страница выделяется другим цветом;
  • Строки 11 и 12 — слева и справа номера активной страниц должно отображаться определенное количество предыдущих или следующих номеров соответственно. Тут мы выставляем их количество. В данном коде стоит значение 1. Можно поставить 2 или 3. Тут нужно будет немного поэкспериментировать, так как чем больше количество номеров, тем шире будет навигация. Все зависит от ширины шаблона.

Далее необходимо разместить вторую часть кода.

Так как постраничная навигация должна отображаться везде, где выводится список анонсов,то необходиммо данный код разместить во всех файлах, где это происходит:

  • Главная страница — index.php;
  • Страницы рубрик и архивов — category.php и archive.php;
  • Страница поиска — search.php.

Кстати, в некоторых шаблонах вывод страниц рубрик и архивов может осуществляться одним файлом. У меня за это отвечает файл archive.php.

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

Как правило, стандартная навигация в виде предыдущих и след. ссылок выводится с помощью подобного кода.

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

Кстати, если у вас имеются проблемы с данным процессом, то можете обратиться ко мне за помощью в комментариях. Постараюсь помочь.

Далее нужно прописать стили, чтобы навигация имела должное оформления. Даю вам свои стили. Можете их смело разместить в своем файле style.css.

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

Когда разместили коды в файлах functions.php, во всех файлах, выводящих страницы с анонсами и прописали стили, можем проверить работоспособность навигации. У меня все работает и в стандартном шаблоне она имеет следующий вид.

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

Способ без плагина мы разобрали. Уверен на все 100%, если все сделали, как описал выше, то у вас должно все работать на ура. Был еще второй вариант без плагина, но просмотрев его я понял, что по сути это тот же самый вариант, только немного измененный. Поэтому, я перехожу к способу реализации постраничной навигации с помощью плагина.

Плагин WP-PageNavi

Для начала скачиваете плагин с официальной страницы и устанавливаете его на сайт.

После установки плагина нужно будет также разместить код, который выведет навигацию внизу страницы.

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

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

С одной стороны оформление не ахти, а с другой очень даже ничего, так как не мозолит глаза. Пользователи любят простоту! Поэтому, можно все так и оставить. Если же хотите чего-то более красочного, то сейчас мы с вами рассмотрим некоторые варианты. А пока мы обсудим такую вещь, как настройка wp pagenavi. Настройки имеются и о них стоит поговорить.

Касаемо первого пункта настроек «Шаблоны списка страниц», то в нем ничего менять не нужно. Нас все устраивает. Мы двигаемся к пункту «Настройки списка страниц».

Отмечу, что со всеми параметрами в этом пункте нужно экспериментировать, чтобы найти оптимальное значение для себя. Я лишь объясню вкратце, за что отвечает каждый параметр.

  • Использовать стиль — если поставим значение «No», то стили плагина уберутся и номера страниц не будут оформлены;

  • Стиль списка страниц — кроме обычного списка номеров страниц мы можем выбрать вариант выпадающего списка;

  • Всегда показывать список страниц- настройку не включаем. Нужно, чтобы список отображался только там, где это необходимо;
  • Количество страниц для показа — отвечает за количество выводимых номеров страницы в начале списка. По умолчанию, значение стоит 5 и на скриншотах выше вы можете посмотреть, что именно 5 страниц выводятся;
  • Диапазон страниц для показа — если на вашем сайте очень много страниц, то данная функция будет крайне полезна. Она будет выводить номера страниц после основного списка со значениями 10, 20, 30, 40 и так далее. Интервал между этими значениями определяется следующим параметром;
  • Коэффициент для диапазонов страниц — если выстави значения 5, то диапазон страниц будет иметь вид — 10, 15, 20, 25 и т.д. Если 10, то 10, 20, 30, 40 и так далее. Значения 10 вполне достаточно.

Это все настройки, которые вам нужно выставить в соответствии со своими нуждами. Тут уже каждый по себя отрегулирует.

Идем дальше и рассмотрим варианты, как можно изменить оформление списка номеров страниц в данном плагине.

Самый простой вариант — установка дополнительного плагина, который имеет уже заготовленные стили, а также дает возможность настроить каждый параметр индивидуально. Называется плагин Wp Pagenavi Style .

После его установки в админ-панели WordPress появляется новый пункт.

После перехода в него сразу можем выбрать уже имеющиеся заготовки дизайна.

Если же хотим настроим стили индивидуально, то в первом пункте настроек «Select Stylesheet» выбираем вариант «Custom» и настраиваем параметры всех элементов (границ и их цветов, цветов и размеров шрифтов, цвета ссылок при наведении курсора мышки и так далее).

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

Второй вариант осуществляется с помощью редактирования файла стилей, который расположен в папке с плагином Wp-pagenavi на хостинге — pagenavi-css.css.

Данный файл подключается, когда в настройках плагина активна настройка «Использовать стиль pagenavi-css.css». Поэтому, если мы его отредактируем, то после обновления плагина, все стили заменятся на стандартные. Чтобы каждый раз на заменять данный файл и не прописывать стили заново я рекомендую сделать следующую вещь:

  1. Отредактировать стили в этом файле на свои, придав нужное оформление постраничной навигации;
  2. Отключить настройку «Использовать стиль pagenavi-css.css»;
  3. Разместить эти стили в основном файле стилей шаблона оформления style.css.

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

Итак, друзья. Материал получится очень хорошим, как на меня. Что вы думаете на этот счет? Надеюсь, что вы все сделали. Если что-то не получается, то в комментариях постараюсь помочь. Пишите, не бойтесь! Я также когда-то очень мучился и мне удалось разобраться.

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

Удобная навигация на сайте WordPress

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

Настройка меню

Настраиваем в админке сайта меню:

Внешний вид – Меню.

Вводим все страницы, которые мы хотим показать в меню, располагаем все элементы меню в желаемом порядке, и не забываем сохранить всё, что мы отредактировали под выбранным для нашего меню именем, например, Меню 1.

Теперь нам нужно закрепить это в настройках темы:

Внешний вид – Настроить – Навигация – Выбрать меню.

Выбираем наше Меню 1 и сохраняем настройки.

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

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

Теперь плагин нужно настроить.

Это мы можем сделать, войдя в меню Параметры – Список страниц.

Здесь мы настраиваем стиль показа страниц – обычный или выпадающее меню, диапазон страниц для показа и коэффициент для этого диапазона.

Теперь посетителям нашего сайта будет значительно удобней перемещаться по нему.

Вывод похожих постов

Мы можем установить еще один плагин – nRelate Related Content. Он выводит после каждой статьи похожие посты. Устанавливается плагин, как обычно. После его активации нужно сделать несколько настроек. В меню админки появляется отдельный блок – nRelate, в котором две вкладки – Dashboard и Related Content. При первом обращении к плагину ему потребуется некоторое время, чтобы проиндексировать все статьи нашего сайта.

На вкладке Dashboard мы можем выбрать, какие типы похожих записей будут выводиться. Нам нужно выводить похожие статьи, поэтому выбираем post.

Переходим на вкладку Related Content. Здесь нам предложат ввести адрес картинки, которая будет использоваться плагином для вывода статей, в которых нет своих изображений. Эту картинку нужно предварительно загрузить в библиотеку медиафайлов. Также на вкладке Related Content мы выбираем количество похожих постов, которые будут выводиться после каждой статьи, «степень похожести» и «возраст» статей, которые будет выбирать плагин для показа. Выводить больше 3-х похожих статей вряд ли стоит, это будет скорей загромождать сайт, чем создавать дополнительные удобства. Определяем, где будут располагаться миниатюры похожих постов – перед нашей статьёй или после неё, а также будут ли выводиться названия статей. Можно выводить не только названия, но и некоторую часть текста, но, на мой взгляд, это уже лишнее.

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

Те же функции можно реализовать и с помощью других плагинов — например, плагина Contextual Related Posts.

Карта сайта

Также для удобства наших посетителей мы можем построить карту сайта, и воспользуемся для этой цели плагином Dagon Design Sitemap Generator. Если плагин не находится через админку WordPress, можно скачать его на официальном сайте Dagon Design.

Устанавливаем плагин, активируем и делаем некоторые настройки. Заходим в меню Параметры — XML-Sitemap. Здесь мы выбираем все страницы, рубрики и статьи, которые хотим видеть на карте своего сайта. И здесь же мы можем исключить то, что по каким-то причинам не хотим на карту выводить.

Кнопка «Наверх»

Еще один немаловажный элемент навигации – кнопка «Наверх». Когда пользователю приходится до мозолей крутить колесо мышки, пытаясь «всплыть» после прочтения длинной статьи, вряд ли ему это доставляет удовольствие. Избавить его от этой неприятности мы сможем, установив на своем сайте кнопочку «Наверх». Сделать это можно различными способами, выбор зависит от ваших предпочтений. Я воспользовалась рекомендациями, приведенными в этой статье, и благодарю её автора за полезную информацию.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector