CodeCanyon Post Navigation Preview - Плагин WordPress

Руководство по настройке и использованию CodeCanyon Post Navigation Preview

CodeCanyon Post Navigation Preview стоит рассматривать не как замену обычной ссылки «предыдущая запись» и «следующая запись», а как визуальный блок навигации, который помогает читателю увидеть соседние материалы или товары WooCommerce до перехода. В этом руководстве разберём, где такой блок действительно улучшает пользовательский путь, что проверить перед установкой, какие параметры настроить первыми и как убедиться, что посетитель видит аккуратный предпросмотр, а не случайную сетку ссылок.

Публичная информация о продукте ограничена страницами Envato и CodeCanyon, поэтому в тексте не будет выдуманных названий вкладок, неподтверждённых настроек или обещаний полной совместимости. Точные функции берём из карточки продукта: два типа предпросмотра, настройки цветов для шорткодов, раскладки Masonry и Grid, поддержка виджетов, переводимые файлы, выбор колонок, адаптивность, социальные кнопки и сценарии для записей или WooCommerce-товаров.

Отдельное внимание уделим проверке на современной WordPress-установке. На странице товара указана совместимость с линейкой WordPress 5.2-6.2 и отметка Gutenberg Optimized: No. Это не означает, что плагин обязательно сломается на более новой версии, но означает, что его нельзя включать на рабочем сайте без тестовой проверки темы, виджетов, кэша, коротких кодов и страниц товаров.

Когда визуальная навигация по записям действительно полезна

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

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

Подходящие сценарии

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

Когда плагин может быть лишним

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

Что проверить перед установкой на WordPress

Установка коммерческого плагина из ZIP-архива выглядит простой, но именно подготовка снижает риск сломанной вёрстки и конфликтов. Post Navigation Preview работает на стыке контента, темы, миниатюр, виджетных областей, коротких кодов и скриптов. Поэтому проверка должна касаться не только версии WordPress, но и реального шаблона записи.

Технический минимум перед первым включением

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

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

Совместимость с редактором блоков и виджетами

Карточка товара указывает, что плагин не оптимизирован специально под Gutenberg. Поэтому на сайте с блочной темой не стоит ожидать нативных блоков или полноценной настройки через редактор сайта. Надёжнее воспринимать продукт как классический плагин: он может работать через короткие коды, настройки и виджеты, а его вывод нужно проверять в публичной части сайта.

В современных версиях WordPress классические виджеты могут отображаться через блочный редактор виджетных областей. Если виджет плагина не появляется как отдельный блок, проверьте блок Legacy Widget или временно протестируйте с классическим режимом виджетов. Это не обязательная рекомендация для всех сайтов, а способ понять, поддерживает ли конкретная тема старый виджетный механизм.

Установка ZIP-архива и первичная проверка

CodeCanyon Post Navigation Preview распространяется как коммерческий продукт Envato, поэтому типовой путь установки - загрузка ZIP-архива через админ-панель WordPress. Важно не перепутать общий архив покупки и архив самого плагина: у товаров CodeCanyon внутри загрузки могут быть документация, лицензия и отдельный установочный файл. Если WordPress сообщает, что в архиве нет корректного плагина, сначала распакуйте общий ZIP локально и найдите установочный архив плагина.

1. Откройте админ-панель WordPress и перейдите в Plugins - Add New.
2. Нажмите Upload Plugin и выберите ZIP-файл плагина.
3. Запустите установку кнопкой Install Now.
4. После успешной установки нажмите Activate Plugin.
5. Откройте список плагинов и убедитесь, что плагин активен без предупреждений PHP.
6. Найдите страницу настроек, пункт документации или доступный виджет, который добавил плагин.

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

Мини-тест после активации

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

Карта настроек после установки

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

Тип предпросмотра: Normal или No Excerpt

Карточка продукта подтверждает два типа предпросмотра: Normal и No Excerpt. Первый вариант логичен для блога и руководств, где небольшая выдержка помогает понять содержание следующей записи. Второй лучше подходит для компактных блоков, товаров, портфолио и страниц, где лишний текст делает нижнюю часть материала слишком тяжёлой.

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

Раскладка: Grid или Masonry

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

Если сайт уже использует оптимизацию JavaScript, сначала проверьте Grid. После этого включайте Masonry на тестовой странице и смотрите, не появляется ли «прыжок» карточек при загрузке. При проблемах исключите скрипты плагина из отложенной загрузки или вернитесь к сетке.

Колонки от одной до восьми

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

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

Цвета, прозрачность и вторичный акцент

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

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

Социальные кнопки

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

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

Размещение через шорткод и виджетную область

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

Шорткод в записи или шаблоне

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

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

Виджет в боковой колонке или подвале

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

Когда лучше не выводить блок автоматически

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

Как настроить предпросмотр для записей и товаров WooCommerce

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

Для записей и редакционных материалов

На страницах записей блок лучше ставить после основного текста, но до слишком длинной зоны комментариев. Если на сайте есть блок «Похожие записи», определите приоритет: Post Navigation Preview показывает соседние или заданные элементы, а похожие записи обычно строятся по рубрикам, меткам или алгоритму. Два блока подряд могут выглядеть как дубль, даже если технически они разные.

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

Для WooCommerce-товаров

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

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

Миниатюры и одинаковая высота карточек

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

Практический сценарий: блок продолжения чтения для серии обзоров

Разберём конкретную задачу: на сайте есть серия обзоров WordPress-плагинов, и после каждого обзора нужно показать соседние материалы с миниатюрой, заголовком и аккуратным переходом. Цель - увеличить глубину просмотра, но не превратить низ страницы в рекламную витрину.

Цель

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

Подготовка

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

Шаги настройки

1. Создайте или скопируйте шорткод Post Navigation Preview из документации продукта.
2. Выберите тип Normal, если выдержки записей короткие и помогают выбору.
3. Поставьте две или три колонки, чтобы карточки оставались читаемыми на основной ширине контента.
4. Выберите Grid для первой проверки, потому что его проще диагностировать, чем Masonry.
5. Настройте основной цвет с умеренной прозрачностью и вторичный цвет под ссылки или акценты темы.
6. Отключите социальные кнопки на первом тесте, если на странице уже есть отдельный блок шаринга.
7. Вставьте шорткод в блок Shortcode после основного текста записи.
8. Сохраните запись и откройте её в приватном окне браузера.

Проверка результата

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

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

Проверка качества: скорость, адаптивность и SEO

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

Скорость загрузки

Плагин включает JavaScript, CSS и PHP-файлы, что подтверждено карточкой продукта. Сам факт наличия скриптов не проблема, но на сайте с тяжёлой темой каждый новый визуальный компонент нужно проверять. Сравните страницу до и после включения блока: визуальная стабильность, время появления карточек, ошибки в консоли, поведение при включённой минификации.

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

Адаптивность

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

SEO и внутренние ссылки

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

Частые проблемы и диагностика

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

Типичные симптомы и безопасные проверки

Симптом	Возможная причина	Что проверить	Как исправить
Шорткод виден как текст	Шорткод вставлен не туда, плагин не активен или синтаксис повреждён	Активность плагина, блок Shortcode, закрывающие скобки и кавычки	Вставить пример из документации заново, сохранить страницу и очистить кэш
Блок появился, но карточки без изображений	У записей или товаров нет миниатюр, тема меняет размер изображений	Поле изображения записи, медиатеку, шаблон миниатюр темы	Добавить миниатюры, пересоздать размеры изображений средствами сайта, уменьшить число колонок
Masonry ломается после загрузки	Конфликт с отложенной загрузкой JavaScript или кэшем	Консоль браузера, режим без минификации, поведение с Grid	Вернуться к Grid или исключить скрипт плагина из конкретной оптимизации
Виджет не находится в редакторе виджетов	Тема использует блочный редактор виджетов или виджет зарегистрирован как классический	Appearance - Widgets, блок Legacy Widget, доступные области темы	Использовать шорткод в нужном месте или протестировать классический режим виджетов
На товаре WooCommerce блок нарушает карточку	Конфликт с шаблоном товара, переопределением темы или местом вывода	Стандартную тему для теста, другой товар, отключение лишних блоков рекомендаций	Перенести блок ниже описания, выбрать компактный режим без выдержки, откатить автоматический вывод
Слишком много ссылок и визуального шума	Одновременно включены стандартная навигация темы, похожие записи и социальные кнопки	Низ страницы после статьи и порядок блоков	Оставить один главный сценарий продолжения чтения, отключить лишние кнопки или сократить карточки

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

Безопасные улучшения без правки файлов плагина

Кодовые правки для этого продукта лучше держать минимальными. Публичные источники не подтверждают специальные хуки Post Navigation Preview, поэтому не стоит писать PHP-фрагменты, которые зависят от неизвестных внутренних функций. Безопаснее работать через настройки, шорткоды, виджетные области, дочернюю тему и внешний CSS.

CSS-класс вокруг блока

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

<div class="guide-post-nav-preview">
  [shortcode-from-plugin-documentation]
</div>

После этого добавляйте стили только в дочернюю тему или штатное поле дополнительных стилей темы. Не меняйте CSS-файлы плагина, потому что обновление перезапишет изменения. Чтобы откатить правку, удалите класс или временно отключите добавленный CSS.

Ограничение визуального шума

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

Стоит ли скачивать и тестировать продукт

CodeCanyon Post Navigation Preview имеет смысл тестировать, если вам нужен визуальный блок продолжения чтения или перехода между товарами, а стандартная навигация темы выглядит слишком бедно. Его сильная сторона - карточная подача, разные типы предпросмотра, сетка или Masonry, настраиваемые цвета, виджетный сценарий и поддержка WooCommerce-предпросмотра.

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

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