Скрипт увеличения картинок при нажатии, плагины для увеличения картинок на Wordpress

25 марта, 2015 Максим Метелев 7530 просмотров Комментариев нет

Всем привет дорогие друзья читатели! В этом уроке я поговорю с вами о том как сделать на сайте wordpress увеличение картинки при нажатии курсора на нее.

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

Соответственно будет две части.

Дело в том, что при добавлении картинок на сайт, особенно если они большие, WordPress при нажатии мышкой на них, открывает каждую из них в новой вкладке. Это, откровенно говоря, не очень удобно и не правильно. Поскольку вы создаете дубли страниц под названием attachments (вложения). Т.е каждая картинка – это отдельная страница вложения, которая индексируется. У нас они и так хорошо сканируются поисковыми роботами, поскольку папка uploads для индексации у нас открыта в файле robots. Сегодня мы разберемся с этим вопросом и подскажем, как правильно организовать на сайте увеличение картинки при нажатии на блоге вордпресс.

Давайте прямо сейчас приступим к освоению урока на практике. Предлагаю посмотреть содержание данной заметки.

Содержание:

Установка скрипта для увеличения картинок
Добавление кода скрипта на блог
Добавление атрибута для увеличения изображения
Плагин для увеличения картинок на сайте WordPress
Другие плагины для увеличения изображения

Установка скрипта для увеличения картинок

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

После того как скачали, вам нужно загрузить его к себе на блог. Зайти вы можете двумя способами как по фтп доступу, так и через панель хостинга. Я предпочту второй вариант. Загружать файлы скрипта мы будем в специально созданную папку lib (библиотека – library сокр., примечание автора). Создадим ее по самому ближайшему пути, т.е после public_html или www (в зависимости от вашего хостинга).

Создаем папку для скрипта

Отлично заходим в нее и копируем туда все файлы из архива.

Копируем и вставляем все файлы скрипта увеличения картинок

С этим шагом разобрались и сейчас переходим к следующему этапу.

Добавление кода скрипта на блог

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

<script type="text/javascript" src="http://local.smarticle.ru/lib/simplebox_util.js"></script>
<script type="text/javascript">
(function(){
var boxes=[],els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll('a[rel=simplebox]');	
Box.getStyles('simplebox_css','http://local.smarticle.ru/lib/simplebox.css');
Box.getScripts('simplebox_js','http://local.smarticle.ru/lib/simplebox.js',function(){
simplebox.init();
for(i=0,l=els.length;i<l;++i)
simplebox.start(els[i]);
simplebox.start('a[rel=simplebox_group]');			
});
}
})();</script>

(function(){

var boxes=[],els,i,l;

if(document.querySelectorAll){

els=document.querySelectorAll('a[rel=simplebox]');

Box.getStyles('simplebox_css','http://local.smarticle.ru/lib/simplebox.css');

Box.getScripts('simplebox_js','http://local.smarticle.ru/lib/simplebox.js',function(){

simplebox.init();

for(i=0,l=els.length;i<l;++i)

simplebox.start(els[i]);

simplebox.start('a[rel=simplebox_group]');

});

}

})();</script>

Картинка ниже кликабельна (с помощью скрипта)

Особое внимание обратите на путь к файлам скрипта. У большинства могут возникать вопросы на этом шаге. Вместо ‘ http://local.smarticle.ru/lib/'указываете адрес своего сайта, а папку lib можете или оставить как у меня или назвать ее по другому (тогда на хостинге по фтп переименуйте ее в соответствие с вашим вариантом!)

Добавление атрибута для увеличения изображения

Основная часть работы у нас сделана и теперь давайте попробуем вставить новый медиафайл (естественно большого размера).

Добавляем медиафайл большого размера

Выбираем уже заготовленную картинку на своем компьютере:

Загружаем картинку с компьютера

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

Задаем размер миниатюры как большой

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

Заходим в редактор изображения

Появится следующее диалоговое окно, куда нам необходимо прописать «Отношение» к этому изображению. Это будет отдельное поле. Туда впишите слово – simplebox

В поле отношение прописываем simplebox

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

Скрипт увеличения картинки работает

Плагин для увеличения картинок на сайте WordPress

В этом блоке мы разберем с вами вариант добавления изображений с помощью плагина. Согласитесь, что вручную добавлять слово simplebox на картинки это очень муторно, хоть и эффективно. Если плагинов на вашем блоге очень мало (например, вы создали клиентский сайт-визитку по услугам), то можете смело ставить. Нагрузки не будет никакой. Проверено в продвижении клиентских сайтов 🙂

Есть несколько вариантов плагинов. Я подробно разберу один, а в конце порекомендую некоторые из них.

Мой выбор остановился на Auto HighSlide.

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

Плагин для увеличения картинок на WordPress

Сбоку от картинки в правом нижнем углу вы увидите значок увеличения размеров изображения (т.е его исходные характеристики).

Иконка увеличения изображения

Другие плагины для увеличения изображения

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