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

- Николаенко Максим · Опубликовано 9 февраля, 2015 · Обновлено 7 августа, 2018

Данные у нас добавляются и выводятся, но хотелось бы не просто выводить данные, а сделать что-то похожее на настоящее портфолио, со списком работ которые можно будет просматривать и фильтровать. Сейчас же, наше портфолио выглядит как обычные записи. Увидеть работу созданного нами ранее портфолио можно по ссылке 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 нам необходимо удалить эту страницу из корзины.

У меня после этих действий перестал отображаться шаблон отдельной страницы, но я нашел выход. Если у вас такая же ошибка, то вам необходимо в настройках в разделе «Постоянные ссылки» сначала переключиться на вид по умолчанию (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 Поместим в созданный шаблон базовый код верхней, центральной и нижней части.

<?php get_header(); ?>
		<div id="header-wrapper">
			<?php get_template_part( 'content-top', get_post_format() ); ?> 
		</div>
		<!-- Content -->
			<div id="content-wrapper">
				<div id="content">
					<div class="container">
						<div class="row">
						<!-- тут будет вывод портфолио -->
						</div>
					</div>
				</div>
			</div>
<?php get_template_part( 'content-bottom', get_post_format() );
get_footer(); ?>

<?php get_header(); ?>

<?php get_template_part( 'content-top', get_post_format() ); ?>

</div>

</div>

<?php get_template_part( 'content-bottom', get_post_format() );

get_footer(); ?>

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

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

wordpress requery custom script

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

<?php
function my_scripts_method() { 
		$tmpDir = get_template_directory_uri();
		if ( uGetPostType() == 'portfolio'){
			wp_register_script( 'easing-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.easing.min.js');
			wp_enqueue_script( 'easing-portfolio' );
			
			wp_register_script( 'mixitup-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.mixitup.min.js');
			wp_enqueue_script( 'mixitup-portfolio' );
			
			wp_register_script( 'custom-portfolio', $tmpDir.'/js/simple-portfolio-page/js/custom.js');
			wp_enqueue_script( 'custom-portfolio' );
		}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
 
 
function add_my_stylesheet() {
		$tmpDir = get_template_directory_uri();   
		if ( uGetPostType() == 'portfolio'){
			wp_register_style('normalize-portfolio', $tmpDir.'/js/simple-portfolio-page/css/normalize.css');
			wp_enqueue_style('normalize-portfolio'); 
			
			wp_register_style('layout-portfolio', $tmpDir.'/js/simple-portfolio-page/css/layout.css');
			wp_enqueue_style('layout-portfolio'); 
		}
}
add_action('wp_print_styles', 'add_my_stylesheet'); 



function uGetPostType(){
		$post_type = get_post_type();
		
		if ($post_type){
			$post_type_data = get_post_type_object( $post_type );
			$post_type_slug = $post_type_data->rewrite['slug'];
			return $post_type_slug;
		}
}
?>

<?php

function my_scripts_method() {

$tmpDir = get_template_directory_uri();

if ( uGetPostType() == 'portfolio'){

wp_register_script( 'easing-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.easing.min.js');

wp_enqueue_script( 'easing-portfolio' );

wp_register_script( 'mixitup-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.mixitup.min.js');

wp_enqueue_script( 'mixitup-portfolio' );

wp_register_script( 'custom-portfolio', $tmpDir.'/js/simple-portfolio-page/js/custom.js');

wp_enqueue_script( 'custom-portfolio' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

function add_my_stylesheet() {

$tmpDir = get_template_directory_uri();

if ( uGetPostType() == 'portfolio'){

wp_register_style('normalize-portfolio', $tmpDir.'/js/simple-portfolio-page/css/normalize.css');

wp_enqueue_style('normalize-portfolio');

wp_register_style('layout-portfolio', $tmpDir.'/js/simple-portfolio-page/css/layout.css');

wp_enqueue_style('layout-portfolio');

}

add_action('wp_print_styles', 'add_my_stylesheet');

function uGetPostType(){

$post_type = get_post_type();

if ($post_type){

$post_type_data = get_post_type_object( $post_type );

$post_type_slug = $post_type_data->rewrite['slug'];

return $post_type_slug;

}

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

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

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

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

<?php get_header(); ?>
		<div id="header-wrapper">
			<?php get_template_part( 'content-top', get_post_format() ); ?> 
		</div>
		<!-- Content -->
			<div id="content-wrapper">
				<div id="content">
					<div class="container">
						<div class="row"> 
						<?php
							// берем все имеющиеся термы (категории нашего портфолио) из таксономии category_portfolio
						 $categories = get_terms( 'category_portfolio', array(
							'orderby'    => 'count', // в начале показывает категории с большим количеством работ
							'hide_empty' => 0, // скрывает пустые категории
						 ) );
						?>

							<div class="container">

								<ul id="filters" class="clearfix">
								<?php
								 /* формируем структуру меню фильтра для портфолио на основе полученных категорий */
								 foreach($categories as $cat){
									if($cat->parent==0 && $cat->count>0){ 
										$singleCat .= '<li><span class="filter" data-filter="'.$cat->slug.'">'.$cat->name.'</span></li>';
										$allCat .= $cat->slug.' ';
									}
								 }
								 echo '<li><span class="filter active" data-filter="'.$allCat.'">All</span></li>';
								 echo $singleCat;
								 /* формируем структуру меню фильтра для портфолио на основе полученных категорий */
								?> 
								</ul>
								<div id="portfoliolist">
								<?php
									// выводим работы из портфолио
									$args = array(
										'post_type' => 'my_works' // указываем записи какого типа необходимо достать
									);
									$query = new WP_Query;
									$portfolio_item = $query->query($args); // делаем запрос данных
									
									foreach( $portfolio_item as $item ){
										$category = get_the_terms( $item->ID, 'category_portfolio' ); // достае все термы таксономии category_portfolio
										$flag = 0;
										foreach($category as $catItem){
											if($flag == 0){ // если запись закреплена за одной категорией, категории сохраняются без запятой
 												$dataCat = $catItem->slug;
												$dataCatComma = $catItem->name;
											}else{ // если запись закреплена за несколькими категориями, категории сохраняются с запятой
												$dataCat .= ' '.$catItem->slug;
												$dataCatComma .= ', '.$catItem->name;
											}
											$flag++;
										}  
										$attachmentId = get_post_thumbnail_id($item->ID); 
										$thymbUrl = wp_get_attachment_url($attachmentId, 'full', true); // берем URL миниатюры, которая относится к записи
										echo '
											<div class="portfolio '.$dataCat.'" data-cat="'.$dataCat.'">
												<div class="portfolio-wrapper">
													<img src="'.$thymbUrl.'" alt="" />
													<div class="label">
														<div class="label-text">
															<a class="text-title">'.$item->post_title.'</a>
															<span class="text-category">'.$dataCatComma.'</span>
														</div>
														<div class="label-bg"></div>
													</div>
												</div>
											</div>		
										';
									}
								?>								 
								</div>
								
							</div><!-- container --> 
						</div>
					</div>
				</div>
			</div>
<?php get_template_part( 'content-bottom', get_post_format() );
get_footer(); ?>

<?php get_header(); ?>

<?php get_template_part( 'content-top', get_post_format() ); ?>

</div>

<?php

// берем все имеющиеся термы (категории нашего портфолио) из таксономии category_portfolio

$categories = get_terms( 'category_portfolio', array(

'orderby' => 'count', // в начале показывает категории с большим количеством работ

'hide_empty' => 0, // скрывает пустые категории

) );

<?php

/* формируем структуру меню фильтра для портфолио на основе полученных категорий */

foreach($categories as $cat){

if($cat->parent==0 && $cat->count>0){

$singleCat .= '<li><span class="filter" data-filter="'.$cat->slug.'">'.$cat->name.'</span></li>';

$allCat .= $cat->slug.' ';

}

echo '<li><span class="filter active" data-filter="'.$allCat.'">All</span></li>';

echo $singleCat;

/* формируем структуру меню фильтра для портфолио на основе полученных категорий */

</ul>

<?php

// выводим работы из портфолио

$args = array(

'post_type' => 'my_works' // указываем записи какого типа необходимо достать

);

$query = new WP_Query;

$portfolio_item = $query->query($args); // делаем запрос данных

foreach( $portfolio_item as $item ){

$category = get_the_terms( $item->ID, 'category_portfolio' ); // достае все термы таксономии category_portfolio

$flag = 0;

foreach($category as $catItem){

if($flag == 0){ // если запись закреплена за одной категорией, категории сохраняются без запятой

$dataCat = $catItem->slug;

$dataCatComma = $catItem->name;

}else{ // если запись закреплена за несколькими категориями, категории сохраняются с запятой

$dataCat .= ' '.$catItem->slug;

$dataCatComma .= ', '.$catItem->name;

}

$flag++;

}

$attachmentId = get_post_thumbnail_id($item->ID);

$thymbUrl = wp_get_attachment_url($attachmentId, 'full', true); // берем URL миниатюры, которая относится к записи

echo '

<a class="text-title">'.$item->post_title.'</a>

<span class="text-category">'.$dataCatComma.'</span>

</div>

</div>

}

</div>

</div>

</div>

<?php get_template_part( 'content-bottom', get_post_format() );

get_footer(); ?>

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

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

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

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

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