Добавим ссылку в блоге на YouTube канал

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

Зажмите его мышкой и медленно перетаскивайте вверх, поставьте его в боковую колонку. Надеюсь у вас получится, главное это делать медленно и не спеша, чтобы страница прокрутилась вверх при перетаскивании виджета.
Второй вариант как можно добавить виджет, это нажать по нему, и выбрать то место, куда его хотите установить, к примеру Основная колонка.
Виджет текст позволяет писать в него код, нам это и нужно. С помощью него мы можем на сайте выводить нужную нам информацию.  Можно дать ссылку на свой YouTube канал, или показывать рекламный банер.
Давайте так и сделаем, чтобы наглядно увидеть как это делается. 
Добавим сначала ссылку на наш YouTube канал. Если у вас канала еще нет, то можете создать его, или вместо него добавить ссылку на свою группу вконтакте или другой соц-сети. Я покажу это на примере YouTube.  Для начала скопируйте ссылку своего канала, после этого в виджет Текст вставьте ее в значение атрибута href=”” тега <a>. Чтобы указать анкор ссылки, а это ее название, то введите его между тегами <a>. Если хотите чтобы ссылка открылась в новом окне, то укажите атрибут target, а в значение укажите _blank
Рекомендую включать этот атрибут, чтобы люди переходя на ваш канал не уходили с вашего сайта. 
Вот так ссылка должна выглядеть в результате со всеми ее параметрами, о которых мы говорили. <a href=”ваша ссылка” target=”_blank”>Название ссылки</a> Вот как это выглядит с настоящей ссылкой, уже в виджете Текст.
Название ссылки я указал “Перейти на YouTube канал” а сам блок назвал “Наш YouTube канал”

Если посмотреть как это выглядит на сайте, то увидим вот такую ссылку нажав по которой, человеку откроется новое окно с вашим YouTube каналом.

Уже не плохо, но было бы гораздо лучше, если бы добавить картинку самого YouTube канала, это будет более привлекательно и заметно, что повысит кликабельность по ней. 
Добавим картинку YouTube канала.  Для этого наведем мышкой на Медиафайлы, затем выберем Добавить новый. 

В открывшемся окне загрузите картинку 

Загрузим картинку, я добавлю вот такую.

 После загрузки картинки, нажмите на ссылку Изменить, которая находится справа от загруженной картинки 

После этого откроется окно с настройками картинки, изменим некоторые из них.

1. В первом поле укажите название картинки, я всегда указываю его на латинице. Важно чтобы название было смысловое и соответствовало картинке, а не просто какие-то символы. Чтобы в поиске вас находили по картинкам, это дополнительный трафик на сайт.
2. В поле два, укажите название картинки на русском, можете написать в склонении, или разбавить название картинки, но уже на русском языке. 
Подпись картинки я тут специально не указываю, она нам не нужна. 
3. В поле три составляем описание для картинки. Опишите кратко суть картинки, какую информацию она в несет. Описание будет отображаться когда человек увидит вашу картинку в Google или Yandex, и поможет ему понять куда эта картинка его приведет. 
С настройками картинки готово, теперь жмите кнопку Обновить и скопируйте ссылку на картинку. 
Скопируем ссылку картинки. На скрине выше я обвел красным прямоугольником где находится ссылка, выделите ее всю и скопируйте.
Теперь чтобы добавить картинку в виджет необходимо написать еще немного кода. Вот что нужно:
<img src=””> 
Этот тег отвечает за вывод картинок в html структуре страницы, между двумя кавычками необходимо указать ссылку на картинку, которую вы скопировали. Вот что получилось. 
<img src=”http://myintellekt.ru/wp-content/uploads/2017/07/2017-07-22_235521.png”>
Теперь все это необходимо вставить между тегами <a>, вместо названия ссылки. Название ссылки уже не нужно, так как картинка сама рассказывает о себе.
Вот что получилось в коде

Нажимаем кнопку Сохранить и смотрим что получилось на сайте. 

Уже лучше чем просто ссылка. Если хотите, то можете выровнять картинку по центру. Для этого необходимо весь код, который вы написали, заключить в теги <center> </center> Не забудьте закрыть второй тег слешом /, как показано выше в примере. 
Вот как должно получиться. 

Кстати, я еще изменил название самого блока, на слово YouTube, ну это так… 
Хорошо, смотрим что получилось. 

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

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

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