Як відобразити загальносайтове повідомлення на сайті WordPress

Загальносайтове sitewide notice у WordPress — це постійний банер або панель сповіщень, що відображається на кожній сторінці сайту. Він використовується для трансляції термінових оголошень, акцій, сповіщень про згоду на використання файлів cookie або перебоїв у роботі сервісу для всіх відвідувачів одночасно. На відміну від контенту, специфічного для окремих сторінок, sitewide notice впроваджується на рівні шаблону теми — через хук плагіна, functions.php теми, рушій умов відображення конструктора сторінок або пряму модифікацію PHP-шаблону — що гарантує його відображення незалежно від того, на яку URL-адресу потрапляє відвідувач.

Цей посібник охоплює чотири методи виробничого рівня, ранжовані від найнижчої до найвищої складності реалізації, з технічними граничними випадками, міркуваннями щодо продуктивності та підводними каменями кешування, які більшість посібників повністю оминають.

Чому Sitewide Notices важливі поза маркетингом

Перш ніж обирати метод реалізації, зрозумійте, що насправді відбувається під капотом. Sitewide notice відображається при кожній відповіді сервера або впроваджується через JavaScript після завантаження DOM. Це розрізнення має реальні наслідки:

• Серверне рендерингу (SSR) через PHP-хуки шаблонів доступне для сканування Googlebot і відображається до виконання JavaScript — що критично важливо для доступності та SEO.
• Сповіщення, впроваджені через JavaScript (поширені в деяких плагінах), можуть не з’являтися під час початкового проходу рендерингу Google і можуть спричиняти Cumulative Layout Shift (CLS), безпосередньо погіршуючи показник Core Web Vitals.
• Повне кешування сторінок (WP Rocket, LiteSpeed Cache, Nginx FastCGI cache) кешуватиме HTML сповіщення. Якщо вам потрібно показувати сповіщення лише авторизованим користувачам або на основі геолокації, кешована статична сторінка повністю ігноруватиме цю логіку, якщо ви не налаштуєте виключення кешу або не використаєте фрагментне кешування.

Середовище хостингу тут має значення. У середовищі VPS Hosting, де ви контролюєте конфігурацію Nginx або Apache, ви можете реалізувати правила обходу кешу для конкретних файлів cookie, встановлених вашим плагіном сповіщень. На спільному хостингу ви обмежені тим рівнем кешу, який надає хост.

Метод 1: Використання спеціалізованого плагіна WordPress

Це найшвидший шлях до готового до виробництва сповіщення і не потребує жодного кодування. Компроміс — накладні витрати плагіна та залежність від стороннього циклу оновлень.

Рекомендовані плагіни

Крок 1: Встановлення та активація

Увійдіть до панелі адміністратора WordPress і перейдіть до Плагіни > Додати новий. Знайдіть WPFront Notification Bar, натисніть Встановити зараз, потім Активувати.

Крок 2: Налаштування панелі сповіщень

Перейдіть до Налаштування > WPFront Notification Bar. Ключові поля конфігурації для налаштування:

• Вміст повідомлення: Підтримує HTML, тому ви можете вбудовувати теги anchor, теги <strong> або вбудовані стилі безпосередньо.
• Позиція: Зверху або знизу. Розміщення зверху більш помітне, але збільшує ризик CLS, якщо панель завантажується після початкового відображення. Розміщення знизу безпечніше для Core Web Vitals.
• Фіксована поведінка: Увімкнення «фіксованого» позиціонування утримує панель на екрані під час прокрутки. Це використовує position: fixed у CSS, що видаляє елемент із потоку документа і може перекривати заголовок вашої теми на мобільних пристроях — перевіряйте на кількох розмірах вікна перегляду.
• Умови відображення: Обмежте сповіщення певними типами записів, сторінками або ролями користувачів. Наприклад, показ сповіщення лише незареєстрованим користувачам вимагає від плагіна встановлення умовної перевірки щодо is_user_logged_in().
• Відхилення через cookie: Коли користувач закриває сповіщення, встановлюється cookie браузера. Сповіщення не з’явиться знову, поки цей cookie не закінчиться. Встановіть відповідний TTL — для 48-годинного розпродажу підійде cookie на 2 дні. Для постійного сповіщення GDPR встановіть значення 0 (ніколи не відхиляти автоматично).

Крок 3: Збереження та перевірка

Натисніть Зберегти налаштування. Відкрийте свій сайт у вікні анонімного перегляду (щоб уникнути впливу будь-яких адміністративних cookie на логіку відображення) і переконайтеся, що панель відображається на головній сторінці, у публікації блогу та на статичній сторінці.

Критичний граничний випадок: Якщо ви використовуєте плагін повного кешування сторінок, очистіть кеш після збереження. Інакше відвідувачі побачать стару кешовану версію сторінки без сповіщення.

Метод 2: Використання налаштувальника теми WordPress

Багато сучасних тем — особливо побудованих на фреймворках Genesis, Astra, GeneratePress або OceanWP — включають нативний компонент Announcement Bar або Top Bar. Цей підхід не додає жодних накладних витрат плагіна і є найчистішим варіантом, якщо ваша тема його підтримує.

Крок 1: Доступ до налаштувальника теми

Перейдіть до Зовнішній вигляд > Налаштувати. Шукайте розділи з назвами Header Options, Top Bar, Announcement Bar або Utility Bar. Точна назва залежить від теми.

Крок 2: Налаштування панелі оголошень

У панелі налаштувальника ви зазвичай знайдете:

• Текстове або HTML поле введення для вмісту сповіщення
• Палітри кольорів для фону та тексту
• Перемикач для глобального увімкнення/вимкнення панелі
• Необов’язкове поле посилання для кнопки CTA

Налаштувальник відображає зміни у живому попередньому перегляді через iframe. Використовуйте це для перевірки взаємодії панелі з навігаційним меню на десктопних і мобільних точках зупину перед публікацією.

Крок 3: Публікація

Натисніть Опублікувати. Зміни записуються до параметра бази даних theme_mods для вашої активної теми. Файли не змінюються, що означає збереження налаштувань після оновлень теми (для дочірніх тем або тем, які зберігають модифікації в базі даних, а не в style.css).

Важливо: Якщо ви оновлюєте батьківську тему без використання дочірньої теми, і тема зберігає логіку панелі оголошень у файлі шаблону, а не в хуку фільтра, конфігурацію вашого сповіщення може бути перезаписано. Завжди використовуйте дочірню тему при зміні поведінки теми.

Метод 3: Додавання загальносайтового сповіщення за допомогою власного коду

Пряма реалізація на PHP та CSS дає вам повний контроль над логікою рендерингу, стилізацією та продуктивністю. Це правильний підхід, коли вам потрібна логіка умовного відображення, яку жоден плагін не надає, або коли ви хочете мінімізувати HTTP-запити та виконання JavaScript.

Крок 1: Додавання HTML через хук теми

Замість прямого редагування header.php — що порушується при оновленнях теми — використовуйте хук дії wp_body_open або хук wp_head у functions.php вашої дочірньої теми. Це ідіоматичний підхід WordPress.

Додайте наступне до functions.php вашої дочірньої теми:

function alexhost_sitewide_notice() {
    // Only display for non-logged-in users
    if ( is_user_logged_in() ) {
        return;
    }
    ?>
    <div class="sitewide-notice" role="alert" aria-live="polite">
        <p>Scheduled maintenance on Saturday 02:00–04:00 UTC.
           <a href="/maintenance-info/">Learn more</a>
        </p>
        <button class="sitewide-notice__close" aria-label="Dismiss notice">×</button>
    </div>
    <?php
}
add_action( 'wp_body_open', 'alexhost_sitewide_notice' );

Чому wp_body_open замість wp_head? Хук wp_head спрацьовує всередині <head>, що є неправильним місцем для видимого HTML. wp_body_open спрацьовує одразу після відкриваючого тегу <body>, що є семантично правильним і підтримується всіма темами, які викликають wp_body_open() у своїх шаблонах. Якщо ваша тема не викликає цю функцію, поверніться до хука в get_header з буфером виводу або відредагуйте header.php у дочірній темі.

Якщо вам потрібно безпосередньо редагувати файл шаблону, відкрийте header.php вашої дочірньої теми та вставте розмітку сповіщення одразу після тегу <body>:

<div class="sitewide-notice" role="alert" aria-live="polite">
    <p>This is an important announcement!
       <a href="https://example.com">Learn more here.</a>
    </p>
</div>

Крок 2: Додавання CSS через налаштувальник або functions.php

Для невеликих фрагментів CSS використовуйте Зовнішній вигляд > Налаштувати > Додатковий CSS. Для більш складних речей підключіть таблицю стилів із вашої дочірньої теми.

Вставте наступне до Додаткового CSS:

.sitewide-notice {
    background-color: #1a73e8;
    color: #ffffff;
    text-align: center;
    padding: 12px 40px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
    box-sizing: border-box;
    font-size: 0.95rem;
    line-height: 1.5;
}

.sitewide-notice a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
}

.sitewide-notice a:hover {
    opacity: 0.85;
}

.sitewide-notice__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

@media (max-width: 768px) {
    .sitewide-notice {
        font-size: 0.85rem;
        padding: 10px 36px;
    }
}

position: sticky проти position: fixed: Використання sticky зберігає сповіщення в потоці документа, запобігаючи перекриттю навігації. fixed видаляє його з потоку, що може призвести до відображення контенту під панеллю, якщо ви не додасте відповідний padding-top до елемента <body> або <main>. Для більшості тем sticky є безпечнішим варіантом за замовчуванням.

Крок 3: Додавання JavaScript для відхилення на основі cookie

Без механізму відхилення сповіщення з’являтиметься при кожному завантаженні сторінки, що погіршує користувацький досвід. Додайте цей скрипт через Зовнішній вигляд > Налаштувати > Додатковий CSS (не ідеально) або, краще, підключіть його належним чином у functions.php:

function alexhost_notice_dismiss_script() {
    wp_enqueue_script(
        'notice-dismiss',
        get_stylesheet_directory_uri() . '/js/notice-dismiss.js',
        array(),
        '1.0.0',
        true // Load in footer
    );
}
add_action( 'wp_enqueue_scripts', 'alexhost_notice_dismiss_script' );

Створіть /wp-content/themes/your-child-theme/js/notice-dismiss.js з:

(function () {
    var COOKIE_NAME = 'sitewide_notice_dismissed';
    var COOKIE_TTL_DAYS = 7;

    function getCookie(name) {
        var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
        return match ? match[2] : null;
    }

    function setCookie(name, value, days) {
        var expires = new Date(Date.now() + days * 864e5).toUTCString();
        document.cookie = name + '=' + value + '; expires=' + expires + '; path=/; SameSite=Lax';
    }

    var notice = document.querySelector('.sitewide-notice');
    if (!notice) return;

    if (getCookie(COOKIE_NAME) === '1') {
        notice.style.display = 'none';
        return;
    }

    var closeBtn = notice.querySelector('.sitewide-notice__close');
    if (closeBtn) {
        closeBtn.addEventListener('click', function () {
            notice.style.display = 'none';
            setCookie(COOKIE_NAME, '1', COOKIE_TTL_DAYS);
        });
    }
}());

Цей скрипт є самодостатнім, не має залежності від jQuery і запускається після завантаження DOM, оскільки підключається у футері.

Крок 4: Перевірка в різних контекстах

• Відкрийте сайт у вікні анонімного перегляду, щоб підтвердити видимість сповіщення.
• Натисніть кнопку відхилення та перезавантажте — сповіщення має бути приховане.
• Вручну очистіть cookie через DevTools браузера (Application > Cookies) і перезавантажте — сповіщення має з’явитися знову.
• Перевірте на мобільному вікні перегляду (мінімум 320px ширини), щоб підтвердити коректну роботу адаптивного CSS.

Метод 4: Використання конструктора сторінок (Elementor, Bricks, Oxygen)

Конструктори сторінок із модулем Theme Builder дозволяють візуально розробити сповіщення та призначити його всім сторінкам через умови відображення. Це найкращий варіант для команд, які керують контентом візуально і потребують піксельно точного дизайну без написання коду.

Elementor Pro: підхід через Theme Builder

Крок 1: Перейдіть до Templates > Theme Builder > Header (або створіть новий шаблон Custom Header).

Крок 2: Додайте новий Section у самому верху шаблону заголовка. Всередині розмістіть віджет Text Editor або Heading із вмістом вашого оголошення. Стилізуйте його за допомогою панелі Elementor — доступні колір фону, типографіка, відступи та віджети кнопок.

Крок 3: У розділі Publish > Display Conditions встановіть умову Entire Site. Це гарантує відображення секції на кожній сторінці, що використовує цей шаблон заголовка.

Крок 4: Опублікуйте шаблон. Elementor записує вивід шаблону до власних таблиць бази даних і відображає його через свій рушій шаблонів при кожному завантаженні сторінки.

Примітка щодо продуктивності: Theme Builder Elementor Pro завантажує додаткові CSS та JavaScript ресурси. На сайті, чутливому до продуктивності, виміряйте вплив за допомогою Lighthouse до і після. Якщо накладні витрати неприйнятні, метод власного коду (Метод 3) є ефективнішим.

Підхід через Bricks Builder

У Bricks > Templates створіть новий шаблон Header. Додайте контейнер у верхній частині заголовка, розробіть своє сповіщення та встановіть Conditions шаблону для застосування до всіх сторінок. Bricks генерує чистий, мінімальний HTML порівняно з Elementor, що робить його кращим вибором для збірок, орієнтованих на продуктивність.

Порівняння всіх чотирьох методів

Міркування щодо продуктивності та кешування

Цей розділ розглядає найпоширеніший режим збою у виробництві: сповіщення, яке ідеально працює під час розробки, але поводиться непослідовно на живому кешованому сайті.

Повне кешування сторінок зберігає повний HTML-вивід сторінки. Якщо ваше сповіщення відображається на стороні сервера, а потім сторінка кешується, кожен відвідувач — незалежно від того, чи відхилив він сповіщення — отримає однаковий кешований HTML. JavaScript відхилення на основі cookie все одно приховуватиме сповіщення на стороні клієнта, але HTML завжди буде присутній у вихідному коді.

Якщо вам потрібно, щоб сервер пропускав рендеринг сповіщення для користувачів, які його відхилили (наприклад, для зменшення HTML-навантаження або уникнення спалаху сповіщення при завантаженні), ви повинні налаштувати плагін кешу на обхід кешування за наявності cookie відхилення.

У WP Rocket додайте назву cookie до Налаштування > Розширені правила > Ніколи не кешувати cookies:

sitewide_notice_dismissed

У LiteSpeed Cache перейдіть до Cache > Excludes > Do Not Cache Cookies і додайте те саме значення.

На серверному Nginx FastCGI cache додайте умову обходу кешу до конфігурації Nginx:

map $http_cookie $skip_cache {
    default 0;
    "~*sitewide_notice_dismissed=1" 1;
}

fastcgi_cache_bypass $skip_cache;
fastcgi_no_cache $skip_cache;

Це гарантує, що користувачі, які відхилили сповіщення, отримають динамічно згенеровану сторінку без HTML сповіщення, тоді як усі інші відвідувачі обслуговуватимуться кешованою версією із сповіщенням.

Якщо ви запускаєте WordPress на VPS з cPanel або повністю керованому Виділеному сервері, ви маєте прямий доступ до файлів конфігурації Nginx або Apache для реалізації цих правил обходу кешу на рівні сервера — що неможливо на стандартних планах спільного хостингу.

Вимоги до доступності

Загальносайтове сповіщення, яке не відповідає стандартам доступності, може наразити ваш сайт на юридичний ризик відповідно до фреймворків WCAG 2.1 та ADA. Застосовуйте ці вимоги незалежно від обраного методу реалізації:

• Додайте role="alert" та aria-live="polite" до контейнера сповіщення. Це змушує програми читання з екрана оголошувати вміст сповіщення при його появі.
• Переконайтеся, що контрастність кольорів між текстом сповіщення та фоном відповідає мінімальному співвідношенню 4.5:1 для звичайного тексту (WCAG AA). Використовуйте інструмент на кшталт WebAIM Contrast Checker для перевірки.
• Кнопка відхилення повинна бути доступна з клавіатури та керуватися клавішами Enter і Space. Нативний елемент <button> обробляє це автоматично — не використовуйте <div> або <span> як ціль кліку.
• Не покладайтеся лише на колір для передачі терміновості сповіщення. Використовуйте явний текст (наприклад, «Важливо:» або «Увага:») як префікс.

SEO-наслідки загальносайтових сповіщень

Фіксоване або прикріплене сповіщення, відображене в HTML кожної сторінки, індексується Googlebot як частина вмісту сторінки. Майте на увазі такі моменти:

• Уникайте тексту сповіщення, перенасиченого ключовими словами. Google може інтерпретувати повторюваний ідентичний текст на тисячах сторінок як низькоякісний шаблонний контент.
• Використовуйте aria-hidden="true" для суто декоративних сповіщень (наприклад, банер cookie, що не має інформаційної цінності), щоб запобігти врахуванню тексту в розрахунках SEO на сторінці.
• Вплив CLS: Сповіщення, яке завантажується після початкового відображення та зміщує контент вниз, генерує показник CLS. Пом’якшіть це, зарезервувавши місце для сповіщення у вашому CSS за допомогою min-height на body, або відображаючи сповіщення на стороні сервера, щоб воно було присутнє в початковому HTML-навантаженні.
• Структуровані дані: Якщо ваше сповіщення анонсує подію або акцію, розгляньте можливість додавання розмітки схеми Event або Offer до сторінки, а не покладайтеся лише на текст банера для видимості в пошуку.

Практична матриця прийняття рішень

Використовуйте цей контрольний список для вибору правильного методу для вашої конкретної ситуації:

• Вам потрібно запустити сповіщення менш ніж за 10 хвилин без кодування: Використовуйте плагін (Метод 1). Встановіть WPFront Notification Bar, налаштуйте його, очистіть кеш.
• Ваша тема має вбудовану панель оголошень і вам не потрібна власна логіка: Використовуйте налаштувальник теми (Метод 2). Нульові накладні витрати, переживає оновлення плагінів.
• Вам потрібна логіка умовного відображення (роль користувача, тип запису, geo-IP, стан cookie) або максимальна продуктивність: Використовуйте власний PHP/CSS/JS (Метод 3). Підключіться до wp_body_open, підключайте скрипти належним чином, реалізуйте відхилення на основі cookie.
• Ваша команда нетехнічна і керує сайтом візуально: Використовуйте Elementor Pro Theme Builder або Bricks (Метод 4). Встановіть умови відображення на Entire Site.
• Ви перебуваєте в кешованому середовищі VPS або виділеного сервера: Незалежно від обраного методу, налаштуйте правила обходу кешу для вашого cookie відхилення. Невиконання цього є найпоширенішою причиною звернень до підтримки, пов’язаних із сповіщеннями.
• Вам потрібно, щоб сповіщення відповідало WCAG 2.1: Використовуйте Метод 3 (власний код) або Метод 1 з плагіном, що підтримує role="alert". Перевіряйте коефіцієнти контрастності вручну.

Для команд, які керують WordPress на інфраструктурі, яку вони контролюють — чи то план VPS Hosting, чи то Виділений сервер — підхід із власним кодом у поєднанні з правилами обходу кешу на рівні сервера дає найнадійніший і найпродуктивніший результат. Для менших сайтів на Спільному веб-хостингу добре налаштований плагін із підтримкою очищення кешу є прагматичним вибором.

Якщо ваш сайт обробляє транзакційні комунікації поряд із загальносайтовими сповіщеннями — наприклад, підтвердження замовлень або рекламні листи — переконайтеся, що ваша інфраструктура Email Hosting налаштована з належними записами SPF, DKIM та DMARC, щоб листи, ініційовані сповіщеннями, не потрапляли до спаму.

FAQ

П: Чи зашкодить загальносайтове сповіщення моєму SEO або показнику Core Web Vitals?

В: Може, якщо реалізовано недбало. Сповіщення, впроваджене через JavaScript після початкового відображення, спричиняє Cumulative Layout Shift (CLS), що є метрикою Core Web Vitals. Сповіщення, відображені на стороні сервера, повністю уникають CLS. Тримайте текст сповіщення коротким і неповторюваним, щоб Google не сприймав його як шаблонний контент на вашому сайті.

П: Як показати загальносайтове сповіщення лише незареєстрованим користувачам?

В: У власному PHP-коді оберніть вивід сповіщення умовною перевіркою: if ( ! is_user_logged_in() ) { ... }. У WPFront Notification Bar використовуйте умову відображення «User Role». В Elementor Pro встановіть умову відображення, що виключає авторизованих користувачів. Завжди очищайте кеш сторінок після зміни цієї логіки.

П: Моє сповіщення зникає після оновлення теми. Що є причиною?

В: Ймовірно, ви редагуєте header.php батьківської теми безпосередньо, замість використання дочірньої теми або хука functions.php. Перемістіть код сповіщення до functions.php дочірньої теми, використовуючи хук дії wp_body_open. Оновлення теми ніколи не перезаписуватимуть functions.php у дочірній темі.

П: Чи можна запланувати автоматичну появу та зникнення загальносайтового сповіщення?

В: Безкоштовні версії більшості плагінів сповіщень не підтримують планування. WPFront Notification Bar Pro та WP Notification Bars Pro обидва пропонують планування за діапазоном дат. У власному коді ви можете реалізувати планування за допомогою простого порівняння дат PHP: перевірте current_time('timestamp') відносно ваших початкових і кінцевих міток часу перед виведенням HTML сповіщення.

П: Чому моє загальносайтове сповіщення не відображається на кешованих сторінках?

В: Повне кешування сторінок зберігає HTML-знімок сторінки на момент першого запиту. Якщо кеш було побудовано до додавання вашого сповіщення, відвідувачі отримують старий кешований HTML. Очистіть весь кеш сторінок одразу після публікації нового сповіщення. Якщо використовується cookie відхилення, налаштуйте плагін кешу або сервер на обхід кешування для запитів, що містять cookie відхилення, щоб користувачі, що повертаються, не бачили спалаху сповіщення перед тим, як JavaScript його приховає.