Галерея для WordPress на основе плагина фотогалереи NextGEN Gallery — настройка, создание и вывод галерей, слайдшоу и изображений | Заработок в Интернете
Заработок в Интернете

Галерея для WordPress на основе плагина фотогалереи NextGEN Gallery — настройка, создание и вывод галерей, слайдшоу и изображений

Галерея для WordPress на основе плагина фотогалереи NextGEN Gallery — настройка, создание и вывод галерей, слайдшоу и изображений

Плагин NextGEN Gallery - мощный комбайн по удобному формированию и эффектному выводу фотогалерей и по праву является самым лучшим плагином для создания альбомов и галерей на сайте WordPress.

Возможности плагина NextGEN Gallery:

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

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

http://www.nextgen-gallery.com/nextgen-gallery-features/

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

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

Панель управления плагина NextGEN Gallery

Далее будет показано, как начать работу с этим популярным и мощным плагином, как использовать NextGEN для создания галереи и ее размещения внутри страницы или записи на WordPress сайте.

Шаг 1. Установка на WordPress и русификация плагина галерей NextGEN Gallery

Скачать плагин NextGEN Gallery вы можете с официальной страницы этого плагина по этой ссылке на wordpress.org. Установка плагина NextGEN Gallery ничем не отличается от традиционной. Распакуйте скачанный архив «nextgen-gallery.zip» и скопируйте папку nextgen-gallery в папку с WP плагинами вашего блога:

/wp-content/plugins/

По умолчанию плагин не имеет русского интерфейса, поэтому его необходимо дополнительно русифицировать. Для этого скачайте по этой ссылке два файла nggallery-ru_RU.mo и nggallery-ru_RU.po и загрузить их на сервер в каталог:

wp-content/plugins/nextgen-gallery/lang

Примечание: русифицировать плагин можно нажав на соответствующую кнопку в главном окне настроек NextGEN.

Русификация

Далее вам нужно будет зайти в админку WordPress, перейти на вкладку ПлагиныНеактивные и найти плагин NextGEN Gallery. Нажмите по ссылке Активировать под названием нужного нам плагина.

После активации плагина в админке WordPress в самом низу левой колонки меню у вас появится новая область под названием Галерея.

Админпанель

Настроек очень много, поэтому рассмотрим самые основные из них.

Шаг 2. Настройка плагина галерей NextGEN Gallery

После русификации окно обзора NextGEN Gallery будет выглядеть следующим образом:

Общий план

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

Основные настройки NG

Вот самые важные настройки, которым нужно уделить внимание:

  • Путь к галереи — это путь, где вы будете хранить изображения. У каждого вашего альбома будет здесь своя папка.
  • Удалить файлы изображений — если вы собираетесь переделывать что-то, вы, наверное, не захотите удалять изображения, если вы удалите галерею. Но если галерею будут создавать пользователи, возможно, вы захотите это сделать.
  • Активировать ЧПУ — это включает ЧПУ (человеко-понятные URL-ы) для ваших галерей.
  • Создать новый URL изображения с ЧПУ ссылкой — это об опции постоянных ссылок. Чтобы обновить структуру, щелкните по кнопке Ок. Вам нужно сделать это всего один раз.

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

Шаг 3. Добавление новой галереи

В меню консоли перейдите в раздел Галерея → Добавить галерею/изображение. На вкладке Добавить новую галерею введите название вашей новой галереи. Нажмите Добавить галерею.

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

Шорткод NG

Это всегда одинаковый формат

[nggаllery id=N]
. Так что важный момент — id галереи. Все галереи отображаются на основе id.

После создания галереи следует загрузить в нее картинки.

Шаг 4. Загрузка изображений

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

Загрузить изображения

Щелкните по кнопке Загрузить изображения и подождите, пока они загрузятся.

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

Шаг 5. Редактирование фотографий в галерее

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

Редактировать галерею

(В локализации плагина упущен пробел между цифрой «5», означающей количествтво загруженных изображений, и словом «изображения»)

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

Редактировать NG

Что из этих настроек нам пригодится?

  1. Заголовок — соответствует названию галереи, поэтому уже задан.
  2. Описание — краткое описание.
  3. Обложка для альбома — выберете картинку, которая будет служить обложкой для галереи.

Остальные опции можно не трогать.

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

Групповые

Справа от таблицы изображений вы увидите поля для ввода информации об изображении.

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

Шаг 6. Создание альбома для организации галерей

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

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

Перейдите в боковое меню консоли Галерея → Альбом. Введите имя для нового альбома. Щелкните по кнопке Добавить.

Управление альбомами плагина NextGEN Gallery

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

 Управление альбомами-2

 Размещение столбцов в данном меню следующее.

  • Правый столбец содержит список альбомов.
  • Центральный столбец содержит список галерей, не добавленных в альбомы.
  • Левый столбец покажет галереи, которые добавлены в альбом, который вы выбрали в выпадающем списке.

Шаг 7.1. Добавление галереи на страницу (первый способ)

В визуальном редакторе WordPress вы щелкаете по кнопке, которую добавил туда плагин NextGEN Gallery.

Панель управления плагина NextGEN Gallery

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

Вставка галереи с помощью плагина NextGEN Gallery

В том месте окна ввода текста визуального редактора WordPress, где у вас стоял курсор, появится короткий код плагина NextGEN Gallery, который и будет формировать галерею или слайдшоу в статье WordPress.

Шаг 7.2. Добавление галереи на страницу (второй способ)

Достаточно вставить в нужное место текста статьи короткий код плагина NextGEN Gallery  (шорткод) с номером соответствующей галереи, альбома или изображения (ID). Благодаря вставке в шорткод определенных шаблонов можно добиться различных эффектов отображения.

Список шорткодов плагина NextGEN Gallery Вы можете найти на этой странице:

http://www.nextgen-gallery.com/nextgen-gallery-features/

Список наиболее часто используемых шорткодов плагина NextGEN Gallery:

где, ID — идентификатор нужной галереи с изображениями

Шорткод

Описание эффекта
[nggаllery id=N] вставка галереи
[nggаllery id=N template=carousel images=3] вставка галереи с эффектом карусели
[nggаllery id=N template=шаблон images=3] вставка галереи с эффектом в зависимости от шаблона (Caption, Carousel, Example или GalleryView)
[slidеshow id=N w=ширина области слайдшоу h=ее высота] вставка слайдшоу
[аlbum id=N template=extend] вставка альбома в подробном виде
[аlbum id=N template=compact] вставка альбома в компактном виде
[singlеpic id=N h=высота w=ширина mode=web20] вставка одного изображения, которое будет плавно увеличиваться при щелчке по нему мышью
[singlеpic id=N h=высота w=ширина mode=watermark ] вставка одного изображения с водяным знаком
вставка галереи с одной картинкой
[nggtаgs gallery=Joomla,WordPress,VirtueMart,... ] вставка тэгов, на основе которых затем можно будет выводить изображения и галереи
[mоonoslideshow id=N w=ширина h=высота]  изображения во время просмотра  приближаются, удаляются, смещаются

Понравилась статья? Поделитесь с друзьями:

Источник: http://2019-god.info/ . Вся информация про 2019 год

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>