20.10.2017      757      0
 

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


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

Как вставить картинку через виджет "Изображение"

Быстрый способ вывести в сайдбар простую (некликабельную) картинку , но он доступен лишь в последних версиях Вордпресс и пригоден в том случае, если ширина картинки, которую надо загрузить, соответствует ширине сайдбара. Например, у меня она - 300px, и если я загружу через виджет "Изображение" меньшую картинку, то она будет некрасиво прилипать в левому краю. Давайте посмотрим это на примере.

Идем в Консоль – Внешний вид – Виджеты:

Выбираем место для размещения картинки. Например, вверху главной страницы. Ищем в левой колонке виджет «Изображение» и перетаскиваем его мышью в нужное место:

Открываем добавленный виджет нажатием на стрелочку:

Жмем на кнопку "Добавить изображение":

Изображение можно загрузить как со своего сайта, так и со стороннего ресурса:

Во втором случае надо указать URL изображения и нажать на кнопку «Добавить» в правом нижнем углу:

Кто не знает, как загрузить изображение в библиотеку:

Идем в Медиафайлы - Добавить новый. Находим нужную картинку на компьютере через кнопку "Выберите файлы":

После загрузки выделяем (если она не выделилась автоматически):

Нажимаем на кнопку "Добавить", после чего возвращаемся в виджет и жмем на "Сохранить":

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

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

Снова идем в Виджеты, но на этот раз используем виджет "Текст":

В виджете Текст переходим во вкладку "Текст" и вставляем туда полный путь к картинке, заключенный в теги <center></center>, вот так:

Можете скопировать заготовку, чтобы не перепечатывать код вручную:

<center><img src="полный путь к картинке, размещенной на сайте"></center>

Чтобы узнать путь к картинке, надо зайти в Медиафайлы - Библиотека, выбрать нужную картинку и целиком скопировать ссылку из поля "Ссылка на файл".

Сохраняем изменения в виджете, проверяем страницу, на которой должно появиться новое изображение, и убеждаемся, что оно встало четко посередине:

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

Все, как в предыдущем пункте, только код будет следующего вида:

Красным отмечен адрес ресурса, на который будет перенаправляться посетитель, зеленым – путь к выбранной иллюстрации; rel='nofollow' закрывает ссылку от поисковиков (ну, якобы:)), target='_blank' открывает ее в новой вкладке:

Заготовку можете скопировать отсюда:

<center><a href="адрес ресурса, который должен открываться при нажатии на картинку" rel="nofollow" target="_blank" ><img src="полный путь к картинке на вашем сайте" /></a></center>

Сохраняем и смотрим, что получилось. Если все было сделано правильно, при клике запустится искомый сайт.

Как видите, ничего сложного – вставить картинку в сайдбар и сделать ее ссылкой сможет любой новичок.😉


Ваш комментарий

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

Для отправки комментария поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности