Как увеличить картинку при нажатии с помощью скрипта и плагина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• FancyBox for WordPress
• jQuery Colorbox
• Image Zoom

На этом у меня все друзья. Увидимся в следующих полезных и образовательных выпусках!