Сторінки WordPress відкриваються без стилів: як повернути дизайн

Якщо сайт на WordPress раптово відкривається як набір звичайного тексту без кольорів, колонок, відступів і зображень, найчастіше браузер не може завантажити CSS-файли теми. Іноді разом зі стилями не завантажуються шрифти, JavaScript або зображення. Причина може бути як у неправильних URL, так і в помилках прав доступу, HTTPS, кеші CDN чи пошкоджених файлах теми.

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

Чому не завантажуються CSS і шрифти

Перший крок — визначити, що саме не працює: лише стилі, усі статичні файли чи сам сервер. Відкрийте сторінку в режимі інкогніто або в іншому браузері. Якщо проблема повторюється, натисніть клавішу F12 і перейдіть до вкладки Network. Перезавантажте сторінку та перегляньте запити до файлів із розширеннями .css, .js, .woff, .woff2 і .ttf.

• Код відповіді 404 означає, що файл не знайдений або вказаний неправильний шлях.
• Код 403 часто вказує на заборону доступу, неправильні права або правило безпеки.
• Коди 500 і 503 можуть бути пов’язані з помилкою PHP, перевантаженням сервера чи конфліктом плагінів.
• Повідомлення про блокування mixed content виникає, коли сторінка відкривається через HTTPS, а стилі запитуються через HTTP.
• Помилки CORS або неправильний MIME-тип можуть перешкоджати завантаженню шрифтів і ресурсів із CDN.

Поширена причина — некоректно сформований параметр адреси сайту після перенесення, зміни домену або підключення SSL-сертифіката. Також CSS може не завантажуватися після оновлення теми, якщо її файли були видалені, перейменовані або несумісні з поточною версією WordPress.

Перевірка URL прав доступу та HTTPS

У панелі WordPress відкрийте розділ налаштувань і перевірте поля адреси WordPress та адреси сайту. Вони мають містити правильний домен і однаковий протокол — зазвичай https://. Зайвий слеш, старий домен або різниця між HTTP та HTTPS можуть спричинити неправильні посилання на таблиці стилів.

Якщо до адміністративної панелі доступу немає, адресу можна перевірити через базу даних, конфігурацію сайту або тимчасове правило на рівні сервера. Такі зміни потребують обережності: неправильне редагування wp-config.php чи таблиці параметрів може повністю заблокувати сайт. Перед роботою обов’язково збережіть копію файлу або бази.

Далі перевірте безпосередню URL-адресу CSS-файлу в браузері. Якщо сервер повертає 404, потрібно зіставити шлях із реальною структурою каталогів теми на хостингу. Якщо повертається 403, перевірте права доступу. Для більшості файлів зазвичай використовують права на читання для вебсерверу, але конкретні значення залежать від конфігурації хостингу. Не встановлюйте права 777 без чіткої потреби: це створює додатковий ризик для безпеки.

Також перевірте правила у файлах .htaccess, конфігурації Nginx і налаштуваннях WAF або плагіна безпеки. Заборона доступу до каталогів wp-content чи uploads може зламати не лише дизайн, а й зображення, скрипти та роботу редактора.

Вплив кешу CDN і оптимізаторів

Після виправлення файлів старі помилки можуть залишатися через кілька рівнів кешування. Це кеш браузера, кеш WordPress-плагіна, серверний кеш і кеш CDN. У результаті браузер продовжує отримувати стару HTML-сторінку або таблицю стилів, якої вже немає на сервері.

Для перевірки тимчасово відкрийте сайт у приватному режимі, очистіть кеш браузера та додайте до URL параметр на кшталт ?test=1. Якщо після цього дизайн з’явився, проблема, імовірно, пов’язана з кешуванням або об’єднанням ресурсів.

У налаштуваннях оптимізатора тимчасово вимкніть мінімізацію, об’єднання та відкладене завантаження CSS. Окремі плагіни можуть неправильно обробляти стилі теми, особливо після оновлення WordPress або конструктора сторінок. Потім очистіть кеш плагіна, сервера та CDN і перевірте сайт у кількох браузерах.

Якщо використовується Cloudflare або інша CDN, перевірте режим SSL, правила кешування та налаштування очищення кешу. Не слід постійно вимикати CDN як остаточне рішення: спочатку потрібно встановити, який саме ресурс кешується неправильно. Після змін повторно перевірте заголовки відповіді та фактичну адресу CSS-файлу.

Як відновити файли теми

Коли CSS-файл відсутній або пошкоджений, порівняйте вміст каталогу активної теми з резервною копією чи оригінальним дистрибутивом. Основні файли зазвичай розташовані в wp-content/themes/назва-теми/, а стилі можуть бути винесені в окремі підкаталоги. У дочірній темі частина оформлення може залежати від батьківської, тому відсутність або неправильна назва батьківської теми також викликає проблеми.

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

Якщо проблема з’явилася після оновлення, перевірте журнал помилок сервера та активність оновлень. Сумісність PHP, WordPress, теми й плагінів може порушитися, а фатальна помилка — перервати формування сторінки або підключення ресурсів. У такій ситуації корисно тимчасово перейти на стандартну тему, але перед цим зафіксувати поточну конфігурацію та зробити резервну копію.

Коли самостійна заміна файлів не допомагає, потрібне комплексне відновлення дизайну WordPress із перевіркою теми, плагінів, бази даних, серверних правил і журналів помилок. Особливо важливо залучити спеціаліста, якщо після збою з’явилися невідомі файли, перенаправлення, попередження антивіруса або підозріла активність у панелі адміністратора.

Що протестувати після ремонту

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

• Переконайтеся, що CSS, JavaScript, шрифти та зображення завантажуються без помилок.
• Перевірте сайт через HTTPS і переконайтеся, що немає mixed content.
• Очистіть усі рівні кешу та протестуйте сторінки в кількох браузерах.
• Перевірте адаптивність на вузькому екрані та коректність відображення меню.
• Перегляньте журнал сервера після кількох відкриттів сторінок.
• Зробіть нову резервну копію вже після підтвердження стабільної роботи.

Якщо дизайн знову зникає через певний час, причина може бути не у CSS, а в автоматичному оновленні, конфлікті плагінів, зараженні сайту або помилці на рівні хостингу. У такому разі варто неодноразово замінювати файли, а провести повну діагностику з фіксацією змін і перевіркою безпеки.