Використовуємо скрипт jQuery Masonry для оформлення постів у стилі Pinterest

Увімкнення скрипту jQuery кладка До складу основних бібліотек WordPress 3.5 дозволяє легко змінити підхід до виведення постів на екран на головній сторінці вашого сайту. Цей скрипт дозволяє представити всі пости та картинки у вигляді єдиної "стіни з цеглинок", незалежно від довжини посту та розміру картинок, що робить сайт візуально привабливішим для читачів і до того ж нагадує на вигляд популярний нині сервіс Pinterest. За допомогою jQuery Masonry всі пости "підлаштовуються" один під одного і заповнюють повністю відведений ним простір без "прогалин" і "порожніх місць" на головній сторінці. Давайте розберемося, як налаштувати такий вигляд для вашого сайту.

Що таке висновок у "цегляному" форматі

Виведення контенту на сторінці з такими параметрами відображення постів нагадує, як ми вже сказали, головну сторінку Pinterest. Усі пости впорядковані вертикально і заповнюють весь відведений під стрічку простір. Використовувати можна і "плаваючий" CSS, але в цьому випадку ви ризикуєте зіткнутися "білими плямами" на сторінці, оскільки контент спочатку впорядковується по горизонталі, а потім по вертикалі. У випадку з jQuery Masonry проблему "білих плям" можна легко вирішити.

Приклад "плаваючого" CSS

Приклад jQuery Masonry ("цегляна" структура)

У випадку з jQuery Masonry кожен пост відмінно вписується в загальну структуру, і при цьому немає "білих плям".

Давайте створимо досить простий висновок ваших постів на основі скрипту jQuery Masonry, оскільки ми вже знаємо, що таке "цегляна структура" для виведення постів на головну і як вона працює.

Крок 1. використовуємо wp_enqueue_script, щоб завантажити бібліотеку

Перед початком роботи треба завантажити відповідний до цього завдання скрипт. Для цього наступний код треба додати до файлу під назвою functions.php:

function mason_script() {
    wp_enqueue_script( 'jquery-masonry' );
}
add_action( 'wp_enqueue_scripts', 'mason_script' );

Крок 2. Налаштовуємо сітку

Для основної верстки нашої структури додаємо наступний код HTML в цикл (або в ту частину шаблону, де планується використовувати нашу "цегляну стіну"). Для початку налаштуємо загальний контейнер для всіх постів, а потім включимо такий тип відображення для кожного окремого посту:

<div id="container">
    <!-- start your query before the .brick element -->
    <div class="brick">
        <!-- Post Content -->
    </div>
    <!-- end query-->
</div>

Налаштовуємо CSS

Потрібно також вказати ширину контейнер-блоку та ширину окремого посту, щоб зберегти потрібний нам вид "як у Pinterest." У нашому прикладі ми задаємо ширину смуги в 960px, і отримуємо 4 колонки постів із шириною в 240 пікс для кожного посту. Запам'ятовуємо ці параметри та налаштовуємо висновок у таблиці стилів:

#container {
    width:      960px; // width of the entire container for the wall
}
 
.brick {
    width:      220px; // width of each brick less the padding inbetween
    padding:    0px 10px 15px 10px;
}

Крок 3. Налаштовуємо функцію

Далі треба налаштувати функцію, яка зводитиме разом все DIV-Контейнери і відображати їх як "стіну" з постів. Для цієї мети слід додати такий код:

jQuery( document ).ready( function( $ ) {
    $( '#container' ).masonry( { columnWidth: 220 } );
} );

Висновок

Masonry поставляється з багатьма вбудованими можливостями для використання даного скрипта в рамках WordPress. Наприклад, ви можете застосувати ефекти анімації для "пожвавлення" своїх постів, додати "на стіну" додаткові налаштування та впорядкувати виведення контенту в певному порядку або використовувати цей скрипт поряд з Infinte Scroll. Незалежно від того, як ви використовуватимете скрипт jQuery Masonry, дуже добре, що його додали в WordPress 3.5.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/