Галерея изображений стандартными средствами WordPress

В сегодняшней статье я хочу затронуть вопрос создания простой галереи изображений для WordPress стандартными средствами данной CMS.

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

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

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

Простой способ сделать галерею WordPress!

Примерно так и должна будет выглядеть полученная галерея.

Теперь рассмотрим как реализовать подобного рода галерею изображений.

Создание галереи WordPress

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

Итак, переходим к делу.

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

Далее нужно определиться с изображениями для галереи, то есть выбрать их. Здесь есть два варианта: использовать уже загруженные ранее файлы изображений или загружать непосредственно в момент создания галереи. Первый вариант проще, поэтому мы рассмотрим второй.

Устанавливаем курсор в выбранном месте в статье или на странице и нажимаем кнопку Добавить медиафайл:

Простой способ сделать галерею WordPress!

В появившемся окне нас интересует пункт Создать галерею:

Простой способ сделать галерею WordPress!

Щелкаем по нему и попадаем уже в другое окно, в котором предоставляется возможность выбрать изображения для галереи. Как я уже говорил выше, мы имеем возможность выбрать для галереи уже загруженные изображения, либо здесь же загрузить изображения непосредственно в процессе создания галереи. Мы рассматриваем второй случай, поэтому переходим во вкладку Загрузить изображения:

Простой способ сделать галерею WordPress!

Данное действие перебрасывает нас в окно выбора загружаемых изображений:

Простой способ сделать галерею WordPress!

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

Простой способ сделать галерею WordPress!

В следующем окне нужно определить некоторые параметры будущей галереи, такие как тип ссылки (ссылка на файл, на окно вложения, без ссылки), количество колонок, а также можно выбрать функцию, предусматривающую случайный порядок изображений в рамках галереи. Я выбрал ссылку на медиафайл, расположение изображений в 3 колонки, галочку в чекбокс Случайный порядок я ставить не стал. После этого нажимаем Вставить галерею:

Простой способ сделать галерею WordPress!

В моем случае полученная галерея выглядит следующим образом:

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

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

Теперь все работает как надо, картинки галереи открываются во всплывающем окне.

Следует заострить внимание на том факте, что размер миниатюр изображений в полученной галерее определяется настройками пункта админ-панели НастройкиМедиафайлыРазмер миниатюры, и по умолчанию установлено значение 150×150 пикселей.

Дополнительные возможности

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

Код созданной мной галереи выглядит следующим образом:

В данном случае фрагмент link=»file» говорит о том, что миниатюры изображений будут являться также ссылками на сам файл соответствующего изображения. Для аргумента link также доступно значение none, означающее что миниатюра не будет ссылкой вообще ни на что. В случае, если же аргумент link вообще не прописан, миниатюра будет ссылкой на страницу вложения файла.

Конструкция ids=»1559,1560,1561,1562,1563,1564″ отвечает за принадлежность изображений с соответствующими идентификаторами к данной галерее.

Как видно, все довольно просто, и при минимальных навыках можно создавать галерею написанием подобного кода.

Разберем еще некоторые функции, которые могут представлять интерес при создании галереи изображений.

К примеру, чтобы создать галерею, в которую будут включены все изображения данной статьи/страницы, необходимо убрать аргумент ids, то есть прописать следующее:

А если при этом нужно исключить какие-то изображения из галереи, то достаточно добавить внутрь данной конструкции аргумент exclude, которому присвоить через запятую значения идентификаторов (id) изображений, которые нужно исключить из данной галереи. Получиться должно примерно следующее:

При этом у вас может возникнуть вопрос о том, как определить этот самый идентификатор (id) конкретного изображения. На самом деле все довольно просто: нужно лишь в библиотеке медиафайлов (пункт Медиафайлы → Библиотека в админ-панели) выбрать соответствующее изображение и в поле Постоянная ссылка посмотреть идентификатор:

Простой способ сделать галерею WordPress!

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

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

Комментарии 32

  • Честно говоря, сколько в вордпресс лазил даже и не замечал данную функцию «Cоздать галерею». Наверное, потому что не нужно было. Теперь буду знать — че и зачем. 💡

  • Интересно, попробовал сделать, но если честно то мне не понравилось. Так что буду делать как обычно. Но спасибо за информацию. Да и Владимир Вы награду свою заберете или нет? ➡ http://telets.com.zp.ua/blog/nagrada-dlya-bloga/

    • Прошу прощения, Андрей, чета замотался. Я Вам благодарен за награду, но к сожалению в данный момент я не смогу исполнить все прилагающиеся к ней обязательства, так что прошу меня простить, я отказываюсь. Без обид, еще раз спасибо ➡

  • Как жаль что вы не написали эту статью четыре месяца назад!!! 🙁
    Мне позарез нужно было создать такую галерию,но я был уверен в том что для этого нужно было создавать отдельную страницу html, а так как опыта и знаний не было то решил просто поменять планы!
    Спасибо вам за этот пост, я его сохранил в закладках!Обязательно вернусь к нему в будущем!

    • Пожалуйста! Жаль, конечно, Игорь, что вовремя подобной статьи не оказалось, но надеюсь хотя бы в будущем данная информация вам пригодится 😉

  • Владимир, спасибо огромное, буду использовать галереи на своем блоге, может немного позже, но буду это точно, теперь знаю, как это реализовать.))

  • Статья интересная,А есть ли вариант создания галереии,при том,что в свойствах картинки прописка внешнего URL, кликнув допустим на картинку,преход на другой сайт,в WordPress при вставке,медиа файла это есть,но там не выходит с позиционированием картинок.

    • Михаил, почему бы и нет, от URL картинки в данном случае ничего не зависит. Однако, при использовании сторонних файлов картинок возникнут проблемы с определением натурального размера изображения и при открытии его во всплывающем окне его размер не поменяется относительно исходного. По крайней мере я столкнулся с такой проблемой.

      • Владимир,решение нашол: использовал плагин TablePress,изображения поставил,в ячейки таблици,нет проблем с определением размеров не было,ставил как миниатюры(без центровки).Если есть интерес,могу описать подробней.

  • По подробней;Для начала,ставится плагин TablePress.,по подробней про установку и настройку ,можно узнать тут: http: //wpcreate.ru/rasshirenie-funktsionala-sayta/tablitsyi-v-wordpress-plagin-dlya-sozdaniya-tablic-tablepress.html. Далее собирается таблица,используя плагин(в моем случае,это была таблица,в 3 столбика,и 4 строки)настройка таблици идет в плагине.Далее в ячейку ставится изображение,я использовал изображения,загруженные себе,далее при выборе изображения,выпадает окно настройки,вот тут идет выбор изображения,выбор перехода,есть варианты,допустим страница вложения,и тд,в моем случает это была внешний URL,выбор варианта вывода изображения,в моем случае,миниатюра.В каждую ячейку устанавливается изображение кодом.
    В итоге получилось вот так: http: //dkulakov.hostenko.com/3d-model/3d-modeli/

  • Я стараюсь использовать на своих блогах (о своем блоге на джумле пока промолчу, так как не по теме) изображения на облачных сервисах (а не грузить их на хостинг). Интересно, как бы создать такую же галерею на WP, имея только исходные ссылки на изображения на независимых сервисах?

    • На сколько я понимаю, стандартными средствами WordPress такого реализовать не удастся, к сожалению 🙁

      • Я все же маленько надеялся, что варианты есть. Пока только вручную приходится делать, что не всегда удобно.

        • В реальности оно так и есть, если можно было реализовать на WP возможность только исходные ссылки на размещенные изображения в независимых серверах, было бы удобней и экономия выделенного места на хостинге

  • Здравствуйте, Владимир. Спасибо отличная информация. Только я получила не совсем полный ответ. Помогите, мне разобраться. А вопрос в следующем. Допустим, я создала страницу кулинарные рецепты. В ней у меня фотографии в виде галереи. Я хочу, чтобы кликнув на конкретное фото человек переходил на более подробное описание этого рецепта. То есть, сделать картинку в галерее кликабельной со ссылкой на запись. В интернете искала . И не нашла. Мне предлагают вставить ссылку в простую картинку. А это делать я умею. Или может я хочу того что в принципе невозможно. Но я же вижу у других людей на сайте. При чем они даже добавляют в существующую галерею все новые изображения. Вот например сайт. Здесь, нажав на слово дневник попадаешь на картинки, потом кликнув на картинку, попадаешь на саму запись. Вот этот сайт Эвелины Хромченко [ссылка] Вот прошу, Вас, просветите меня.

    • Рита, все делается довольно просто — просто в шаблоне вывода картинок в галереи (или где они отображаются) нужно обернуть картинки в тег А, в котором значением будет выступать переменная, которая отвечает за формирование ссылки на пост. Но вот дать вам рабочий вариант не смогу — так как работаю больше с джумлой.

  • Cпасибо, Юрий!С галереей разобралась. И с миниатюрами тоже. Но кривенько, как то они становятся. Зато, погулявши по блогам, поняла, что видимо эта информация или сложная для понимания или платная одно из двух. Я записалась на платные курсы верстальщиков. Думаю освоить эту профессию, чтобы работать с кодами html и стилями CSS. ❗

    • Рита, ничего сложного нет в CSS — предлагаю вам просто почитать сюбой справочник, например htmlbook_ru — 99% всех ответов уже есть сформированы, нужно только выбрать нужный эффект для себя, и просто заменить размеры (или например оттенки цветов).
      Платные курсы конечно хорошо, вот только не факт, что на них дадут те навыки которые нужны.
      В данном случае вам нужно было разбираться с переменными в PHP по большому счету.
      Думаю, также, чтобы не платить деньги не понятно за что — можно сходить в институт Интуит_ру, там также достаточно всех лекций по нужным темам, благодаря которым можно решать любые вопросы (тем более информация которая там есть соответствует стандартам — что полезнее, чем курсы например Борисова).

      • Юрий, спасибо за ответ. Только боюсь что самостоятельно трудно изучить Сss стили. У меня нет навыков в программировании. И вот именно эти курсы Борисова мне и помогли. Я сделала блог себе и не один. Потом коллеги стали просить. Стала и им делать. Потом друзья. Чувствую, что нужно подучиться, чтобы и статьи на блоге писать и помогать людям.

        • Рита, CSS это язык разметки и оформления, а не язык программирования. Он реально просто изучается — запоминать особо ничего не нужно, просто нужно знать, какой эффект хочется сделать, и уже по эффекту искать его в справочнике. Со временем, если допустим начнете несколько раз писать стиль с нуля то вы на автомате запомните что и как делается. Если использовать к примеру дремвивер, то там еще проще, так как начинаете что-то писать, и редактор сам дополняет (подсказки…).
          По поводу Борисова — то он не сможет подать теорию грамотно, он больше рассказывает о своем опыте. Это немножко разные вещи. Впрочем, если вас эта тема инетресует, то со временем думаю разберетесь почему я так пишу.

          • Юрий, спасибо за ценную инфо. Я знаю , что один человек не может все знать. Вот поэтому с некоторыми проблемами, с которыми я столкнулась, я ищу именно то, что нужно мне. Хочется досконально во всем разобраться. Такой уж я человек. Обычно подыскивая нужную информацию, я ищу ее в интернете. Но статьи, которые пишут блогеры, как Вы пишите, они черпают из справочников, не являясь профи. Потом почти все статьи уже устарели. На дворе конец 2014 года. И то, что было актуально еще 6 месяцев назад, уже неактуально сегодня. Меня заинтересовала профессия верстальщика. Я думаю, что разобраться по справочникам у меня самостоятельно не получится. Хочется пройти это от начала до конца. И пусть не стану профессионалом, зато буду знать не по наслышке, а из собственного опыта. Я же столкнулась с этой проблемой, значит людям нужна такая информация. Вот я буду рассказывать им о ней, опираясь на свой опыт. А Борисов Александр меня научил этому. Потому что он не пишет с кондачка, а передает, собственный опыт. И он очень поучителен. Многие скрипты, которые предлагают web мастера уже не работают. У меня один раз слетел сайт. Благо был архив базы данных. И я вернула все. А между прочим статья была в топе по поисковому запросу. Так что все же нужно надеяться на себя и свои знания. С уважением Рита Молчанова. 😉

  • Информация очень полезна, без сомнения. Но появилась одна заморочка. Миниатюры галереи все одного размера, как Вы и писали, но, когда картинки прямоугольные и в разных проекциях (горизонтальные и вертикальные), то фото некрасиво сжимается или сплющивается. Как этого избежать?

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

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

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

Adblock
detector