Как исправить ошибку загрузки файла(ов) CSS стилей по HTTPS в WordPress
При смене хостинга и переводе одного WordPress проекта на HTTPS я столкнулся с тем, что у сайта полностью сломалось оформление темы. Как оказалось сайт открывался по безопасному протоколу HTTPS, но таблицы стилей упрямо пытались загрузиться по HTTP.
Переход на HTTPS важен для вашего сайта, даже если на нем нет персональных, секретных или иных важных данных. Сайты работающие на HTTP могут помечаться браузерами как небезопасные, что оттолкнет пользователей от посещения вашего ресурса.
Почему WordPress не отдает адреса CSS с указанием HTTPS протокола
Переход на HTTPS сделать не так сложно, но не всё работает «из коробки» каждый раз.
Если вы видите некорректный дизайн или оформление на своём сайте, то скорее всего, файлы CSS стилей загружается неправильно после миграции на HTTPS.
По сути, данные в виде таблиц стилей пытаются загрузиться незащищённым способом, а браузеры блокируют загрузку таких данных до тех пор, пока они не будут получены безопасным способом.
То есть вы пытаетесь зайти на сайт по HTTPS, но WordPress указывает адреса CSS как HTTP.
В результате вы увидите «скелетную» неотформатированную версию вашего сайта, без некоторых элементов оформления, функций и т.п.
Проблемы с сертификатом и версией WordPress
Сразу хочу откинуть проблемы перевода сайта на использования HTTPS. Будем считать, что сертификат установлен корректно, версия Wodpress свежее 3.5, в админке указан правильный адрес.
Так же вы почистили куки в браузере и провели работу сайта в разных обозревателях, на нескольких устройствах, через разных интернет провайдеров.
И если даже перезагрузка компьютера вам не помогла, то будем чинить WordPress.
Как заставить WordPress передавать адреса CSS файлов с указанием HTTPS протокола
Наверняка есть какой-то плагин, который всё сделает за нас, но это наш метод. Тем более для такой простой задачи.
Для того чтобы WordPress при обращении к сайту по HTTPS формировал ссылки на файлы таблиц стилей CSS с указанием протокола HTTPS добавьте следующую строку в файл wp-config.php
if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') $_SERVER['HTTPS']='on';
Суть настройки в том, что если пользователь пытается посетить сайт с использованием протокола HTTPS, то значение переменной $_SERVER['HTTPS'] принудительно устанавливается в состояние «ДА» (on, 1). После чего WordPress будет формировать адреса ссылок на CSS файлы с указанием протокола HTTPS.
Вставить ее нужно обязательно перед следующей строкой require_once(ABSPATH . 'wp-settings.php');
После внесения изменений адреса таблиц стилей должны быть указаны с использованием протокола HTTPS.
Браузер должен корректно загрузить оформление и сайт будет отображаться как вы это задумали.
Постскриптум
Почему так могло произойти?
Одна из причин — это использование посредника, например реверс-прокси сервера, перед сайтом на WordPress. То есть посетитель обращается к реверс-прокси по HTTPS, а обмен данных между реверс-прокси и хостингом идет по HTTP протоколу. Получается, что WordPress ничего не знает о том по какому протоколу пользователь хочет получить данные. И значение HTTP X-Forwarded-Proto как раз и указывает оригинальный протокол, по которому посетитель подключился к посреднику (прокси или балансировщику нагрузки).
Благодарности
При написании статьи были использованы следующие источники:
