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

Давайте рассмотрим процесс добавления изображения не просто случайной картинки, а выведем блок-приветствие с изображением и небольшим текстовым описанием, которое очень часто встречается на авторских блогах и проектах. Читателям будет приятно видеть, что вы живой человек, а не бот. :-)

Процесс добавления состоит из нескольких шагов:

1. Загрузить или выбрать изображение со своего или чужого сайта
2. Получить ссылку на него
3. Сформировать ссылку в виде HTML-кода
4. Вставить HTML-код в сайдбар WordPress

Получаем ссылку на изображение

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

1. Загрузка файла с вашего компьютера
2. Использование ранее загруженного изображения
3. Получение ссылки со стороннего сайта (но этот вариант спорный, скажу я вам).

Загрузка файла с компьютера

Заходим в меню «Медиафайлы» — «Добавить новый». Перетягиваем нужное вам изображение в рабочую область WordPress, либо же используем кнопку «Выберите файлы», которая открывает диалоговое окно для загрузки файла.

Результат будет выглядеть следующим образом:

При клике на ссылку «Изменить» откроется просмотр изображения. Нам из этого окна необходимо скопировать ссылку на изображение, по которому оно будет доступно в интернете. Берём значение из поля «Ссылка на файл»:

Копируем ссылку куда-нибудь, т.к. использовать будем позже. Это окно можно закрыть, нам из него необходима только ссылка, сама страница больше не пригодится. :-)

Внимание! Я рекомендую сразу подготовить изображение в любом вашем графическом редакторе под размер сайдбара. Чаще всего ширина сайдбара не превышает 300 пикселей по ширине, поэтому масштабируйте ваше изображение по ширине в 300 пикселей. Иначе оно будет очень большим и может добавить дополнительное время на загрузку сайта. Сделать это можно средствами WordPress. Например, по инструкции Редактирование изображения в WordPress.

Использование ранее загруженного изображения

Если вы ранее уже загрузили нужное вам изображение и хотите использовать его, тогда заходим в меню «Медиафайлы» и находим нужное изображение. Я возьму точно такую же фотографию (т.к. загрузил её предварительно) и попробуем получить ссылку на неё для использования в сайдбаре.

Находим её в «Медиафайлах» и кликаем либо по фотографии, либо по названию, либо по ссылке «Изменить».

В результате откроется точно такое же окно, как и в предыдущем пункте, в котором нам потребуется скопировать значение из поля «Ссылка на файл». Как видите — всё очень просто! :-)

Используем изображение с чужого сайта

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

Это же касается фотобанков и фотостоков. Не все изображения с этих сайтов можно использовать в своих личных целях, каждое из них распространяется по той или иной лицензии. Предлагаю вам самостоятельно ознакомиться с существующими лицензиями на изображения, а пока берём ситуацию, в которой у вас есть доступ и право на использование изображении.

Я возьму изображение со своего проекта WordPress для чайников просто для демонстрации. Например, зайдём в статью Как вставить видео из YouTube в WordPress и выберем любое изображение. Щёлкаем по ней правой кнопкой мыши и ищем пункт «Скопировать адрес изображения» (в зависимости от браузера называться этот пункт будет по разному, я использую браузер Vivaldi и здесь пункт называется «Copy Image Address»):

Ссылка скопирована!

Отлично! Теперь в буфере обмена вашего браузера появилась ссылка на это изображение. Можем продолжить и сформировать нужный нам HTML-код для вставки выбранного или загруженного изображения в сайдбар.

Создаём HTML-код

Создаём новую запись (которую потом удалим за ненадобностью) для удобной работы с HTML. Переходим в текстовый режим редактора WordPress и вставляем следующий код (замените значение атрибута «src», вставьте в него скопированную ранее ссылку на изображение):

<img src="ссылка на ваше изображение" alt="Описание изображения" width="100%" height="100%" />

Теперь возвращаемся в визуальный редактор и видим нашу картинку:

Теперь один раз нажимаем на наше изображение в визуальном редакторе и добавляем к нему ссылку:

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

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

Добавляем текст в нашу заготовку

Для демонстрации я напишу длинный текст, у вас же может быть совсем другой подход в написании. Кроме обычного текста вы можете использовать любые доступные стили оформления: выделения полужирным, добавление ссылок, подчёркивание текста. Пусть ваша душа разгуляется! :-)

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

Добавляем текст в виджет

Теперь нам надо всю нашу заготовку преобразовать в HTML-код. Для этого просто переключаемся в режим «Текст» вашего редактора WordPress и копируем весь получившийся код:

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

Теперь заходим в меню «Внешний вид» — «Виджеты» и находим виджет «Текст»:

Перетягиваем его в нужный вам сайдбар, а затем просто вставляем сформированный код из вашей записи в содержимое этого виджета. Нажимаем на кнопку «Сохранить»:

Перейдём на главную страницу и посмотрим, что у нас получилось:

Полная фигня, скажу я вам. Тут всё просто — наш текст оформлен именно как текст, а не параграф. Поэтому потребуется сделать ряд дополнительных манипуляций, а именно добавить к нему теги HMTL, обрамляющие параграф. Называется он <p>.

Давайте откроем снова нашу запись и первый и второй параграфы обрамим следующим образом:

Я просто добавил с двух сторон предложений тег <p> и его закрывающий </p>. Обращаю внимание на то, что если вы не закроете тег или забудете поставить «слеш» (косую черту вправо), то может поехать вёрстка вашего виджета, будьте внимательны.

Теперь снова скопируем наш HTML-код и вновь вставим его в ранее созданный виджет. Посмотрим на результат (я дополнительно добавил выравнивание элементов по центру, чтобы не тратить ваше время на разбор такого простого действия):

Заключение

Я думаю вы уже поняли, что знания HTML вам нужны будут в любом случае, хотя бы минимальные, чтобы создавать подобные виджеты. Если вам нет нужды добавлять текст, тогда просто добавляете ссылку на медиафайл и выравниваете по центру, этот вариант вас устроит в 99% случаев.

Если же вы хотите более-менее красиво оформить ваш виджет, то лучше начать с азов HTML. В интернете множество курсов, которые дадут вам хороший старт в этом направлении. Может вы со временем поймёте, что вам нравится верстать и уже будем вместе с вами делать сайты клиентам? ;-)

Успехов вам! Надеюсь, статья была вам полезной!