Используем jQuery Masonry на сайтах WordPress опубликовал Радик Алиев категория  
просмотры 16 604

Используем jQuery Masonry на сайтах Wordpress

В этом tutorial я расскажу как пользоваться jQuery Masonry на WordPress. Друзья, Вы наверняка видели новые сайты, которые используют блоки с новостями разной величины и главное, что эти блоки подстраиваются под размеры экрана и делают максимально красивый вид. Пример Вы можете посмотреть на недавно выложенном шаблоне Chocolate WP Themeforest, в разделе блог. Данная фото тема WordPress будет нашим примером, но Вы наверняка видели использование jQuery Masonry и  на других сайтах WordPress.

Что такое jQuery Mansory

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

На данном примере Вы можете увидеть принцип работы jQuery Masonry до и после использования:

Как Вы видите результат на лицо, если Вы использовать css float: left, то остаются пустые промежутки, необходимо использовать css position, которое довольно проблематично настроить, можно, НО зачем, в этом на поможет Masonry.


Используем jQuery Mansory на сайтах WordPress

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

Если у Вас блоки разной ширины, Вам необходимо использовать следующий код:

Где сolumnWidth это ширина сетки (в пикселях). Masonry будет следовать этим двум правилам:

  1. Общая ширина элементов (высчитывается по данной формуле) = CSS width + padding-right+ padding-left + border-right-width + border-left-width + margin-right+ margin-left
  2. При использовании columnWidth все элементы должны быть расположены горизонтально на расчёт ширины ColumnWidth (например, для ColumnWidth: 200, элементы будут начинаться с 0 или 200 или 400 пикселей и так далее). Это может не совсем понятно, но и ничего сложного в этом нет, смотрим картинку.

Первый элемент общей шириной 190px и margin-right: 0. А второй элемент имеет margin-left: 0, по идее эти два элемента должны прикасаться друг к другу. Но поскольку ColumnWidth имеет значение 200px, то второй элемент начинает отображаться на расстояние 200px.

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

Итак чудеса jQuery Masonry и WordPress 3..

Теперь немного по кодируем. Для начала подключим необходимые библиотеки jQuery и Masonry в файле header.php. Закиньте данный код в header.php (скачать Вы можете на офф сайте) :

Убедитесь, что wp_enqueue_script стоит перед wp_head . Скрипт Masonry у меня располагается в папке js моей темы, у Вас может быть другое название.

Далее мы делаем структуры, как будет отображаться наши посты:

Див id=»content_masonry» будет вызывать работу скрипта masonry, а div class=»masonry_box» будет отображать наши посты при помощи скрипта. Теперь css, вы можете делать content_masonry например width 100%, тогда Вам ничего не нужно высчитывать, но если Вы делаете фиксированной ширины content_masonry, нужно сделать необходимые расчёты. Например, Вы делаете 4 колонки с постами, каждый имеет width + padding 190px и margin-right: 10px, значит размер контейнера content_masonry будет 200 x 4 = 800px:

Теперь осталось добавить php, который будет генерировать HTML, в данном случае я буду использовать WP_Query , чтобы отобразить 20 постов из категории Masonry, например в отображении страницы (page.php):

При помощи Masonry jQuery экономится достаточно много места в отображении постов, поэтому вывод 20 новостей вполне нормально (showposts=20). Вы можете написать любое значение, можете выводить все посты и Вам не потребуется навигация в теме.

Теперь когда мы всё подготовили и сделали, подключим script, который будет вызывать работу Masonry, расположите его перед закрывающимся тегом head (/head)

После всего проделанного у Вас получиться как на примере. Смотрите сниппеты WordPress , с помощью которых Вы сможете сделать хаки как в админке, так и на самом сайте.

Теги:

10 Комментарий

Оставить комментарий
  1. Ирина Март 20, 2012 at 2:49 пп #

    Прикольно и приятно читать такие статьи:) Помню, как мы с месонри в Шоколадке намучались — это была наша первая WP тема, в которой мы его использовали.

    • Николай Январь 6, 2013 at 8:03 дп #

      А можно посмотреть демо темы «Шоколадка»

  2. admin Март 20, 2012 at 2:54 пп #

    Да в Вашем шаблоне всё чётко сделано)) Шаблон на самом деле вышка

  3. Алексей Апрель 4, 2012 at 11:23 дп #

    Шаболн, на самом деле произведение.

  4. Норик Март 19, 2013 at 2:50 дп #

    //подключаем jQuery
    2
    <script language="javascript" type="text/javascript" src="/js/jquery.masonry.min.js»>//подключаем Masonry

    что писать на месте( //подключаем jQuery) и (подключаем Masonry)

  5. Евгений Январь 12, 2014 at 4:41 дп #

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

  6. Максим Январь 26, 2014 at 10:36 дп #

    Доброго времени суток, спасибо за отличную статью. Хочу добавить один совет тем, кто столкнётся с проблемой когда у него ничего не заработает (как это было у меня :)).
    В скрипте настройки нужно добавить один параметр названия класса блока, после параметра columnWidth. Вот так:

    jQuery(document).ready(function($){
    $(‘#content_masonry’).masonry({ columnWidth: 300, itemSelector: ‘.masonry_box’});
    });

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

  7. Ростислав Март 13, 2014 at 2:01 дп #

    Спасибо автору.
    У меня не начало работать, пока не добавил в код в файл functions.php.
    код

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

  8. Jimmy Exploit Апрель 13, 2015 at 4:40 дп #

    создал блок с контентом, внутри которого Masonry динамически его форматирует, если меняется размер окна. но вот проблема. сайдбар у меня сворачивается при нажатии на кнопку, а за ним и изменяется и размер расположения контента, при этом Masonry его не форматирует((. что нужно вписать в кнопку, чтобы она сворачивала сайдбар и вместе с этим перезапускала форматирование контента?

  9. Николай Июль 19, 2017 at 2:54 пп #

    Понимаю что статья древняя, все же я бы не рекомендовал так подключать скрипты (не о jQuery речь)
    [code]
    //подключаем jQuery
    <script language="javascript" type="text/javascript" src="/js/jquery.masonry.min.js»>//подключаем Masonry
    [/code]

Добавить комментарий

vk_like_site