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

Обычно, современные шаблоны WordPress поддерживают адаптивность, но иногда разработчики забывают добавить мобильную версию для галереи. Исправить это можно, добавив дополнительный стиль. Для этого при просмотре сайта в верхней панели кликните «Настроить», в открывшейся боковой колонке откройте вкладку «Дополнительные стили»:

Добавление стиля оформления в настройках WordPress
Добавление стиля в настройках WordPress

Туда добавьте следующий код CSS:



 /*  Стандартные стили */
.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin-bottom: 20px;
  width: 100%;
  padding: 0 2%;
}
.gallery-item .gallery-caption {
  text-align: center;
  margin: 0;
}
.gallery-item .gallery-icon img {
  display: inline-block;
}
.gallery-columns-2,
.gallery-columns-3,
.gallery-columns-4,
.gallery-columns-5,
.gallery-columns-6,
.gallery-columns-7,
.gallery-columns-8,
.gallery-columns-9 {
  margin: 0 -2% 20px;
}
 .gallery-columns-2 .gallery-item {
  max-width: 50%;
}
.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
  max-width: 25%;
}
.gallery-columns-5 .gallery-item {
  max-width: 20%;
}
.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}  
.gallery-columns-1 .gallery-item {
  margin-bottom: 30px;
  position: relative;
}
.gallery-columns-1 .gallery-item img {
  display: block;
}
.gallery-columns-1 .gallery-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #0e0e0e;
  color: white;
  font-size: 12px;
  font-style: normal;
  padding: 8px 14px 10px 14px;
}




/* Для небольших экранов 4 колонки */
@media only screen and (max-width: 1024px) {
 
   .gallery-columns-2 .gallery-item, .gallery-columns-4 .gallery-item  {
  max-width: 25%;
}
.gallery-columns-3 .gallery-item {
  max-width: 25%;
}
.gallery-columns-4 .gallery-item {
  max-width: 25%;
}
.gallery-columns-5 .gallery-item {
  max-width: 25%;
}
.gallery-columns-6 .gallery-item {
  max-width: 25%;
}
.gallery-columns-7 .gallery-item {
  max-width: 25%;
}
.gallery-columns-8 .gallery-item {
  max-width: 25%;
}
.gallery-columns-9 .gallery-item {
  max-width: 25%;
} 
 }
 
 

/* Для планшетов 3 колонки */
@media only screen and (max-width: 800px) {
 
   .gallery-columns-2 .gallery-item, .gallery-columns-4 .gallery-item  {
  max-width: 33.33%;
}
.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
  max-width: 33.33%;
}
.gallery-columns-5 .gallery-item {
  max-width: 33.33%;
}
.gallery-columns-6 .gallery-item {
  max-width: 33.33%;
}
.gallery-columns-7 .gallery-item {
  max-width: 33.33%;
}
.gallery-columns-8 .gallery-item {
  max-width: 33.33%;
}
.gallery-columns-9 .gallery-item {
  max-width: 33.33%;
} 
 }




/* Для мобильных 2 колонки */
@media only screen and (max-width: 480px) {
   .gallery-columns-2 .gallery-item, .gallery-columns-4 .gallery-item  {
  max-width: 50%;
}
.gallery-columns-3 .gallery-item {
  max-width: 50%;
}
.gallery-columns-4 .gallery-item {
  max-width: 49.33%;
}
.gallery-columns-5 .gallery-item {
  max-width: 50%;
}
.gallery-columns-6 .gallery-item {
  max-width: 50%;
}
.gallery-columns-7 .gallery-item {
  max-width: 50%;
}
.gallery-columns-8 .gallery-item {
  max-width: 50%;
}
.gallery-columns-9 .gallery-item {
  max-width: 50%;
} 
}

 
 
 /* Для мелких экранов 1 колонка */
@media only screen and (max-width: 320px) {
   .gallery-columns-2 .gallery-item,   {
  max-width: 100%;
}
.gallery-columns-3 .gallery-item {
  max-width: 100%;
}
.gallery-columns-4 .gallery-item {
  max-width: 100%;
}
.gallery-columns-5 .gallery-item {
  max-width: 100%;
}
.gallery-columns-6 .gallery-item {
  max-width: 100%;
}
.gallery-columns-7 .gallery-item {
  max-width: 100%;
}
.gallery-columns-8 .gallery-item {
  max-width: 100%;
}
.gallery-columns-9 .gallery-item {
  max-width: 100%;
} 
}

В коде указал на сколько колонок при каком разрешении экрана будет делиться ваша галерея. На примере последнего отрывка: при разрешении на мелких экранах (max-width: 320px), сколько бы колонок в галерее не было (.gallery-columns-3, .gallery-columns-5, .gallery-columns-9) отображаем блок с изображением (.gallery-item) во весь экран (100%;) — и так по аналогии.

Эффекты галереи

Лайтбокс, или открытие изображения во всплывающем окне по клику. Эта функция тоже часто есть по умолчанию в современных шаблонах, если нет, то лучше воспользоваться одним из плагинов. Из тех, что я пробовал мне понравился Meow Lightbox, его бесплатной версии хватит для повседневных нужд большинства пользователей.

Можно и плагином

Ну, а если не хотите заморачиваться со стилями, то от того же разработчика есть и плагин галереи Meow Gallery. Мне он понравился тем, что, в отличие от своих громоздких конкурентов, не создает отдельного пункта в админке, а работает со стандартными галереями WordPress, то есть вам не нужно будет редактировать предыдущие записи и, в случае чего, от плагина можно будет отказаться и ваши изображения будут по-прежнему отображаться на сайте.

ЕСТЬ, ЧТО СКАЗАТЬ?

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь