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

А уж ссылка в виде картинки в сайдбаре (баннер) – это общепринятый способ для перехода на нужный адрес, к примеру, на вашу страницу захвата.

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

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

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

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

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

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

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

<a href="адрес ссылки"><img src=" http://kartinka.jpg " alt="" /></a>

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

<a href="адрес ссылки"><img src=" kartinka.jpg " alt="" /></a>

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

<a href="адрес ссылки" target="_blank"><img src=" kartinka.jpg " alt="" /></a>

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

Движок WordPress позволяет в картинку вставить ссылку еще проще. К примеру, вы написали статью, загрузили картинку в папку с изображениями.

  • Вставьте картинку в запись -
  • правой кнопкой мыши выделите картинку -
  • в меню WordPress нажмите знак ссылки -
  • в появившемся окне укажите урл. Это может быть партнерская ссылка, или адрес другой страницы вашего блога, или ссылка на вашу страницу захвата - напишите заголовок (можно и не писать) -
  • и поставьте галочку Открывать в новом окне -
  • не забудьте нажать Сохранить или Опубликовать, или Обновить.

Посмотрите, как выглядит наша картинка в режиме просмотра html. Она также имеет атрибуты alt и title, высоту и ширину (можно изменять в просмотре html или редактировать в папке с медиафайлами), стиль alignright (расположение справа).

 Картинка со ссылкой в сайдбаре

Чтобы сделать изображение в сайдбаре ссылкой, картинку (баннер) надо поместить:

1. в папку с медиафайлами блога Вордпресс.  Тогда конструкция будет такая

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

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

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

<p align="center"><a href="
http://адрес_ссылки" target="_blank"><img src="
http://ваш_сайт.ru/kartinka.jpg"></a></p>
  • Зажмите левой клавишей мыши виджет Текст и перетащите его в сайдбар.
  • Откройте виджет, нажав на треугольник справа.
  • в зависимости от места нахождения картинки вставьте в поле виджета первую или вторую конструкцию.



Затем нажмите Сохранить и перейдите на сайт, чтобы проверить результат. Привлекательные баннеры в сайдбаре - хороший способ размещения партнерских ссылок. Посмотрите, как картинку сделать ссылкой Вконтакте.

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

Метки:

Создать сайт на WordPress

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:

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

  • Владимир (34):

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

  • Алексей:

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

    • Ольга:

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

  • Татьяна:

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

    • Ольга:

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

  • Лия Сорока:

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

  • Александр:

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

  • bulawerty:

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

    • Ольга:

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

  • Андрей Зимин:

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

  • Андрей Зимин:

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 для диалога необходимо принять правила кофиденциальности *