Вас приветствует Дмитрий Афонин, автор блога FairHeart.ru! В этой статье я расскажу о работе с картинками в WordPress. Стандартные средства WordPress позволяют только вставлять изображения в публикуемые статьи. Зачастую этого мало и хочется нечто большего и красивого. В этом нам помогут три отличных плагина WP Lightbox 2, NextGEN Gallery и WordPress Content Slide, которые позволяют реализовать в WordPress галерею изображений, красивое слайдшоу, лайтбокс и великолепный слайдер. Устраивайтесь поудобнее, сейчас мы сделаем ваш блог необычайно красивым!

Галереи, слайдшоу, лайтбоксы и слайдеры для wordpress

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

Начнем с простого — как, используя стандартные средства WordPress, вставить картинку в тест публикуемой на блоге статьи. Для этого используется кнопка Загрузить/вставить, которая доступна как в визуальном, так и в HTML редакторе WordPress.

плагин для картинок в wordpress

Файл можно вставить как со своего компьютера, так и со стороннего интернет ресурса, что позволит сэкономить место на сервере.

1. Для загрузки со своего компьютера используется первая вкладка «С компьютера». Надо сказать, что таким образом можно добавить любой медиафайл в том числе аудио и видео. Нужный файл можно перетащить с компьютера в область, ограниченную пунктиром, либо просто нажать на кнопку Выберете фалы и найти его в ручную.

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

Вставка картинки в статью блога на WordPress

  • Общие данные по загруженному файлу: Имя, Тип, Дата загрузки и Размеры.
  • Редактировать — откроет встроенный редактор, который позволяет выполнить следующие простые операции: обрезать, повернуть по/против часовой стрелки, отразить по вертикали/горизонтали.
  • Заголовок — помещается в атрибут title тега img.
  • Текст — альтернативный текст, который видит пользователь, если картинка не доступна или у него отключен их показ в настройках браузера. Старайтесь задавать говорящие текст и заголовок.
  • Подпись, Описание — соответственно подпись к картинке и ее описание.
  • Ссылка — ссылка на полноразмерное изображение, которое по умолчанию открывается в новом окне браузера. Чтобы оно не открывалась в отдельном окне, а красиво всплывало на передней план используется эффект лайтбокса и соответствующий плагин WP Lightbox 2, который рассмотрим чуть ниже.
  • Выравнивание — задает расположение на странице.
  • Размер — загруженное в WP хранится как минимум в трех размерах: полный, средний и миниатюрный (иногда еще и большой). В целях экономии места на ftp, старайтесь минимизировать размеры изображения до загрузки их в WordPress. Для этого воспользуйтесь любым бесплатным графическим редактором, например, Paint.NET или тот же Paint. Если полноразмерное изображение не влезает в статью, используйте средний размер и вставляйте ссылку на полный размер (кнопка «ссылка на файл»).
  • Вставить в запись — после настройки, используйте эту кнопку для добавления картинки в текст статьи.
  • Удалить — позволяет удалить выбранный медиафайл с сервера, не забудьте подтвердить свой выбор, нажав на появившуюся кнопку «Продолжить».

2. Для вставки в статью картинок с других интернет ресурсов, используйте вторую вкладку — «С сайта». Выберете, какой медиафайл хотите вставить на свой блог.

В первой опции укажите URL адрес изображения. Как его узнать? Перейдите на сайт, с которого хотите использовать картинку, нажмите на ней правой клавишей мыши и выберете пункт «Копировать ссылку на изображение».

Копировать ссылку

Теперь ссылка помещена в буфер обмена, и ее можно вставить, используя горячие клавиши ctrl+v.

Остальные опции идентичны рассмотренным выше.

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

Лайтбокс (lightbox) для WordPress — плагин WP Lightbox 2

Лайтбокс (lightbox) позволяет выводить изображение не в отдельной вкладке браузера, полноразмерная картинка просто всплывает на передний план, затемняя задний фон. Смотрится очень эффектно.

Для реализации лайтбокса на WordPress создано очень много плагинов. Пожалуй, самым простым из них является WP Lightbox 2, который я и использую на своем блоге. В настоящий момент его поддержка прекращена, и его уже не найти в официальном репозитории на wordpress.org, но можно .

Главным критерием выбора была простота. От вас требуется только скачать WP Lightbox 2 и установить его. Настроек плагин не имеет. Как только вы вставляете в статью картинку с ссылкой на ее полноразмерный вариант, плагин автоматически при клике выводит ее в лайтбоксе.

NextGEN Gallery — плагин WordPress для слайдшоу, альбомов и галерей картинок

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

Скачайте последнюю версию NextGEN Gallery, распакуйте архив и загрузите папку nextgen-gallery с файлами плагина на сервер в директорию wp-content/plugins (для этого можно воспользоваться бесплатным ftp клиентом FileZilla). По умолчанию плагин не имеет русского интерфейса, поэтому его необходимо дополнительно русифицировать. Скачайте два файла nggallery-ru_RU.mo и nggallery-ru_RU.po и загрузить их на сервер в каталог wp-content/plugins/nextgen-gallery/lang. При обновления плагина, эти файлы могут быть удалены — в этом случае повторно загрузите их на ftp.

После активации появляется отдельный пункт в меню админки — «Галерея». Настроек очень много, поэтому рассмотрим самые основные из них.

1. Галереи.

Переходим в раздел «Галерея» — «Добавить галерею/изображение» и на вкладке «Добавить новую» вводим ее название и нажимаем кнопку «Добавить».

Добавить галерею на блог

Обратите внимание, что каждой галереи присваивается свой идентификационный номер (ID). Он нам пригодится для поиска и вывода на страницы блога. После создания галереи следует загрузить в нее картинки.

Добавить изображения

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

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

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

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

Остальные опции можно не трогать. Теперь следует добавить галерею на страницу WordPress. Для этого используется следующий код:

[nggallery id=N]

Нужно только подставить ID. По умолчанию NextGEN Gallery настроена так, что дает читателю выбор, как просматривать изображения — в качестве списка картинок или слайдшоу. Выбрать одно из двух можно в разделе «Галерея» — «Настройки» — вкладка «Галерея»:

варианты вывода

2. Альбомы.

Альбомы могут состоять из галерей и других альбомов. Для создания альбома переходите в раздел настроек NextGEN «Галерея» — «Альбом». Вводите название нового альбома и жмите «Добавить». После чего перетаскиваете в него нужные галереи или другие альбомы.

Создание и редактирование альбома в NextGEN Gallery

Вывести альбом на страницы блога на WordPress можно в подробном виде с помощью кода:

[album id=N template=extend]

или компактном:

[album id=N template=compact]

3. Отдельные картинки.

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

[singlepic id=N h=высота w=ширина mode=web20]

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

Новые виджеты от NextGEN Gallery

1. NextGEN слайд-шоу — название говорит само за себя — виджет добавляет слайд-шоу на блог.

Виджет NextGEN слайд-шоу

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

2. NextGEN Media RSS. — добавляет иконку для подписки на RSS ленту новых медиа файлов блога.

3. Виджеты NextGEN — позволяет выводить на блог случайные или недавно добавленные картинки из галерей блога.

Виджет NextGEN

Опция «Показывать» задает:

  • количество изображений;
  • их представление (превью или оригинальные изображения);
  • случайные или недавно добавленные;
  • Включить IE8 Web Slices;
  • размеры картинок — ширина и высота.

Опция «Выбрать» задает галереи, из которых будут браться изображения.

Если у вас на блоге настроено кэширование страниц, то картинки будут обновляться только после удаления кэша.

WordPress Content Slide — слайдер для блога

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

WordPress Content Slide

Скачайте последнюю версию WordPress Content Slide, установите и активируйте его. Плагин устанавливается стандартно, поэтому заострять на этом внимание не буду. К сожалению, интерфейс на английском языки и русификации к нему не найти, но настроек немного, поэтому разберемся и так. Находятся они в разделе «Content Slide» основного меню админки WordPress. Перейдя в него, вы увидите три раздела опций:

1. General Settings (основные настройки).

  • Image width, height — размеры изображения (ширина и высота). Загружая новые изображения для слайдера, старайтесь придерживаться этих размеров.
  • Border width и Color — ширина и цвет границы.
  • Font family — шрифт текста описания и заголовка, отображаются только если включить их в разделе Images Source Settings, который рассмотрим чуть ниже.
  • Text font size и color — размер текста описания и его цвет.
  • Heading font size и color — размер шрифта заголовка и его цвет.
  • Background color — цвет заднего фона.

2. Effects & Animations Settings (эффекты и анимация).

  • Squares per width и height — ширина и высота квадратиков для управления сменой картинок.
  • Delay beetwen images, squares in ms — задержка при переключении картинок и управляющих квадратиков в миллисекундах.
  • Opacity of title and navigation — коэффициент прозрачности заголовка и навигации.
  • Speed of title appereance in ms — скорость появления заголовка в миллисекундах.
  • Effect — выберете эффект смены картинок. All combined — будут задействованы все варианты эффектов, random — случайные.
  • Mouse Over Pause (Stop Animation on mouseover.) — прекращать анимацию при наведении на слайдер курсора мыши.
  • Navigation Previous/Next ( Previous/Next buttons on image.) — добавить в слайдер кнопки «следующая» и «предыдущая» картинка.
  • Navigation Buttons ( Square buttons at bottom ) — выключить/выключить навигационные кнопки в нижней части слайдера.
  • Navigation Buttons Color ( Square buttons at bottom ) — цвет навигационных кнопок.

3. Images Source Settings (настройки изображений).

  • Display Heading and Text? — показывать заголовок и описание картинок.
  • of chars — максимальное количество символов.
  • Open Images/Links In New Window? — открывать картинки/ссылки в новом окне?.
  • Order Images Randomally? — порядок изображений в слайдере случайный?.
  • Use custom images? — использовать пользовательские изображения? Очень важная опция. Позволяет выбрать откуда брать картинки для слайдера: Yes, Custom images — картинку указываются в ручную в поля ниже; No, Using Posts from a Category — картинки берутся из категорий.
  • Number of custom Images — количество картинок.
  • Если вы выбрали использование отдельных картинок (не из категорий), то ниже необходимо указать: SRC — URL адрес картинки (как его узнать, я уже говорил в начале статьи); Link — при нажатии на данную картинку пользователь будет переходить по указанной здесь ссылки (укажите URL адрес статьи, из которой взята картинка).

С настройками WordPress Content Slide разобрались, теперь осталось его вывести на страницы блога WordPress.

Для вывода на всех страницах блога используется код:

<?php if(function_exists('wp_content_slider')) { wp_content_slider(); } ?>

Например, чтобы разместить слайдер в шапке блога на всех его страницах, добавьте этот код в шаблон header.php, используемой темы WordPress.

Для вывода только на главной странице воспользуйтесь следующим кодом:

<?php
if(is_front_page()) {
	if(function_exists('wp_content_slider')) { wp_content_slider(); }
} ?>

И последнее. Для вывода слайдера на определенных страницах, укажите их название в структуре if (is_page (‘...’)). Например, для страницы soderjanie код будет выглядеть следующим образом:

<?php if(is_page(‘soderjanie’)) 
{ if(function_exists(‘wp_content_slider’)) { wp_content_slider(); } 
} ?>

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

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.