Уверен, что проблема с которой вы пришли в эту статью является весьма и весьма распространенной. Когда вы только начинаете работать с WordPress, кажется что это довольно простая CMS и знаний программирования не потребуется для работы с ней от слова «совсем». На практике это далеко не так, если вы собираетесь создавать что-то сложнее лендинга на Elementor, и то что вы сейчас читаете эту статью — лишнее тому подтверждение.
Базовые знания HTML — это минимально необходимый багаж знаний для нормальной работы с CMS WordPress и их крупицу вы найдете в этой статье. Если вам понравится материал, после прочтения вы можете продолжить изучения основ HTML в соответствующем разделе сайта — вот тут. Итак, поехали.
Применение
В самом начале я предлагаю ответить на простой вопрос — «для чего нам может понадобиться вывести изображение со ссылкой на WordPress еще и с помощью HTML?». Вопрос логичный, ответ будет таким же — для вывода рекламы в сайдбаре, шапке и других местах сайта, для вывода картинки со ссылкой в футере сайта, ведущий на другой ваш проект и так далее и тому подобное.
Не всегда удобно пользоваться стандартным функционалом WordPress вроде редактора блоков, а иногда и вовсе невозможно, так как некоторые элементы сайта просто с помощью него не редактируются. Хорошие пример — этот блог: здесь вы можете найти картинки (рекламные банеры), вставленные по инструкции изложенный ниже.
Нам нужно изображение
Переходим к созданию HTML кода. Нам нужно изображение, а точнее ссылка на него. Варианта у нас два:
- Добавить медиафайл в библиотеку на WordPress и использовать изображение, хранящееся на собственном сайте. Для этого мы переходим в административную панель > медиафайлы > перетаскиваем изображение, либо нажимаем загрузить > открываем загруженный медиафайл > внизу справа находим URL и копируем его;
- Можно взять ссылку на изображение из сети (с любого другого сайта).
У обоих вариантов есть свои плюсы и минусы, давайте коротко обсудим их. Для первого варианта:
- Плюсы: изображение никуда не пропадет, скорость его открытия зависит от вашего сайта.
- Минусы: лишняя нагрузка при открытии картинки, используются ваши ресурсы для хранения изображения.
У второго варианта:
- Плюсы: изображении хранится не на вашем сайте и не засоряет память, ваш сайт использует чужой ресурс для открытия изображения.
- Минусы: вы рискуете оказаться в ситуации когда изображение будет удалено, а взамен него будет отображаться пустое пространство.
Я думаю что теперь вы сами в состоянии выбрать подходящий вам вариант и мы можем перейти к следующему пункту.
Небольшое примечание: Я беру для примера ссылку на изображение с моего сайта: https://yrokiwp.ru/wp-content/uploads/2022/04/2160×840.png. При желании, вы можете проверить ее, скопировав и введя в поисковую строку вашего веб-браузера.
Выбираем путь
Теперь у нас есть ссылка на изображение. Но код мы можем написать пока выглядит так:
src="https://yrokiwp.ru/wp-content/uploads/2022/04/2160x840.png"
Эта строка означает откуда берется изображение и для нас это уже решенный вопрос. Теперь нам предстоит выбрать ссылку по которой будет переходить пользователь, нажавший на картинку. С этим вы справитесь лучше меня, а моя задача состроит в том, что бы показать как будет выглядеть HTML код и куда тут вставляется адресная ссылка:
<a href="https://a.yrokiwp.ru"> <img src="https://yrokiwp.ru/wp-content/uploads/2022/04/2160x840.png"/></a>
Теперь у нас есть открывающий и закрывающий тег, страница перехода (ссылка) и источник изображения. В принципе этого достаточно для нормальной работы, одного есть пара тонкостей, их мы разберем ниже.
Настраиваем внешний вид
Я не буду задавать много настроек — только радиус границы изображения, но вы можете вписать внутри все что пожелаете: границу, тень, тень при наведении и так далее.
<a href="https://a.yrokiwp.ru" ><img style="border-radius: 24px;" src="https://yrokiwp.ru/wp-content/uploads/2022/04/2160x840.png"/></a>
Настраиваем путь
В очередной раз можно сказать что этого всего достаточно, но можно улучшить все что мы сделали. Внимательный пользователь мог заметить, что по последнему коду HTML веб-браузер откроет ссылку в той же вкладке, что и текущий сеанс.
Это плохо по двум причинам: во-первых, пользователь уходит с вашего сайта и назад может не вернуться (плохо для вас), а во-вторых, все тоже самое но для пользователя — он не сможет вернуться на ваш сайт в случае необходимости (да, есть история браузера и другие инструменты, но разве это также удобно как оставить открытой вкладку с вашим сайтом?).
Мы подошли к самому главному — открытию сайта в новой вкладке.
Как открыть ссылку в новой вкладке?
Нам требуется добавить вот такой фрагмент кода:
target="blank"
Итого мы получаем:
<a href="https://a.yrokiwp.ru" target="blank"><img style="border-radius: 24px;" src="https://yrokiwp.ru/wp-content/uploads/2022/04/2160x840.png"/></a>
Я думаю, на этом вопрос можно считать закрытым. Удачи!
