Виведення робіт портфоліо у вигляді сітки з фільтром – урок 27

за Ніколаєнко Максим · Опубліковано Лютий 9, 2015 · Оновлено Серпень 7, 2018

Дані у нас додаються та виводяться, але хотілося б не просто виводити дані, а зробити щось схоже на справжнє портфоліо, зі списком робіт які можна буде переглядати та фільтрувати. Зараз же, наше портфоліо виглядає як звичайні записи. Побачити роботу створеного нами раніше портфоліо можна за посиланням https://{ваш сайт}/моє портфоліо/

Те, як портфоліо виводитися зараз

wordpress portfolio taxonomy

Як виводитиметься портфоліо після доопрацювання

приклад портфоліо worpress

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

Продовжуємо роботу над нашою темою

Я думаю вам, як і мені, не дуже подобається, що посилання виглядає так /my-portfolio/, давайте змінимо це у файлі /wp-content/themes/my_theme_tmp/functions/custom-type.php.

wordpress portfolio slug

Змінимо слимак такий моє портфоліо на портфоліо. Якщо ви зайдете за вашим посиланням https://{ваш сайт}/портфоліо/, то можете зіткнутися з проблемою, тому що у нас вже була раніше створена сторінка з ярликом (слимак) портфоліо. Для того, щоб наші записи знову добре виводилися, Давайте видалимо сторінку з міткою portfolio.

wordpress видалити сторінку портфоліо

Після видалення сторінки Wordpress все ще пам'ятає її. Щоб остаточно закрити питання з ярликом portfolio, нам необхідно видалити цю сторінку з кошика.

У мене після цих дій перестав відображатись шаблон окремої сторінки, але я знайшов вихід. Якщо у вас така ж помилка, то вам необхідно в налаштуваннях у розділі “Постійні посилання” спочатку перейти на вигляд за замовчуванням (За замовчуванням), щоб усі посилання працювали у вигляді https://wp-admin.com.ua/?р=123, збережіть налаштування.

Параметри wordpress parmalink

Після збереження знову в налаштуваннях посилань вибираємо “Титульні записи“, як показано нижче та зберігаємо.

Параметри wordpress parmalink єдині

Після цих не хитрих маніпуляцій у вас знову повинні нормально працювати посилання та новий ярлик довільного типу /портфоліо/.

Налаштування шаблону виводу

Після налаштування красивих посилань перейдемо до налаштування шаблону для виведення всіх робіт у портфоліо. Шаблон ми назвемо archive-my_works.php (архів-{тип поста}.php). Оскільки наш тип називався моя робота, створення файлу з такою назвою буде автоматично присвоєно для списку записів даного типу.

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

назва спеціального типу wordpress Помістимо у створений шаблон базовий код верхньої, центральної та нижньої частини.

<?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

У файл 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(); ?>

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

Останнє, що нам залишилося це додати посилання на портфоліо в меню нашого сайту. Заходимо у меню Зовнішній вигляд -> Меню -> Посилання та додаємо нове посилання /портфоліо/, ставимо отримане посилання у потрібне місце.

Переміщуємо пункт меню до потрібного місця, щоб при заході на сайт його було видно.

Шаблон портфоліо готовий до роботи, постарайтеся розібратися в уроці, якщо не вийде, то ставте запитання у коментарях. Постараюся на них відповідати якнайшвидше.

У наступному уроці ми реалізуємо відкриття кожної роботи у спливаючому вікні (лайтбокс) для портфоліо.