Masonry в wordpress. Кирпичная кладка блоков

Masonry в wordpress. Кирпичная кладка блоков

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

Для начала подключим необходимые библиотеки, они уже включены в состав wordpress, нам остается только вывести их в тему (внесем правки в файл functions.php):

Библиотеки для подключения masonry в wordpress

add_action('wp_enqueue_scripts', 'my_theme_scripts');
function my_theme_scripts() {

        wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() ); //стили своей темы

	wp_enqueue_script( 'jquery' ); //подключаем jquery

	wp_enqueue_script( 'imagesloaded', array( 'jquery' ), '', true ); //imagesloaded, зависит от jquery

	wp_enqueue_script( 'masonry', array( 'jquery' ), '', true ); //собственно сам скрипт masonry

	wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery', 'imagesloaded', 'masonry' ), '', true ); //свои скрипты, загружаются после загрузки всех вышестоящих

	if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

}

Imagesloaded — скрипт, который нужен нам, чтобы дожидаться загрузки картинок. Если мы не будем его использовать — masonry будет запускаться до того как загрузятся изображения, и верстка будет сбиваться.

В файл скриптов будем добавлять следующий код (файл script.js):

function masonryGrid() {
    jQuery(document).ready(function($) { // Дожидаемся загрузки страницы
        var $grid = $('#ms-container').masonry({ // хватаем контейнер, в котором будет наш вывод архивов
            // опции для Masonry (подробней ниже)...
            itemSelector: '.ms-item',
            columnWidth: '.ms-item',
            percentPosition: true
        });
        // загружаем masonry после загрузки всех изображений
        $grid.imagesLoaded().progress( function() {
            $grid.masonry('layout');
        });
    });
}
masonryGrid(); //запускаем функцию

В данном примере для контейнера записей используется id=»ms-container», а сами статьи обернуты классом .ms-item.
columnWidth — ширина контейнера, так как верстка адаптивная берем для вычисления ширину контейнера со статьей (class=»ms-item»).
percentPosition = true — разрешаем относительную ширину, в процентах.

Дополнительно нам понадобиться внести правки в файл archive.php или loop.php темы (в зависимости от того как была сделана тема). Нам нужно обернуть контейнер, в котором будут наши статьи, в идентификатор ms-container. А к блокам с самими статьями добавить класс ms-item.

Возможно, вам придется изменить кое-какие детали скрипта. Если не уверены в том, что делаете, приготовьте бэкап заранее.