Как добавить баннер на сайт в новой версии Вордпресс (wordpress) 5.8

Приветствую, читатель, на страницах своего блога!

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

И в этот раз, начиная с версии 5.8 очень сильно изменилась настройка виджетов, она стала блочной и не такой удобной (с непривычки), как в старой версии Вордпресс. Но ко всему можно приспособиться, если потренироваться.

Буду показывать на своем тестовом домене, как его создать — здесь инструкция. Итак, поехали…

Инструкция

Заходим в консоль Вордпресс своего блога

В консоли, в левой колонке находим вкладку “внешний вид”, наводим на нее курсор мыши и заходим в раздел “виджеты”

Перед нами открывается список мест, куда мы можем добавлять виджеты. В зависимости от темы, этот список может отличаться, скорее всего не существенно. 

Жму на самую первую вкладку, чтобы раскрыть ее, в моей теме она называется “Область виджетов” и отвечает она за правый (основной сайдбар) блога

Здесь видим набор виджетов, который уже встроен по умолчанию в моей теме:

• поиск
• свежие записи
• свежие комментарии
• архивы 
• рубрики
• мета

В консоли это выглядит вот так 

На самом блоге так

Вставляем баннер в сайдбар с помощью кода

Код выглядит вот так:

Скачайте этот код себе на компьютер. Там мы и будем его редактировать. СКАЧАТЬ КОД>>>

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

1. Ссылку для картинки
2. Ссылку на партнерку

Чтобы взять ссылку для картинки нужно ее сперва загрузить в библиотеку медиафайлов консоли Вордпресс. Для этого в левой колонке консоли находим раздел “Медиафайлы”, наводим курсор мыши и выбираем “Библиотека”

Перед нами открывается окно “Библиотека файлов”, нажимаем кнопки “Добавить новый” и “Выбрать файл”

Выбираем заранее подготовленный файл (картинку), который будет служит баннером в сайдбаре. У меня уже есть заготовленный баннер для партнерки Дмитрия Гида. Выбираю его на своем компьютере двойным кликом и он загружается в библиотеку медиафайлов и теперь кликаю по нему

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

и вставляю ее в заранее скопированный код, где написано — URL картинки — между кавычек. 

Здесь нужно быть внимательнее, когда делаете выделение не зацепите ничего лишнего, в том числе и кавычки, а иначе код работать не будет.

Далее иду в партнерский кабинет к Дмитрию Гиду, чтобы взять партнерскую ссылку на бесплатный курс “Золотой путь к деньгам на партнерках”

В левом меню нахожу раздел “Товары”, кликаю на него и нахожу нужную мне ссылку, копирую ее

Вставляю скопированную ссылку в код баннера, вместо надписи “Рекламируемая ссылка”

Вот что у меня получилось

Сам код, который получился, цветом выделяю ссылки, на картинку и на партнерский продукт:

<center><a href=» https://dimagid.autoweboffice.ru/?utm_partner=94&utm_source=autoweboffice&utm_medium=partners&utm_campaign=partnerId.94&utm_content=goodsId.20&utm_term=mainlink » target=»_blank» rel=»nofollow»><img src=» http://blogt.aleksandr-egorov.ru/wp-content/uploads/2021/12/poluchit-besplatno.png «/></a></center>

Возвращаемся в консоль Вордпресс к нашим виджетам и сверху нажимаем на значок + (плюс), 

открывается дополнительная боковая панель с блоками, прокручиваем колесико мыши вниз и находим значок “Произвольный HTML”

Левой кнопкой мыши зажимаем этот блок и тянем его в область виджетов, размещаю его между блоками “Поиск” и “Свежие записи”

В поле, где написано “Пишите HTML” вставляем готовый код, который только что сделали и в правом верхнем углу жмем “Обновить”

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

Ну вот, чудо и произошло )) Баннер появился на блоге!

Теперь, чтобы проверить все ли работает корректно, навожу курсор на баннер, жму правую кнопку мышки и выбираю пункт “открыть ссылку в режиме инкогнито” (если браузер Гугл Хром), в Фаерфокс “открыть ссылку в новом приватном окне”. Как в остальных браузерах, не знаю, не разбирался, но предполагаю, что существенных различий нет.

В Гугл Хром

Браузер Фаерфокс

Открывается окно в режиме инкогнито и мы видим страницу, на которую ведет ссылка из нашего баннера. А значит все правильно установлено, с чем и поздравляю ))

Тема, как добавить баннер на сайт WordPress закончена. А у вас получилось добавить баннер в сайдбар своего блога? Или может возникли трудности? Пишите в комментарии к статье.

С уважением, Александр Егоров