Статьи

Создать портфолио Quicksand с WordPress

Февраль 17, 2019

Сегодня вы превратите свое простое портфолио в нечто удивительное с помощью магии Quicksand от Razorjack.

Вступление

Всегда хотел использовать плагин jQuery Quicksand? Вы когда-нибудь пытались реализовать это с WordPress? Но нашел кошмар, чтобы сделать оба? Что ж, я пройдусь по простому пошаговому руководству, чтобы перейти от пустой темы WordPress к красивому настраиваемому портфолио с использованием Quicksand. Я буду использовать пользовательскую тему, которая была сокращена для целей данного руководства вместе с WordPress 3.0+.

Так что откройте ваш любимый текстовый редактор и начнем!

Шаг 1 Создайте тип сообщения

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

Для простоты управления кодом давайте начнем с создания папки с именем portfolio и файла PHP с именем portfolio-post-types.php (или с того, что вы считаете подходящим).

Как только вы создали файл, давайте добавим немного кода …

Давайте начнем с создания функции:

1
2
3
4
5
6
7
<?php
 
    // function: post_type BEGIN
    function post_type()
    {
        // We will fill this function in the next step
    } // function: post_type END

Теперь, когда мы создали нашу пустую функцию, давайте добавим немного кода, чтобы эта функция делала что-то особенное. Сначала создайте ярлыки для нашего пользовательского типа записи. Вставьте следующий фрагмент кода в нашу функцию post_type :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
$labels = array(
    ‘name’ => __( ‘Portfolio’),
    ‘singular_name’ => __(‘Portfolio’),
    ‘rewrite’ => array(
        ‘slug’ => __( ‘portfolio’ )
    ),
    ‘add_new’ => _x(‘Add Item’, ‘portfolio’),
    ‘edit_item’ => __(‘Edit Portfolio Item’),
    ‘new_item’ => __(‘New Portfolio Item’),
    ‘view_item’ => __(‘View Portfolio’),
    ‘search_items’ => __(‘Search Portfolio’),
    ‘not_found’ => __(‘No Portfolio Items Found’),
    ‘not_found_in_trash’ => __(‘No Portfolio Items Found In Trash’),
    ‘parent_item_colon’ => »
);

Разбивка кода, который мы только что написали:

Переменная ‘tags’ — это массив строк, представляющих тип вашего сообщения, каждая из которых представляет собой текст, который выводится для конкретной функции.

  • name — множественная форма имени вашего поста.
  • singular_name — форма имени вашего типа в singular_name числе.
  • rewrite — переписать постоянные ссылки с этим форматом.
  • add_new — пункт меню для добавления нового сообщения.
  • edit_item — заголовок, отображаемый при редактировании сообщения.
  • new_item — new_item в меню избранного в заголовке администратора.
  • view_item — показывается вместе с постоянной view_item на экране редактирования сообщения.
  • search_items — текст кнопки для поля поиска на экране редактирования сообщений.
  • not_found — текст, который отображается, когда в поиске в not_found не найдено сообщений
  • not_found_in_trash — текст для отображения, когда в корзине нет сообщений.
  • parent_item_colon — используется в качестве метки для родительского сообщения на экране редактирования сообщений. Полезно только для иерархических типов записей.

Затем создайте аргументы для нашего пользовательского типа записи. Вставьте следующий фрагмент кода в нашу функцию post_type :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
$args = array(
    ‘labels’ => $labels,
    ‘public’ => true,
    ‘publicly_queryable’ => true,
    ‘show_ui’ => true,
    ‘query_var’ => true,
    ‘rewrite’ => true,
    ‘capability_type’ => ‘post’,
    ‘hierarchical’ => false,
    ‘menu_position’ => null,
    ‘supports’ => array(
        ‘title’,
        ‘editor’,
        ‘thumbnail’
    )
);
  • labels — массив меток для этого типа поста.
  • public — мета-аргумент, используемый для определения значений по умолчанию для publicly_queriable, show_ui, show_in_nav_menus и exclude_from_search.
  • publicly_queryable — могут ли запросы типа поста выполняться из внешнего интерфейса.
  • show_ui — генерировать ли пользовательский интерфейс по умолчанию для управления этим типом записи.
  • query_var — False для предотвращения запросов или строковое значение запроса var, которое будет использоваться для этого типа записи.
  • rewrite — переписать постоянные ссылки с этим форматом.
  • capability_type — строка, используемая для создания возможностей чтения, редактирования и удаления.
  • hierarchical — является ли тип сообщения иерархическим. Позволяет указать родителя.
  • menu_position — позиция в меню, в которой тип сообщения должен отображаться в админке.
  • supports — Псевдоним для непосредственного вызова add_post_type_support ().

Узнайте больше о add_post_type_support в Кодексе WordPress

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

1
register_post_type(__( ‘portfolio’ ), $args);

Форматирование вывода типа поста

Теперь у нас есть собственный тип записи. Давайте отформатируем вывод, чтобы мы могли получать удобные сообщения. Начните с создания другой функции в нашем файле portfolio-post-type.php .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
// function: portfolio_messages BEGIN
function portfolio_messages($messages)
{
    $messages[__( ‘portfolio’ )] =
        array(
            0 => »,
            1 => sprintf((‘Portfolio Updated. <a href=»%s»>View portfolio</a>’), esc_url(get_permalink($post_ID))),
            2 => __(‘Custom Field Updated.’),
            3 => __(‘Custom Field Deleted.’),
            4 => __(‘Portfolio Updated.’),
            5 => isset($_GET[‘revision’]) ?
            6 => sprintf(__(‘Portfolio Published. <a href=»%s»>View Portfolio</a>’), esc_url(get_permalink($post_ID))),
            7 => __(‘Portfolio Saved.’),
            8 => sprintf(__(‘Portfolio Submitted. <a target=»_blank» href=»%s»>Preview Portfolio</a>’), esc_url( add_query_arg(‘preview’, ‘true’, get_permalink($post_ID)))),
            9 => sprintf(__(‘Portfolio Scheduled For: <strong>%1$s</strong>. <a target=»_blank» href=»%2$s»>Preview Portfolio</a>’), date_i18n( __( ‘M j, Y @ G:i’ ), strtotime($post->post_date)), esc_url(get_permalink($post_ID))),
            10 => sprintf(__(‘Portfolio Draft Updated. <a target=»_blank» href=»%s»>Preview Portfolio</a>’), esc_url( add_query_arg(‘preview’, ‘true’, get_permalink($post_ID)))),
        );
    return $messages;
 
} // function: portfolio_messages END

То, что мы только что сделали, — это создаем функцию с именем portfolio_messages, которая принимает аргумент под названием $messages После этого мы создаем переменную, которая хранит массив для всех наших сообщений. Мы оставляем «0» пустым в нашем массиве, потому что начинаем индексирование с 1 с наших сообщений Затем, наконец, вернем наш массив в нашу функцию.

Создать таксономию

Наконец, нам нужно создать нашу таксономию. Начните с создания другой функции с именем portfolio_filter и введите следующий код:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
// function: portfolio_filter BEGIN
function portfolio_filter()
{
    register_taxonomy(
        __( «filter» ),
        array(__( «portfolio» )),
        array(
            «hierarchical» => true,
            «label» => __( «Filter» ),
            «singular_label» => __( «Filter» ),
            «rewrite» => array(
                ‘slug’ => ‘filter’,
                ‘hierarchical’ => true
            )
        )
    );
} // function: portfolio_filter END

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

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

1
2
3
add_action( ‘init’, ‘post_type’ );
add_action( ‘init’, ‘portfolio_filter’, 0 );
add_filter( ‘post_updated_messages’, ‘portfolio_messages’ );

Как только мы введем это, нам нужно открыть наш файл functions.php и вставить следующую строку кода:

1
include(«portfolio/portfolio-post-types.php»);

Нам нужно включить наш собственный тип портфолио в наш файл functions.php, чтобы скрипт запускался при вызове функций вашей темы WordPress. Теперь вы увидите в панели администратора раздел « Портфолио» с 3 суб-элементами навигации, которые называются «Портфолио», «Добавить элемент» и «Фильтр».

Шаг 2 Создать страницу портфолио

Теперь у нас есть все настройки портфеля, нам нужно вывести элементы нашего портфеля. Мы начнем с создания нового PHP-файла с именем portfolio.php . Во-первых, давайте добавим некоторые основные элементы для создания шаблона страницы:

01
02
03
04
05
06
07
08
09
10
11
12
<?php /* Template Name: Portfolio */ ?>
 
    <?php get_header();
     
    <!— #content BEGIN —>
    <div id=»content» class=»clearfix»>
     
        // We will add our content later
         
    </div><!— #content END —>
     
<?php get_footer();

Теперь у нас есть базовый шаблон страницы, который нам нужен для заполнения нашего портфолио. Сначала нам нужно создать страницу, которая будет выступать в качестве нашей страницы портфолио, поэтому зайдите в Pages -> Add New на нашей панели инструментов. Справа вы увидите поле « Атрибуты страницы» с раскрывающимся списком « Шаблон по умолчанию» , выберите нужный шаблон, который вы хотите использовать в нашем портфеле дел, и затем выберите «Опубликовать».

Показать фильтр

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

1
2
3
4
5
6
<ul class=»filter clearfix»>
 
    <li><strong>Filter:</strong></li>
    <li class=»active»><a href=»javascript:void(0)» class=»all»>All</a></li>
 
</ul>

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<?php
    $terms = get_terms(‘filter’, $args);
    $count = count($terms);
    $i=0;
    if ($count > 0) {
        foreach ($terms as $term) {
        $i++;
        $term_list .= ‘<li><a href=»javascript:void(0)» class=»‘. $term->slug .'»>’ .
         
            if ($count != $i)
            {
                $term_list .= »;
            }
            else
            {
                $term_list .= »;
            }
        }
        echo $term_list;
    }
?>

Здесь мы сначала инициализируем таксономию, которую мы хотим получить, в нашем фильтре дел. Во-вторых, настройте счетчик с нашими категориями, чтобы мы увеличивали его для каждого элемента в нашем фильтре, а затем примените условный оператор, чтобы проверить, является ли установленное нами число меньше 0; Это означает, что если в фильтре отсутствуют категории или категории, присвоенные элементу портфеля, ничего не будет выведено. Если в нашем фильтре есть категории, то мы хотим изменить вывод для каждого элемента.

Мы делаем это следующей строкой в ​​нашем сегменте кода:

1
$term_list .= ‘<li><a href=»javascript:void(0)» class=»‘. $term->slug .'»>’ .

Мы создаем элемент списка, чтобы он поместился в нашем неупорядоченном списке, а затем устанавливаем «href» в качестве пустой цели, потому что Quicksand будет обрабатывать организацию контента, затем мы устанавливаем имя нашего класса как кусок элемента портфолио для последовательных ссылок, и, наконец, вывод имени категории в наших фильтрах.

Показать элементы портфолио

Отлично, теперь у нас реализован динамический фильтр. Теперь мы собираемся вывести наши позиции портфеля. Давайте начнем опрашивать нашу базу данных, чтобы получить все посты для типа поста портфолио и настроить наш цикл WordPress. Мы начнем с настройки нового объекта WP_Query и передадим ему правильные параметры.

1
2
3
4
5
6
7
<?php
    $wpbp = new WP_Query(array(
            ‘post_type’ => ‘portfolio’,
            ‘posts_per_page’ =>’-1′
        )
    );
?>

Мы назначаем наш объект WP_Query переменной, чтобы мы могли ссылаться на наш запрос, когда мы инициализируем наш цикл. Мы устанавливаем наш тип записи в портфолио, поэтому мы запрашиваем только наш пользовательский тип записи, который мы создали ранее, и, наконец, устанавливаем значение posts_per_page -1. Мы используем -1, чтобы не было фиксированных ограничений на количество постов на странице, поэтому отображаются все элементы портфолио, при желании мы также можем ввести любое число, и оно будет отображать только количество элементов портфолио, которые были введены здесь.

Теперь, когда у нас есть объект запроса, на который мы можем ссылаться, давайте настроим наш цикл для вывода элементов нашего портфеля. Начнем со вставки следующего кода:

1
2
3
4
5
6
<?php if ($wpbp->have_posts()) : while ($wpbp->have_posts()) : $wpbp->the_post();
 
    <?php // All of our portfolio content will be inserted in here… ?>
     
<?php endwhile;
<?php wp_reset_query();

Прежде чем мы начнем вводить контент в наш цикл, мы собираемся настроить наши избранные изображения. Откройте ваш файл functions.php, и мы добавим несколько пользовательских размеров изображения для вывода для каждого элемента портфолио.

Давайте сначала проверим, поддерживает ли текущая версия WordPress функциональность рекомендуемого изображения , а затем настроим некоторые общие настройки для его правильной работы. Мы добавили поддержку пост-миниатюр и установили размер по умолчанию 56 на 56 пикселей.

1
2
3
4
5
if ( function_exists( ‘add_theme_support’ ) )
{
    add_theme_support( ‘post-thumbnails’ );
    set_post_thumbnail_size( 56, 56, true );
}

Затем мы хотим добавить наш собственный размер эскиза. Вставьте следующий код в строку ниже: set_post_thumbnail_size

1
add_image_size( ‘portfolio’, 295, 150, true );

Этот метод позволяет вам создать свой собственный размер миниатюры, сначала установив имя ссылки для миниатюры, затем ширину и высоту и, наконец, если миниатюра должна жестко обрезать изображение, чтобы соответствовать указанному размеру. Вы можете изменить размеры вашего показанного изображения в соответствии с вашим макетом; с целью этого урока у меня есть сетка с 3 столбцами.

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
<ul class=»filterable-grid clearfix»>
    <li>
     
        <?php if ( (function_exists(‘has_post_thumbnail’)) && (has_post_thumbnail()) ) : ?>
         
            <?php the_post_thumbnail(‘portfolio’);
             
        <?php endif;
         
        <p><a href=»<?php the_permalink(); ?>»><?php echo get_the_title();
         
    </li>
</ul>

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

Подключите элементы портфолио и фильтр

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

1
<?php $terms = get_the_terms( get_the_ID(), ‘filter’ );

Далее мы собираемся добавить некоторые атрибуты в наш элемент списка ( li ). Мы начинаем с добавления data-id в наш элемент списка, чтобы обеспечить уникальную идентификацию для каждого из элементов портфеля. Мы также собираемся добавить data-type ; это будет служить нашей ссылкой на наш фильтр. Заменим наш начальный элемент списка ( li ) следующим кодом:

1
<li data-id=»id-<?php echo $count; ?>» data-type=»<?php foreach ($terms as $term) { echo strtolower(preg_replace(‘/\s+/’, ‘-‘, $term->name)). ‘ ‘; } ?>»>

Мы применяем счетчик к нашему data-id , и при циклическом переходе по каждому элементу счет будет увеличиваться (мы скоро добавим счет). Затем мы перебираем каждую категорию в нашей таксономии и применяем регулярное выражение для поиска пробелов и заменяем его на «-», чтобы соответствовать фрагменту категории, а затем, наконец, оставляем пустое пространство в конце, чтобы мы могли применить более одной категории для элемента портфолио.

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

1
<?php $count++;

Окончательный код для отображения портфолио

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<ul class=»filterable-grid clearfix»>
 
    <?php $wpbp = new WP_Query(array( ‘post_type’ => ‘portfolio’, ‘posts_per_page’ =>’-1′ ) );
 
    <?php if ($wpbp->have_posts()) : while ($wpbp->have_posts()) : $wpbp->the_post();
 
    <?php $terms = get_the_terms( get_the_ID(), ‘filter’ );
 
        <li data-id=»id-<?php echo $count; ?>» data-type=»<?php foreach ($terms as $term) { echo strtolower(preg_replace(‘/\s+/’, ‘-‘, $term->name)). ‘ ‘; } ?>»>
     
            <?php if ( (function_exists(‘has_post_thumbnail’)) && (has_post_thumbnail()) ) : ?>
             
                <?php the_post_thumbnail(‘portfolio’);
             
            <?php endif;
         
            <p><a href=»<?php the_permalink(); ?>»><?php echo get_the_title();
     
        </li>
 
    <?php $count++;
    <?php endwhile;
    <?php wp_reset_query();
 
</ul>

Шаг 3 jQuery & Quicksand

Сейчас мы делаем успехи, но прежде чем продолжить, нам нужно пойти и скачать некоторые скрипты jQuery. Нам нужно скачать следующие скрипты:

Нам также необходимо создать файл JavaScript для обработки всех наших пользовательских jQuery, которые мы вскоре напишем. Итак, давайте создадим пустой файл JavaScript с именем jquery.custom.js . Теперь, когда у нас есть все необходимые скрипты, давайте откроем наши functions.php и создадим пустую функцию с именем register_js . Как только у нас будет пустая функция, мы собираемся вставить наши скрипты, используя методы wp_register_script и wp_enqueue_script. Во-первых, мы должны убедиться, что мы не являемся администратором, чтобы убедиться, что скрипты загружаются только во внешний интерфейс. Вставьте следующий код в нашу функцию:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
// Register our scripts
function register_js()
{
    if ( !is_admin() )
    {
        wp_register_script( ‘quicksand’, get_template_directory_uri() . ‘/js/jquery.quicksand.js’, ‘jquery’ );
 
        wp_register_script( ‘easing’, get_template_directory_uri() . ‘/js/jquery.easing.1.3.js’, ‘jquery’ );
 
        wp_register_script( ‘custom’, get_template_directory_uri() . ‘/js/jquery.custom.js’, ‘jquery’, ‘1.0’, true );
 
        wp_enqueue_script( ‘jquery’ );
        wp_enqueue_script( ‘quicksand’ );
        wp_enqueue_script( ‘easing’ );
        wp_enqueue_script( ‘custom’ );
    }
}

Сначала с помощью wp_register_script мы указываем дескриптор в качестве первого аргумента для ссылки при постановке сценариев в очередь, а затем добавляем ссылку на источник в сценарий в качестве второго аргумента (это относится к каждой регистрации сценария). Мы также указываем jquery как зависимость для загрузки включенной в WordPress версии jQuery, когда мы ставим скрипт в очередь.

Как только мы зарегистрировали все наши скрипты, мы ставим их в очередь с помощью wp_enqueue_script . Мы передаем все дескрипторы, которые мы использовали при регистрации в качестве ссылки для постановки в очередь наших скриптов. Наконец, нам нужно инициализировать нашу функцию, добавив следующий код в наш файл functions.php :

1
add_action(‘init’, ‘register_js’);

Написание зыбучих песков

Теперь, когда у нас есть все наши сценарии, мы можем приступить к написанию собственного сценария jQuery для обработки Quicksand. Давайте откроем наш скрипт jquery.custom.js и настроим среду, вставив следующий код:

1
2
3
4
5
jQuery(document).ready(function() {
 
    // We will insert our quicksand script in here
 
});

Теперь у нас есть структура скрипта, мы создадим функцию с именем portfolio_quicksand и будем выполнять только при наличии плагина Quicksand.

01
02
03
04
05
06
07
08
09
10
11
function portfolio_quicksand() {
 
    // All of our quicksand handling will happen in this function
 
}
 
if(jQuery().quicksand) {
 
    portfolio_quicksand();
 
}

Я разбью следующее на более мелкие этапы, чтобы вы могли понять все, что происходит при создании портфолио Quicksand. Давайте начнем с настройки наших переменных. Вставьте следующий код в нашу функцию portfolio_quicksand :

1
2
3
4
5
var $filter;
var $container;
var $containerClone;
var $filterLink;
var $filteredItems;

Мы будем использовать эти переменные чаще, так что это всегда хороший способ создать прочную основу для установки переменных. Далее мы собираемся назначить наши переменные:

1
2
3
4
$filter = $(‘.filter li.active a’).attr(‘class’);
$filterLink = $(‘.filter li a’);
$container = $(‘ul.filterable-grid’);
$containerClone = $container.clone();

Сначала мы настроили наш фильтр на класс неупорядоченного списка из нашего шаблона страницы портфолио. Во-вторых, мы настроили filterLink ; это будет действовать как наш элемент в нашем фильтре. Затем нам нужно назначить наш контейнер для элементов нашего портфеля, и, наконец, нам требуется клонированная версия нашего контейнера, чтобы манипулировать данными с помощью Quicksand.

Далее, мы собираемся написать нашу функцию щелчка, поэтому, когда пользователь выбирает категорию, контейнер должен манипулировать, и вывод содержимого должен отображаться. Давайте начнем с вызова функции щелчка на нашей filterLink :

1
2
3
4
5
$filterLink.click(function(e) {
 
    // We will add the content for this function now…
 
});

Теперь давайте обработаем активное состояние элемента списка. Сначала мы удаляем любой класс с текущим активным состоянием, затем ищем фильтр и разбиваем фильтр на отдельные элементы, и, наконец, применяем активный класс к выбранному элементу (категории):

1
2
3
4
5
$(‘.filter li’).removeClass(‘active’);
 
$filter = $(this).attr(‘class’).split(‘ ‘);
         
$(this).parent().addClass(‘active’);

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

Двигаясь дальше, мы будем обрабатывать условие для фильтрации наших данных. Сначала мы проверим, все ли выбрано. Если все было выбрано, отобразите все элементы в нашем контейнере, иначе отобразите элементы в контейнере, которые были выбраны фильтром.

Ранее, когда мы создавали шаблон страницы нашего портфолио и назначали data-type для каждого из элементов нашего портфолио, именно здесь мы будем использовать его в качестве ссылочного ключа для поиска выбранных нами данных.

1
2
3
4
5
6
if ($filter == ‘all’) {
    $filteredItems = $containerClone.find(‘li’);
}
else {
    $filteredItems = $containerClone.find(‘li[data-type~=’ + $filter + ‘]’);
}

Наконец, мы вызываем метод Quicksand и передаем наши FilterItems и все наши параметры анимации:

1
2
3
4
5
6
$container.quicksand($filteredItems,
{
    duration: 750,
    easing: ‘easeInOutCirc’,
    adjustHeight: ‘dynamic’
});

Окончательный код для нашей плывуна

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function portfolio_quicksand() {
     
    // Setting up our variables
    var $filter;
    var $container;
    var $containerClone;
    var $filterLink;
    var $filteredItems
     
    // Set our filter
    $filter = $(‘.filter li.active a’).attr(‘class’);
     
    // Set our filter link
    $filterLink = $(‘.filter li a’);
     
    // Set our container
    $container = $(‘ul.filterable-grid’);
     
    // Clone our container
    $containerClone = $container.clone();
  
    // Apply our Quicksand to work on a click function
    // for each of the filter li link elements
    $filterLink.click(function(e)
    {
        // Remove the active class
        $(‘.filter li’).removeClass(‘active’);
         
        // Split each of the filter elements and override our filter
        $filter = $(this).attr(‘class’).split(‘ ‘);
         
        // Apply the ‘active’ class to the clicked link
        $(this).parent().addClass(‘active’);
         
        // If ‘all’ is selected, display all elements
        // else output all items referenced by the data-type
        if ($filter == ‘all’) {
            $filteredItems = $containerClone.find(‘li’);
        }
        else {
            $filteredItems = $containerClone.find(‘li[data-type~=’ + $filter + ‘]’);
        }
         
        // Finally call the Quicksand function
        $container.quicksand($filteredItems,
        {
            // The duration for the animation
            duration: 750,
            // The easing effect when animating
            easing: ‘easeInOutCirc’,
            // Height adjustment set to dynamic
            adjustHeight: ‘dynamic’
        });
    });
}

Шаг 4 Интеграция с лайтбоксом (дополнительная опция)

Удивительно, но теперь у вас должен быть полностью функциональный портфель Quicksand, но давайте не будем останавливаться на этом. Я собираюсь добавить дополнительную опцию, это совершенно необязательно, но это может стать любимой функцией, и это Lightbox. Мы будем использовать плагин jQuery под названием PrettyPhoto для нашей интеграции с Lightbox.

Первое, что мы собираемся сделать, это скачать плагин PrettyPhoto.

Как только мы загрузим наши файлы PrettyPhoto, мы сначала скопируем изображения PrettyPhoto, которые будут в папке с изображениями, а затем вам нужно скопировать папку с названием PrettyPhoto в нашу тему. Нам также нужно скопировать CSS-файл и JavaScript-файл PrettyPhoto, поэтому давайте скопируем их в соответствующие папки в нашей теме.

Теперь, когда у нас есть все наши файлы, нам нужно инициализировать их в нашей теме. В нашем файле functions.php мы создадим еще одну функцию для обработки наших стилей и вызовем эту функцию register_css . Затем мы зарегистрируем наши стили и поставим их в очередь, добавив следующий код в ваш файл functions.php :

01
02
03
04
05
06
07
08
09
10
// Register our styles
function register_css()
{
    if (!is_admin()) {
        wp_register_style( ‘prettyPhoto’, get_template_directory_uri() . ‘/css/prettyPhoto.css’ );
        wp_enqueue_style( ‘prettyPhoto’ );
    }
}
 
add_action( ‘init’, ‘register_css’ );

У нас есть все наши файлы, и они инициализируются нашей темой. Теперь нам нужно использовать это и внедрить Lightbox в нашу тему. Давайте откроем файл portfolio.php (шаблон страницы портфолио) и добавим немного кода в наше рекомендуемое изображение.

Во-первых, нам нужно получить большое изображение выбранного изображения. Это будет действовать как полноразмерное изображение, когда пользователь нажимает на изображение и загружается PrettyPhoto. В нашем цикле WordPress нам нужно вставить следующий код:

1
2
3
4
<?php
    $large_image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), ‘fullsize’, false, » );
    $large_image = $large_image[0];
?>

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

Как только у нас будет полноразмерное изображение, мы инициализируем PrettyPhoto на нашем изображении. Следующий код свяжет полноразмерное изображение с избранным изображением элемента портфолио и передаст ссылку на PrettyPhoto, заменив код, в котором вы создали свое рекомендуемое изображение, следующим:

1
<a rel=»prettyPhoto» href=»<?php echo $large_image ?>»><?php the_post_thumbnail(‘portfolio’);

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

Давайте вернемся к нашему файлу jquery.custom.js и создадим еще одну пустую функцию для обработки нашего PrettyPhoto:

1
2
3
4
5
6
7
8
9
function lightbox() {
 
    // Our Lightbox functioning will be added now…
 
}
 
if(jQuery().prettyPhoto) {
    lightbox();
}

Теперь, когда у нас есть наша функция, мы инициализируем PrettyPhoto. Мы делаем это, добавляя следующий код в нашу функцию Lightbox :

1
2
3
4
5
6
7
8
jQuery(«a[rel^=’prettyPhoto’]»).prettyPhoto({
    animationSpeed:’fast’,
    slideshow:5000,
    theme:’pp_default’,
    show_title:false,
    overlay_gallery: false,
    social_tools: false
});

Вы можете прочитать полную документацию по всем параметрам, которые PrettyPhoto примет при использовании плагина, по адресу: PrettyPhoto jQuery Lightbox Clone

Итак, все готово! Реализация Lightbox в вашей теме WordPress, но подождите, позвольте мне угадать, когда вы нажмете на фильтр и используете Quicksand; лайтбокс больше не работает. Это потому, что нам нужно изменить наш скрипт Quicksand и передать еще один небольшой фрагмент кода, чтобы убедиться, что Lightbox работает, даже когда мы фильтруем наше портфолио.

Итак, давайте исправим эту небольшую проблему, добавив следующий скрипт в нашу функцию portfolio_quicksand в нашем файле jquery.custom.js :

1
2
3
$container.quicksand($filteredItems,
    function () { lightbox();
);

Здесь мы снова вызываем плагин Quicksand и передаем функцию в этом вызове нашей функции Lightbox. Таким образом, каждый раз, когда Quicksand фильтрует содержимое, вызывается функция Lightbox с применением PrettyPhoto к каждому изображению.

Шаг 5 Интеграция с нумерацией страниц (дополнительная опция)

Многие люди любят использовать зыбучие пески, но некоторым людям нравится использовать зыбучие пески и пагинацию в своих портфелях. Это еще одно дополнительное дополнение для создания нумерации страниц в вашем портфолио. Я буду использовать плагин WordPress: WP_PageNavi .

Давайте сначала установим и активируем плагин. Перейдите на страницу плагинов -> Добавить новую в нашем разделе администрирования и найдите WP_PageNavi , найдя его, нажмите « Установить сейчас» и активируйте плагин после установки.

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

Во-первых, нам нужно настроить нашу страницу, чтобы разрешить нумерацию страниц. Мы делаем это, вставляя следующий сегмент кода перед тем, как запросить нашу базу данных:

1
$paged = get_query_var(‘paged’) ?

После инициализации пагинации нам нужно изменить запрос к базе данных. Мы изменяем post_per_page на число, чтобы отобразить максимальное количество сообщений, которые будут отображаться на каждой странице. Затем мы передаем новый параметр в наш постраничный запрос и ссылаемся на этот сегмент кода, который позволил нам разбить страницу на страницы, как показано в следующем коде:

1
$wpbp = new WP_Query(array( ‘post_type’ => ‘portfolio’, ‘posts_per_page’ =>’2′, ‘paged’ => $paged ) );

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

1
2
3
4
5
6
7
<?php
    if(function_exists(‘wp_pagenavi’))
    {
        wp_pagenavi(array( ‘query’ => $wpbp ) );
        wp_reset_postdata();
    }
?>

Это оно! У вас будет полнофункциональное портфолио с Quicksand, Lightbox и Pagination.

Вывод

Похлопай себя по спине! Вы успешно создали портфолио Quicksand с WordPress. Вся тяжелая работа выполнена, и вы можете выполнить ее с любой разработкой.

Я хотел бы сказать ОГРОМНОЕ спасибо за то, что потратили время на чтение моего урока, надеюсь, это помогло. Пожалуйста, не стесняйтесь оставлять комментарии, и я сделаю все возможное, чтобы помочь и ответить на них.

42
Share: