Галерея с описанием wordpress. Стандартная галерея изображений WordPress и работа с ней

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

Есть так же пользователи которые о галерее знают, но упорно предпочитают использовать навороченные плагины типа NextGen и подобных, использование которых во многих случаях явно себя не оправдывает. А ведь стандартная галерея WordPress вполне может стать самодостаточной на большинстве блогов. Особенно, если её малость усовершенствовать. Но давайте по порядку. Сначала для новичков.

Как создать стандартную галерею WordPress?

Итак, создаем галерею для страницы или записи. В визуальном редакторе выбираем курсором место в основном текстовом поле где будет размещена галерея и кликаем на большую кнопку — Добавить медиафайл . Затем, в открывшимся окне выбираем вкладочку — Создать галерею .

Загружаем нужные нам картинки или выбираем из вашей медиа библиотеки уже загруженные ранее.

Справа, внизу кликаем на большую красную кнопку — Создать новую галерею и переходим в окно для её редактирования. Справа будет раздел с настройками. Тут стоит указать как должны работать ссылки на изображения. Обязательно переключите на — Медиафайл . Иначе картинки будут открываться в страницах вложения, что не особо удобно.

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

Тут же можете подписать каждую картинку. Читатели увидят подпись под миниатюрами.

Кликаем на кнопку — Вставить галерею , всё там же, внизу справа.

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

В нашем случае, список номеров это ID картинок из которых состоит галерея.

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

Как найти ID нужной картинки?

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

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

В сети можно найти способы выводить список ID картинок в админке просто добавив кусок кода в шаблон. Например, вот так:

Function column_id($columns) { $columns["colID"] = __("ID"); return $columns; } add_filter("manage_media_columns", "column_id"); function column_id_row($columnName, $columnID){ if($columnName == "colID"){ echo $columnID; } } add_filter("manage_media_custom_column", "column_id_row", 10, 2);

Но я не советую курочить лишний раз файлы вашего WP шаблона. Лучше установите вышеописанный плагин.

А если я хочу красивую галерею?

Если вы хотите, что бы картинки в вашей галере выводились эффектно с помощью популярного скрипта Lightbox, рекомендую установить небольшой и легкий плагин — EWSEL Lightbox For Galleries . Он имеет минимум настроек (вернее сказать, только одну — выбор темы оформления) и сделает все ваши галереи с красивым эффектом отображения во всплывающем окне.

Для того, что бы получит подобный эффект не только у галерей, но и у отдельных картинок, следует каждую «обертывать» вот в такой код:

Разумеется, путь до картинки в коде нужно вставить свой.

Надеюсь, новички получили полезную информацию о том как создавать и настраивать стандартную галерею WorPress. Тем пользователям которые уже используют отдельные, мощные плагины — галереи стоит задуматься — а надо ли?

Но конечно, если вы матерый фотомастер или художник и многочисленные галереи — ваш основной контент, или вы делаете крутой корпоративный сайт где важны внешние эффекты в первую очередь, то стоит обратить самое пристальное внимание на вот нашего сайта.

Приветствую вас, читатели моего блога!

Недавно меня спрашивали как создать галерею изображений на 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. В наши дни (сегодня 22 июля 2015 года), плагины фото галерей предлагают все, от анимационных эффектов и социального обмена до ползунков. В сегодняшнем посте рассматривается пять плагинов фото галерей, которые позволяют продемонстрировать свои фотографии, скриншоты, иллюстрации и другое.

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

Итак, начнем.

Плагин wordpress фото WP Canvas – Gallery

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

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

Есть несколько различных стилей слайдеров, и они все красивые. Это просто зависит, где вы хотите, чтобы ваши кнопки появлялись при навигации стрелками: непосредственно на изображение или на далеко внешнего края контейнера.

Если вы предпочитаете элегантную карусель, есть вариант для этого тоже.

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

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

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

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

Этот плагин является бесплатным.

Плагин wordpress фото Gmedia Gallery

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

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

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

В дополнение к классическим стилями фото галереи, есть также некоторые 3D – в любом вращающемся кубе-образной или вращающейся сфере.

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

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

Photo Gallery, by Web Dorado

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

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

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

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

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

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

Если вы ищете плагин для фото галереи, которая хорошо выглядит, то это очень хороший плагин для вас. Он бесплатен для установки одной на одной веб-сайте.

Для версии более семи галерей, шесть месяцев поддержки, социального обмена, изображения, комментирования, и более – за $ 30, с одной установки.

Галерея фото wordpress NextGEN Gallery

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

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

У этого плагина готова мобильная версия и предлагается водяные знаки для ваших изображений. Плюс версия предлагает разные эффекты – комментирования и социального обмена, а также другие стили галереи, и поддержку по электронной почте за $ 49. Про версия включает в себя интеграцию PayPal в дополнение к особенностям плюс версии за $ 99.

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

Это отличный плагин еще стоит упомянуть потому, что он очень регулярно обновляется для наилучшего пользовательского опыта. Если вы ищете простой, легкий, но прочный плагин с чистым результатом, то, что вы ищете плагин NextGEN Gallery.

Галерея фото wordpress Huge-IT Gallery

Эта фото галерея является явным фаворитом из всех этих плагинов.

Он не только может отображать изображения, но также отображает очень хорошо видео. Он поставляется с многими стилями галереи.

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

Этот плагин последовательно и быстро работает.

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

Навигация стрелки и “Х”, чтобы закрыть окно блока, размещаются в нижней части всплывающего окна, который отличается по сравнению с большинством плагинов и ставят их больше к середине и сверху. Вы можете, однако, выбрать тип стрелок какую хотите. Заголовки могут быть отображены на режиме висения или по умолчанию на эскизах.

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

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

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

Лучшей особенностью Huge-IT Gallery является как отображаются блоки. Они не принимают размер на всю страницу по умолчанию. Это значит, что навигация и кнопки закрытия окна легко доступны и ваши посетители не надо будет выяснять как просматривать изображения.

Вы можете выбрать неограниченное количество настроек использования и пользовательские бесплатно для одного сайта, или вы можете обновить для еще большего дизайна настройки за $ 30. Если у вас есть более чем один сайт, то лицензия на пяти составляет $ 45, а для неограниченных сайтов, это всего лишь $ 15 больше, по $ 60.

Вывод

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

Может быть я пропустила какой-то, по вашему мнению лучший? Тогда напишите ваше предложение в комментариях ниже.

Если вы использовали любой из этих плагинов, пожалуйста, сообщите о своем опыте.

Возможно вам это будет интересно: