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

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

Картинка со ссылкой – обязательный атрибут продающих страниц.

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

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

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

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

<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, высоту и ширину (можно изменять в просмотре html или редактировать в папке с медиафайлами), стиль alignleft (расположение слева).

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

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

В ПАПКУ с медиафайлами блога Вордпресс.  Тогда конструкция будет такая

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

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

В КОРНЕВУЮ ПАПКУ сайта public_html (через ftp клиент)

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

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

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

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



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

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

Метки:

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

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

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

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

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

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

  • Алексей:

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

    • Ольга:

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

  • Татьяна:

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

    • Ольга:

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

  • Лия Сорока:

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

  • Александр:

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

  • bulawerty:

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

    • Ольга:

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

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

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

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

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

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

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