Коротко: баннер в WordPress добавляют блоком, виджетом или кодом в шапку (для всех страниц). Разберём все три способа и типичные ошибки вёрстки.
Кому и зачемНужно для акций, партнёрских блоков, важных объявлений. Покажем, как сделать так, чтобы баннер работал (ссылка + alt) и не «ломал» макет на мобильных.
Три способа
- Откройте страницу в редакторе.
- Добавьте блок «Изображение» или «HTML».
- Вставьте баннер и ссылку.
CODE
<a href="/akciya/" class="banner"><img src="/banner.jpg" alt="Акция"></a>Вставьте этот код в блок «HTML» виджета (сайдбар/футер).
Для вывода на всех страницах — через плагин вставки кода в head/body или в header.php дочерней темы:
CODE
<?php if ( ! is_admin() ) : ?>
<a class="site-banner" href="/akciya/"><img src="..." alt="Акция"></a>
<?php endif; ?>Практика: три задачи
1. Баннер-ссылка с картинкой
CODE
<a class="banner" href="https://reg.ru/" rel="nofollow sponsored noopener" target="_blank">
<img src="banner-reg.png" alt="Домен и хостинг reg.ru">
</a>Для реферальных/внешних баннеров — rel="nofollow sponsored".
2. Адаптивный баннер
CSS
.banner img { display: block; width: 100%; height: auto; border-radius: 12px; }3. Закрываемый баннер
CSS
.banner__close { position: absolute; top: 8px; right: 8px; }ВажноУ картинки баннера всегда заполняйте
alt и делайте её ссылкой. Без ссылки баннер бесполезен, без alt — недоступен и хуже для SEO.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Баннер «вылезает» за экран | фиксированная ширина | max-width:100%; height:auto |
| Не кликается | нет ссылки/перекрыт слоем | обернуть в <a>, проверить слои |
| Появляется в админке | код без проверки | if (!is_admin()) |
| Съезжает вёрстка | нет обёртки по ширине колонки | ограничить контейнером |
Проверьте себя
Чек-лист
Как показать баннер на всех страницах сайта?
Вопросы и ответы
Блоком «HTML» на странице или кодом в header.php дочерней темы для всего сайта.
Для реферальных/рекламных — да, rel="nofollow sponsored", чтобы не передавать вес.
Через виджет в области футера или код в footer.php дочерней темы.
Не заданы ширина/высота. Добавьте width/height или aspect-ratio — макет перестанет «прыгать».
Итоги
- Одна страница — блок; область — виджет; весь сайт — код в шапке.
- Всегда ссылка +
alt. - Ограничьте ширину, чтобы не ломать вёрстку.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.