Галереи — это неотъемлемая часть каждого сайта Вордпресс. При помощи них вы сможете, экономя пространство, и с увеличенной скоростью загрузки продемонстрировать пользователям ваши медиа-материалы. Они обязательно должны быть, если ваш сайт не может жить без картинок и видео. А поскольку поисковые машины последнее время делают упор именно на таком материале, наличие галереи изображений и видео является обязательным условием для успеха вашего интернет-проекта.
Есть множество способов генерации галереи. Некоторые опытные вебмастера предпочитают создавать WordPress Photo Gallery вручную — при помощи кодов. Но не всякий владелец сайта знает как это делать.
Потому лучше доверить создание галереи посторонним, скачиваемым модулям.
Существует множество плагинов подобного рода, которые облегчат вам жизнь, и позволят быстро создать качественный раздел для просмотра изображений и видео со страницы. Рассмотрим лучшие из них.
Если хотите, чтобы множество изображений находились в одном месте и их можно было удобно просматривать, тогда доверьтесь плагину NextGEN. Это настоящий лидер среди других модулей такого плана. NextGEN уже скачали больше 6 миллионов пользователей. Таких объемов скачиваний нет ни у одного другого медиа-дополнения для Вордпресс.
Чтобы начать работу с NextGEN, вам необходимо его скачать и, желательно, руссифицировать. Далее вам предстоит настроить работу плагина NextGEN. Основные параметры, которые необходимо задать — это путь к файлам (то есть откуда модуль будет черпать медиа для галереи), активация SEO-ссылок (файлы будут именоваться человекопонятными URL, чтобы поисковики лучше индексировали галерею) и добавление URL для определенных изображений. Кроме того, если у вас уже есть готовый сайт с изображениями, вы сможете удалить их при помощи плагина NextGEN, чтобы они все перенеслись в галерею.
Создание новой галереи изображений доступно в разделе «Галерея» в консоли плагина NextGEN. Нажмите «Добавить галерею» и придумайте заголовок. Чтобы фотогалерея появилась на странице, вам предстоит вставить шорткод в нужную часть сайта. NextGEN предоставит вам такой шорткод сразу после определения всех настроек галереи. Уже после добавления шорткода на страницу сможете изменять состав изображений галереи — добавлять или удалять их.
NextGEN позволяет автоматически корректировать размер изображений, что очень важно для юзабильности сайта. Если у вас много разноразмерных картинок, это может навредить сайту — он будет «прыгать», то увеличиваясь, то уменьшаясь. Стандартный размер изображений можно задать в настройках плагина. Это не единственная возможность редактирования изображений — вы также сможете добавить и изменять тэги. Создание тэгов — это отличный способ оптимизировать содержимое галерей сайта Вордпресс. Пользователи смогут быстро перемещаться между похожими картинками.
И еще одна полезная особенность NextGEN — это функция добавления изображений с автоматической простановкой водяного знака. Такая возможность станет особенно полезной, если вы ведете авторский блог и добавляете свои фотографии на него. Тогда даже если конкуренты будут копировать содержимое вашего сайта, они лишь сделают дополнительную рекламу для ресурса.
Tribulant Slideshow Gallery
Данный плагин также пользуется популярностью и доверием, но его скачали всего 0,5 миллиона раз по всему миру. Тем не менее возможности модуля мало чем уступают другим подобным дополнениям. Вы сможете добавить ряд изображений в созданной вами галереи. Учтите, что Tribulant Slideshow Gallery в большей степени рассчитан на слайд-шоу. Плагин позволяет генерировать слайды как для шапки сайта, так и для размещения внутри постов.
Дополнение работает стабильно и есть множество параметров, которые вы можете изменить. Анимация перехода изображений может быть заменена, если есть потребность на то. При наведении на отдельные картинки в списке слайд-шоу, они затемняются. Пользователь сможет открывать отдельные слайды во весь экран для детального просмотра. При этом изображение обрамляется рамкой, которую можно настраивать под специфику дизайна ресурса. К каждому слайду можно добавить краткое описание. При наведении посетитель увидит название изображений, а после нажатия, если вы того пожелаете, активируется переход по заданной гиперссылке.
Grand Flagallery
Фотогалерея, музыкальные дорожки, слайды с видео — все это можно будет разместить в флеш-галереи, сделанной при помощи плагина Grand Flagallery. Это также популярное дополнение, которое скачали больше миллиона раз. Плагин позволяет создавать слайд-шоу с абсолютно разнородными материалами, и оформлять все это в различных стилевых решениях. В базовой версии модуля доступно 4 скина галереи, в платной — еще 10 сверху.
Особенность дополнения Grand Flagallery в возможности не только создавать WordPress Video Gallery, но и в генерации отдельных страниц. При помощи вкладки Grand Pages вы сможете настроить отдельную страницу, в которую встроите галерею изображений и файлов другого типа. А при помощи меню FiaGallery можно будет поменять параметры галерей:
- добавление аудио- и видеобокса;
- создание слайдов с баннерами (изображений с ссылками);
- смена скина галереи;
- корректировка размерности слайдов;
- изменение пути к галереи;
- добавление параметров сортировки изображений и слайдов;
- интеграция с Фейсбуком.
Для изменения дизайна слайд-шоу необязательно покупать платную версию плагина Grand Flagallery — в меню вы сможете задать собственные параметры для цветов отдельных элементов и изменить их размер. Модуль позволит вам сделать и слайд-шоу, и видеоплеер и музыкальный плейлист для сайта.
BestWebSoft Gallery
Плагин не зря содержит в своем названии слово Best («лучший»), ведь несмотря на относительно небольшое количество скачиваний (полмиллиона), модуль заслужил наилучшие отзывы пользователей. Рейтинг плагина составляет 4,4, в то время, как NextGEN — всего 3,9. Такая высокая оценка — это не совпадение, а прямое следствие наличия большого количества функций в модуле BestWebSoft Gallery.
Основные возможности дополнения:
- добавление неограниченного количества изображений в галереи;
- создание альбомов в галереях (их также можно добавлять в неограниченном количестве);
- к каждому альбому можно добавить описание;
- к альбомам и изображениям можно будет добавлять мета-теги, полезные для индексации в поиске;
- размер альбомов, превью и самих фотографий корректируется в настройках;
- слайд-шоу можно смотреть в полноэкранном режиме;
- галереи добавляются при помощи коротких шорткодов;
- количество снимков, отображаемых в одной строке, можно регулировать;
- можно установить порядок сортирования по дате, названию и другим параметрам;
- к галереи можно добавить свои комментарии;
- изображения в галерею можно скачивать прямо из библиотеки WordPress.
Как свидетельствуют отзывы русских пользователей плагина, модуль работает с качественной поддержкой. Если возникнут вопросы, всегда сможете найти ответы! А поскольку дополнение предоставляется и на русском языке, скорее всего, вопросов у вас и не возникнет — все очень просто и доступно изложено.
Другие плагины для создания фотогалереи на сайте
- Fotobook — отличный модуль для связки аккаунта в социальной сети Фейсбук с фотоальбомами ресурса. Одни нажатием вы сможете автоматически добавлять картинки и на сайт, и в аккаунт Facebook.
- Yet Another Photoblog — удобный и функциональный плагин. Подходит для создания фотоблогов, где основное внимание берут на себя именно фотографии, а не статьи. Отлично подойдет для блога фотографа!
- AWSOM Pixgallery — модуль для создания фотопортфолио. Плагин пользуется популярностью у художников и дизайнеров.
- LightBox Gallery — функциональное дополнение для добавления фотогалерей в посты. Можно настраивать как режим их просмотра, так и размер.
Если вы не преследуете каких-то особых целей, то и плагина NextGEN для вас будет достаточно — фотогалерея, сделанная при помощи него, выполняет все необходимые функций.
В WordPress хорошо организована работа с графическими файлами и мультимедиа. Вставить изображение в статью очень просто, достаточно лишь в редакторе административной панели нажать кнопку «Добавить медиафайл », расположенную над панелью инструментов.
После клика по этой кнопке происходит автоматический переход в библиотеку медиафайлов, где осуществляется работа с картинками. Если нужно добавить сразу несколько изображений, то в таком случае используют галереи.
Встроенная галерея WordPress
Чтобы не прибегать к применению плагинов, при создании простой галереи можно использовать ту, что уже имеется в WordPress.
Рассмотрим её создание на примере кулинарного сайта:
Галерею можно располагать не только на специально созданной страничке, но абсолютно в любом месте при создании новых записей, а также добавлять новые галереи к старым записям, оживляя их и придавая им новизну.
Главный недостаток встроенной галереи WordPress в том, что она статична. При нажатии на картинку открывается новая страница с этой картинкой, где её можно рассмотреть более детально. Но рассматривать каждое изображение отдельно очень неудобно, поэтому дополнительно используют специальные плагины.
Галерея для WordPress при помощи плагинов
Наиболее удобный плагин галереи для wordpress, который будет полезен и для всех других изображений сайта это плагин Image-zoom , увеличивающий размер картинок.
После установки его следует слегка подкорректировать, выбрав опцию «Настройки »:
Нужно указать максимальные размеры изображений (длину и ширину), выбрать тему, время перелистывания слайд-шоу, прозрачность фона и другие параметры. После завершения настройки следует нажать кнопку «Обновить », после чего плагин начнёт свою работу.
Созданная с его помощью фотогалерея для WordPress выглядит впечатляюще, а просматривать фото более удобно как в ручном, так и в автоматическом режиме:
При создании компактной галереи часто используют плагин Image Horizontal Reel Scroll Slideshow . Уже из его названия ясно, что галерея будет располагаться и прокручиваться только горизонтально, не занимая лишнее место по вертикали страницы.
При наведении курсора мыши на любое изображение, оно замирает, а по щелчку мыши картинка открывается в новом окне. Плагин совместим с версиями WordPress 2.8 и выше.
Удобный плагин галереи для wordpress NextGen Gallery выбирают многие пользователи. Новичкам он может показаться сложным, но разобраться в нём не так сложно, как кажется. Все картинки для него нужно загружать в специальную папку wp-content/gallery .
Плагин, помимо плавного увеличения размера картинок, умеет добавлять к изображениям водяные знаки и множество интересных спецэффектов. С его помощью легко разместить галерею в сайдбаре:
А с помощью различных шаблонов этого плагина легко создавать самые разнообразные галереи, не похожие друг на друга.
Любой пользователь сможет найти и выбрать необходимый плагин, набрав в поиске запросы: «фотогалерея wordpress плагин » или «wordpress галерея изображений ». Можно поочерёдно установить несколько разных плагинов на локальном сервере, проверить их функционал, а затем выбрать наиболее подходящий именно для вас.
Для небольшого слайдера подойдёт лёгкий плагин Content Slide . Плагин Featured Content Gallery имеет более громоздкую настройку, но с его помощью можно выводить галерею постов. Для этих же целей подойдёт плагин Featured Posts Grid .
Галереи можно создать не только для картинок, фотографий и постов с помощью плагинов галереи для wordpress, но и для видео, используя специальные плагины, например, WordPress Video Gallery или уже упоминавшийся плагин NextGen Gallery .
А во многих современных шаблонах для WordPress уже есть встроенные слайдеры, отображающие видеоряд и позволяющие легко переходить от одного видео к другому.
С помощью сервиса picturetrail можно бесплатно или платно создать красивое слайд-шоу для своего сайта. Преимущество этого сервиса в том, что фотографии и изображения хранятся не на самом ресурсе, а в фотобанке сервиса. Досадное неудобство – сайт сервиса англоязычный, без знания языка не столь легко разобраться.
После обязательной регистрации следует загрузить свои фото, выбрать понравившиеся спецэффекты, сохранить, скопировать предложенный код и вставить его на свой сайт в то место, где будет располагаться галерея.
Помните, что использование галереи актуально для сайтов любой тематики, а странички, украшенные wordpress галереей изображений, смотрятся более привлекательно и добавляют большой плюс к графическому дизайну сайта.
Удачи Вам!
Хорошо Плохо
Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу поговорить о возможностях и настройках одного из самых популярных плагинов для WordPress — NextGEN Gallery, который, как, наверное, понятно из названия, позволяет вставлять на страницы вашего WP блога различные галереи, отдельные фотографии с возможностью их плавного увеличения, создавать и выводить целые альбомы с изображениями, добавлять к фотографиям водяные знаки, ну, и еще кое-что он может делать, но обо все по порядку.
Вообще, NextGEN Gallery мне довольно сильно напомнил популярное расширение для создания — Phoca Gallery. Он представляет из себя такой же мощный комбайн по удобному формированию и эффектному выводу фотогалерей, но только на страницы WordPress блога, а не на страницы Joomla. Да и водяные знаки он тоже умеет добавлять — пустячок, а приятно.
Возможности плагина NextGEN по выводу галерей в WordPress
Собственно возможностей у плагина NextGEN Gallery довольно много и они сводятся не только к созданию галерей в WordPress, хотя это он делает, на мой взгляд, отменно. Вообще, в полной аналогии с расширением Phoca Gallery для Joomla, он имеет свой собственный демо сайт, где вы сможете оценить все предлагаемые им возможности по выводу фотогалерей, слайдшоу, отдельных изображений, видео и т.д.
На главной странице демо сайта сейчас приводится пример нового эффекта при показе слайдшоу, когда изображения при смене друг друга просто улетают за пределы экрана. Есть еще много способов . О них вы можете прочитать по приведенной ссылке.
Причем, если вы обратите внимание, то увидите, что NextGEN Gallery может выводить слайд шоу и фотогалереи не только в области, отведенной в WordPress под тексты статей, но и в сайдбаре (), используя для этого свои собственные виджеты.
В продолжении темы слайдшоу можно привести пример довольно интересного показа изображений средствами этого плагина, когда изображения во время просмотра не стоят на месте, а как бы приближаются, удаляются, смещаются, что создает довольно оригинальный эффект, который вы можете увидеть на этой странице.
Если вы обратили внимание, то сверху приведенного примера написан короткий код для WordPress, вставив который в статью получите именно такой вариант вывода слайд шоу средствами NextGEN Gallery:
[ monoslideshow id=1 w=450 h=350 ]
В этом коротком коде в качестве ID нужно будет указать индивидуальный номер галереи, которую должным будет заранее создать в админке с помощью возможностей плагина (об этом читайте ниже). Также в этом коротком коде указан размер окна слайдшоу по ширине и высоте (не забудьте и свои , хотя бы в FastStone Image Viewer). Точно таким же образом можно вставлять в статьи Вордпресса и другие виды фотогалерей и одиночных изображений.
Для вашего удобства в визуальном редакторе WordPress плагином будет создана специальная кнопка, открывающая окно, где сможете выбрать нужные вам наборы фоток и назначить вид их показа — галерея, слайд шоу и т.д.
На демо сайте также можете посмотреть, как будет выглядеть галерея, созданная с помощью NextGEN. Причем, при ее выводе могут использоваться различные шаблоны плагина: Caption, Carousel, Example или GalleryView.
Еще этот плагин позволяет выводить на страницы блога не только галереи, но и их список (альбомы). Альбомы могут быть представлены в развернутом и в компактном виде (показан внизу страницы демо сайта). Там же приведены короткие коды для вывода списков фотогалерей (альбомов), которые отличаются только значением переменной «template».
Плагин NextGEN еще позволяет вставлять в статьи Вордпресса отдельные фотографии, при щелчке по которым будет происходить их плавное увеличении . Причем, можно добавлять к изображениям эффект отражения или же накладывать на них нужные вам водяные знаки.
Также у него имеется возможность создания галерей для просмотра по одной фотографии на странице. При этом возможен как простой вариант показа (Image Browser), так и вариант с отображением специальной информации по данному изображению (Exif support).
Если вам понадобится задать индивидуальные настройки для галерей NextGEN, выводимых на отдельных страницах блога (эти настойки будут отличаться от общих настроек плагина), то можете воспользоваться возможностями произвольных полей (Custom Fields), которые вы заполняются при написании или редактировании статьи.
Подробнее об этом написано здесь, где приведены возможные ключи для произвольных полей и возможные значения для этих ключей.
Установка и русификация плагина NextGEN Gallery
По идее, NextGEN сразу после установки уже должен работать на русском языке (языковой файл автоматически должен подгружаться с сайта разработчиков), но у меня почему-то так не вышло и его настройки отображались на английском. Поэтому мне пришлось скачать отдельный файлик русификации и закинуть его в соответствующую директорию плагина. Но обо все по порядку.
Скачать NextGEN Gallery вы можете с официальной страницы — . Установка его ничем не отличается от традиционной. Распакуйте скачанный архив «nextgen-gallery.zip» и скопируйте полученную папку в этот каталог:
/wp-content/plugins/
Для подключения к своему блогу по FTP я советую пользоваться FileZilla, которая подробно описана , ибо программа удобна, проста и надежна. Потом вам нужно будет зайти в админку WordPress, перейти на вкладку «Плагины» — «Неактивные» и найти NextGEN. Нажмите по ссылке «Активировать» под его названием.
В админке в самом низу левой колонки меню у вас появится новая область под названием «Галерея» или «Gallery», если плагин не был автоматически русифицирован. Во-втором случае, для того чтобы получить русский интерфейс, вам нужно скачать русский перевод (файл nggallery-ru_RU.mo"). После этого подключитесь к вашему блогу по FTP и загрузите этот файлик русификации в папку:
/wp-content/plugins/nextgen-gallery/lang
Все, теперь все его настройки у вас будут на русском языке, что не может не радовать.
Добавление картинок и создание фотогалерей в WordPress
Как я уже упоминал чуть выше, туда вы сможете попасть из самого низа левого меню админки Вордпресса:
Возможностей там довольно много, но начнем мы, пожалуй, с добавления фотогалерей или изображений, которые затем сможете с помощью коротких кодов выводить в любых статьях своего блога. Для этого нам понадобится выбрать из меню админки пункт «Добавить галерею / изображения».
На первой вкладке «Добавить новую галерею» вам необходимо вписать в поле «Новая» ее будущее название. Его следует писать на латинице (лучше транслитом), а в случае, если у вас еще не создана соответствующая папка «wp-content/gallery/», то вам нужно создать ее, например, при помощи все той же программы FileZilla и обязательно установить с помощью этого FTP клиент , разрешающие запись и удаление информации из нее.
Если папка «wp-content/gallery/» у вас успешно была создана и имела права доступ 777, то плагин NextGEN Gallery отрапортует об успешном добавлении первой галереи с ID=1 и там же будет приведен короткий код (shortcode) для ее вывода на страницы блога:
Gallery ID 1 successfully created. You can show this gallery in your post or page with the shortcode
А если вы загляните через FileZilla в папку «wp-content/gallery/», то обнаружите внутри новую папку с тем названием, которое вы дали новой фотогалереи (именно поэтому я рекомендовал набирать ее название на латинице).
После создания новой галереи в настройках NextGEN Gallery вас перебросит на вкладку «Загрузить изображения», где вы сможете выбрать из выпадающего списка название фотогалереи, в которую будут добавлены загружаемые вами картинки, а затем нажать на кнопку «Обзор» и выбрать на своем компьютере одно или несколько фото (для их выделения удерживайте Shift или Ctrl на клавиатуре).
Для их загрузки нужно будет нажать на кнопку «Загрузить изображения»:
В результате вы увидите окно, в котором наглядно показан процесс загрузки выбранных вами фотографий на сервер вашего блога, а так же одновременно с загрузкой плагин создаст превьюшки этих фото, которые вы в случае необходимости сможете отредактировать в его настройках. Физически файлы превьюшек будут дислоцироваться по следующему пути «/wp-content/gallery/название/thumbs».
Процесс загрузки новых картинок можно будет повторить нужное число раз, если необходимо загружать фото из разных папок на вашем компьютере.
Хотя вы можете, например, заранее подготовить на своем компьютере папку с нужными изображениями для будущей фотогалереи и упаковать ее в Zip архив , который потом можно залить на сервер на вкладке «Загрузить Zip-файл» (где Zip архив автоматически распакуется). Неплохой вариант.
Размеры превьюшек можете изменить в настройках NextGEN, пройдя по следующему пути: «Настройки» — «Тамбнейлы». Задать размер для больших изображений (тех, которые будут открываться при щелчке по превьюшке) вы сможете на вкладке «Изображения». Вообще, покопайтесь — найдете там много интересного.
Например, на вкладке «Водяной знак» вы можете настроить на все фотографии той или иной галереи. Его можно задать в виде графического файла, указав до него путь или же просто набрав текст в соответствующем поле, выбрав тип и размер шрифта.
Позицию водяного знака на изображениях фотогалереи можно задать в области «Предварительный просмотр»:
Теперь давайте зайдем в настройки только что созданной нами Gallery.
Раз уж мы начали говорить о добавлении водяных знаков, то следует упомянуть о том, что для этого нужно будет поставить галочки напротив нужных фоток, выбрать из выпадающего списка вариант «Установить водяной знак» и нажать на кнопку «Применить». После этого превьюшки всех выделенных вами изображений, принадлежащих NextGEN, будут пересозданы с добавлением в них нужной надписи или логотипа.
Проверить правильность добавление водяных знаков можно, щелкнув по ссылке «Редактировать тамбнейл» рядом с нужным вам фото. Здесь, кстати, вы сможете левой кнопкой мыши выделить область превьюшки и нажать на кнопку «Update», после чего превьюшкой станет выделенная вами область.
Для того, чтобы изображения вашей галереи для WordPress могли бы , вам нужно будет добавить для каждого фото в столбце «Alt & Title текст / Описание» в верхнее поле так называемый ). В нижнее поле вы можете ввести описание к фотографии, которое будет отображаться при просмотре ее полноразмерного варианта.
Обратите внимание, что при просмотре списка галерей в настройках NextGEN Gallery, либо при просмотре изображений какой-либо отдельной фотогалереи, в первом столбце всегда будет указан ее ID или ID фото, которые могут вам понадобиться при вставке в статью слайдшоу или отдельной картинки с помощью коротких кодов.
NextGEN — вставляем в статьи галереи, слайдшоу и фото
У меня в WordPress, к сожалению, не работает визуальный редактор, поэтому не могу сделать скриншоты, поясняющие процесс добавления фотогалереи, слайдшоу, альбома или отдельного фото в статью. Но суть этого действа довольно проста.
В окне радактирования статьи вы щелкаете по кнопке, которую добавил туда плагин NextGEN. В результате появится всплывающее окно с несколькими вкладками: галерея, альбом, изображение.
Вы переходите на нужную вам вкладку и выбираете из выпадающего списка, допустим, нужную вам фотогалерею с изображениями (которую вы создали описанным выше способом), а так же ставите галочку напротив требуемого способа показа, например, для галереи это будут варианты: список изображений, слайдшоу.
В том месте окна ввода текста, где у вас стоял курсор, появится короткий код плагина NextGEN, который и будет формировать галерею или слайдшоу в этой статье. В общем-то, можно обойтись и без визуального редактора. При этом достаточно лишь вставлять вручную в нужное место текста статьи короткий код и прописывать для него нужные параметры. На первый взгляд может показаться сложным, но со временем вы очень быстро к этому привыкните.
Например, если привязаться к примерам с демо сайта разработчиков, то можно будет использовать хотя бы такие короткие коды:
- Для вставки галереи в WordPress понадобится прописать следующий короткий код:
- Для вывода в Вордпресс галереи с одной картинкой на странице пропишите в тексте следующий код:
- Каждой фотогалереи и изображению в настройках плагина есть возможность прописать определенные теги, на основе которых затем, например, можно вывести облако тегов или галерею с помощью данных тегов:
Для вставки слайдшоу на страницы WordPress блога возможно использовать следующий короткий код плагина NextGEN:
Здесь в переменной ID вы указываете идентификатор нужной галереи с фотографиями, созданной вами ранее.
Для вывода альбомов нужно будет использовать следующий код:
или в компактном виде:
Для вставки одного изображения, которое будет плавно увеличиваться при щелчке по нему мышью, нужно будет добавить при написании статьи следующий короткий код из арсенала NextGEN Gallery для вывода картинки с отражением:
или такого кода для вывода картинки с водяным знаком:
[ singlepic id=12 w=320 h=260 mode=watermark ]
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Simple Counters и Category and Page Icons - красивые счетчики RSS и Twitter, а так же иконки для категорий и страниц в WordPress
Comment Toolbar - добавляем в комментарии WordPress возможность ответа и цитирования
Создание в WordPress карты блога для посетителей (плагины Sitemap Generator и WP DS Blog Map)
Подсветка кода и кнопки форматирования комментариев в WordPress - SyntaxHighlighter и Comment Form
Google XML Sitemaps - создание карты сайта для WordPress
Как в плагине Yet Another Related Posts убрать прозрачный пиксель http://yarpp.org/pixels и изменить надпись Похожие материалы
Приветствую вас, читатели моего блога!
Недавно меня спрашивали как создать галерею изображений на wordpress и я решил записать видео и написать статью на эту тему. Видео выше, статья ниже:)
Галерею мы будем создавать без установки дополнительных плагинов, только средствами движка WordPress.
Как создать галерею на WordPress
Вы можете вставить галерею в уже имеющиеся страницы или записи на вашем сайте, либо создать новые.
Я возьму для примера страницу моего тестового сайта и размещу галерею на главной странице. Итак, переходим к редактированию страницы, находим место куда будем размещать нашу галерею и ставим в это место курсор мыши. Далее жмем на кнопку «Добавить медиафайл»
После этого у нас два варианта:
1. Создать галерею из тех изображений, что уже загружены в нашу библиотеку файлов;
2. Загрузить новые файлы.
Т.к. у меня в библиотеке файлов нет, я буду загружать новые, поэтому жмем на кнопку «Загрузить файлы», затем жмем на кнопку «Выберите файлы». Находим на компьютере нужные изображения, выбираем их (можно выделить сразу все) и жмем кнопку «Открыть».
Я подготовил заранее 4 изображения автомобилей.
Наши изображения загрузились. Здесь я выделил цифрами 3 важных момента:
1. Изображения помеченные галочками входят в состав нашей галереи. Если вы хотите исключить из галереи какое-либо изображение, просто наведите курсор мыши на галочку, появится знак минуса, нажмите на него.
Как видите у нас добавлено 4 изображения и чуть ниже также есть уменьшенные копии наших авто и слева написано, что у нас выбрано 4 картинки. Это удобно когда у вас в галерее сразу много изображений. Вам не нужно считать их вручную, достаточно взглянуть на подсказку внизу и сразу понятно сколько картинок вы добавляете в галерею.
2. Изображение обведенное в синюю рамку и помеченное синей галочкой активное. Это означает, что мы можем редактировать параметры данного изображения. Вы можете переключаться между изображениями и изменять параметры каждого из них.
3. Кнопка «Создать новую галерею». После того как все настройки сделаны, вы можете нажать по этой кнопке, чтобы завершить создание галереи.
Настройки галереи на WordPress
Переходим к финальным настройкам нашей галереи. Внимательно изучите слайд, ниже я даю пояснения по каждому пункту:
1. Вы можете подписать каждое фото, для этого просто поставьте курсор мыши в поле под изображением и напечатайте нужный текст.
2. Нажимая на крестик над изображением, вы можете исключить его из галереи.
3. Блок с настройками галереи:
Первый параметр в настройках — ссылка. Здесь мы можем указать куда будет перенаправлять посетителя сайта при нажатии на изображение из галереи. Вариант «Страница вложения» я рассматривать не буду — он достаточно редко используется, можете поэкспериментировать самостоятельно.
Нас больше интересует вариант «Медиафайл». Если мы выберем его, то при нажатии по миниатюре из галереи изображений откроется увеличенная копия нашей картинки.
Если поставить вариант «Нет», то при нажатии на изображение ничего происходить не будет.
Второй параметр — количество колонок. Здесь мы можем выбрать сколько колонок будет в нашей галерее. Я не могу сказать какое число нужно выбрать, здесь вам нужно самостоятельно поэкспериментировать и выбрать подходящий для вас вариант. Давайте пока оставим 3, а дальше посмотрим.
Третий параметр — порядок изображений. Здесь все просто: если вы поставите галочку, то изображения будут размещаться в случайном порядке, а не так как вы разместили.
Важный момент! Вы можете менять порядок изображений, просто перетаскивая их мышкой!
Четвертый параметр — размер. Здесь есть 4 варианта: миниатюра, средний, большой и полный. Здесь опять же выбирайте на ваше усмотрение. Обычно размеры «большой» и «полный» не используются. Попробуйте варианты «миниатюра» и «средний» и подберите тот вариант, который вам подходит. Я оставлю вариант «миниатюра».
4. Кнопка «Вставить галерею». После того как все настройки сделаны, нажимаем ее.
Наша галерея разместилась в тексте страницы. Не забудьте после редактирования страницы нажать кнопку «Обновить»
После этого переходим на страницу, которую редактировали и смотрим, что у нас получилось. Галерея готова!
Улучшаем галерею на WordPress
Теперь нажмите по любой из картинок в галерее. Как видите, картинки открываются на всю страницу и у нас нет возможности вернуться на страницу сайта с помощью меню. Это очень неудобно и некрасиво.
В начале статьи я заявлял, что мы не будем использовать плагины при создании галереи и я сдержал слово — наша галерея готова, при этом мы не использовали ни одного плагина.
Но мы можем улучшить нашу галерею, и для этого нужно установить один плагин. Он называется Fancybox. Данный плагин не требует настройки, его нужно просто установить и активировать.
После установки плагина Fancybox обновите страницу с галереей и посмотрите как теперь отображаются изображения при нажатии.
Согласитесь стало гораздо удобнее просматривать картинки из галереи.
Теперь давайте рассмотрим еще один важный вопрос.
Как редактировать галерею на WordPress.
Очень просто можно отредактировать созданную вами галерею. Переходим к редактированию записи или страницы, на которой размещена галерея, находим ее и нажимаем по галерее мышкой. Галерея выделится серым цветом и сверху появятся две небольшие иконки: редактировать и удалить.
Иконка в виде карандаша — это редактирование, нажимаем по ней и переходим к настройкам галереи. Меняем то, что нам нужно и жмем кнопку «Обновить галерею». После этого не забудьте обновить редактируемую запись или страницу. Галерея обновлена.
Вот так легко и просто можно создать галерею на WordPress.
На этом сегодня все. Ставьте «лайки», делитесь с друзьями. Если остались вопросы, пишите в комментариях.
От автора:
в старых версиях WordPress создать галерею было не так просто, не говоря уже о галерее из видео или товаров. Однако сегодня существует множество плагинов необычных и мощных галерей для WordPress. В сравнении со старыми версиями WP галерея Jetpack просто великолепна, но в сравнении с современными продуктами она проигрывает по всем фронтам. Прочитав этот обзор из 20 плагинов галерей для WP с сайта Envato Market, вы поймете, что я имел в виду.
Justified Image Grid – Премиум галерея WordPress
Вы ищите плагин галереи для WP, который будет делать все, что только можно представить? Тогда вам необходимо взглянуть на Justified Image Grid.
Как в любой хорошей галерее, тут можно сбросить все настройки в шорткод. Мощный плагин включает в себя:
20 предустановок и 340 настроек
Меняйте настройки для каждой галереи отдельно
Загружайте изображения с Facebook или Flickr, или управляйте изображениями через NextGEN
Интеграция с RSS каналами, возможность показывать видео с YouTube или Vimeo, изображения с 500px, Pinterest, deviantART, StumbleUpon, Imgur, Tumblr и т.д.
И еще много интересного
Вы сразу поймете, что это больше чем просто галерея, как только увидите все настройки, интеграцию последних постов и узнаете, что можно подключить CDN. Justified Image Grid — больше, чем просто галерея, намного больше.
Essential Grid WordPress Plugin
Сетки это хорошо, а вот сетки, вписывающиеся в ваши требования – еще лучше. С помощью Essential Grid WordPress Plugin можно создавать идеальные сетчатые галереи для WordPress.
Используйте один из 30+ встроенных скинов или создайте свой с помощью простого редактора drag-and-drop Visual Skin Editor. Плагин один, а возможностей масса:
Поддержка WooCommerce
Поддержка нескольких сайтов и языков
Поддержка YouTube, Vimeo и SoundCloud
Возможность импортировать свою сетку, скины и метаданные
Плагин фокусируется на упрощении процесса создания галереи, и именно это он и делает. С помощью Visual Skin Editor в Essential Grid WordPress Plugin намного легче создавать идеальные галереи для своего блога, онлайн магазина, портфолио и т.д.
Media Grid — WordPress адаптивное портфолио
Сетчатые галереи отлично подходят для показа изображений, видео и т.д. В Media Grid большой набор опций и возможностей, с помощью которых вы с легкостью создадите свою сетчатую галерею.
Вы будете просто работать в drag-and-drop редакторе, а плагин за вас сгенерирует полностью адаптивную сетчатую галерею при помощи продвинутых свойств CSS и JQuery. Среди возможностей:
Ретина иконки
SEO постраничная навигация
Поисковая система в реальном времени
Неограниченное число адаптивных макетов
SEO и поиск выделяют Media Grid среди других плагинов. С поддержкой изображений, аудио, видео и WooCommerce плагин справится с любой поставленной задачей.
Video Gallery WordPress Plugin /w YouTube, Vimeo
Обычно, когда люди думают о галерее для WP, они представляют галерею изображений. Некоторые плагины из списка поддерживают как видео, так и изображения, но Video Gallery WordPress Plugin /w YouTube, Vimeo уделяет больше внимания именно видео.
Плагин поддерживает изображения и аудиофайлы, но с видео он как рыба в воде. Среди возможностей:
Поддержка субтитр и сенсорных экранов
Проигрывание с последней точки или заданного времени
Подключение к YouTube API и Vimeo API
Можно хранить собственные файлы и вести трансляции MPEG-Dash
Плагин полностью адаптивный и поддерживает ретина дисплеи. С ним вы будете уверены, что ваша галерея будет отлично смотреться на любом устройстве. В Video Gallery WordPress Plugin /w YouTube, Vimeo галереи работают быстро, просто, а также имеют больше количество стилей.
Go Portfolio — WordPress адаптивное портфолио
С помощью Go Portfolio можно создать красивую галерею за небольшое время. Плагин прост в управлении, но это не говорит о том, что он не функциональный – плагин очень гибкий.
Данный плагин для WP использует слегка другой подход в отличие от остальных из этого списка. Как и в других плагинах, тут можно создать галерею и добавить ее в пост или на страницу. Однако отличие плагина в том, что вы можете создать новый пользовательский тип постов. Среди других возможностей:
Совместимость со всеми темами WordPress
Адаптивная сетка или макет горизонтального слайдера
Поддержка множества форматов изображений, видео хостингов, аудио источников, а также WooCommerce
Работает с любым типом постов (в том числе и пользовательские), также можно создать неограниченное количество пользовательских типов
Если не знаете, с чего начать, то в плагине есть 38 готовых шаблонов. После создания галереи можно воспользоваться продвинутым экспортом и импортом файлов. Go Portfolio не подведет в любой ситуации.
Thumbnail Gallery (WordPress плагин)
Сетчатые галереи плагины сейчас в моде. А где же найти полнофункциональный плагин в виде слайдера? Thumbnail Gallery – то, что вам надо.
Добавляйте изображения, YouTube и Vimeo видео, а также HTML или Flash. Среди возможностей:
drag and drop сортировка изображений
Возможность изменить расположение превьюшек
Навигация по галерее при помощи превью или стрелок
Для вставки галереи можно воспользоваться генератором шорткодов. Все настройки сохраняются на тот случай, если захотите перенести настройки из одной галереи в другую. Thumbnail Gallery – серьезный плагин с хорошими возможностями.
Fancy Gallery — WordPress плагин
Fancy Gallery – довольно причудливый плагин. Галереи можно вставить в посты, на страницы, виджеты и даже на другие сайты.
С помощью HTML Generator можно разместить галерею, хранящуюся в плагине, на другом сайте. Действительно уникальная возможность среди остальных:
3 типа виджетов
Работает с NextGEN, а также поддерживает шорткоды
Тысячи макетов и эффектов анимации при наведении мыши
Простой способ создания галереи с помощью обычного копирования изображений в папку
Как вы поняли, с помощью Fancy Gallery можно с легкостью создавать необычные галереи.
uSquare — Universal Responsive WordPress Grid for Team Members, Logos, Portfolio, Products and More
Большинство плагинов галерей дают администраторам WordPress все инструменты дизайна, чтобы те могли создавать галереи под свои требования.
С uSquare так не получится. Однако это не слабость, а наоборот сильная сторона uSquare.
Хотя дизайн и стили не сильно меняются, их можно использовать совершенно по-разному. В плагине немало возможностей:
Эффекты анимации
drag and drop изменение порядка
пользовательские высота и ширина элементов галереи
uSquare – уникальный хорошо спроектированный WP плагин.
Social Gallery WordPress Photo Viewer Plugin
Обычно WP плагины галерей предоставляют полный набор настроек, чтобы можно было создать и стилизовать галерею под свои нужды. Другие же плагины наоборот ограничивают возможности стилизации и сосредотачиваются на какой-то конкретной нише. Social Gallery WordPress Photo Viewer Plugin отлично справляется с обеими задачами.
Этот плагин превращает обычный lightbox в супер инструмент с интеграцией социальных сетей. В похожем на Facebook стиле пользователи могут ставить лайки, делиться, комментировать и т.д. Впечатляет. Среди других особенностей:
Совместимость с NextGEN
Обнаружение лиц на изображениях
Совместимость с Google AdSense
Свыше 40 CSS3 вариантов анимации
Можно подключить комментарии Disqus или Facebook, или свои собственные. Social Gallery WordPress Photo Viewer Plugin оптимизирован под SEO, что впечатляет, но интеграция социальных сетей и обычного lightbox выводит его на совершенно иной уровень.
PhotoMosaic for WordPress
PhotoMosaic for WordPress подойдет фотографам и дизайнерам, которым нужно показать свои работы.
Мозаику можно настроить, чтобы она хорошо смотрелась в WordPress. Среди возможностей:
CSS3 анимация загрузки
Шорткоды и поддержка Template Tag
Легко и быстро создайте себе мозаичную галерею. Галереи в PhotoMosaic for WordPress можно создавать из обычных изображений, изображений из постов или со страниц, а также изображений из категорий и тегов из любых таксономий.
Real 3D FlipBook — WordPress плагин
Все WP плагины галерей довольно просты. Нужно всего лишь добавить изображения или прицепить видео и все, галерея готова – все просто. Однако Real 3D FlipBook реально выходит за рамки обычного применения галерей.
Трансформируйте свои изображения или PDF (ага, я сказал PDF) в 3D книгу, в которой можно перелистывать страницы.
С помощью WebGL и фолбэка CSS3D можно создавать реалистичные книги, журналы и брошюры. Среди возможностей:
Настройка анимации переворота страниц
3 полностью CSS настраиваемых скина
Зум с помощью колесика мыши или зажатия на экране мобильного телефона
Плагин полностью адаптивен и поддерживает ретина дисплеи. Также есть поддержка технологии глубоких ссылок и настраиваемого оглавления. Самая удивительная возможность Real 3D FlipBook – использование PDF.js для трансформации PDF файлов в интерактивные книги.
Global Gallery — WordPress адаптивная галерея
Большинство плагинов галерей используют пользовательские шорткоды и интерфейсы загрузки. А Global Gallery наоборот работает как с WordPress, так и с NextGEN галереями.
Кроме слайдеров изображений, каруселей и коллекций в плагине есть:
Фильтры глубоких ссылок
Система добавления водяных знаков
drag-and-drop конструктор галерей
3 макета галерей и 8 лайтбоксов
Также стоит выделить количество источников изображений:
Global Gallery отлично работает с галереями WP и имеет свой впечатляющий набор возможностей.
UberGrid – Адаптивный конструктор сеток для WordPress
Используйте UberGrid для создания супер крутых галерей. Будь то обычные посты или WooCommerce, плагин подходит для всего.
Плагин полностью адаптивен, поддерживает ретина дисплеи, имеет множество лайтбокс опций, а также много функций:
Встроенные виджеты и быстрая CSS3 анимация
Поддержка Google Fonts и JetpackPhoton
Самая впечатляющая особенность – возможность открыть сетку в лайтбоксе, т.е. плагин можно использовать с другими галереями типа PrettyPhoto, JetPack Gallery, FooBox и т.д. Плагину UberGrid есть чем похвастаться, и в то же время он может выступать в роли лайтбокс дополнения к другой галерее.
Final Tiles Grid Gallery for WordPress
Final Tiles Grid Gallery for WordPress – хороший плагин для WP. Плагин легко настраивается, а также поддерживается YouTube, Vimeo, WooCommerce, SoundCloud и WordPress изображения.
В плагине есть все, что вам может понадобиться:
Подписи к изображениям
7 разных лайтбоксов
Настраиваемое соотношение сторон и фильтры
Final Tiles Grid Gallery for WordPress – красивый плагин.
iLightBox Revolutionary Lightbox for WordPress
Галереи это хорошо, но иногда то, что вам действительно нужно, это улучшить свой lightbox. iLightBox Revolutionary Lightbox for WordPress – реальная революция в lightbox галереях для WP.
Универсальное jQuery решение с дружелюбным API. Среди возможностей:
Полная адаптивность
Поддержка YouTube и Vimeo
Парсер HTML контента на шорткоды
По галерее можно перемещаться при помощи клавиатуры, мыши или сенсорного экрана. iLightBox работает вместе с Jetpack, NextGEN и стандартными шорткодами галерей WP. И правда, революция.
ZoomFolio — WordPress портфолио плагин
ZoomFolio отлично справляется с созданием галерей и их настройкой. Плагин работает как с галереями изображений, так и с портфолио или недавними постами из блога.
Установите, добавьте контент, создайте галерею. Все просто. Да и возможностей не так мало:
Пользовательский лайтбокс
Оптимизация по iOS и Android
Поддержка WooCommerce и YARPP
ZoomFolio задействует CSS3 для создания 3D анимации (можно при необходимости воспользоваться техникой изящной деградации и убрать данный эффект) – простой плагин галереи для WP.
Grid FX – Плагин для создания адаптивной сетки для WordPress
В плагине присутствует множество возможностей, которые мы уже встречали в других плагинах, но он использует их в необычной связке. У Grid FX действительно хороший набор опций, что делает его чуть-чуть мощнее обычных плагинов галерей.
Отображать можно посты из блогов, пользовательские типы и многое другое. Внушительный список возможностей:
Постраничная навигация и более 80 опций
Пользовательские эффекты и встроенная система просмотров и лайков
Поддержка YouTube, Vimeo, Dailymotion и т.д.
Возможность собрать в одной галерее WooCommerce, изображения, посты, видео и т.д.
Помимо системы лайков и просмотров есть впечатляющая возможность — встроенные выпадающие списки с фильтрами и сортировкой, что позволяет пользователям быстро и легко создать мощный онлайн магазин и т.д. Grid FX действительно впечатляет.
Awesome Gallery — Instagram, Flickr, Facebook галереи на вашем сайте
Должен сказать, как только поближе начинаешь рассматривать плагин Awesome Gallery, понимаешь, что он потрясающий.
Поддержка CDN и автоматические обновления
Пользовательские эффекты наложения, подписи, фильтры и т.д.
10 заранее заданных стилей, 3 режима макета и 3 встроенных лайтбокса
Источниками изображений могут выступать Flickr, Instagram, Facebook, WordPress posts, WooCommerce, 500px, и RSS каналы
Awesome Gallery полностью адаптивен и поддерживает ретина дисплеи – мощный WordPress плагин.
Thumbnail Gallery (WP NextGEN шаблон галереи)
Thumbnail Gallery – то же самое, что Thumbnail Gallery (WordPress Plugin). Разница в том, что этот плагин создан как NextGEN шаблон галереи.
Помимо свыше 100 опций по настройке присутствует множество возможностей, на которые стоит обратить внимание:
Поддержка сенсорных экранов
Названия и описания изображений
Если вы уже пользуетесь WordPress галереей NextGEN, то вам обязательно нужно взглянуть на Thumbnail Gallery.
Wall/Grid Gallery (WordPress плагин)
Превратите обычную галерею или лайтбокс в сетчатую галерею с изображениями, видео или HTML контентом. В плагине Wall/Grid Gallery есть все, что нужно для создания и управления сетчатой галереей.
Среди возможностей:
Поддержка сенсорных экранов
Настройка галереи и лайтбоксов
В плагине Wall/Grid Gallery нет ничего заоблачного, однако свыше 60 опций делают его гибко настраиваемым. Мощное решение.
Заключение
В этом обзоре несколько WordPress галерей привлекли мое внимание. Одни из них по максимуму используют CSS3 эффекты, в то время как другие больше работают с back-end’ом.
