Создание галерей из картинок штатными средствами WordPress без плагинов
Articles Blog

Создание галерей из картинок штатными средствами WordPress без плагинов

August 8, 2019


Всем привет, на связи Артем Абрамович, и сегодня мы поговорим про галереи на сайтах WordPressa. Сначала определимся, что такое галерея, а что такое слайдер. Это разные вещи. Вот смотрите, это слайдер, когда картинки, скажем так, съезжают вправо-влево, или вверх-вниз, когда нажимаешь на кнопочку, и они съезжают, или проявляются, тут эффекты могут быть разные, но как факт, то что картинка как бы одна, а при нажатии на стрелку вперед-назад, появляется другая, именно появляется или съезжает неважно. А галерея – это немножко другое, галерея – это вот такие картинки, такие миниатюрки, скажем так, небольшие картинки исходных изображений, которые можно будет увеличивать, или не увеличивать, в зависимости от того что требуется. То есть можно поставить, допустим, на галерею ссылки, и можно по этим картинкам делать переходы куда-то. В нашем случае, задача простая: сделать галерею, в которой изображение можно будет увеличивать и можно будет просматривать, эта галерея находится в сайтбаре, сайтбар не сильно большой, и вот такую галерею мы создадим именно средствами WordPressa. Есть штатные возможности WordPressa, так мы ее и сделаем. Итак, смотрите, я создал просто новую страницу, любую. Дальше нажимаю “Добавить медиафайл”, и вот наши картинки. Вот есть менюшка “Создать галерею”. Теперь нам надо выделить наши картинки необходимые. Обращаю внимание, что количество картинок должно быть кратно количеству столбцов, то есть если 3 столбца, то должно быть или 9 картинок, или 12, или 15, чтобы рядов было одинаковое количество иначе вот здесь будет, например, одна торчать, а здесь кусок пустой, или две и кусок пустой. Это некрасиво, конечно вам видней, но я обычно делают так. Выделяем нужное количество картинок, допустим, сделаем 12 картинок, нажимаем “Создать новую галерею”, теперь надо немножко нашу галерею подстроить, во-первых, можно конечно подписать каждую картинку, но нам это не надо. Дальше “Настройки галереи”, нам надо, чтобы картинки увеличивались, поэтому мы ставим “Медиафайл”, если поставим “Страницы вложения”, то WordPress, как бы сам будет создавать отдельную страницу, на которую будет выводить в реальном размере эти картинки, но нам это не надо, поэтому делаем “Медиафайл”. Дальше, колонки у нас три, “Порядок случайный”, но это можно поставить, а можно не ставить, то есть он будет перемешивать картинки при каждой загрузке страницы, мы поставим в стандартном порядке. Все, вставляем галерею, вот наша галерея. Можно ее, в принципе, здесь на странице редактировать: добавлять, убавлять, и так далее. Но у нас маленькая заморочка, мы вставляем нашу галерею именно в виджет. Виджеты понимают, так называемые, шорткоды, то есть вот наш шорткод, мы его копируем, открываем нужным нам виджет, и вставляем сюда нашу галерею, нажимаем “Сохранить”, и смотрим, что получилось. Вот такая галерея получилась, тут картинки на белом фоне, поэтому плоховато видно. Смотрите, что получается, то есть вот он в реальном размере показывает картинки. Будут картинки больше, соответственно, раздвинет на весь экран. Дальше вопрос такой, а если нам нужно добавить картинок или убавить. Убавить картинок, лишнее убрать, это без проблем, вот удаляем, допустим, три картинки, то есть это можно прямо в шорткоде делать. Вопрос другой, как нам добавить. Можно сделать двумя вариантами: во-первых, сохранить эту страницу в черновиках, чтобы здесь всегда была галерея, и мы там добавляем картинки в нее сколько хотим. Добавляем, допустим, еще три картинки, “Обновить галерею”, и вот еще три картинки добавились, опять берем отсюда шорткод, вставляем в виджет, сохраняем и посмотрим, что получилось. Вот они наши картинки, здесь, кстати, картинки побольше, и сейчас будут большие картинки. Здесь видите такая каруселька всех этих картинок. Вот побольше картинка. А вот если, нет возможности оставить какую-то страницу, то можем сделать по-другому, вот эти цифры -это обозначает ID картинки, то есть все картинки при загрузке через библиотеку медиафайлов, они загружаются в базу данных и каждой картинке присваивается свой номер. То есть, чтобы добавить картинки, нам нужно посмотреть в библиотеке ее номер. Давайте добавим вот эту картинку, и, смотрите, вот это как раз будет ID картинки. Чтобы было красиво, нам надо три номера. Прямо так и пишем, 382, “запятая”, дальше смотрим другую картинку, 283, копируем, вставляем, еще одна картинка, пусть будет эта, 319, вставляем, сохраняем, проверяем, что у нас получилось. Вот они, наши три картинки добавились. Вот такой способ, несколько кривоватый, но все-таки мы выводим в виджетах, а если штатными средствами WordPressa выводить, то я пока вижу какой-то другой, если вы знаете как проще это сделать, то пишите в комментариях к видео, будем пользоваться. Но если не использовать штатные средства, то можно, конечно, поставить плагин, их куча, таких плагинов для галерей, который позволят так же водить, в принципе, так же через шорткод выводить, и просто вставить в виджет какой-то отдельным блоком, и так далее. В данном случае получилась вот такая галерея. На этом я прощаюсь, с вами был Артем Абрамович, увидимся в следующем видео.

Only registered users can comment.

  1. Спасибо за видео! Такое ощущение, что картинки (миниатюры) немного наезжают друг на друга. Как можно уменьшить их размер (чтобы они помещались целиком с сайдбар) и  увеличить между ними расстояние?

  2. Извините за вопросы такой темы, но у меня трудность возникла.
    для обучения пользуюсь пока бесплатным хостом webhost, через файлзиллу хочу сбросить себе тему, подключаюсь к серверу бросаю зип формат темы.
    Разархивирую єтот зип прям в файлзилле и єтот процесс занимает очень много времени, єтот из-за бесплатного хоста или что то неправильно делаю?

  3. Здравствуйте, можно как-то вывести добавленные как галерея картинки получив массив с ссылками на разные размеры картинок?В картинку ссылку на маленькую а в ссылку на full.Перебрать все вложенные картинки в запись

Leave a Reply

Your email address will not be published. Required fields are marked *