Как перевести сайт WordPress на HTTPS правильно

Привет, друзья. Я вам обещал как-то рассказать про переезд на https для сайта на WordPress, да и вы меня просили в комментах описать данный процесс.

Знаю, что таких мануалов в сети достаточно, я сам их гуглил, но алгоритмы везде довольно разные. Скорее всего, и особенности у каждого сайта тоже будут свои. Каждый описывает личный опыт, проблемы и ошибки.

Почему бы и мне не описать свой опыт переезда с http на https для моего блога на WordPress – alaev.info. Вот прямо сейчас возьму и начну этим заниматься и описывать процесс в реальном времени.

За основу буду брать свою же инструкцию: как правильно перевести сайт с HTTP на HTTPS без потерь и накладывать на нее особенности WordPress. Общую теорию, выбор сертификата и прочее вы можете прочитать в инструкции по ссылке выше, я же перейду сразу к делу. Я выбрал для себя бесплатный сертификат Let’s Encrypt, который мы ставим всем нашим клиентам, кроме того он бесплатный, и ISP панель управления на моем сервере позволяет его установить в 1 клик с последующим бесшовным обновлением сертификата каждые 3 месяца.

Итак, план следующий:

1. Установить SSL-сертификат,
2. Проверить корректность установки SSL-сертификата,
3. Изменить в админке WordPress адрес сайта на https,
4. Изменить адреса всех скриптов и стилей, используемых на сайте,
5. Сделать бекап БД,
6. Изменить в БД все внутренние ссылки и изображения на https,
7. Проверить xml-карту сайта,
8. Просканировать весь сайт краулером и убедиться, что нет ошибок,
9. Добавить https версию сайта в Яндекс.Вебмастер,
10. Добавить https версию сайта в Google Search Console,
11. Сделать 301-редирект,
12. В Яндекс Вебмастере сделать переезд сайта на HTTPS.

А теперь пора приступать к выполнению намеченного плана. Надеюсь, что все пройдет без проблем!

Устанавливаем SSL-сертификат

Я уже говорил, что у меня на сервере установлена система управления ISP Manager. Потому покажу процедуру именно в этой панели. Так что авторизовываемся, переходим в раздел «Домены» — «WWW-домены» и выбираем наш сайт, то есть alaev.info:

Открываем двойным щелчком настройки и отмечаем пункт «Защищенное соединение (SSL)». Появятся несколько новых полей, в одном из них «SSL-сертификат» выбираем «Новый Let's Encrypt сертификат»:

Пункт «Перенаправлять HTTP-запросы в HTTPS» пока не отмечаем, сделаем это в самом конце, если понадобится.

После того, как мы нажмем ОК, нас перебросит на страницу настройки сертификата:

Можно ничего не менять и нажать ОК, если вы не собираетесь связываться с поддоменами. Но у меня есть несколько поддоменов: trust.alaev.info, parser.alaev.info, store.alaev.info и talk.alaev.info. Я собираюсь их тоже перенести на https в будущем, поэтому выбираю «Wildcard сертификат». Это меняет только способ проверки, и в моем случае «Проверка владения будет проведена через DNS».

Чтобы убедиться в том, что процесс генерации сертификата начат, переходим в «Настройки web-сервера» — «SSL-сертификаты» и видим там наш новый серт:

Процесс будет логироваться, для проверки нажимаем «Let’s Encrypt Журнал»:

В моем случае появилось сообщение «Токен для проверки создан» — в разделе уведомлений (иконка с восклицательным знаком рядом со стройкой глобального поиска в самом верху) появилось сообщение:

Для продолжения процедуры получения сертификата Let's Encypt alaev.info_le1 добавьте TXT-записи: '_acme-challenge.alaev.info. TXT WKsjU1eqMXPECCpJX3Kx9N0Vvwqf3lZKqi_hRxv5Ghc, _acme-challenge.alaev.info. TXT _yWlkP6P-_8sbLWwhNL2lcC3OFJtPjm8xJLoBF4Bhx9' на серверах имен 'dns4.fastdns24.link., dns.fastdns24.com., dns2.fastdns24.org., dns3.fastdns24.eu.'. Получение будет возобновлено после 2019-04-11 16:36:02

Я создал две соответствующие TXT записи в настройках DNS домена. Вам надо будет сделать тоже самое, если будете выбирать подтверждение через DNS. А если нет – то нет :)

Спустя 30 минут прилетело уведомление: «Let's Encrypt сертификат alaev.info_le1 получен успешно», а в журнале это выглядит так:

Проверяем, работает ли сертификат

Сайт открывается по https без предупреждения об исключениях безопасности – все правильно.

Пока шла процедура выдачи Let’s Encrypt SSL-сертификата, сайту был подключен самоподписанный сертификат, и при попытке перехода на сайт по https появлялось такое сообщение:

Разумеется, так быть в итоге не должно, иначе никто не попадет на наш сайт, не подтвердив исключение, а делать это умеют не только лишь все...

После успешной установки и проверки сертификата Let’s Encrypt, сайт стал открываться без предупреждения:

Я не готов пока сказать, что все так как надо, потому что надо вот так:

Но не переживайте, с этим мы разберемся чуть позже. А сейчас главное, чтобы сертификат работал корректно.

Проверяем корректность установки SSL-сертификата

Воспользуемся сервисом https://www.ssllabs.com/ssltest/analyze.html (проверка занимает несколько минут):

И для верности еще https://www.sslshopper.com/ssl-checker.html (проверка почти моментальная):

Как видите, у меня все прекрасно! Уверен, что у вас тоже, если следуете моей инструкции!

Меняем адрес блога на https в админке WordPress

Идем в админку своего сайта на WordPress в «Настройки» — «Общие» и меняем два поля «Адрес WordPress (URL)» и «Адрес сайта (URL)». Было http://alaev.info – стало https://alaev.info:

И сохраняем это дело.

Исправляем адреса файлов скриптов и стилей на https

Теперь давайте сделаем так, чтобы наш сайт выглядел снова красиво. Дело в том, что у нас подключаются стили и скрипты по http протоколу, а браузеры по умолчанию блокируют незащищенное содержимое для сайтов на защищенном https-протоколе.

Достаточно открыть исходный код главной страницы, чтобы увидеть это:

То, что я напишу ниже, скорее всего, будет отличаться от вашей ситуации, потому что темы у всех разные, они работают по разному. Моя тема так вообще самопальная, не имеющая никаких визуальных настроек или чего-то подобного, она настраивается через код и с помощью всяких функций через functions.php, так что…

В общем, выбираем в админке «Внешний вид» — «Редактор тем». А внутри темы смотрим файл functions.php. Так как я добавлял скрипты и стили в тему не просто добавляя их в шаблон header.php, а иначе, мне надо было поменять http на https тут:

Поменял. Сохранил.

Заодно заглянул в style.css и поменял там на https пути для изображений.

А еще прошел по всем файлам, из которых состоит тема и поискал там http ссылки, чтобы заменить на https.

Теперь все скрипты и стили у меня подключаются по https, но браузер все равно не доволен до конца, потому что изображения на сайте по прежнему содержат http.

Обязательная магическая процедура – сделать бекап!

Лично я для этого использую плагин WP-DB-Backup. Я использую его с тех самых пор, как появился на свет мой блог, а это уже почти 10 лет.

Кроме того, чтобы сделать бекап здесь и сейчас, этот плагин может отправлять бекапы на вашу почту, я делаю это по расписанию раз в день, у меня заведен специальный ящик, куда эти бекапы валятся. Ну так, на всякий случай, хотя за 10 лет это ни разу не пригодилось, но лучше подстраховаться.

Так что ставим плагин, либо же используем свой любимый другой плагин, либо вообще делаем бекап через phpMyAdmin… Да можете вообще бекап не делать, мне все равно!

Меняем все ссылки внутри сайта на https

Мы уже знаем, что у нас куча внутренних ссылок с протоколом http, и это дело надо исправить, но так как сделать это вручную не представляется возможным, я решил воспользоваться плагином Better Search Replace. Он позволит нам внести необходимые изменения прямо в БД, в таблицу с записями и комментариями (да и в другие таблицы, если это необходимо). Так что ставим его.

Переходим непосредственно к плагину. Я вам рекомендую сперва выполнить холостой прогон изменений. Для этого заполняем поля «Искать» и «Заменить на», соответственно на http://alaev.info/ и https://alaev.info/, выбираем все таблицы в БД и ставим галку «Холостой запуск? (без замены)»:

После запуска вверху вы увидите что-нибудь в духе: «ХОЛОСТОЙ ЗАПУСК: 28 таблиц было просмотрено, 3243 ячеек для обновления найдено, и 0 изменений сделано.»

Если так, значит все должно пройти успешно и при боевом запуске. Значит пора запускать боевой! Не перезагружая страницу, убираем галку напротив холостого запуска и жмем помолясь «Запустить Поиск/Замену».

Должны получить сообщение: «При поиске/замене, 28 таблиц было просмотрено, с 3243 ячейками для изменений, 3100 обновлений.»

Проверяем, что нет никакого смешанного содержимого

Теперь надо убедиться, что браузер теперь нами доволен и показывает заветный замочек. Вот так.

В Chrome:

В FireFox:

В случае если у вас показывается треугольник с восклицательным знаком, вам надо понять, что не так, и где остались еще ссылки на http.

Чтобы это понять, например, в Хроме нажимаем F12, откроется консоль, в ней выбираем вкладку Console:

Вот тут будут отображаться все ошибки, точнее уведомления, где, в каком месте стоит http:// ссылка. Фиксим все!

Проверяем xml-карту сайта

На всякий случай не забываем проверить xml-карту сайта https://alaev.info/sitemap.xml — надо убедиться, что там везде https. В проверке может помочь ComparseR:

И, конечно, в файле robots.txt меняем:
Sitemap: http://alaev.info/sitemap.xml
на:
Sitemap: https://alaev.info/sitemap.xml

А заодно можете из robots.txt строчку с директивой Host: удалить, т. к. она больше не учитывается Яндексом.

Прогоняем сайт краулером

Теперь сканируем весь сайт каким-нибудь краулером, я буду использовать свой любимый CompraseR. Нам надо убедиться, что не осталось никаких http ссылок и картинок, все страницы открываются, существуют, нигде никакие каноникалы не забыты, и все соответствует новому https протоколу. Для сканирования выбираем вот такие настройки:

И в идеале надо получить что-то вот в этом духе:

Чтобы не было внутренних редиректов и несовпадений url и canonical.

У меня все ок по результатам проверки!

Добавляем https версию сайта в Яндекс.Вебмастер

Добавляем сайт, как отдельный, не смотря на предупреждение Яндекса:

Жмем «Всё равно добавить https://alaev.info». И подтверждаем сайт удобным для нас образом.

Получится так:

Добавляем https версию сайта в Google Search Console

Можно выбрать новую функцию Гугла «Доменный ресурс» (в консоли под голотипом видим выпадающий список сайтов, а в самом низу есть кнопка «Добавить ресурс»):

Для этого способа подойдет только подтверждение права собственности через DNS запись домена. После внесения TXT записи в DNS потребуется несколько минут пока Гугл увидит ее, после чего право собственности подтвердится:

Никаких дополнительных настроек тут делать не надо, как в Яндексе. Просто жмем «Готово» и закрываем вкладку.

Делаем 301-редирект

Мы будем делать 301-редирект через htaccess, чтобы при обращении к http версии сайт 301-редиректом перенаправлялся на https версию.

И по случаю не могу не упомянуть мою инструкцию про 301-редирект, она пригодится вам. Но если лень копаться, вот правило, которое работает (проверял не только на данном блоге, но и на всех других сайтах с другими движками, когда переносил их на https вместе с блогом):

RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Результат можно и нужно проверить, например, этими сервисами:
https://bertal.ru/
https://www.askapache.com/online-tools/http-headers-tool/

В течение нескольких дней после того, как вы настроите редирект, рекомендую заходить в Метрику: Отчеты — Стандартные отчеты — Содержание Страницы входа. После момента установки 301-редиректа у вас не должно быть посещений страниц в http адресом, только https. Примерно вот так это должно выглядеть:

Переезд сайта в Яндекс Вебмастере

А теперь, когда у нас работает 301-редирект, можно смело оформлять переезд сайта на https в панели вебмастера Яндекса. Выбираем «Индексирование» — «Переезд сайта», отмечаем «Добавить HTTPS» и сохраняем:

После этого можно и ссылку на xml-карту сайта указать новую в разделе «Индексирование» — «Файлы Sitemap».

Ну, вот, собственно, и все, дорогие друзья! Больше мне добавить нечего. Переезд на https осуществлен успешно. Чего желаю и вам!

Если будут какие-то вопросы, задавайте в комментариях.

А я пойду переносить свои поддомены на https.

До связи.