Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

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

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

У випадку з 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
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 14

Петя:

Чому ви не поміняєте шапку свого сайту - дуже стрімко виглядає золотаво-коричневий з чорним, що переливається - начебто це магазин взуття

Супаман:

Це і є магазин взуття.

tutsplus:

А дизайн із tutsplus обов'язково було красти? Ліниві уйобки)

MykolUA:

Підкажіть, як вирішити проблему. Після того, як у function.php додаю код, сайт видає помилку: Fatal error:

Що з цим можна зробити? :)

WordPresso:

Підозрюю, що ви неправильно вставили наведений вище код. Або (малоймовірно) поточна тема оформлення викликає конфлікт із цим кодом.

MykolUA:

Як її можна вставити неправильно? )) у файл function.php, відразу після

Олександр:

Швидше за все, ви помилилися там, де я. Вставили код
jQuery( document ).ready( function( $ ) {
$( '#container' ).masonry( { columnWidth: 220 } );
});
у functions.php
Цей код потрібно обернути в і вставити між тегами (що закриває head) і (що відкриває body) у файлі header.php

А взагалі ефект класний. Реалізував його у клієнтській темі. Поки заслання не дам, він на тестовому домені.

victorpusaka:

«Для цієї мети слід додати такий код:» Ви знаєте, початківцю дуже важко здогадатися, куди саме слід вставити код.

WordPresso:

Спеціально для цього є окремий урок: https://hostenko.com/wpcafe/tutorials/kuda-vstavlyat-etot-kod-v-wordpress-obshhaya-struktura-faylov-temyi/
Який сенс у кожному уроці описувати ту саму процедуру зі вставкою коду?

WPcafe.org:

Для цього є спеціальний урок https://hostenko.com/wpcafe/tutorials/kuda-vstavlyat-etot-kod-v-wordpress-obshhaya-struktura-faylov-temyi/

пірат:

Не працює

Олександр:

Ще як працює. Потрібно просто уважніше все робити.

На двох блогах зробив. Тут
І на цьому
http://parfilov.com/

Robert Garibashvili:

Я ніяк не можу розібратися:

Що сюди ставити?

- Що саме сюди ставити?

Всі ці дива в цикл обернути?
А що ставити в середину їх?
Вибачте якщо це дурне питання, поясніть новачкові.

Jimmy Exploit:

створив блок із контентом, усередині якого Masonry динамічно його форматує, якщо змінюється розмір вікна. але проблема. сайдбар у мене згортається при натисканні на кнопку, а за ним і змінюється розмір розташування контенту, при цьому Masonry його не форматує((. що потрібно вписати в кнопку, щоб вона згортала сайдбар і разом з цим перезапускала форматування контенту?).

Додати коментар або відгук