Мар
31
21

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

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

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

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

Добавляем картинку в WordPress

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

Загрузка картинок в вордпресс

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

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

Добавление ссылки в картинку на WordPress

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

Добавление ссылки в WordPress

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

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

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

Полезное:

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

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

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

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

Редактирование картинки в WordPress

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

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

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

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

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

  1. Заходим в раздел «Внешний вид» — «Виджеты».
  2. Добавляем новый элемент типа «Текст» в соответствующее поле виджетов.
  3. Вставляем в поле виджета следующий HTML код:
<a href="https://wpinsideblog.com/">
<img src="http://ваш_сайт.com/путь_к_картинке/picture.jpg" />
</a>

Здесь:

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

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

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

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

<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)
Загрузка...

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

комментарий 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

    Антон, я такого плагина, к сожалению, не встречал, поэтому не подскажу.

Оставить комментарий


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

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

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