OceanWP Portfolio - Плагин WordPress

Руководство по настройке и использованию OceanWP Portfolio

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

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

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

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

OceanWP Portfolio особенно логичен на сайтах, где уже используется тема OceanWP и нужно показать работы как отдельный тип контента. Это могут быть проекты студии, кейсы дизайнера, фотосерии, примеры сайтов, ремонтные объекты, архитектурные проекты, иллюстрации, работы ученика или каталог выполненных услуг. Смысл не в том, что у вас будет красивая сетка. Смысл в том, что каждый элемент портфолио может жить как отдельная запись, иметь изображение, рубрикацию и собственную страницу.

Если портфолио состоит из нескольких статичных картинок и никогда не будет обновляться, иногда достаточно обычного блока Gallery, секции в конструкторе страниц или лёгкого gallery-плагина. Но если проектов становится больше, появляются категории, нужно фильтровать работы, выводить часть проектов на разных страницах и сохранять единый стиль, отдельный portfolio workflow удобнее. Главный выигрыш OceanWP Portfolio - он связывает тип записи Portfolio, настройки OceanWP и публичный вывод в один управляемый процесс.

Плагин может не подойти, если сайт построен не на OceanWP и вы не хотите зависеть от её Customizer-настроек, если вам нужен сложный клиентский proofing, комментарии к изображениям, защищённые альбомы, видео-галереи с большим количеством источников или визуальный block-builder для галерей. В таких случаях Visual Portfolio, FooGallery, Envira Gallery, WPZOOM Portfolio или Essential Grid могут быть ближе к задаче.

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

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

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

Платформа и зависимости

Официальная документация описывает Ocean Portfolio как премиальное расширение OceanWP. Устанавливается оно как обычный WordPress-плагин через Plugins и загрузку ZIP-архива, а панель настроек Portfolio появляется в Customizer после установки и активации расширения. Для метабоксов OceanWP Settings важен Ocean Extra: документация OceanWP указывает, что этот бесплатный плагин отвечает за расширенные настройки страниц, записей и других типов контента.

Практическая проверка перед установкой выглядит так:

• Убедитесь, что сайт действительно использует OceanWP или вы осознанно подключаете расширение ради этой экосистемы.
• Проверьте, что у пользователя есть права администратора на установку плагинов.
• Сделайте резервную копию файлов и базы данных, особенно если на сайте уже есть кастомные шаблоны или page builder.
• Убедитесь, что Ocean Extra установлен и активен, если вы планируете использовать OceanWP Settings на отдельных страницах.
• Подготовьте 6-12 тестовых работ, чтобы сразу проверить категории, фильтры, сетку и пагинацию на реальном наборе, а не на двух случайных изображениях.

Контентная структура

Для портфолио важно заранее решить, чем будут категории отличаться от меток. Категории лучше использовать для основных направлений: "Дизайн сайтов", "Фотосъёмка", "Интерьеры", "Логотипы", "Кейсы". Метки удобны для более точных признаков: "минимализм", "eCommerce", "портрет", "мобильная версия", "брендинг". Такая структура полезна не только для админки. В документации по Customizer указано, что фильтр портфолио может работать по категориям или меткам, поэтому хаотичная таксономия сразу ухудшит пользовательский опыт.

Изображения тоже лучше готовить до настройки. В Portfolio Customizer есть параметр Image Size, а документация отдельно предупреждает о выборе достаточно крупного размера, чтобы избежать размытости. На практике это значит: не смешивайте маленькие старые превью, вертикальные афиши и широкие баннеры без плана. Если нужен masonry, разные пропорции допустимы. Если нужен строгий равномерный каталог, изображения лучше привести к близкой визуальной логике.

Установка и первичная проверка после активации

Установка расширения не отличается от обычного ZIP-плагина WordPress: в админ-панели откройте Plugins, выберите Add New, затем Upload Plugin, загрузите ZIP-архив и активируйте расширение. В руководстве намеренно не описывается покупка, ввод license key или аккаунтные действия. Это зона кабинета разработчика и поддержки, а не рабочий процесс настройки портфолио на уже подготовленном сайте.

После активации проверьте три признака, что расширение действительно подключилось к сайту:

1. В админ-панели появился новый тип записей Portfolio.
2. В Customizer появилась панель Portfolio с настройками General, Archive, Filter Bar, Image, Query и Single Portfolio Item.
3. При создании или редактировании страницы доступны настройки OceanWP Settings, если Ocean Extra активен и метабоксы не отключены в OceanWP Panel.

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

Первый тестовый проект

Официальная инструкция по созданию портфолио описывает простой путь: после активации появляется новый тип записи Portfolio, нужно открыть Portfolio - Add New, создать запись и добавить featured image. Для реальной проверки этого мало, но как технический тест это хороший минимум.

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

Мини-проверка: если после создания первого проекта вы не видите его на публичной странице, это ещё не ошибка. OceanWP Portfolio создаёт тип записей, но страницу вывода нужно настроить отдельно: через шаблон Portfolio или shortcode.

Как устроена запись Portfolio и почему это важнее дизайна

Перед настройкой сетки стоит понять, что именно становится единицей портфолио. OceanWP Portfolio добавляет отдельный тип записей Portfolio. Это значит, что проект не обязан быть просто изображением внутри страницы. У него может быть заголовок, featured image, контент, категории, метки и отдельный публичный адрес. Такая модель полезна, когда работа должна быть не только красивой плиткой, но и полноценным кейсом.

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

Минимальный набор для каждой работы

Для большинства сайтов достаточно пяти элементов: нормальное название, featured image, категория, короткое описание и содержимое страницы проекта. Название должно быть понятным без внутреннего жаргона. Featured image должно объяснять работу с первого взгляда. Категория должна помогать фильтру, а не повторять название проекта. Описание нужно не только для посетителя, но и для редактора: через несколько месяцев будет проще понять, почему работа была добавлена и какой сценарий она закрывает.

Если проект ведёт на внешний результат, например опубликованный сайт клиента, не превращайте портфолио в каталог случайных исходящих ссылок. В changelog Ocean Portfolio упоминается поле external URL и target для portfolio item, но в статье лучше держаться безопасного принципа: сначала создайте отдельную страницу кейса, а внешний адрес используйте только там, где посетителю действительно нужно перейти к результату. Так вы сохраняете контекст, а не отправляете человека с сайта без объяснения.

Категории и метки без хаоса

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

Хорошая структура для студии может выглядеть так: категории "Веб-дизайн", "Брендинг", "Контент", "Иллюстрация"; метки "магазин", "лендинг", "недвижимость", "медицина", "реставрация", "мобильная версия". Тогда фильтр по категориям остаётся понятным, а Query-настройки и отдельные подборки через shortcode можно строить без ручного перебора случайных названий.

Featured image как контракт с сеткой

Featured image в portfolio item - это не просто первое изображение проекта. Это карточка, по которой посетитель решает, открывать ли работу. Если для одних проектов вы используете скриншоты сайтов, для других логотипы на белом фоне, для третьих вертикальные афиши, сетка может выглядеть разношёрстно. Masonry частично помогает разным пропорциям, но не исправляет визуальную логику.

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

Практическая проверка: откройте страницу портфолио и закройте названия карточек рукой. Если по изображениям всё равно понятно, какие работы перед вами, featured images выбраны удачно. Если все карточки выглядят как случайные картинки, сначала исправляйте изображения, а не hover-эффекты.

Два способа вывести портфолио на сайте

Документация OceanWP прямо указывает два способа вывода: через страницу с шаблоном Portfolio или через shortcode, созданный в Portfolio - Shortcodes. Это не два одинаковых варианта с разными кнопками. Они подходят для разных сценариев.

Страница с шаблоном Portfolio

Этот вариант ближе к стандартному архиву. Вы создаёте новую страницу, например "Работы" или "Портфолио", выбираете для неё шаблон Portfolio и публикуете. В настройках General в Customizer можно выбрать основную страницу портфолио, чтобы она использовалась в хлебных крошках отдельных проектов и в общей логике сайта.

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

Shortcode для секций и подборок

Shortcode создаётся через Portfolio - Shortcodes и вставляется туда, где нужен отдельный вывод. Это удобно, если вы хотите показать несколько проектов на главной странице, вставить подборку в страницу услуги, собрать лендинг для категории работ или вывести разный набор проектов в разных местах сайта.

Главное правило - не пытайтесь вручную выдумывать параметры shortcode, если они не подтверждены в интерфейсе. Надёжнее создать нужный shortcode в админке, скопировать его и вставить в блок Shortcode, classic editor или соответствующее поле конструктора страниц. Так вы не будете зависеть от непроверенных примеров из чужих статей.

Как выбрать способ

Shortcode-подборки для страниц услуг и лендингов

Shortcode в OceanWP Portfolio особенно полезен не как замена основной странице, а как способ показать контекстную подборку. Например, на странице услуги "Разработка сайтов" можно вывести только web-проекты, на странице "Айдентика" - брендинг, а на главной - шесть лучших работ без полного архива. В документации подтверждён сам маршрут через Portfolio - Shortcodes, поэтому безопаснее создавать такие вставки из интерфейса, а не копировать непроверенные параметры из чужих примеров.

При работе с несколькими shortcode-подборками важно сохранить единую редакционную логику. Если на главной странице карточки открывают single item, а на странице услуги такие же карточки внезапно открывают lightbox, посетитель может не понять разницу. Исключения допустимы, но они должны быть осознанными: фотоподборка может открываться в lightbox, а кейсы услуг - в отдельные страницы.

Как планировать несколько выводов

Сначала определите, какие страницы сайта действительно нуждаются в портфолио. Не стоит вставлять один и тот же блок работ в каждую услугу просто для объёма. Лучше подобрать конкретные проекты, которые доказывают компетенцию на этой странице. Для страницы "Интернет-магазины" нужны eCommerce-кейсы, для "Фирменный стиль" - брендинг, для "Контент" - визуальные серии и примеры публикаций.

Затем решите, сколько карточек показывать. Внутри лендинга обычно достаточно 3-6 работ и ссылки на полное портфолио. Если вставить 18 проектов внутрь каждой страницы услуги, пользователю будет трудно вернуться к основному тексту, а страница станет тяжелее. Основной архив пусть остаётся местом полного просмотра.

Проверка shortcode-блока

После вставки shortcode проверьте не только desktop. В page builder секциях часто есть собственные отступы, анимации и правила ширины. Они могут влиять на то, как выглядит сетка OceanWP Portfolio. Откройте страницу в приватном окне, проверьте фильтр, клики, мобильную ширину и поведение после очистки кеша. Если shortcode вставлен внутри вкладки, аккордеона или скрытой секции, отдельно проверьте, корректно ли сетка пересчитывается после раскрытия блока.

Если shortcode-подборка начинает требовать слишком много индивидуальных правок, это сигнал вернуться к архитектуре. Возможно, этой странице нужен обычный блок с 3 выбранными кейсами, а не полноценный portfolio grid с фильтрами и masonry.

Полная настройка в Customizer: что менять в первую очередь

Самый полезный раздел настроек находится в WordPress Customizer. После установки расширения там появляется панель Portfolio. Документация разбивает её на смысловые зоны: General, Archive, Filter Bar, Image, Query, Single Portfolio Item, Styling and Typography. Работать с ними лучше не сверху вниз механически, а по цепочке "страница - сетка - фильтр - изображение - запрос - single page".

General: главная страница и URL-логика

В General выбирается Portfolio Page и задаются slug-настройки для элементов, категорий и меток. Portfolio Page нужна не только для удобства администратора. Документация указывает, что она используется в хлебных крошках отдельных portfolio items и ведёт себя похоже на главную страницу блога или магазина, показывая отдельные элементы портфолио.

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

Archive: сетка, количество работ и заголовки

Archive отвечает за внешний вид основной страницы и архивов категорий/меток. Здесь важны layout, posts per page, columns, masonry, title/category position, display title, title link, title HTML tag, category display, pagination и pagination position. Это много настроек, но они решают несколько понятных задач.

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

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

Заголовок карточки и SEO-иерархия

Параметр Title HTML Tag полезен, когда на странице уже есть основной заголовок и нужно не ломать структуру документа. В документации приведён пример с H2, если отображается main Page Title. Для большинства страниц портфолио логика такая: если заголовок страницы уже виден как верхний заголовок, карточкам часто достаточно более низкого уровня или визуального текста без лишнего повышения в иерархии. Не выбирайте H2 только потому, что он "сильнее". Выбирайте тег так, чтобы структура страницы была понятной.

Filter Bar: фильтр как навигация, а не украшение

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

В документации описаны два типа фильтра. Default - это AJAX-фильтр, который ищет только среди элементов, уже показанных на текущей странице, без перезагрузки. Filter Button открывает поисковую форму и может искать по категориям, меткам или текстовому запросу среди доступных portfolio items. Это ключевой нюанс диагностики: если Default-фильтр "не находит" работу с другой страницы пагинации, он может вести себя именно так по своей логике, а не быть сломанным.

Taxonomy выбирает, по чему фильтровать: categories или tags. Для большинства сайтов категории понятнее пользователю, потому что они отражают крупные направления. Метки полезны, когда работ много и нужно фильтровать по стилям, технологиям или деталям. Responsive Filter Links стоит проверить на реальном мобильном экране: если кнопки фильтра превращаются в несколько строк и занимают весь первый экран, лучше скорректировать ширину, отступы и позицию.

Image: клик, lightbox и hover-поведение

В Image выбирается, что происходит при клике на изображение: открывается отдельный portfolio item или изображение в lightbox. Это не косметика, а сценарий просмотра. Для кейсов, где важны задача, процесс, описание и ссылка на результат, лучше вести на отдельную страницу. Для фотоподборки, где посетитель хочет быстро смотреть визуалы, lightbox может быть удобнее.

Там же настраиваются overlay color, overlay icons, link icon, lightbox icon, размеры и стили иконок, а также animation. Не включайте все эффекты сразу. Достаточно, чтобы пользователь понимал, куда ведёт клик. Если одновременно есть ссылка, лупа, сильное затемнение и Ken Burns-like масштабирование, карточка может выглядеть эффектно, но хуже объяснять действие.

Query: какие работы попадают в основной вывод

Query позволяет выбрать авторов, категории, исключаемые категории, метки, offset, order by и order. На практике это особенно полезно для сайтов с несколькими авторами или направлениями. Например, студия может вывести на главной только избранные категории, а технические внутренние проекты исключить из публичного портфолио.

С offset будьте осторожны: документация отмечает, что он ломает pagination и его стоит использовать только если вы показываете все элементы или не используете пагинацию. Поэтому для "пропустить первые 3 работы" лучше сначала спросить, зачем это нужно. Иногда правильнее изменить порядок или создать отдельную подборку через shortcode, чем усложнять основной архив.

Фильтры, masonry и изображения: как получить аккуратный результат

OceanWP Portfolio часто оценивают по первому визуальному впечатлению: ровная ли сетка, понятны ли категории, не размыты ли картинки, есть ли ожидаемая реакция на клик. Но внешний вид портфолио складывается не из одной настройки. Это связка featured images, количества колонок, masonry, фильтра, title/category position и image target.

Ровная сетка или masonry

Ровная сетка хорошо подходит для портфолио с одинаково подготовленными превью: сайты, упаковка, карточки проектов, иллюстрации одного формата. Masonry полезен, когда изображения имеют разные ориентации и их не хочется искусственно обрезать. Документация прямо объясняет, что masonry особенно полезен при featured images разных размеров и ориентаций.

Если после включения masonry сетка стала выглядеть живее, но на мобильном появились большие разрывы или странные прыжки, проверьте не только саму настройку. Часто причина в тяжёлых изображениях, lazy load, кешировании, конфликте оптимизатора или в том, что часть карточек не имеет нормального featured image. В changelog Ocean Portfolio встречались исправления lightbox, pagination и filtered content, поэтому при странном поведении стоит проверить обновления расширения и темы.

Изображения без размытости

В настройке Image Size документация рекомендует выбирать достаточно крупный размер, чтобы не получить размытые элементы, особенно при разных размерах и ориентациях. Для типового портфолио разумно начать с Medium Large 768 x 0, затем открыть публичную страницу на desktop и мобильном экране. Если карточки крупные и изображения всё равно мягкие, возможно, исходники слишком маленькие или тема выводит размер, который плохо совпадает с реальной шириной карточки.

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

Hover и lightbox без путаницы

Overlay icons помогают показать, что карточка кликабельна. Но важно, чтобы иконки не обещали одно, а действие делало другое. Если visible link icon ведёт на single item, а magnifying glass открывает lightbox, посетитель должен видеть оба действия или только то, которое действительно нужно. Для кейсов обычно полезен переход на проект. Для фотогалереи - lightbox. Для смешанного портфолио можно оставить оба действия, но протестировать их на мобильном, где hover как на desktop не работает.

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

Практический пример: страница работ для небольшой студии

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

Цель

Получить основную страницу портфолио с категориями "Сайты", "Брендинг", "Контент", аккуратной сеткой в три колонки на desktop, нормальным мобильным видом, видимыми названиями проектов, фильтром по категориям и переходом на отдельную страницу работы по клику.

Подготовка

Перед настройкой создайте минимум девять portfolio items: по три в каждой категории. Для каждого проекта добавьте featured image, короткое описание, категорию и при необходимости метки. Изображения подготовьте в близкой визуальной логике: например, горизонтальные превью сайтов, квадратные превью брендинга и вертикальные постеры лучше не смешивать без masonry.

Создайте страницу "Работы" и выберите для неё шаблон Portfolio. Добавьте страницу в меню через Appearance - Menus или через текущий интерфейс навигации сайта. Затем откройте Customizer и перейдите в Portfolio.

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

1. В General выберите страницу "Работы" как Portfolio Page.
2. Проверьте slug для portfolio item, category и tag. Для нового сайта можно выбрать понятные адреса, для живого сайта без плана редиректов лучше не менять их спонтанно.
3. В Archive выберите layout без боковой колонки, если портфолио должно быть визуально широким.
4. Поставьте разумное количество работ на страницу. Для старта можно вывести 9 или 12 элементов, чтобы фильтр и пагинация были понятны.
5. Выберите 3 колонки на desktop и проверьте мобильный вид в Customizer preview, а затем на реальном устройстве.
6. Если изображения разных пропорций, включите Masonry. Если все превью подготовлены одинаково, оставьте ровную сетку.
7. Включите Display Title и Display Category, если посетитель должен понимать направление проекта без наведения.
8. В Filter Bar включите Display Filter, выберите taxonomy Categories и проверьте, нужен ли Default или Filter Button.
9. В Image выберите Open Portfolio Item, если каждый проект должен открываться как кейс. Lightbox оставьте для сценария, где важнее быстрый просмотр изображения.
10. В Query не ограничивайте категории на основной странице, если она должна показывать все направления студии.

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

После публикации выйдите из админки или откройте приватное окно. Проверьте страницу "Работы" по пяти вопросам:

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

Если всё выглядит правильно, добавьте ещё несколько реальных работ и повторите проверку. Портфолио часто ломается не на первом тесте, а когда количество проектов становится неравномерным: в одной категории 2 работы, в другой 18, у части нет featured image, а у части длинные названия.

Нюанс с shortcode

Если нужно показать только "Брендинг" на странице услуги, создайте отдельный shortcode через Portfolio - Shortcodes и вставьте его в нужное место. Не заменяйте этим основную страницу "Работы", если вам нужна нормальная archive-like логика и возможные template-overrides через child theme.

Шаблоны, metabox-настройки и безопасная кастомизация

OceanWP даёт несколько уровней управления: глобальный Customizer, OceanWP Settings для отдельных страниц и template-файлы расширения. Ошибки часто появляются, когда эти уровни смешивают. Пользователь меняет шаблон в child theme, но портфолио выведено shortcode. Или редактирует страницу в page builder, но сама страница Portfolio работает как автоматический архив и не принимает контент так же, как обычная страница.

Что можно делать через Customizer

Через Customizer стоит решать всё, что уже есть в настройках: layout, количество работ, колонки, masonry, title/category position, display pagination, filter type, image target, overlay icons, query rules. Это самый безопасный слой, потому что он поддерживается продуктом и не требует правки файлов.

Что можно делать через OceanWP Settings

OceanWP Settings, также называемые metabox settings, позволяют переопределять некоторые параметры на уровне конкретной страницы или записи. Документация указывает, что новые настройки находятся в Gutenberg Sidebar и открываются через иконку OceanWP, а классические настройки остаются для Classic Editor и сценариев, где Gutenberg отключён. Если вы не видите эти настройки, проверьте Ocean Extra и раздел OceanWP - OceanWP Panel - Extra Settings.

Для страницы портфолио такие настройки полезны, когда основная страница должна отличаться от глобальной логики сайта: например, быть full width, без page title или с другой боковой колонкой. Но если сам вывод идёт через shortcode внутри страницы конструктора, часть поведения будет зависеть от shortcode и layout этой страницы.

Когда нужен child theme

Официальный документ по редактированию Portfolio templates разрешает копировать template-файлы расширения в папку templates дочерней темы и менять их там. Это правильный путь для разработчика, которому нужно добавить собственную разметку или нестандартные элементы. Но тот же документ содержит важное предупреждение: если архив портфолио выведен shortcode, изменения template-файлов не будут видны.

Безопасный принцип: сначала выясните, как именно вы выводите портфолио. Template-page, shortcode и page builder секция могут выглядеть похожими на сайте, но исправляются разными способами.

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

Проверка скорости, SEO и удобства просмотра

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

Скорость

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

Если используется оптимизатор изображений или lazy load, тестируйте фильтр и masonry после очистки кэша. Некоторые визуальные проблемы возникают не от OceanWP Portfolio, а от того, что сторонний оптимизатор подменяет размеры или задерживает загрузку так, что masonry не успевает правильно пересчитать высоту карточек.

SEO-структура

Для портфолио важны понятные заголовки карточек, отдельные страницы работ и аккуратная иерархия HTML-заголовков. В настройках Archive есть Title HTML Tag. Не превращайте каждую карточку в главный заголовок страницы. Если на странице уже есть H1, а карточек много, выбирайте уровень так, чтобы документ оставался логичным.

Категории портфолио могут помогать пользователю и поисковику понять структуру работ, но не стоит создавать десятки почти одинаковых категорий ради ключевых слов. Лучше меньше, но понятнее: "Интернет-магазины", "Корпоративные сайты", "Айдентика", "Фотосъёмка". Метки оставьте для деталей.

Удобство

Проверьте портфолио на мобильном экране. Фильтр, который хорошо выглядит в одну строку на desktop, может занять слишком много места на телефоне. Overlay icons могут быть понятны при наведении мыши, но на сенсорном устройстве наведения нет. Поэтому пользователь должен понимать действие по карточке даже без hover-эффекта.

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

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

Проблемы с портфолио обычно выглядят одинаково: "не отображается", "фильтр не работает", "картинки размыты", "lightbox открывает не то", "правки шаблона не применились". Но причины разные. Диагностику лучше начинать с маршрута вывода и только потом переходить к CSS, кешу или конфликтам.

Не появился пункт Portfolio в админке

Симптом: расширение вроде установлено, но в левом меню WordPress нет Portfolio, а создать portfolio item нельзя.

Возможная причина - расширение не активировано, активирована не та установка, у пользователя нет прав администратора или загрузка ZIP завершилась ошибкой. Сначала откройте Plugins и проверьте статус расширения. Затем убедитесь, что нет дублирующих старых копий и что сайт работает на нужной теме. Если продукт получен как часть Pro Bundle, вопросы доступа к файлу и обновлениям решаются через официальный аккаунт и поддержку, но внутри статьи мы не разбираем purchase/license flow.

Portfolio Settings или OceanWP Settings не видны

Симптом: тип записей есть, но нет ожидаемых настроек на странице или в редакторе.

Раздел Portfolio в Customizer появляется после активации premium extension. OceanWP Settings/metabox settings зависят от Ocean Extra и могут быть отключены в OceanWP - OceanWP Panel - Extra Settings. Если вы используете Gutenberg, новые OceanWP Settings открываются в sidebar через иконку OceanWP. Если используется Classic Editor, интерфейс может быть классическим и находиться ниже контента.

Фильтр показывает не все работы

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

Сначала проверьте тип фильтра. Default-фильтр, по официальному описанию, работает через AJAX только по элементам, показанным на текущей странице. Если проект находится на другой странице пагинации, такой фильтр может его не показать. Для поиска среди всех доступных элементов используйте Filter Button, который открывает форму поиска по категориям, меткам или запросу. Также проверьте Query: не исключены ли категории, не выбран ли конкретный author, не стоит ли offset.

Картинки выглядят размытыми

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

Проверьте исходный размер featured image и настройку Image Size. Документация рекомендует достаточно крупный вариант вроде Medium Large 768 x 0, чтобы избежать размытости. Если карточка шире выбранного размера, браузер будет растягивать картинку. Если исходник маленький, смена настройки не вернёт детализацию. После изменения размеров иногда нужно пересоздать миниатюры стандартными средствами WordPress или плагином, который вы уже используете для этого процесса.

Lightbox открывает не то изображение или конфликтует с фильтром

Симптом: после фильтрации lightbox показывает лишние изображения, не открывается или путает порядок.

В changelog Ocean Portfolio есть прошлые исправления, связанные с lightbox внутри filtered content. Поэтому сначала проверьте обновления Ocean Portfolio, темы OceanWP и Ocean Extra. Затем временно отключите сторонние lightbox-плагины и оптимизаторы JavaScript на тестовой копии сайта. Если проблема исчезает, причина, скорее всего, в конфликте скриптов или отложенной загрузке.

Правки шаблона в child theme не видны

Симптом: разработчик скопировал template-файл расширения в child theme, изменил разметку, но публичный блок портфолио остался прежним.

Проверьте способ вывода. Официальная документация предупреждает, что если portfolio archive выводится shortcode из Portfolio - Shortcodes, template-правки не будут видны. Для template-overrides используйте страницу с шаблоном Portfolio. Если нужен shortcode, ищите настройки shortcode и Customizer, а не template-файл архива.

Сетка ломается после кеша или page builder

Симптом: в админке или Customizer всё выглядит нормально, но на публичной странице карточки накладываются, фильтр не обновляет высоту или мобильные отступы отличаются от preview.

Очистите кеш сайта, CDN и браузера, затем проверьте страницу без минификации JavaScript на тестовой копии. Если портфолио вставлено shortcode внутрь конструктора страниц, посмотрите, не добавляет ли секция фиксированную высоту, overflow, анимацию появления или lazy load, который меняет момент расчёта сетки. При конфликте откатывайте последнюю спорную настройку, а не меняйте сразу всё портфолио.

Когда OceanWP Portfolio будет удачным выбором

OceanWP Portfolio стоит использовать, если вы уже работаете с OceanWP и хотите вывести портфолио как нормальную часть сайта: с отдельными portfolio items, категориями, фильтром, настраиваемой сеткой, поведением изображений и связью с общей логикой темы. Особенно хорошо продукт подходит для сайтов, где портфолио будет пополняться и где важно не собирать каждую секцию вручную в page builder.

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

Если вам нужна именно нативная связка OceanWP и портфолио, переходите к блоку загрузки и получить файл OceanWP Portfolio для проверки на тестовой копии сайта. Если же задача больше похожа на сложную фотогалерею, block-based media grid или Elementor-портфолио, сначала сравните альтернативы из раздела выше.

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