Мобильная галерея для WordPress своими руками

Сделал я однажды сайт на WordPress’е для альянса в одной игре, на которой сижу примерно с лета. Глава альянса выложила несколько скриншотов в посте, и я чуть в обморок не упал.

А потому, что когда выкладываю я, они у меня оптимизированы по высоте и ширине. Тут же изображения вылезали за пределы страницы. Но и это не самое страшное. Страшное началось, когда я решил посмотреть на всё это безобразие через браузер смартфона. Вот где мрак и ужОс.

Восстав из обморока я немного подумал… и сделал галерею с адаптивным дизайном для WordPress.

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

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

Делаем галерею

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

Примерно вот так:

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

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

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

  • если вы не уверены в своих навыках веб-программиста,
  • если у вас нет доступа к сайту по FTP (чтобы если что откатить всё обратно),
  • если вы хронический неудачник (так бывает),

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

Потому, что всё что вы делаете с сайтом, вы делаете на свой страх и риск, а я тут совершенно ни при чём и даже рядом не стоял)

1. Для начала лезем в function.php активной темы и добавляем наш шоткод, вставив вот этот код:

Можно сделать это в отдельном плагине, но я решил в этот раз не плодить сущности.

2. Теперь, добавляем в style.css активной темы следующие стили:

3. И последний финт. У меня подключен плагин Easy FancyBox. Он помогает красиво открывать более крупную версию картинки при клике на ее миниатюру.

Картинки кликабельны.

Так вот, в галерее которую мы сейчас делаем, это тоже можно использовать. Ставим плагин Easy FancyBox и подключаем к теме js-файл (или вписываем нужный код в уже подключенный).

Вот код.

Если будете именно подключать новый js-файл, то код, предложенный выше, заверните вот в такую обёртку:

Как это работает?

Всё просто.

  • Шоткод создаёт вокруг наших картинок контейнер с классом gall,
  • JavaScript обрамляет каждую картинку в ссылку, с помощью которой плагин Easy FancyBox будет красиво ее открывать при клике для просмотра,
  • ну а стили визуально приведут картинки в посте к нужному размеру по высоте и создадут рамки/тени.

Как это выглядит?

А выглядит всё примерно так, как на скриншотах (картинки кликабельны).

Вот десктопная версия.

Здесь я кликнул по картинке в галерее и смотрю ее увеличенную версию с помощью плагина.

А так галерея выглядит на экране мобильного. Как видите, теперь картинки не портят адаптивный дизайн сайта.

Миленько?)

Помогло? Зашли Админу на чай.
 

Всё что потребовалось — добавить код в трёх местах и теперь картинки выводятся красиво без лишних усилий.

В общем — пользуйтесь на здоровье.

А на этом сегодня всё.

С вами был Доктор Лексиум.
Подписывайтесь, делитесь ссылкой на этот блог.
Всего вам доброго.

 

 

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *