Это гостевой пост Джоша Поллока
Отображение постов в виде сетки в стиле Pinterest уже некоторое время является популярным дизайном для индексных страниц блогов WordPress. Он популярен не только потому, что имитирует внешний вид популярного сайта социальных сетей, но и потому, что наилучшим образом использует пространство на экране. В индексе блога WordPress это позволяет каждому превью поста иметь тот размер, который естественно должен быть, не оставляя лишнего пространства.
В этом руководстве я покажу вам, как использовать популярную JavaScript-библиотеку Masonry для создания каскадных сетчатых макетов для индекса вашего блога, а также архивных страниц вашей темы. Я рассмотрю несколько проблем, которые необходимо учитывать для мобильной оптимизации, и способы их решения.
Примечание: Это учебник продвинутого уровня для тех, кто чувствует себя комфортно при редактировании тем WordPress и обладает достаточными знаниями HTML/CSS.
Шаг 1: Добавьте необходимые библиотеки в вашу тему
Обновить: WordPress 3.9 теперь включает последнюю версию Masonry.
Сначала вам нужно загрузить Masonry в вашу тему, используя этот код:
if (! function_exists('slug_scripts_masonry') ) : if ( ! is_admin() ) : function slug_scripts_masonry() < wp_enqueue_script('masonry'); wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’); >add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' ); endif; //! is_admin() endif; //! slug_scripts_masonry существует
Этот код просто загружает masonry и делает его доступным для файлов шаблона вашей темы (см. наше руководство о том, как правильно добавлять JavaScripts и стили в WordPress). Также обратите внимание, что мы не добавляем jQuery в качестве зависимости ни для того, ни для другого. Одним из преимуществ Masonry 3 является то, что он не требует jQuery, но может использоваться вместе с ним. По моему опыту, инициализация Masonry без jQuery более надежна, и открывает возможность пропустить загрузку jQuery, что может помочь как со временем загрузки страницы, так и с проблемами совместимости.
Шаг 2: Инициализация Javascript
Следующая функция устанавливает Masonry, определяет контейнеры, которые будут использоваться с ним, а также следит за тем, чтобы все происходило в правильном порядке. Masonry необходимо рассчитать размер каждого элемента на странице, чтобы динамически расположить свою сетку. Проблема, с которой я столкнулся при использовании Masonry во многих браузерах, заключается в том, что Masonry неправильно рассчитывает высоту элементов с медленно загружающимися изображениями, что приводит к перекрытию элементов. Решение заключается в использовании imagesLoaded, чтобы предотвратить расчет макета Masonry, пока все изображения не будут загружены. Это обеспечивает правильный размер.
Это функция и действие, которые будут выводить скрипт инициализации в нижний колонтитул страницы:
if ( ! function_exists( 'slug_masonry_init' )) : function slug_masonry_init() < ?> //добавляем в wp_footer add_action( 'wp_footer', 'slug_masonry_init' ); endif; // ! slug_masonry_init exists
Функция объясняется шаг за шагом со встроенными комментариями. Функция Javascript говорит Masonry искать внутри контейнера с id «masonry-loop» элементы с классом «masonry-entry» и рассчитывать сетку только после загрузки изображений. Мы задаем внешний контейнер с помощью querySelector и внутренний с помощью itemSelector.
Шаг 2: Создать цикл Masonry
Вместо того чтобы добавлять HTML-разметку для Masonry непосредственно в шаблон, мы создадим для нее отдельную часть шаблона. Создайте новый файл с именем «content-masonry.php» и добавьте его в вашу тему. Это позволит вам добавить цикл Masonry во столько различных шаблонов, сколько вы захотите.
В ваш новый файл вы добавите код, показанный ниже. Разметка похожа на ту, которую вы обычно видите при предварительном просмотре любого контента. Вы можете изменять его как угодно, только убедитесь, что крайний элемент имеет класс «masonry-entry», который мы установили в качестве itemSelector в последнем шаге.
" > " title="">Эта разметка имеет классы для каждой из своих частей, поэтому вы можете добавить разметку в соответствии с вашей темой. Мне нравится добавлять красивую, слегка закругленную рамку в .masonry-entry. Еще один хороший вариант — отсутствие границы для .masonry-entry, но чтобы придать ему легкую тень. Это выглядит особенно хорошо, когда миниатюра поста простирается до границы контейнера, что может быть достигнуто путем предоставления .masonry-thumbnail поля и отступы равны 0 во всех направлениях. Вы захотите добавить все эти стили в файл под названием masonry.css в директории css вашей темы.
Шаг 3: Добавьте петлю Masonry в шаблоны
Теперь, когда у нас есть наша часть шаблона, вы можете использовать его в любом шаблоне вашей темы, который вам нравится. Вы можете добавить его в index.php, но не категории.php, если вы не хотите, чтобы она использовалась для архивов категорий. Если вы хотите использовать их только на главной странице вашей темы, когда она настроена на показ записей блога, вы будете использовать их в home.php. Где бы вы ни выбрали, все, что вам нужно сделать, это обернуть цикл в контейнер с id «masonry-loop» и добавить часть шаблона в цикл с помощью get_template_part(). Обязательно запустите контейнер цикла кладки перед while (have_posts() ).
Например, вот основной цикл из индекса twentythirteen.php:
А здесь он модифицирован, чтобы использовать наш цикл Masonry:
Шаг 4: Установите отзывчивую ширину элементов кладки
Есть несколько способов, которыми вы можете установить ширину каждого элемента Masonry. Вы можете задать ширину с помощью числа пикселей при инициализации Masonry. Я не сторонник этого, поскольку использую отзывчивые темы, а это требует сложных медиа-запросов, чтобы все было правильно на маленьких экранах. Для отзывчивого дизайна, я обнаружил, что лучше всего установить значение ширины для .masonry-entry с процентом, основанным на том, сколько элементов вы хотите в ряду и пусть Masonry делает остальную математику для вас.
Все, что для этого требуется, это разделить 100 на количество элементов, для которых вы хотите установить процент в простой записи в стиле вашей темы.css. Например, если вам нужно четыре элемента в каждом ряду, вы можете сделать следующее в вашей кладке.css файл:
Шаг 5: Оптимизация для мобильных устройств
Мы могли бы остановиться на этом, но я не думаю, что конечный результат работает невероятно хорошо на маленьких экранах телефонов. Когда вы будете довольны тем, как выглядит ваша тема с новой сеткой Masonry на рабочем столе, проверьте ее на телефоне. Если вас не устраивает, как это выглядит на вашем телефоне, то вам придется немного поработать.
Я не думаю, что на экране телефона достаточно места для всего, что мы добавили в нашу часть шаблона content-masonry. Два хороших решения, доступных вам, — это сократить выдержку для телефонов или пропустить ее полностью. Вот дополнительная функция, которую вы можете добавить в функции вашей темы.php, чтобы сделать это. Поскольку я не думаю, что эти проблемы являются проблемой на планшетах, я использую отличный плагин Mobble во всех примерах в этом разделе, чтобы внести изменения только на телефонах, а не на планшетах. Я также проверяю, активен ли Mobble, прежде чем использовать его, и при необходимости возвращаюсь к более общей функции обнаружения мобильных устройств wp_is_mobile, которая встроена в WordPress.
if (! function_exists('slug_custom_excerpt_length') ) : function slug_custom_excerpt_length( $length ) < //set the shorter length once $short = 10; //set long length once $long = 55; //if we can only set short excerpt for phones, else short for all mobile devices if (function_exists( 'is_phone') < if ( is_phone() ) < return $short; >else < return $long; >> else < if ( wp_is_mobile() ) < return $short; >else < return $long; >> > add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 ); endif; // ! slug_custom_excerpt_length existsКак вы видите, мы начинаем с хранения длины длинного и короткого отрывка в переменных, так как мы будем использовать эти значения дважды и хотим иметь возможность изменить их в одном месте, если это понадобится в дальнейшем. Далее мы проверяем, можем ли мы использовать функцию is_phone() от Mobble. Если да, то мы устанавливаем короткую выдержку для телефонов и длинную выдержку, если нет. После этого мы сделаем то же самое, но используя wp_is_mobile, который будет влиять на все мобильные устройства, если is_phone() не может быть использован. Надеюсь, что else-часть этой функции никогда не будет использоваться, но на всякий случай полезно иметь резервную копию. Как только длина отрывка логика установлена это просто сводится к подключению функции к фильтру excerpt_length.
Сокращение отрывка — это один из вариантов, но мы также можем полностью отказаться от него с помощью простого процесса. Вот новая версия content-masonry, в которой вся часть выдержки опускается на телефонах:
" > " title=""> '; //если мы можем пропустить только для телефонов, иначе пропускаем для всех мобильных устройств if (function_exists( 'is_phone')) < if ( ! is_phone() ) < echo $excerpt; >> else < if ( ! wp_is_mobile() ) < echo $excerpt; >> ?>На этот раз мы проверяем, не находимся ли мы на телефоне/мобильном устройстве, и если это так, то возвращаем часть цикла с выдержками. Если мы находимся на телефоне/мобильном устройстве, мы ничего не делаем.
Еще одна вещь, которую вы можете захотеть сделать, это увеличить ширину элементов Masonry, что уменьшает их количество в ряду на мобильных устройствах. Чтобы сделать это, мы добавим в заголовок другой встроенный стиль, основанный на определении устройства. Поскольку эта функция использует wp_add_inline_styles, она будет зависеть от конкретной таблицы стилей. В данном случае я использую каменную кладку.css, который вам может понадобиться, для разделения стилей masonry. Если вы не хотите использовать это значение, вы можете использовать ручку из другой, уже зарегистрированной таблицы стилей.
if ( ! function_exists ( 'slug_masonry_styles' ) ) : function slug_masonry_styles() < //set the wide width $wide = '25%'; //set narrow width $narrow = '50%'; /**Determine value for $width**/ //if we can only set narrow for phones, else narrow for all mobile devices if (function_exists( 'is_phone') < if ( is_phone() ) < $width = $narrow; >else < $width = $wide; >> ещё < if ( wp_is_mobile() ) < $width = $narrow; >else < $width = $wide; >> /**Вывод CSS для .masonry-вход с правильной шириной**/ $custom_css = ".masonry-entry;>"; //Вы должны использовать хэндл уже зачисленной таблицы стилей. wp_add_inline_style( 'masonry', $custom_css ); > add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' ); endif; // // ! slug_masonry_styles existsЭта функция запрашивает пользовательскую таблицу стилей, а затем устанавливает значение ширины, используя уже знакомую логику. После этого мы создаем переменную $custom_css, передавая значение для ширины в обычный CSS с помощью . После этого мы используем wp_add_inline_style, чтобы сказать WordPress печатать наши инлайн-стили в заголовке, когда используется таблица стилей Masonry, а затем мы подключаем всю функцию к wp_enqueue_scripts и готово.
Если вы решили объединить стили Masonry в существующую таблицу стилей, убедитесь, что вы используете дескриптор этой таблицы стилей с wp_add_inline_style, иначе ваши инлайн-стили не будут включены. Мне нравится использовать wp_add_inline_style, потому что я обычно оборачиваю крючок действия для включения Masonry в условие, так что он добавляется только тогда, когда это необходимо. Например, если я использую Masonry только на индексных и архивных страницах блога, я бы сделал следующее:
if ( is_home() || is_archive() )
Эти последние несколько примеров должны открыть в вашем мозгу некоторые другие идеи. Например, вы можете использовать подобную логику, чтобы полностью пропустить Masonry на мобильном устройстве. Также wp_add_inline_style() — это менее используемая, но очень полезная функция, поскольку она позволяет программно устанавливать различные стили на основе любого типа условий. Она может позволить вам радикально изменить стиль любого элемента, основываясь не только на определении устройства, но и на том, какой шаблон используется, или даже на том, вошел ли пользователь в систему или нет.
Я надеюсь, что вы увидите эти различные изменения, которые я делаю, как возможность проявить творческий подход. Masonry и подобные системы каскадных сеток были популярны уже некоторое время, так что пришло время для некоторых новых поворотов этой популярной идеи. Покажите нам в комментариях, какие интересные способы использования Masonry в теме WordPress вы придумали.
Джош Поллок, многоцелевой специалист по WordPress, пишет о WordPress, занимается разработкой тем, служит менеджером сообщества Pods Framework и выступает за решения с открытым исходным кодом для устойчивого дизайна.
Источник: www.wpbeginner.com