Как сделать портфолио на WordPress. Полное руководство

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

Несколько слов о реализации

Функционал WordPress предоставляет различные способы организации портфолио в зависимости от целей и задач. Наиболее простой подход заключается в добавлении произвольных полей (post meta) на определенную страницу, которые затем могут быть выведены на сайте. Этот метод позволяет создать портфолио, представленное только изображениями или текстовыми материалами.

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

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

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

Структура файлов

Перед тем как начинать создание портфолио, давайте организуем структуру файлов. Я всегда создаю отдельную папку внутри директории шаблона для более крупных функциональных модулей и размещаю там все необходимые файлы. В нашем случае создадим папку modules/portfolio. Внутри этой директории разместим файл portfolio.php, где будет содержаться весь PHP-код, а HTML-код блока портфолио разместим в файле portfolio-block.php. Также создадим файлы style.css и scripts.js для стилей и JavaScript-кода. В результате должна получиться следующая структура:

📂 название-темы 📂. 📂 modules 📂 portfolio 📄 portfolio.php 📄 portfolio-block.php 📄 style.css 📄 scripts.js 📂. 📂. 📄 index.php 📄 functions.php 📄 .

Подключение файлов

Теперь, когда все файлы готовы, нужно подключить их, чтобы они функционировали на сайте. Первым делом подключим файлы стилей и скриптов. Откройте файл portfolio.php и добавьте в самое начало следующий код:

 true ] ); // Для галереи wp_enqueue_script( 'swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js' ); wp_enqueue_style( 'swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css' ); >

Теперь интегрируем наш модуль в функционал темы. Для этого откройте файл functions.php и в самом конце добавьте следующий код:

include get_template_directory() . '/modules/portfolio/portfolio.php';

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

Создание нового типа записи

Тип записи в WordPress представляет собой основную функциональную единицу. Стандартно в WordPress доступно несколько типов записей: записи (post), страницы (page), медиафайлы (attachment) и ревизии (revision). Для нашего портфолио мы создадим новый тип записи под названием portfolio.

Код для регистрации нового типа записи необходимо вставить в файл modules/portfolio/portfolio.php:

// Регистрация типа записи portfolio add_action('init', 'portfolio_post_type_register'); function portfolio_post_type_register() < register_post_type( 'portfolio', [ 'labels' =>[ 'name' => 'Портфолио', 'singular_name' => 'Портфолио', 'add_new' => 'Добавить работу', 'add_new_item' => 'Добавить работу', 'edit_item' => 'Редактировать', 'new_item' => 'Новая работа', 'view_item' => 'Посмотреть работу', 'search_items' => 'Найти', 'not_found' => 'Работы не найдено', 'not_found_in_trash' => 'В корзине не найдено', 'parent_item_colon' => '', 'menu_name' => 'Портфолио' ], 'public' => true, 'rewrite' => true, 'has_archive' => true, 'hierarchical' => true, 'show_in_rest' => false, 'menu_position' => 36, 'menu_icon' => 'dashicons-portfolio', 'supports' => ['title', 'editor', 'thumbnail', 'page-attributes'] ] ); >

После внесения кода обязательно обновите настройки постоянных ссылок: Настройки > Постоянные ссылки > Сохранить изменения.

Обратите внимание на параметры public и has_archive.

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

Параметр has_archive активирует архивную страницу для портфолио, на которой будут отображены все работы. Доступ к странице портфолио будет осуществляться по адресу site.ru/portfolio/.

Эти параметры могут оказать влияние на SEO. Если public = true, то при добавлении работ в портфолио автоматически создаются страницы для каждой работы. Если эта страница не будет настроена сразу, в индекс поисковых систем могут попасть нежелательные страницы.

Регистрация категорий для портфолио

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

// Регистрация категорий для портфолио add_action( 'init', 'portfolio_type_taxonomy_register', 5 ); function portfolio_type_taxonomy_register() < // Регистрация таксономии register_taxonomy( 'type', ['portfolio'], [ 'label' =>'Категория', 'labels' => [ 'name' => 'Категории', 'singular_name' => 'Категории', 'search_items' => 'Найти категории', 'all_items' => 'Все категории', 'view_item' => 'Посмотреть категорию', 'parent_item' => 'Родительская категория', 'parent_item_colon' => 'Родитель:', 'edit_item' => 'Изменить категорию', 'update_item' => 'Обновить категорию', 'add_new_item' => 'Добавить новую категорию', 'new_item_name' => 'Новая категория', 'menu_name' => 'Категории', 'back_to_items' => '← Назад в категорию' ], 'public' => true, 'publicly_queryable' => false, 'hierarchical' => true, 'rewrite' => true ] ); >

Этот код также добавляется в файл modules/portfolio/portfolio.php.

Обратите внимание на параметр publicly_queryable. Если установить его значение на true, то для каждой категории будут автоматически созданы страницы. Если такие страницы не нужны, используйте false.

После добавления кода обязательно обновите настройки постоянных ссылок: Настройки > Постоянные ссылки > Сохранить изменения.

Добавление настроек для работ в портфолио

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

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

Давайте создадим новую запись в портфолио. Для этого нажмите кнопку Добавить работу.

Страница создания записи выглядит следующим образом:

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

Для создания дополнительных полей можно воспользоваться специальными плагинами для произвольных полей WordPress. Один из отличных плагинов — ACF, который прекрасно справляется с этой задачей, но является платным. В нашем примере мы рассмотрим бесплатный плагин Carbon Fields.

Перейдите по ссылке и загрузите последнюю версию плагина. Установите его через интерфейс загрузки файлов в админке.

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

Продолжайте редактировать файл portfolio.php. Дополните его следующим кодом:

// Добавление новых полей для портфолио add_action( 'carbon_fields_register_fields', 'portfolio_register_options' ); function portfolio_register_options() < \Carbon_Fields\Container::make( 'post_meta', 'Настройки портфолио' ) ->where( 'post_type', '=', 'portfolio' ) ->add_fields([ \Carbon_Fields\Field::make( 'date', 'portfolio_date', 'Дата перевозки' ) ->set_storage_format( 'd-F-Y' ) ->set_input_format( 'd-F-Y', 'd-F-Y' ), \Carbon_Fields\Field::make( 'text', 'portfolio_route', 'Маршрут перевозки' ), \Carbon_Fields\Field::make( 'media_gallery', 'portfolio_gallery', 'Галерея изображений' ) ]); >

Теперь вернитесь на страницу добавления работы в портфолио. Вы увидите новый блок с дополнительными настройками.

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

• Все готово!

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

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

Кстати, насчет категорий. Их можно добавлять через раздел Портфолио > Категории.

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

Вывод портфолио на сайт

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

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

Создаем новый шорткод [portfolio]

// Шорткод портфолио add_shortcode( 'portfolio', 'portfolio_shortcode_output' ); function portfolio_shortcode_output() < $args = []; $args['query'] = new WP_Query([ 'post_type' =>'portfolio', 'posts_per_page' => 10, 'fields' => 'ids', 'no_found_rows' => true, 'update_post_meta_cache' => false, 'update_post_term_cache' => false ]); ob_start(); get_template_part( 'modules/portfolio/portfolio-block', null, $args ); return ob_get_clean(); >

Мы извлекаем данные о работах из базы данных, создавая объект WP_Query и помещая его в массив параметров. Затем при помощи функции get_template_part() подключается файл modules/portfolio/portfolio-block.php, в который передается массив $args. Вся HTML-разметка для портофолио размещена в указанных файлах.

Обратите внимание на параметр posts_per_page, который определяет количество выводимых работ из базы данных.

 
have_posts()) : ?> 
have_posts()) : ?> the_post() ?> " 
  

.portfolio < margin: 60px 0; >.portfolio__title < font-size: 32px; text-align: center; >.portfolio__list < margin-top: 32px; display: grid; grid-template-columns: 1fr; grid-gap: 48px 0; >@media (min-width: 768px) < .portfolio__list< grid-template-columns: repeat(2, 1fr); grid-gap: 48px 24px; >> .portfolio__image < height: 280px; width: 100%; >.portfolio__image img < height: 100%; width: 100%; object-fit: cover; >.portfolio__name < font-size: 18px; font-weight: 500; margin-top: 12px; line-height: 1.35; >.portfolio__date < margin-top: 4px; >.portfolio__route

// Шорткод портфолио add_shortcode( 'portfolio', 'portfolio_shortcode_output' ); function portfolio_shortcode_output() < $args = []; $args['query'] = new WP_Query([ 'post_type' =>'portfolio', 'posts_per_page' => 10, 'fields' => 'ids', 'no_found_rows' => true, 'update_post_meta_cache' => false, 'update_post_term_cache' => false ]); $args['filter'] = get_terms([ 'taxonomy' => 'type', 'hide_empty' => true ]); ob_start(); get_template_part( 'modules/portfolio/portfolio-block', null, $args ); return ob_get_clean(); >

 
 
Все работы
 
name ) ?>
 have_posts()) : ?> 
have_posts()) : ?> the_post() ?> " data-portfolio-filter=" 'ids' ] ) ) ) ?>"> 
  

.portfolio__filter < display: flex; grid-gap: 0 16px; margin-top: 24px; overflow-x: auto; >.portfolio__filter-item < padding: 2px 12px; border-radius: 4px; cursor: pointer; white-space: nowrap; >.portfolio__filter-item.active < background-color: #212121; color: #fff; >.portfolio__filter-item:not(.active):hover

(function ($) < $('[data-filter]').on('click', function () < var $items = $('.portfolio__item'); // Добавляем класс активному фильтру $(this).addClass('active').siblings().removeClass('active'); // Показываем все работы if (id == '0') < $items.show(); return; >// Фильтруем портфолио $items.each(function () < let terms = $(this).data('portfolio-filter').toString().split(','); if (terms.indexOf(id) != -1) < $(this).show(); >else < $(this).hide(); >>) >) >)(jQuery);

'posts_per_page' => is_post_type_archive( 'portfolio' ) ? -1 : 10

.post-portfolio-props < display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 12px 24px; font-size: 16px; margin-top: 24px; >.post-portfolio-gallery < max-width: 840px; margin: 48px auto 0; >.post-portfolio-gallery .swiper < height: 580px; >.post-portfolio-gallery .swiper-slide < height: auto; width: 100%; >.post-portfolio-gallery img < height: 100%; width: 100%; object-fit: cover; >.post-portfolio-thumbs < margin-top: 16px; >.post-portfolio-thumbs .swiper-wrapper < justify-content: center; >.post-portfolio-thumbs .swiper-slide < width: 120px; cursor: pointer; opacity: 0.6; height: auto; transform: 180ms ease; >.post-portfolio-thumbs .swiper-slide img < height: 100%; width: 100%; object-fit: cover; >.post-portfolio-thumbs .swiper-slide-thumb-active

var thumbs = new Swiper( '.post-portfolio-thumbs .swiper', < slidesPerView: 'auto', spaceBetween: 16 >); var slider = new Swiper( '.post-portfolio-gallery .swiper', < slidesPerView: 1, thumbs: < swiper: thumbs >> );