Виведення робіт портфоліо у вигляді сітки з фільтром – урок 27
Дані у нас додаються та виводяться, але хотілося б не просто виводити дані, а зробити щось схоже на справжнє портфоліо, зі списком робіт які можна буде переглядати та фільтрувати. Зараз же, наше портфоліо виглядає як звичайні записи. Побачити роботу створеного нами раніше портфоліо можна за посиланням https://{ваш сайт}/моє портфоліо/
Те, як портфоліо виводитися зараз
Як виводитиметься портфоліо після доопрацювання
Демо галереї на сайті розробника
Продовжуємо роботу над нашою темою
Я думаю вам, як і мені, не дуже подобається, що посилання виглядає так /my-portfolio/, давайте змінимо це у файлі /wp-content/themes/my_theme_tmp/functions/custom-type.php.
Змінимо слимак такий моє портфоліо на портфоліо. Якщо ви зайдете за вашим посиланням https://{ваш сайт}/портфоліо/, то можете зіткнутися з проблемою, тому що у нас вже була раніше створена сторінка з ярликом (слимак) портфоліо. Для того, щоб наші записи знову добре виводилися, Давайте видалимо сторінку з міткою portfolio.
Після видалення сторінки Wordpress все ще пам'ятає її. Щоб остаточно закрити питання з ярликом portfolio, нам необхідно видалити цю сторінку з кошика.
У мене після цих дій перестав відображатись шаблон окремої сторінки, але я знайшов вихід. Якщо у вас така ж помилка, то вам необхідно в налаштуваннях у розділі “Постійні посилання” спочатку перейти на вигляд за замовчуванням (За замовчуванням), щоб усі посилання працювали у вигляді https://wp-admin.com.ua/?р=123, збережіть налаштування.
Після збереження знову в налаштуваннях посилань вибираємо “Титульні записи“, як показано нижче та зберігаємо.
Після цих не хитрих маніпуляцій у вас знову повинні нормально працювати посилання та новий ярлик довільного типу /портфоліо/.
Налаштування шаблону виводу
Після налаштування красивих посилань перейдемо до налаштування шаблону для виведення всіх робіт у портфоліо. Шаблон ми назвемо archive-my_works.php (архів-{тип поста}.php). Оскільки наш тип називався моя робота, створення файлу з такою назвою буде автоматично присвоєно для списку записів даного типу.
Назва нашого типу можна переглянути у файлі /wp-content/themes/my_theme_tmp/functions/custom-type.php, на малюнку нижче я покажу де дивитися.
Помістимо у створений шаблон базовий код верхньої, центральної та нижньої частини.
<?php get_header(); ?> <ділення id="жатка-обгортка"> <?php get_template_part( 'контент-топ', get_post_format() ); ?> </див.> <!-- Вміст--> <ділення id="вміст-обгортка"> <ділення id="content"> <клас div="контейнер"> <клас div="Рядок"> <!-- тут будет вывод портфолио --> </див.> </див.> </див.> </див.> <?php get_template_part( 'content-bottom', get_post_format() ); get_footer(); ?>
Оскільки портфоліо використовуватиме нові скрипти, то нам буде необхідно їх підключити. Скрипти потрібно підключити так, щоб вони виводилися між тегами <head></head>, але не змінювали основний код шаблону header.php.
Для підключення скриптів створіть файл /functions/ створимо файл custom-header-script.php і підключіть його до functions.php нашої теми.
У файл custom-header-script.php вносимо код для підключення скрипта галереї.
<?php
function my_scripts_method() {
$tmpDir = get_template_directory_uri();
if ( uGetPostType() == "портфель"){
wp_register_script( "Підсилення-портфоліо", $tmpDir". /js/simple-portfolio-page/js/jquery.easing.min.js');
wp_enqueue_script( "Підсилення-портфоліо" );
wp_register_script( 'mixitup-portfolio', $tmpDir". /js/simple-portfolio-page/js/jquery.mixitup.min.js');
wp_enqueue_script( 'mixitup-portfolio' );
wp_register_script( 'Портфоліо на замовлення', $tmpDir". /js/simple-portfolio-page/js/custom.js');
wp_enqueue_script( 'Портфоліо на замовлення' );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
функція add_my_stylesheet() {
$tmpDir = get_template_directory_uri();
if ( uGetPostType() == "портфель"){
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');
функція uGetPostType(){
$post_type = get_post_type();
if ($post_type){
$post_type_data = get_post_type_object( $post_type );
$post_type_slug = $post_тип_даних->переписати['Слимак'];
Повернення $post_тип_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(); ?> <ділення id="жатка-обгортка"> <?php get_template_part( 'контент-топ', get_post_format() ); ?> </див.> <!-- Вміст--> <ділення id="вміст-обгортка"> <ділення id="content"> <клас div="контейнер"> <клас div="Рядок"> <?php // берем все имеющиеся термы (категории нашего портфолио) из таксономии category_portfolio $categories = get_terms( 'category_portfolio', array( 'orderby' => 'count', // в начале показывает категории с большим количеством работ 'hide_empty' => 0, // скрывает пустые категории ) ); ?> <клас div="контейнер"> <ul id="filters" клас="клірфікс"> <?php /* формируем структуру меню фильтра для портфолио на основе полученных категорий */ foreach($categories as $cat){ if($cat->parent==0 && $cat->рахувати>0){ $singleCat .= '<li><клас span="фільтр" data-filter="'.$cat->slug.'">'.$cat->name.'</проліт></li>'; $allCat .= $cat->slug.' '; } } луна '<li><клас span="filter active" data-filter="'.$allCat.'">All</проліт></li>'; echo $singleCat; /* формируем структуру меню фильтра для портфолио на основе полученных категорий */ ?> </вул> <ділення id="portfoliolist"> <?php // выводим работы из портфолио $args = array( 'post_type' => 'my_works' // указываем записи какого типа необходимо достать ); $query = new WP_Query; $portfolio_item = $query->запит($args); // делаем запрос данных foreach( $portfolio_item as $item ){ $category = get_the_terms( $пункт->ID, 'category_portfolio' ); // достае все термы таксономии category_portfolio $flag = 0; foreach($category as $catItem){ if($flag == 0){ // если запись закреплена за одной категорией, категории сохраняются без запятой $dataCat = $catItem->слимак; $dataCatComma = $catItem->name; }ще{ // если запись закреплена за несколькими категориями, категории сохраняются с запятой $dataCat .= ' '.$catItem->слимак; $dataCatComma .= ', '.$catItem->name; } $flag++; } $attachmentId = get_post_thumbnail_id($пункт->ID); $thymbUrl = wp_get_attachment_url($attachmentId, 'Повний', true); // берем URL миниатюры, которая относится к записи echo ' <клас div="портфоліо '.$dataCat.'" data-cat="".$dataCat"."> <клас div="портфоліо-обгортка"> <img src="'.$thymbUrl.'" alt="Виведення робіт портфоліо у вигляді сітки з фільтром – урок 27" /> <клас div="label"> <клас div="текст-мітка"> <клас="текст-заголовок">'.$item->post_title.'</a> <клас span="текст-категорія">".$dataCatComma".</проліт> </див.> <клас div="Етикетка-БГ"></див.> </див.> </див.> </див.> '; } ?> </див.> </див.><!-- container --> </див.> </див.> </див.> </див.> <?php get_template_part( 'content-bottom', get_post_format() ); get_footer(); ?>
Код немаленький, але я додав коментарі, щоб було простіше розібратися в ньому. Нижче ви можете завантажити повний код шаблону на поточний момент.
Останнє, що нам залишилося це додати посилання на портфоліо в меню нашого сайту. Заходимо у меню Зовнішній вигляд -> Меню -> Посилання та додаємо нове посилання /портфоліо/, ставимо отримане посилання у потрібне місце.
Переміщуємо пункт меню до потрібного місця, щоб при заході на сайт його було видно.
Шаблон портфоліо готовий до роботи, постарайтеся розібратися в уроці, якщо не вийде, то ставте запитання у коментарях. Постараюся на них відповідати якнайшвидше.
У наступному уроці ми реалізуємо відкриття кожної роботи у спливаючому вікні (лайтбокс) для портфоліо.
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
