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

Узнав, как сделать картинку ссылкой на нужную страницу, вы сможете не только украсить свой блог красивыми фото, но и направлять трафик в желаемую сторону. Как и было обещано в предыдущей статье как сделать баннер, сегодня вы получите в руки мощный инструмент, который позволит создавать на вашем блоге картинки-ссылки, ведущие на страницы вашего или стороннего ресурса.

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


Безусловно, контент, полезная информация — то, ради чего читатели приходят на наши блоги. И, конечно, нам приятно, когда они задерживаются у нас в гостях чуть дольше приличия. Не секрет, что мы все по большей части визуалы и любим разглядывать  картинки.

Кроме того, картинка, являясь емким образом, тоже способна передавать информацию. Эмоциональную. И, в отличие от текста, она всегда остается некоторой загадкой, недосказанностью.. Мы видим образ, пару-тройку слов к нему, и вот уже хочется узнать, что за всем этим стоит. В этом секрет тизерной рекламы.

prostoj_sposob_kak_sdelat_kartinku_ssylkoj_простой_способ_как_сделать_картинку_ссылкой
Научившись превращать статичные картинки в кликабельные, вы сможете создавать свои нестандартные рассылки, RSS, красочные анонсы своих статей, необычные баннеры к своим платным/бесплатным продуктам, а также собственные изображения к партнерским продуктам, которые рекомендуете на своем сайте.

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

Это интересно!

В разработке материала мне помог Владимир Марник — владелец сайта ХостинДО и автор проекта ПомогайБлог, подсказав, как сделать картинку ссылкой, используя возможности  Wordpress, за что я ему очень благодарна.

Вставляем в картинку ссылку

Для удобства материал разбит на две части — смотря что вы хотите сделать. Первая часть — как сделать картинку ссылкой для размещения в статье блога. То есть вы можете сделать все или некоторые изображения в статьях кликабельными.

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

Часть 1:

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

1. Создаем новую запись

Заходим в админпанель: КОНСОЛЬ → ЗАПИСИ → ДОБАВИТЬ НОВУЮ → ЗАГРУЗИТЬ/ВСТАВИТЬ.

Появится такое окно:

dobavlyaem_zapis

2. Загружаем картинку на хостинг

Нажмите кнопку ВЫБЕРИТЕ ФАЙЛ и в появившемся окне проводника выберите нужную картинку со своего компьютера. Затем нажмите ОТКРЫТЬ.  Когда файл загрузится, выберите нужный размер картинки, задайте заголовок и в нижней части окна нажмите кнопку ВСТАВИТЬ в ЗАПИСЬ.

 

3. Вставляем нужную ссылку

Когда картинка появится, щелкните по ней мышкой, чтобы выделить (картинка станет синего цвета, как на рисунке). После чего в верхней панели инструментов на вкладке  нажмите на значок «Цепь» (на рис. выделено красной стрелкой):

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

Откроется новое окно — в строке URL введите адрес страницы, на которую должен переходить клик. Это может быть страница как вашего сайта, так и стороннего ресурса (например, переход по партнерской ссылке).

В графе «Открывать в новом окне» поставьте обязательно галочку и нажмите ОБНОВИТЬ.

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

Часть 2:

Как вставить картинку в сайдбар

А вот теперь научимся ставить ЛЮБУЮ картинку или баннер в сайдбар. Например, вы хотите сделать картинку-перенаправление на вашу страницу захвата, собственный инфопродукт, важную статью или на продающую страницу партнерского сайта. Или хотите поставить в сайдбар (в подвал или шапку) баннер собственного изготовления (как сделать свой баннер, можно узнать в бонусе к статье Как сделать баннер в новом окне>>).

Чтобы вставить картинку в сайдбар, необходимо получить корректный код. Для этого нужно пройти предыдущие три пункта. Делаете все абсолютно то же самое (не забудьте вставить нужный URL, чтобы картинка переходила туда, куда нужно). загрузка баннера ничем не отличается от загрузки обычной картинки.

В самом конце, когда нажмете ОБНОВИТЬ и картинка появится в записи, нужно перейти на вкладку HTML (красный кружок на рисунке):

kak_vstavit_kartinku_v_sajtbar

И вот он — готовый код (в синем овале на рисунке). В нем уже заложена нужная ссылка, размеры картинки и переход в новое окно. Скопируйте этот код и вставьте в виджет. Нажмите СОХРАНИТЬ в виджете и переходите на сайт. Проверьте размер картинки, корректность отображения и работает ли ссылка.

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

Если вы хотите скрыть ссылку от индексации (например, партнерскую), когда скопируете готовый код в виджет, сразу после ссылки <a href=»ССЫЛКА» поставьте тег rel="nofollow" — после закрывающей кавычки. И нажмите СОХРАНИТЬ в виджете.

Как уменьшить размер картинки в сайдбаре:

Если размер картинки нужно уменьшить, вернитесь в сайдбар, откройте виджет и отрегулируйте цифры так, чтобы подогнать их под размер виджета вашего блога:

 

alt="" width="300" height="182"

 

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

 ПОЛЕЗНЫЙ НАВЫК:

Уменьшаем вес фотографии

Как вставить в виджет два банера

Дополнительный блок по просьбам моих читателей.

Иногда возникает такая необходимость — вставить в виджет два банера по горизонтали. Для этого нужно вписать сгенерированный выше код в дополнительные теги:

<table><tr><td>КОД БАННЕРА №1</td><td>КОД БАННЕРА №2</td></tr></table>

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

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

И не забывайте закрывать от индексации, если ссылки партнерские, особенно на главной странице сайта. Такие уж у нас поисковики, что в открытую работать — в бан можно загреметь :)

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

Это интересно!


Поделись своим мнением, нам не без разницы, что ты думаешь!

61 комментариев

  1. Владимир Марник 19.11.2012
    • НеоБлоггер 19.11.2012
      • Юлия 29.11.2012
        • НеоБлоггер 29.11.2012
          • Юлия 29.11.2012
          • НеоБлоггер 29.11.2012
  2. Марник Владимир 19.11.2012
    • НеоБлоггер 19.11.2012
  3. людмила 25.11.2012
    • НеоБлоггер 26.11.2012
  4. Татьяна 15.12.2012
    • НеоБлоггер 16.12.2012
  5. Валентина 17.12.2012
    • НеоБлоггер 17.12.2012
  6. Александр Ризун 30.12.2012
    • НеоБлоггер 30.12.2012
    • Александр 03.01.2013
  7. Татьяна Белокурская 01.01.2013
    • НеоБлоггер 02.01.2013
  8. Александр 03.01.2013
    • Лариса 03.01.2013
  9. Валентина 13.01.2013
    • НеоБлоггер 15.01.2013
  10. Владимир 17.01.2013
    • НеоБлоггер 17.01.2013
  11. Татьяна 20.01.2013
    • НеоБлоггер 20.01.2013
  12. Александр 20.01.2013
    • НеоБлоггер 20.01.2013
  13. Александр 20.01.2013
  14. Татьяна 20.01.2013
    • mozyaoz 28.09.2013
      • Александр Хрипунов 28.09.2013
  15. Александр 20.01.2013
  16. НеоБлоггер 20.01.2013
    • НеоБлоггер 20.01.2013
    • Александр 04.04.2013
      • НеоБлоггер 04.04.2013
  17. Александр 20.01.2013
    • НеоБлоггер 20.01.2013
  18. Григорий 03.02.2013
    • НеоБлоггер 03.02.2013
  19. Kiddy 22.02.2013
    • Лариса 22.02.2013
  20. Cтепан 04.05.2013
    • НеоБлоггер 12.05.2013
  21. Leon 03.08.2013
    • НеоБлоггер 10.08.2013
  22. Наталья 30.01.2014
    • Александр Хрипунов 30.01.2014
  23. Антонина 25.03.2014
  24. Ivan 06.05.2014
    • Александр 06.05.2014
  25. Ivan 08.05.2014
    • Александр 08.05.2014
  26. Антонина 08.05.2014
    • Александр 08.05.2014
  27. Антонина 08.05.2014
  28. Ирина 29.09.2015
    • Александр 29.09.2015
  29. Oksana 07.02.2016

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

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