Як перейти в Wordpress на HTTPS. Покрокова інструкція

1. Крок 1. Отримуємо і підключаємо SSL-сертифікат
2. Крок 2. Виправляємо «змішаний вміст»
3. Крок 2.2 виправляємо в CSS
4. Крок 2.3 виправляємо в контенті
5. Крок 3. Перевіряємо роботу HTTPS
6. Крок 4. Переводимо блог на HTTPS
7. Крок 5. Прописуємо 301 редирект з HTTP на HTTPS
8. Крок 6. Повідомляємо пошуковикам про зміну протоколу
9. Крок 6.2. Yandex
10. висновок

Останнім часом Google все активніше підштовхує власників сайтів до переходу на захищений протокол (HTTPS). І ініціатива це абсолютно правильна.

Навіщо взагалі потрібен саме цей протокол? Не вдаючись в глибинні подробиці, можна пояснити це так - в разі використання HTTPS-протоколу, будь-який обмін даними між сайтом і браузером користувача буде проходити в захищеному зашифрованому каналі. Наприклад, ви авторізуетесь на сайті: якщо використовується не зашифровані HTTP, ваш логін-пароль передається у відкритому каналі і може бути перехоплений і використаний зловмисниками. При використанні HTTPS, подібна можливість різко знижується, тому що ці дані будуть зашифровані. Природно, те ж саме стосується і будь-яких інших персональних даних, даних платіжних карт і т.д. Відповідно, питання «переходити чи ні» по суті, навіть не варто.

Зрозуміло, що для інтернет-банкінгів і платіжних систем використання HTTPS-протоколу давно вже носило характер де-факто. Ніхто не стане користуватися фінансовим інструментом, дані якого передаються у відкритому вигляді - це нонсенс. Але для інших сайтів і блогів, використовувати HTTPS чи ні - це було питання вибору. І якщо раніше заклики Google носили більше рекомендаційний характер (і, скажімо прямо, масово ігнорувалися), то з недавніх пір пошуковик перейшов до прямих попереджень . Так, з 56 версії Google Chrome, сайти, які продовжать працювати на незахищеному HTTPS будуть явно позначатися як ненадійні.

А ще трохи пізніше Google погрожує перейти до ще більш жорстким заходами і вже чітко і явно вказувати ненадійність сайту, який використовує HTTP-протокол.

Для того, щоб уникнути подібного роду санкцій, необхідно вже зараз замислитися над переходом. І хоча всі ми знаємо, що «один переїзд дорівнює двом пожежам», на практиці нічого особливого складного в зміні протоколу немає. Покроково цей процес виглядає так.

Крок 1. Отримуємо і підключаємо SSL-сертифікат

До появи безкоштовних сертифікатів, саме в цьому ж першому кроці крилася основна проблема. SSL-сертифікати завжди були платними - вартість починалася від $ 30 в рік і вище. Природно, що для невеликого сайту або особистого блога цю суму було не те, щоб непідйомною, але витрачати її, відверто кажучи, бажання було мало. Однак з появою Let's Encrypt ситуація змінилася - сертифікат початкового рівня (а його нам і досить) стало можливо отримати не тільки безкоштовно, але також і практично миттєво, в автоматизованому режимі.

Я користуюсь хостингом «Україна» , В ньому процес отримання сертифікату від Let's Encrypt повністю автоматизований і не вимагає від користувача будь-яких специфічних знань. Для отримання сертифікату нам необхідно:

1. зайти в «Панель управління»;
2. вибрати розділ «Налаштування SSL»
   
3. Вибираємо закладку «Let's Encrypt сертифікат» і натискаємо кнопку «Встановити».
   
4. Через кілька хвилин (іноді довше - якщо чергу велика), ми отримаємо наш сертифікат, який автоматично буде встановлений.

Все, більше ніяких дій з приводу сертифікату від нас не вимагається. Сам сертифікат виписується на 3 місяці і буде автоматично продовжуватися до тих пір, поки ви будете використовувати хостинг або Let's Encrypt не змінить правила.

Для того, щоб переконатися, що з сертифікатом все ок, можна скористатися, наприклад, сервісом «SSL Server Test» .

Крок 2. Виправляємо «змішаний вміст»

Крок 2.1. виправляємо в темі блогу

УВАГА! Перед будь-якими діями з файлами, обов'язково зробіть резервну копію теми!

Після отримання сертифіката, ми, по-суті, вже можемо переходити на HTTPS. Однак є заковика - справа в тому, що посилання на файли, які прописані у нас в темі, CSS-файлах і контенті, можуть (а найчастіше так і є) бути абсолютними, що при завантаженні сторінки в HTTPS викличе помилку «змішаний вміст» .

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

Наприклад, ми завантажуємо сторінку www.proofsite.com.ua в HTTPS (https://www.proofsite.com.ua), але всередині теми посилання на картинку-логотип прописана як абсолютна і з явним зазначенням протоколу HTTP

http://www.proofsite.com.ua/images/logo.png

ми отримаємо помилку змішаного вмісту. Отже, нам потрібно відкрити файл теми header.php і виправити посилання на відносну. Тобто написати:

/images/logo.png

Таким чином, тепер картинка логотипу буде завантажуватися за тим же протоколом, за яким викликається вся сторінка.

Якщо з якої-небудь причини, ви не можете змінити посилання на відносну, то можна вказати як абсолютну, але без вказівки протоколу:

//www.proofsite.com.ua/images/logo.png

Як бачите, в цьому форматі запису прибрано «HTTP» і браузер буде самостійно вибирати той тип протоколу, за яким завантажується вся сторінка.

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

Крок 2.2 виправляємо в CSS

Іноді в CSS-стилях виникає проблема змішаного вмісту в конструкції «background-image». Для її виправлення, потрібно відкрити файл стилів і прибрати у посилання на файл фонового зображення протокол. Вийде так:

background-image: url (// www.Ваше-сайт.com / wp-content / themes / [ім'я-теми] /images/background.png);

Крок 2.3 виправляємо в контенті

Якщо з темою і CSS все можна зробити вручну більш-менш швидко, то з контентом доведеться повозитися. Справа в тому, що WordPress при додаванні зображення через редактор, за замовчуванням прописує абсолютні посилання. Відповідно, зараз всі наші посилання завантажуються по HTTP-протоколу, що продовжує викликати помилку змішаного вмісту. Якщо у вас трохи статей - можете виправити ці посилання вручну, але якщо статей більше десятка - доведеться скористатися заміною в базі даних.

Для цього нам знадобиться доступ до phpMyAdmin. В панелі управління хостингу «Україна» посилання на вхід в phpMyAdmin знаходиться в розділі «MySQL».

УВАГА! Перед будь-якими діями з базою, обов'язково зробіть її резервну копію!

Відкриваємо закладку «SQL» і виконуємо наступну команду:

UPDATE wp_posts SET post_content = replace (post_content, "http://www.proofsite.com.ua", "//www.proofsite.com.ua);

Таким чином, ми змінимо в таблиці «post_content», що містить контент записів, протокол у посилань і тепер при завантаженні сторінки браузер сам визначить - за яким протоколом викликати файли.

Крок 3. Перевіряємо роботу HTTPS

Тепер, коли проблема змішаного вмісту усунена, нам потрібно перевірити - чи дійсно ми всі зробили правильно. Для цього відкриваємо наш сайт за протоколом HTTPS.

https://www.proofsite.com.ua

якщо все зроблено правильно, то ми повинні в адресному рядку зелений напис «Надійний». Відповідно, така ж напис повинен бути на будь-якій внутрішній сторінці.

Якщо адресний рядок виглядає не так, як вище, а при натисканні на «i» ми бачимо повідомлення «Підключення до сайту захищене в повному обсязі», значить щось зроблено не вірно.

У чому причина помилки «Підключення до сайту захищене в повному обсязі», ми можемо дізнатися, натиснувши на посилання «Детальніше». Перед нами відкриється вікно із зазначенням на нашу проблему - «Mixed Content» ( «Змішаний контент»).

Відповідно, нам потрібно це виправити. Для цього вибираємо закладку «Console» ( «Консоль») в списку зверху і отримуємо список наших помилок, зазначених як «Mixed Content» ( «Змішаний контент»).

Далі індивідуально виправляємо всі зазначені проблеми.

Також отримати доступ до цієї інформації можна через «Інструменти розробника». Для того відкриваємо в Google Chrome «Інструменти розробника»: «Меню» -> «Додаткові інструменти» -> «Інструменти розробника» (або Ctrl + Shift + I на сторінці)

Крок 4. Переводимо блог на HTTPS

Тепер нам потрібно вказати для всього блогу режим роботи в HTTPS. Для цього відкриваємо адмін-частину нашого блогу і заходимо в «Налаштування» -> «Загальні». Тут нас цікавлять 2 рядки:

Адреса WordPress (URL)

Адреса сайту (URL)

Для обох рядків міняємо протокол і зберігаємо.

Крок 5. Прописуємо 301 редирект з HTTP на HTTPS

Після зміни протоколу в налаштуваннях WordPress, наш сайт все ще доступний по двох протоколах, що по-суті, створює дублі контенту. А пошуковики цього дуже не люблять - відповідно, нам потрібно вибрати основний протокол для блогу. Для цього нам необхідно відкрити файл .htaccess і вставити в нього наступні рядки:

RewriteEngine On RewriteBase / RewriteCond% {HTTP: SSL}! = 1 [NC] RewriteRule ^ (. *) Https://www.proofsite.com.ua/$1 [L, R = 301]

Тепер при виклику сторінок сайту по HTTP, запит буде автоматично переадресовано на сторінки з HTTPS.

Крок 6. Повідомляємо пошуковикам про зміну протоколу

Крок 6.1. Google

Для того, щоб повідомити Google про те, що ми змінили протокол, нам потрібно додати HTTPS-версію сайту в Google Webmasters Tools як новий сайт. При цьому HTTP-версію можна залишити. Також потрібно додати нову карту сайту і перенести настройки (якщо були) з HTTP-версії в HTTPS-версію.

Крок 6.2. Yandex

Для Яндекса нам знадобиться виконати наступні дії:

1. відкрити «Інструменти вебмастера»;
2. в меню вибрати пункт «Переїзд сайту»;
3. встановити прапор «додати HTTPS»;

Далі також як і в ситуації з Google, нам потрібно додати нову карту сайту з HTTPS-сторінками. А також прописати головне дзеркало в файлі robots.txt:

Host: https://www.proofsite.com.ua

висновок

Ось, власне, і все. Тепер наш сайт завантажується по HTTPS-протоколу, відзначається пошуковими системами як «Надійний», а нам залишається тільки дочекатися переиндексации блогу і моніторити видачу.