Добавьте макеты Masonry и Grid на свой сайт WordPress с помощью только CSS

Вы когда-нибудь хотели оживить то, как ваши записи отображаются на домашней странице WordPress и в архивах?

Что, если бы вы могли отображать свои сообщения, используя подход masonry (Pinterest) или, может быть, сетку, просто добавив фрагмент CSS?

Никаких плагинов, шорткодов, изменений шаблонов, назначения страниц домашней страницей. Просто чистый CSS.

Продолжить чтение или перейти вперед по этим ссылкам:

• Подготовка к добавлению макетов Masonry и Grid на ваш сайт
• Придайте вашим сообщениям вид масонства Pinterest
• Размещение постов в сетке
• Добавление пользовательского CSS на ваш сайт

Подготовка к добавлению макетов Masonry и Grid на ваш сайт WordPress

Эти решения основаны исключительно на CSS, поэтому неудивительно, что они в значительной степени зависят от разметки HTML на вашем сайте, чтобы работать без изменений.

Используемый CSS был разработан (и протестирован) с темами по умолчанию. Это означает, что у CSS есть пара ожиданий:

1. В элементе body существуют классы, описывающие тип страницы (например, главная, блог, архив, поиск).
2. Списки постов — это наборы элементов статей с заголовком, заключенным в div с идентификатором контента.

Если вы используете тему по умолчанию, вы сможете использовать CSS без изменений. Даже если вы этого не сделаете, вы можете обнаружить, что ваша тема использует достаточно похожую разметку, чтобы вы могли использовать CSS как есть. Например, тема Eighties использует практически ту же разметку, что и темы по умолчанию.

Если ваша тема не использует ту же разметку — самый простой способ узнать это — проверить исходный код страницы на классы и идентификаторы, указанные в CSS — тогда вы все равно можете использовать CSS, вам просто нужно изменить классы и идентификаторы, соответствующие вашей разметке.

Выбор места для применения стиля

Вы можете решить, что хотите применить выбранный стиль только к определенным страницам.

WordPress делает это очень просто, поскольку применяет классы, специфичные для страницы, к элементам body, таким как блог, домашняя страница, архив и поиск, поэтому вам просто нужно закодировать свой CSS для каждого из соответствующих классов.

Например, если вы хотите применить стиль только к домашней странице, ваш CSS будет выглядеть примерно так:

body.blog article { styles go here... }

Чтобы применить стиль к домашней странице и страницам архива (категории):

body.blog article, body.archive article { styles go here... }

Чтобы применить стиль только к результатам поиска:

body.blog search { styles go here... }

Опять же, это зависит от вашей темы в соответствии с рекомендациями по темам WordPress.

Совместимость с браузером

Будучи CSS3, эти методы не будут работать на всех платформах и браузерах.

Я протестировал и подтверждаю, что они работают в последних версиях Chrome и Safari (как в OS X), так и в iOS (5+). Различные веб-сайты CSS также предполагают, что IE10 также не будет иметь проблем.

За пределами этих браузеров (включая IE9) ваш пробег будет другим, но стоит помнить, что запасной вариант — это ваш текущий стиль, поэтому посетители, использующие старые браузеры, просто не заметят никакой разницы.

Если вы обнаружите, что стили успешно работают на не упомянутой платформе (в частности, на Windows), сообщите нам об этом в комментариях.

Итак, хватит об отказе от ответственности, давайте посмотрим, как украсить ваши списки сообщений.

Придайте вашим сообщениям вид масонства Pinterest

Существует множество тем WordPress и несколько плагинов, которые отображают сообщения в формате каменной кладки в стиле Pinterest. Но с помощью CSS3 вы можете просто добавить несколько дополнительных стилей на свой сайт WordPress и получить тот же эффект.

Это решение, вдохновленное публикацией Рахула Арора на W3Bits, основано на поддержке CSS3 свойства столбца . Это свойство будет разделять содержимое на определенное количество столбцов, и хотя его создание, скорее всего, было вдохновлено идеей размещения текста по столбцам в газетном стиле, оно так же полезно для макета каменной кладки.

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

В макетах по умолчанию сообщения выводятся как элементы статьи , заключенные в div с идентификатором контента.

CSS:

1. Устанавливает количество столбцов в обертке #content с помощью свойства column-count — в данном случае 4. Он также устанавливает зазор между столбцами . Вы заметите использование -moz- и -webkit- для Firefox и Safari.

2. Превращает элементы статьи в кирпичи, используя встроенный блок и устанавливая ширину на 100%.

3. Гарантирует, что заголовок страницы и навигация находятся в отдельной «строке», указывая, что эти элементы охватывают все столбцы.

Просто чтобы все было аккуратно, вы также можете добавить следующее:

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

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

Сделать его отзывчивым

Одним из недостатков колоночного подхода является то, что он быстро ухудшается по мере уменьшения размера экрана.

Что мы хотим сделать, так это манипулировать количеством столбцов, чтобы элементы статьи получали разумное количество экранной недвижимости для сохранения целостности и визуальной привлекательности кирпичиков. Итак, давайте добавим несколько медиа-запросов, чтобы изменить количество столбцов в зависимости от размера экрана:

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 768px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

Как видите, нам нужно только изменить свойство column-count (и его производные) для каждого запроса.

Эти 4 точки останова, 3 из которых будут работать на всех платформах (просто измените размер окна браузера, чтобы увидеть, как они подействуют), а 1 предназначена специально для планшета в портретном режиме.

Вот стиль кирпичной кладки на iPad и iPhone:

Вы можете (и должны), конечно, пойти дальше и добавить больше стиля к кирпичикам, чтобы улучшить визуальную привлекательность, но всего 3 оператора CSS, чтобы превратить ваши списки постов в каменную стену, довольно впечатляют!

Размещение постов в сетке

Если вам нравится больше единообразия и порядка, чем обеспечивает каменная кладка, вам может быть интересно разместить свои сообщения в сетке.

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

На этот раз CSS еще короче, просто полагаясь на стилизацию элементов статьи :

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

Это все, что абсолютно необходимо. Опять же, мы используем встроенный блок и следим за тем, чтобы содержимое статьи (заголовок, избранное изображение, выдержка) было выровнено по вертикали.

Важным свойством является ширина , поскольку она определяет количество «столбцов». Я использовал 32,5% в качестве начального значения (использование 33% может привести к преждевременному переносу), что обеспечит 3 столбца. Очевидно, что если вам нужно 4 столбца, вы должны использовать 24,5%, 5 столбцов — 19,5% и т. д.

Добавление отзывчивости

Точно так же, как наш стиль каменной кладки, сетки должны быть отзывчивыми, если они хотят сохранить свою эффективность.

Поскольку именно свойство ширины определяет количество столбцов, это свойство будет изменяться в различных медиа-запросах.

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 768px) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 480px) {

body.blog article, body.archive article {
width: 100%;
}
}

На этот раз всего 3 запроса, так как я начал только с 3 столбцов. Если вы решите начать с большего количества столбцов, вы можете добавить точку останова max-width: 1024px, чтобы установить ширину 32,5% (3 столбца).

Это приведет к:

1. 2 колонки на планшете в портретном режиме
2. 2 столбца при максимальной ширине экрана 768 пикселей.
3. 1 столбец при максимальной ширине экрана 480 пикселей.

Эти контрольные точки охватывают как планшеты, так и смартфоны, а также изменение размера окна браузера.

Вот макет сетки на iPad и iPhone:

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

Добавление пользовательского CSS на ваш сайт

Существует несколько вариантов внедрения выбранного пользовательского CSS на ваш сайт WordPress. Если ваша тема не включает возможность добавления пользовательского CSS, то у вас есть следующие варианты:

• Дочерняя тема — создайте дочернюю тему и добавьте CSS в таблицу стилей.
• Плагин — добавьте выбранный вами стиль в новый файл CSS и создайте плагин, который использует функцию стиля wp-enqueue-style, возможно, условно на основе создаваемой страницы, для постановки в очередь нового файла.
• Отредактируйте таблицу стилей текущей темы — не делайте этого, просто не делайте этого.
• Используйте пользовательский плагин CSS — существует ряд плагинов, которые позволят вам добавить пользовательский CSS на ваш сайт через интерфейс администратора WordPress (одним из таких плагинов является метко названный плагин Simple Custom CSS).

Мне нравится использовать плагин Custom CSS. Он быстро и легко настраивается, упрощает тестирование и так же быстро и легко удаляет CSS с вашего сайта WordPress (очистите редактор или удалите плагин).

CSS, путь к WordPress Zen

Замечательный CSS Zen Garden уже много лет доказывает, что внешний вид сайта можно существенно изменить без единого изменения разметки, а только путем изменения CSS.

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

Просто немного CSS.

Примечание редактора: этот пост был обновлен для обеспечения точности и актуальности. [Первоначально опубликовано: июль 2014 г. / Исправлено: февраль 2022 г.]

• CSS
• сетки