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

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

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

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

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

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

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