Мар

Как добавить ссылку на изображение в WordPress

Данная заметка будет полезна больше для начинающих пользователей. Не смотря на то, что задача это весьма простая, меня пару раз спрашивали о том как правильно сделать картинку ссылку в WordPress. Теперь буду давать линк на этот пост, где постараюсь все детально рассмотреть. Кстати, разные, вопросы, касающиеся изображений в системе вордпресс, можете найти в одноименном разделе. А если вы ищете плагин эффектного увеличения картинки при клике — попробуйте Easy Fancybox.

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

1. Заходите в редактор для написания/редактирования поста или страницы. В нем кликаете по ссылке «Добавить медиафайл» (Add Media).

2. В открывшемся окне появятся картинки из медиабиблиотеки. Выбираете закладку «Загрузить файлы», где можно будет перетащить / загрузить изображения с персонального компьютера.

Далее просто нажимаете кнопку «Вставить в запись». Статья про ошибку HTTP при загрузке фото в WordPress поможет решить проблему, если вдруг она у вас возникла.

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

4. После этого появится всплывающее окно, где указываете нужный вам линк. Можно поставить галочку «Открывать в новой вкладке», если хотите.

Кликаем «Добавить ссылку». Сохраняете запись и проверяете работу данного элемента на сайте.

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

Кстати, недавно заметил, что вставить картинку ссылку в WordPress можно и через сочетание клавиш Ctrl + V. Для этого копируете линк из адресной строки или любого другого места, а затем, после клика по нужному изображению, нажимаете «Ctrl + V» — ссылка будет добавлена. Такой себе экспресс метод.

Полезное:

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

Ссылка в подписи к картинке

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

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

В открывшемся окне в поле «Подпись» можно добавлять HTML код ссылки:

<a href="http://site.com/">Картинка номер 1</a>

Вставка картинок ссылок в виджете

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

Алгоритм следующий:

Заходим в раздел «Внешний вид» — «Виджеты».
Добавляем новый элемент типа «Текст» в соответствующее поле виджетов.
Вставляем в поле виджета следующий HTML код:

<a href="https://wpinsideblog.com/">
<img src="http://ваш_сайт.com/путь_к_картинке/picture.jpg" />
</a>

Здесь:

А — добавляет ссылку, которую указываете в параметре href;
IMG — вставляет картинку, путь к которой задается в src;

Сохраняем элемент.

Можно использовать код посложнее:

<a href="https://wpinsideblog.com/" target="_blank">
<img src="http://ваш_сайт.com/путь_к_картинке/picture.jpg " alt="Описание картинки" width="250" height="180" />
</a>

Здесь используются дополнительные параметры:

target=»_blank»- указывает открытие линка в новом окне;
alt=»Картинка» — альтернативный текст для картинок полезен в оптимизации;
width и height — ширина и высота изображения соответственно.

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

Оцените статью:

(голосов - 11, средний балл: 6,09 из 7)

Загрузка...

Категории: Возможности; Начинающим;

Теги: html, базовые знания, виджеты, изображения, новичкам, ссылки, текстовый редактор.

комментарий 21 к статье “Как добавить ссылку на изображение в WordPress”

Валерий 01.04.2016
Здравствуйте! Спасибо за интересную информативную статью. Очень будет полезно новичку блоггеру узнать эту информацию.
Анжелика 01.04.2016
очень интересная и немало важная статья. Спасибо за столь ясное и подробное объяснения.
Татьяна 20.01.2017
Спасибо, все получилось, но хочется, чтобы ссылка открывалась в новой вкладке, может быть, найду сама.
Заранее спасибо!
Tod 21.01.2017
Татьяна, смотрите 4тый пункт руководства, под полем для ссылке есть галочка «Открывать в новой вкладке».
Bonzo 22.03.2017
Спасибо!!! Помогло!!!! А можно кроме размеров картинки изменить ещё расположение?
Tod 22.03.2017
Bonzo, при клике на картинку увидите всплывающее меню с иконками карандаша и разными вариантами выравниения (обтекания текста) — справа, слева, по центру и т.п. Можете попробовать эти опции для изображения.
Владислав 23.05.2017
Подскажите, пожалуйста, еще такой вариант. Можно ли добавить ссылку к каждой картинке, если они все «упакованы» в одну галерею стандартными средствами WordPress. (там же во вкладке «медиафайл» при вставке картинки можно «создать галерею» из множества картинок, чтобы картинки были жестко упорядочены и относительно друг друга не гуляли). Заранее спасибо за ответ!
Tod 23.05.2017
Владислав, не думаю, что можно добавить ссылки на каждое изображение, если они все в одной галерее (только линк увеличения самой картинки). Тут придется смотреть какой-то модуль по типу NextGEN Gallery и др.
Игорь 25.09.2017
Здравствуйте, а как сделать ссылку на картинку, которую ставим в изображение записи? Спасибо1
Tod 25.09.2017
Игорь, отображение превью для записи задается через файлы шаблона, например, в single.php для полного отображения постов блога, в index.php и других похожих — для архивных записей. Как правило, выводится через функцию the_post_thumbnail, вот тут немного примеров кода. Поэтому вам нужно найти данную функцию в файлах шаблона и добаивть вокруг нее тег ссылки А href.
Кристина 06.11.2017
Добрый день! Пытаюсь вставить ссылку в подпись изображения, ставлю галку «открывать в новом окне», но при нажатии в этом же окне появляется серый фон и надпись «The image could not be loaded»

Вот кусок кода [caption id="attachment_8262" align="aligncenter" width="355"] Бежевый свитшот Trinity 2,200 руб.[/caption]

kapusta-fashion.ru/kollektsiya-osen-zima-2017/ — сама запись

Надеюсь поможете!)
Tod 06.11.2017
Кристина, так сходу тут не разобраться, могу лишь подсказать в чем вероятнее всего проблема. Я так понимаю при клике на ссылку срабатывает скрипт увеличения фотки magnific (то ли плагин у вас установлен, то ли вшит в шаблон), а т.к. по адресу линка находится не картинка, а страница, то появляется ошибка. Нужно изучить как можно отключить эффект увелчения фоток для конкретных изображений и добавить этот параметр в код.
Кристина 07.11.2017
Спасибо за быстрый ответ! Передала его человеку, который помогает мне с сайтом по программной части. Мне ответили, что только на всем сайте изменится этот скрипт. А у нас интернет-магазин, и по нажатию на картинку в карточках товаров нужно увеличение.
Подскажите пожалуйста, возможно ли сделать это изменение только в блоге, а на всем остальном сайте чтобы осталось увеличение.
Tod 07.11.2017
Кристина, я имел ввиду не убирать скрипт вовсе, а посмотреть есть ли параметр, который отключит его для конкретной картинки… во многих подобных модуля такая функциональность предусмотрена.
В крайнем случае можно использовать условные операторы WordPress чтобы подключать данный скрипт только в блоге.
BEAUTY 29.10.2018
Спасибо за подробную статью. Наконец разобралась!!!
Галина 04.01.2019
Вечер добрый!
Прошу ответить на мою электронную почту — не могу найти на сайте редактор для написания/редактирования поста или страницы. Хотелось бы попробовать самостоятельно добавить ссылку на изображение в WordPress.
Лилия 23.09.2019
Спасибо за статью! Очень помогли!
Нелли 17.03.2021
Здравствуйте! Я начинающая вордпресс, раньше работала только в конструкторе Web Page maker и никаких проблем не было.. Мне нужно вставить в футер двигающуюся ленту с бегунком из нескольких кликабельных изображений расположенных по горизонтали в один или два ряда-это обложки книг.. И так, чтобы любая из них вела на страницу с описанием книг.. Помогите, пожалуйста
Tod 20.03.2021
Нелли, вам может пригодиться модуль Carousel Horizontal Posts Content Slider. Про него и другие я рассказывал в статье о создании горизонтальной карусели для WordPress. Возможно, некоторые из вариантов там уже будут не совсем актуальны, если так, то можно просто погуглить какой-то другой плагин по ключевикам Horizontal Posts Slider.
Антон 11.06.2021
Привет. Я так и не могу найти плагин или код, с помощью которого можно: в обычной статье вставляется галерея из нескольких изображений, и по умолчанию на каждом изображении можно поставить ссыль только на этот же медиафайл большего разрешения. А как поставить ссыль на любое другое изображение?
Повторю — именно при вставке не одной картинки, а нескольких, собранных типа в «галерею»
Tod 14.06.2021
Антон, я такого плагина, к сожалению, не встречал, поэтому не подскажу.