Вывод работ портфолио в виде сетки с фильтром – урок 27

Данные у нас добавляются и выводятся, но хотелось бы не просто выводить данные, а сделать что-то похожее на настоящее портфолио, со списком работ которые можно будет просматривать и фильтровать. Сейчас же, наше портфолио выглядит как обычные записи. Увидеть работу созданного нами ранее портфолио можно по ссылке https://{ваш сайт}/my-portfolio/

То как портфолио выводиться сейчас

wordpress portfolio taxonomy

Как будет выводиться портфолио после доработки

worpress portfolio themplate example

Демо галереи на сайте разработчика

Продолжаем работу над нашей темой

Я думаю вам, как и мне, не очень нравиться, что ссылка выглядит так /my-portfolio/, давайте изменим это в файле /wp-content/themes/my_theme_tmp/functions/custom-type.php.

wordpress portfolio slug

Изменим slug такой my-portfolio на portfolio. Если вы зайдете по вашей ссылке https://{ваш сайт}/portfolio/, то можете столкнуться с проблемой, так как у нас уже была ранее создана страница с ярлыком (slug) portfolio. Для того чтобы наши записи снова хорошо выводились, давайте удалим страницу с ярлыком portfolio.

wordpress delete portfolio page

После удаления страницы wordpress все еще помнит ее. Чтобы окончательно закрыть вопрос с ярлыком portfolio нам необходимо удалить эту страницу из корзины.

delete portfolio page from treshУ меня после этих действий перестал отображаться шаблон отдельной страницы, но я нашел выход. Если у вас такая же ошибка, то вам необходимо в настройках в разделе «Постоянные ссылки» сначала переключиться на вид по умолчанию (Default), чтобы все ссылки работали в виде https://wp-admin.com.ua/?p=123, сохраните настройку.

wordpress parmalink settings

После сохранения снова в настройках ссылок выбираем «Название записи«, как показано ниже и сохраняем.

wordpress parmalink settings single

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

Настройка шаблона вывода

После настройки красивых ссылок перейдем к настройке шаблона для вывода всех работ в портфолио. Шаблон мы назовем archive-my_works.php (archive-{post type}.php). Так как наш тип назывался my_work, то создание файла с таким названием будет автоматически присвоено для списка записей данного типа.

Название нашего типа можно подсмотреть в файле /wp-content/themes/my_theme_tmp/functions/custom-type.php, на рисунке ниже я покажу где смотреть.

wordpress custom type nameПоместим в созданный шаблон базовый код верхней, центральной и нижней части.

Так как портфолио будет использовать новые скрипты, то нам будет необходимо их подключить. Скрипты нужно подключить так, чтобы они выводились между тегами <head></head>, но не изменяли основной код шаблона header.php.

Для подключения скриптов создайте файл /functions/ создадим файл custom-header-script.php и подключите его в functions.php нашей темы.

wordpress requery custom script

В файл custom-header-script.php вносим код для подключения скрипта галереи.

 

Представленный выше скрипт подключает CSS и JS файлы в WordPress на то место, где в файле header.php установлена функция wp_head(). Подробнее о функциях подключения шрифтов можно почитать на моей статье «Работа с jquery в WordPress«, которая на примере библиотеки jquery показывает как подключать скрипты. Также о подключении стилей можно почитать в кодексе WordPress.

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

Следующим шагом будет добавление галереи к файлам вашего сайта. Скачайте архив галереи ниже и положите его в папку /wp-content/themes/my_theme_tmp/js/simple-portfolio-page/… .

zip wordpress theme archive

Предлагаю вам мой код для вывода данной галереи в файле archive-my_works.php:

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

zip wordpress theme archive

Последнее что нам осталось это добавить ссылку на портфолио в меню нашего сайта. Заходим в меню Внешний вид -> Меню -> Ссылки и добавляем новую ссылку /portfolio/, ставим полученную ссылку в нужное место.

add wordpress menu portfolio - курсы по wordpress

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

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

В следующем уроке мы реализуем открытие каждой работы во всплывающем окне (лайтбокс) для портфолио.


Купить хостинг WordPress
Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

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


Вам может также понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal