Как сделать картинку ссылкой

Онлайн практикум «Как зарабатывать от 50000 рублей из дома на партнерских программах»

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

Сделать картинку в wordpress кликабельной, зачем?

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

Ссылка в виде картинки в сайдбаре (баннер) – это общепринятый способ для перехода на нужный адрес: на другой веб-ресурс (счетчики), на страницу захвата или продающую. Каждый переходил по линкам, спрятанным под кнопкой КУПИТЬ.

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

Разберем несколько вариантов, как сделать изображение ссылкой.

Как в картинку вставить ссылку html

Эти сведения будут полезны при создании продающей или подписной страницы, когда html код вставляют непосредственно в код страницы. Чтобы фото сделать ссылкой, обычно используют такую конструкцию.

<a href="адрес ссылки">
<img src="адрес картинки" alt="Как сделать картинку ссылкой" /></a>


Адрес ссылки – это url страницы, куда переходит пользователь, чаще всего страница подписки или лендинг партнерской программы.

Где взять урл фотки? Она не должна остаться на вашем компьютере. Ее размещают в интернете (в папке с медиафайлами на блоге, в корневой папке, на облачном сервисе, например, на Яндекс Диске). Она должна иметь свой url с https://.

СТАТЬИ ПО ТЕМЕ:

Новый алгоритм яндекса Баден Баден. Как не попасть под фильтр

Как удалить страницы вложения в вордпресс

Ошибки при переезде сайта на протокол https

<a href="адрес ссылки">
<img src=" https://kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>


Если изображение находится в одной папке с файлом index.html, можете написать коротко

<a href="адрес ссылки">
<img src=" kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>


Если хотите, чтобы нужная страничка открывалась в новом окне, html конструкцию усложним. Добавим target="_blank"

<a href="адрес ссылки" target="_blank">
<img src=" kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>


Как видите прикрепить, вставить ссылку в картинку средствами html достаточно просто.

В записи WordPress

Cms имеет встроенный редактор. В картинку вставить ссылку максимально просто.

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

как сделать картинку ссылкой

ВСТАВЬТЕ фотку в запись (визуальный режим),

ПРАВОЙ кнопкой мыши выделите ее,

НАЖМИТЕ знак линка в меню WordPress,

УКАЖИТЕ урл в появившемся окне. Это может быть рефссылка, url другой странички вашего блога, страницы захвата,

ПОСТАВЬТЕ галочку ОТКРЫВАТЬ В НОВОМ ОКНЕ.

Не забудьте нажать СОХРАНИТЬ или ОПУБЛИКОВАТЬ, либо ОБНОВИТЬ.

Посмотрите, как выглядит наше изображение в режиме просмотра html. Оно имеет:

  1. атрибут alt (альтернативный текст);
  2. высоту и ширину (height, width можете изменять непосредственно в просмотре html, но разумнее редактировать в папке с медиафайлами);
  3. стиль alignleft (расположение слева).

как в картинку вставить ссылку
Просто прикрепляется, согласны?

В сайдбаре

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

В папку с медиафайлами блога Вордпресс. У меня images, У вас может как угодно называться, чаще всего upload.

Тогда конструкция такая.

<p align="center">
<a href=" https://адрес_ссылки" target="_blank">
<img src=" https://ваш_сайт.ru/images/kartinka.jpg"></a></p>

Причем, url картинки ищите в папке с медиафайлами.Как сделать ссылку в виде картинки

В корневую папку сайта public_html (через ftp клиент).

<p align="center">
<a href=" https://адрес_ссылки" target="_blank">
<img src="https://ваш_сайт.ru/kartinka.jpg"></a></p>

Если загружаете в папочку с названием, укажите его.

ЗАЖМИТЕ левой клавишей мыши виджет HTML (в ранних версиях Вордпресс виджет ТЕКСТ) и перетащите его в сайдбар.

ОТКРОЙТЕ виджет, нажав на треугольник справа.

ВСТАВЬТЕ в поле виджета первой или второй html код (зависит от места нахождения изображения).

С помощью средств css можно сделать рамку изображения, поменять фон, закруглить углы.

виджет Текст
как изображение сделать ссылкой
Затем нажмите СОХРАНИТЬ и перейдите на сайт, чтобы проверить результат.

Заключение

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

Для профессионального использования лучше Фотошоп. Вот самый понятный курс для начинающих.

Бесплатный онлайн-практикум «Как получить профессию будущего: менеджер по БЕСПЛАТНОМУ трафику»
Понравилась статья? Поделиться с друзьями:
Я новичок
Комментарии: 11
  1. Владимир (34)

    Вы,как всегда, на высоте. Все просто и доступно (в картинках).Спасибо!

  2. Алексей

    Добрый день! Ссылку в картинку вставили, спасибо. Подскажите как сделать эту картинку с ссылкой на странице активной, что бы она при на ведении курсора как то менялась, шевелилась, немного увеличивалась и т.п. на самом деле все ровно. За ранее спасибо.

    1. Ольга (автор)

      Алексей, почитайте вот эту статью http : //goldserfer.ru/plavnoe-uvelichenie-miniatyury-zapisi-pri-navedenii-kursora/.

  3. Татьяна

    Здравствуйте!Очень хорошо пояснили,показали,рассказали.Только,чтобы закончить вставлять картинку в сайтбар,приходится уходить с вашего сайта.Нереально код переписать от руки с вашего сайта! Скопировать вы не даете,появляется ссылка на ваш блог.Прийдется искать дальше,а жаль…

    1. Ольга (автор)

      Любую ссылку можно удалить при желании.

  4. Лия Сорока

    Спасибо большое, просветили! Хотела сама догадаться, но чтобы время не терять, обратилась к помощи интернет-сообщества! Надеюсь и в следующий раз найти у вас полезную информацию!

  5. Александр

    Отличный мануал! Много шлака пришлось перечитать, пока не нашёл эту статью. Реально помогла, спасибо!

  6. bulawerty

    Хорошая статья, вопрос к автору Вы видео урок не думали сделать?

    1. Ольга (автор)

      Скриншота вполне достаточно.

  7. Андрей Зимин

    Благодарю за подсказку, отличный способ сделать из изображения ссылочку!

  8. Андрей Зимин

    Спасибо, ваш метод мне помог, форма и фон отлично вписались в дизайн блога!

Добавить комментарий