Суть Masonry в том, что блоки разной высоты выводятся в строки, при этом размещаются одинаково отдаленно друг от друга и по вертикали и по горизонтали. Получается такой себе эффект кирпичной кладки, что придает странице более интересный и необычный внешний вид. Выглядит это примерно так.
Чтобы сделать такое на своем сайте, нужно выполнить несколько шагов. Давайте приступим к воплощению задуманного
Скрипт Masonry
В самом начале стоит понять, что вся сетка создается благодаря скрипту Masonry. Поэтому для работы нужен он, но так как он работает на основе jQuery, нужно подключить библиотеку. Как это сделать прочитайте в статье - Как и где подключить скрипт?. Подключать нужно такую строку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Если вы используете WordPress, то делать этого не нужно. У WordPress библиотека подключена по умолчанию, разве что вы специально ее отключали.
После библиотеки нужно уже подключать скрипт Masonry. Сначала рассмотрим пример для HTML страниц, для WordPress рассмотрим ниже. Скрипт можно взять из архива, что можно скачать по ссылке в начале статьи. В таком случаи он будет запускаться с вашего сайта. Подключается примерно так:
<script src="masonry.js"></script>
Нужно только указать правильный путь к файлу masonry.js. Если у вас все файлы в корне то так и оставить, а если в папках то весь путь вложенности. Используйте статью с инструкцией подключения.
Так же можно просто указать в подключении ссылку к стороннему ресурсу, например так:
<script src="https://masonry.desandro.com/masonry.pkgd.min.js"></script>
Таким образом скрипт будет подключаться с чужого ресурса, который предоставляет такую возможность.
Не указывайте ссылки с моего сайта или сайтов других вебсамстеров. Так вы создаете нагрузку на чужой сайт и со временем ваше подключение будет заблокировано.
Теперь давайте рассмотрим подключение для WordPress. Тут все немного иначе. Подключать конечно же можно как и в предыдущем способе, но это не совсем правильно. У WordPress есть свои функции которыми следует воспользоваться. Вам нужно исследовать файл функций своей темы function.php и найти в нем функцию подключения скриптов, подробнее прочитайте в статье упомянутой выше про подключение скриптов
Это будет wp_enqueue_script. Найдите функцию что подключает другие скрипты и рядом с ними добавьте подключение Masonry, которое уже вшито в WordPress и его нужно только подключить.
Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было.
wp_enqueue_script('masonry');
Если не можете найти подключение скриптов, то просто добавляете в самый конец function.php перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец. Добавляйте вот такую функцию:
function masonry_scr(){
wp_enqueue_script('masonry');
}
add_action( 'wp_enqueue_scripts', 'masonry_scr' );
После подключения скрипта Masonry, чтобы он начал работать его нужно применить к нашему контейнеру. Запуск скрипта нужно сделать после библиотеки jQuery и самого скрипта Masonry. Выглядит он так:
<script>
jQuery(document).ready(function($){
var $container = $('#container');$container.masonry({columnWidth:'.item',itemSelector: '.item'});
});
</script>
Самое главное в третьей строке, это и есть то что вам нужно, подключить его можно добавив как я написал или в отдельный файл, решать вам, если не знаете как, опять таки, воспользуйтесь статей про подключение скриптов.
- $('#container') - тут мы указываем ID нашего контейнера, внутри которого будут блоки которые нужно выровнять в сетке.
- columnWidth:'.item' - параметр, который задает ширину блоков. В нашем случаи мы указали ширину равную стилям блока с классом item, поэтому ширину зададим в CSS стилях.
- itemSelector: '.item' - указываем скрипту блоки с каким классом будут использованы при построении сетки.
У Masonry есть еще некоторые параметры, которые используются редко, если вы хотите детально изучить, можете поискать информацию ее очень много по Masonry. Для данного примера хватит и этих двух.
Таким образом вы активируете Masonry на вашем сайте и теперь можно уже перейти к следующим шагам.
HTML разметка
Сначала рассмотрим вариант для HTML страниц и тут все просто, вам нужно просто добавить примерно такую разметку:
<div id="container"> <div class="item"> <a class="item_link" href="/"><img src="images.jpg" > <h2>Lorem Ipsum - текст рыба</h2> <p>Что такое Lorem Ipsum? Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой"…</p> </a> </div> <div class="item w2"> <a class="item_link" href="/"><img src="images2.jpg" > <h2>Lorem Ipsum - текст рыба</h2> <p>Что такое Lorem Ipsum? Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой"…</p> </a> </div> //дальше любое количество блоков </div>
Как видите наш код обернут в родительский контейнер с ID - container. Внутри те самые блоки с классом item из которых будет построена сетка. Блоков может быть любое количество. В нашем примере, четным блокам помимо item еще присвоен класс w2. Это не Masonry, это моя доработка, для того чтобы задавать для четных блоков уникальные стили. Если вам это не нужно, то можно не добавлять второй класс.
Теперь рассмотрим вариант для WordPress. Тут немого сложнее, но если вы работаете с этой системой, то должны разбираться в циклах и как они устроены. Именно к циклу мы и применим Masonry. Выглядеть это будет примерно так:
<div id="container">
<?php if (have_posts()): $one = true; while (have_posts()) : the_post(); ?>
<div class="item <?php if(!$one == true) echo "w2" ?>" >
<a class="item_link" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?>
<h2><?php the_title(); ?></h2>
<?php echo wp_trim_words( get_the_content(), 20); ?>
</a>
</div>
<?php
$one = !$one;
endwhile;
the_posts_pagination($args = array('show_all' => false,'end_size' => 2,'mid_size' => 2,'prev_next' => true,'prev_text' => 'Назад','next_text' => 'Вперед','add_args' => false,'add_fragment' => '','before_page_number' => '','after_page_number' => '','screen_reader_text' => ' ',)); else : echo '404 страница не найдена!'; endif; ?>
</div>
Как и с версией для HTML, оборачиваем цикл в контейнер с ID - container. Внутри цикла будут генерироваться те же блоки с классом item и с классом w2 четные. WordPress генерирует одинаковые блоки согласно указанным параметрам. Если у вас будут разно размерные миниатюры, разной длины заглавия для записей и разная длина текста, то отличимые стили для четных блоков вам не надо, в противном случаи блоки будут почти одинаковы и сетка не будет выглядеть интересно. Если не хотите четным блокам добавлять другие стили, то код будет таким:
<div id="container">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="item" >
<a class="item_link" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?>
<h2><?php the_title(); ?></h2>
<?php echo wp_trim_words( get_the_content(), 20); ?>
</a>
</div>
<?php
endwhile;
the_posts_pagination($args = array('show_all' => false,'end_size' => 2,'mid_size' => 2,'prev_next' => true,'prev_text' => 'Назад','next_text' => 'Вперед','add_args' => false,'add_fragment' => '','before_page_number' => '','after_page_number' => '','screen_reader_text' => ' ',)); else : echo '404 страница не найдена!'; endif; ?>
</div>
Данные циклы включают в себя и постраничную пагинацию. Поэтому количество выводимых блоков в сетке укажите в общих настройках чтения в консоли администратора. Данный цикл можно добавлять в файлы:
- content.php
- index.php
- category.php
- archive.php
И другие файлы, в зависимости от вашей темы. Внутрь цикла можете добавлять любые элементы, главное внутрь блока item. Это могут быть миниатюры, кнопки, тексты, заголовки и тд. Все зависит от вашей фантазии. Что касается разметки на этом все, остались лишь стили.
CSS стили
Стили для простых страниц и WordPress одинаковы, так что добавьте следующие стили в свой файл стилей:
#container{max-width:1200px;margin:15px auto 0;position:relative;min-height:100vh;}
.item{width:23%;margin:1%;overflow:hidden;text-align:center;box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);border-radius:15px;-webkit-border-radius:15px;}
.item,.item > *{box-sizing:content-box;-webkit-box-sizing:content-box;}
.item img {height:250px;width:100%;-webkit-border-radius:0;border-radius:0;}
.w2 img{height:350px;}
.item h2{font-weight:bold;font-size:20px;line-height:25px;padding:5px;}
.item p{font-size:15px;line-height:19px;padding:5px;}
.item a{height:100%;display:block;position:relative;overflow:hidden;color:#212121;text-decoration:none;}
.item a:hover{position:relative;z-index:2;color:#f00;}
@media (max-width:900px){
.item {width:45%;margin:2%;}
}
@media (max-width:550px){
.item {width:95%;margin:2%;}
}
В этих стилях важными являются пару строк. В первой параметры для родительского блока, во второй и третей для блоков сетки, а в пятой те самые стили для четных блоков, а именно для изображений в них. Вы можете менять стили как угодно, настраивая под свой сайт или страницу.
Если все сделаете правильно, то результат не заставит себя ждать.
На этом все, спасибо за внимание. 🙂
