Приветствую, читатель, на страницах своего блога!
Многие из нас привыкли к старым виджетам в консоли Вордпресс, но мир не стоит на месте, крутится-вертится, все вокруг меняется и обновляется. Вот и Вордпресс (wordpress) обновляется и радует или огорчает (в зависимости от восприятия и привычек) своими обновлениями. Сегодня мы разберем, как добавить баннер на сайт в новой версии Вордпресс (wordpress).
И в этот раз, начиная с версии 5.8 очень сильно изменилась настройка виджетов, она стала блочной и не такой удобной (с непривычки), как в старой версии Вордпресс. Но ко всему можно приспособиться, если потренироваться.
Буду показывать на своем тестовом домене, как его создать — здесь инструкция. Итак, поехали…
Инструкция
Заходим в консоль Вордпресс своего блога
В консоли, в левой колонке находим вкладку “внешний вид”, наводим на нее курсор мыши и заходим в раздел “виджеты”
Перед нами открывается список мест, куда мы можем добавлять виджеты. В зависимости от темы, этот список может отличаться, скорее всего не существенно.
Жму на самую первую вкладку, чтобы раскрыть ее, в моей теме она называется “Область виджетов” и отвечает она за правый (основной сайдбар) блога
Здесь видим набор виджетов, который уже встроен по умолчанию в моей теме:
- поиск
- свежие записи
- свежие комментарии
- архивы
- рубрики
- мета
В консоли это выглядит вот так
На самом блоге так
Вставляем баннер в сайдбар с помощью кода
Код выглядит вот так:
Скачайте этот код себе на компьютер. Там мы и будем его редактировать. СКАЧАТЬ КОД>>>
Для работы с кодом нам нужно сперва подготовить две ссылки:
- Ссылку для картинки
- Ссылку на партнерку
Чтобы взять ссылку для картинки нужно ее сперва загрузить в библиотеку медиафайлов консоли Вордпресс. Для этого в левой колонке консоли находим раздел “Медиафайлы”, наводим курсор мыши и выбираем “Библиотека”
Перед нами открывается окно “Библиотека файлов”, нажимаем кнопки “Добавить новый” и “Выбрать файл”
Выбираем заранее подготовленный файл (картинку), который будет служит баннером в сайдбаре. У меня уже есть заготовленный баннер для партнерки Дмитрия Гида. Выбираю его на своем компьютере двойным кликом и он загружается в библиотеку медиафайлов и теперь кликаю по нему
Открывается окно с возможностью редактирования картинки, но изменять мне здесь ничего не нужно, я копирую ссылку для этой картинки
и вставляю ее в заранее скопированный код, где написано — 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 закончена. А у вас получилось добавить баннер в сайдбар своего блога? Или может возникли трудности? Пишите в комментарии к статье.
С уважением, Александр Егоров
Это очень увлекательное занятие!
Да, Юля, не спорю )) Занятие занимательное )