Налаштовуємо HTTPS та SSL на WordPress – безкоштовно і без SMS

https secure

Ґуґл сказав треба – спільнота хутко побігла робити!

Якщо ви тут, то це не випадково. Цього року Google розпочав не просто рекомендувати власникам сайтів переходити з HTTP на HTTPS, а практично змусив зробити це. Адже тепер безпечні сайти мають вищий рейтинг, при видачі результатів пошуку. Мабуть немає сенсу пояснювати, що таке HTTPS та SSL, і чому краще “навчити” свій сайт працювати безпечно. Дотримуйтеся простої інструкції, виконавши її пункти можна легко перевести на HTTPS (SSL) свій WordPress сайт.

​Признаюся чесно, перевести Хутір.Info на https мені вдалося не з першої спроби. І методом спроб і помилок, я вирішив поекспериментувати над іншим сайтом. Коли врешті-решт все вдалося, я почав робити аналогічні маніпуляції і для хутору, паралельно занотовуючи важливі моменти для цієї інструкції.

Додаткова інформація

Вам варто знати одне – процедура ця не така складна, як здається на перший погляд і в більшості випадків все зводиться до кількох кліків мишею. Мм… про їх кількість не писатиму, щоб вас сильно не відлякувати. Зазначу лишень, що налаштувати HTTPS та SSL на WordPress’і справді легко. Головне не боятися…

Найпростіший спосіб, який ми власне і розглянемо, це перехід з HTTP на HTTPS використовуючи для отримання SSL-сертифікату сервіс​ CloudFlare.

Все нижчеописане ви робите на свій страх і ризик!
Я лише описую свій досвід і ділюся ним з вами.

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

Отож почнемо налаштування HTTPS (SSL) на WordPress сайті:
  1. Створюємо обліковий запис на CloudFlare.
  2. Клікаємо по “+ Add Site“, де штампуємо адресу вашого сайту та натискаємо “Scan DNS Records“.
    add site

    Додаємо сайт

    Після цього чекаємо хвильку, а коли появиться напис “Scan Complete” тиснемо “Continue Setup“.

  3. scan complete

    та чекаємо завершення сканування

  4. Вам буде показано які записи про домен знайдено, зазвичай тут не потрібно нічого змінювати.
    verify dns records

    Перевіряємо записи DNS

    Головне щоб були позначки (оранжеві хмаринки) біля запису з адресою вашого сайту + адреса з www. Тож – тиснемо “Continue“.

    select free plan

    Обираємо безкоштовний тарифний план

    І ще раз, обираючи безкоштовний тарифний план “Free Website“.

  5. change nameservers

    NS-сервери актуальні зараз і на які їх необхідно змінити. Іноді також є інформація – які видалити.

  6. Зараз вам вказали NS-сервери, на які необхідно замінити поточні в налаштуваннях вашого сайту у реєстратора домену. Змінюйте NS на отримані щойно, що чекаєте? Потрібен певний час, щоб зміни набрали чинності.
  7. Переконайтеся, що ваш домен отримав “зелене світло” – активний статус на CloudFlare.
  8. status pending

    Статус: Очікування

    status active

    Статус: Активний

  9. Переходимо на вкладку “Crypto” і вибираємо тип сертифікату – “Flexible“.
  10. crypto

    Вкладка параметрів шифрування та замовлення сертифікату

  11. Запускається ініціалізація отримання сертифікату (authorizing certificate). Зазвичай сертифікат генерується швидко – через годину-дві, проте іноді цей процес  триває довше. На вкладці “Crypto” повинен з’явитися значок “active certificate“.
  12. active certificate

    Сертифікат активовано!

  13. ​Вітаю, найпростіше ви зробили. Жартую. 😀 Раджу тепер почекати кілька годин, щоб усі внесені зміни набрали чинності. Подальші пункти ви звичайно можете продовжувати виконувати зараз. Просто немає гарантій, що це буде результативно. Ваш сайт може працювати некоректно (наприклад, проблеми з входом в майстерню, тощо).
  14. До змін на вкладці “Page Rules” (пункт 14 цієї інструкції та “Адреса сайту (URL)” в майстерні сайту, пункт 16), ваш сайт буде доступний за обома протоколами. Як по https, так і по http. Заходимо на сайт з використанням https, дивимося як усе працює. Скоріш за все будуть певні конфлікти.
  15. Тепер потрібно перейти до встановлення плагінів в майстерні вашого сайту. Шукаємо плагіни “Cloudflare“, “CloudFlare Flexible SSL” та “Better Search Replace” (останній за бажанням, якщо вам простіше редагувати бази даних через “phpMyAdmin“, то можете не ставити). Їх варто встановити і відразу ж активувати.
  16. Заходимо в “Налаштування” → “Cloudflare”. Тут вам потрібно ввести адресу поштової скриньки, яку ви вказали при реєстрації на Cloudflare, а також API ключ. Після чого натискаєте “Save API Crededentials
    enter_cloudfare

    Вигляд сторінки плагіну “CloudFlare” до входу.


    API ключ беремо на сайті Cloudflare в особистому кабінеті. Для початку тиснемо “Get your API key“.
    get_your_api_key

    Для початку тиснемо “Get your API key”.


    А потім – “View API Key“, копіюємо його і вставляємо.
  17. view api key

    А потім – “View API Key”, копіюємо його і вставляємо.

  18. Тепер раджу ознайомитися з параметрами, до яких ви отримали доступ – тут зібрано найнеобхідніші, відповідно немає потреби щоразу відкривати сайт CloudFlare щоб їх змінити. Зараз перейдіть на вкладку “Settings” та увімкніть “Development Mode” (переведіть у положення “on”).
  19. Development Mode

    Вмикаємо “Development Mode”

  20. Варто пам’ятати, що база даних вашого сайту може містити багато посилань з http. Потрібно поміняти їх усіх на https, використовуючи “Better Search Replace” або “phpMyAdmin”. Знаходимо відповідний пункт (“Better Search Replace”) в меню Інструменти вашої майстерні. В поле “Search for” набираємо що шукати, а “Replace with” – на що замінити. В “Select tables” обираємо усі, а от “wp_options” раджу залишити без змін (в пункті 16 ми до цього ще вернемося).
    beter search replace on wordpress

    Замінюємо посилання з http на https

    Виправляємо спочатку посилання для зображень ​src=”http:// на src=”//, а потім http:// на https://.

  21. Після всіх внесених змін можна здійснювати постійну переадресацію з http на https. заходимо в CloudFlare на вкладку “Page Rules” і після натиснення “Create Page Rule” прописуємо http://ваш.домен/* і виставляємо правило “Always Use HTTPS” та зберігаємо – “Save and Deploy“.
  22. page_rules

    Правила для показу сторінок

  23. Йдемо на сайт, перевіряємо його роботу і наявність зеленої колодки на всіх сторінках. Якщо є повідомлення про те, що з’єднання не безпечне або червона колодка, то швидше за все є помилка “blocked mixed content” – значить якісь дані завантажуются по http протоколу. Дивимося в код сторінки, шукаємо “http://”, аналізуємо що це і звідки та виправляємо виявлені проблеми.
  24. В майстерні WordPress заходимо в меню “Налаштування” → “Загальні” і в адресі сайту змінюємо http:// на https://. Робимо це не просто так лише зараз, а для того щоб переконатися, що все працює правильно (виконавши цю зміну раніше, ви могли втратити доступ до сайту і потрібно було б робити більше зайвих маніпуляцій).
  25. Перевіряємо «robots.txt», якщо в у вас вказана директива «Host» і «Sitemap», то міняємо http на https.
  26. Заходимо в “Налаштування” → “Cloudflare“. Вимикаємо “Development Mode”.
  27. Плагіни “CloudFlare” та “CloudFlare Flexible SSL” залишаємо, а “Better Search Replace” за бажанням можна видалити.
  28. І ще одне – не забудьте повідомити пошуковим системам, що адреса сайту змінилася:
  • Google – в Search Console додаємо новий сайт з https, так як за старою адресою буде редірект 301, а решту Ґуґл зробить сам.
  • YandexYandex Webmaster в розділі «Індексування → Переїзд сайту» (Indexing → Relocate site) ставимо галочку «додати HTTPS» (Add HTTPS), зберігаємо.
  • Bing – заходимо у Bing Веб-майстер, обираємо потрібний сайт, в розділі “Діагностика та знаряддя – Переміщення по сайту” обираємо пункт “Я переміщую URL-адреси з одного розташування до іншого в межах поточного сайту” → “Домен” → “Місця призначення” і вказуємо адресу сайту з https (якщо чесно, майки щось як завжди намудрували, з ними найскладніше… якщо щось не так то самі винні).
Якщо вам цього мало, то додатково можна ще виконати наступні пункти, але вони не обов’язкові:
  1. На хостингу відкриваємо файл «wp-config.php» і перед написом «That’s all…» додаємо такий рядок:
    define('FORCE_SSL_ADMIN', true);
    /* That's all, stop editing! Happy blogging. */

    Це невеликий захист майстерні WordPress.

  2. Переходимо в майстерню сайту. Тут потрібно додати метатег в секцію «head», там де всі ваші метатеги (зазвичай в файлі «header.php»):
    <meta name="referrer" content="always">

    Він потрібен для передавання даних про переходи. Якщо ви його не поставите то нічого передаватися не буде, відповідно в будь-яких звітах статистики ви нічого не побачите. Його можна не ставити в 2-х випадках – коли у вас просто лендінг і ви використовуєте UTM мітки купуючи трафік або ви ніколи не користуєтеся статистикою.

Підсумки

Варто зазначити, що певні пункти можна було і не робити, бо CloudFlare сама їх виконає. Мабуть це відбувається після того, як визначить, що за сайт вона убезпечує – який двигунець використовується та як побудовано його вміст. Але щоб пришвидшити весь процес переходу з http на https ми їм трішки “допомагаємо”. Тому, якщо в процесі виконання цієї інструкції чогось ви не робили, бо воно вже було зроблене, не хвилюйтеся – все добре, так задумано. Також певна залежність є від того які плагіни використовуються на WordPress сайті, іноді потрібно почистити кеш, часом змінити якісь налаштування, щось можливо перестане працювати як потрібно.

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

Післяслово

Висловлюю величезну подяку Роману Шуварику (comanche) за “копняка”, якого він мені дав порадивши перевести Хутір.Info на HTTPS (SSL) за допомогою CloudFlare. Вчасно нагадав, а то так і сиділи б в небезпеці з шапочками з фольги 😀

P.S. Якщо ви поспішили і не можете увійти в майстерню, скоріш за все передчасно змінили адресу сайту з http:// на https://. Тепер вам потрібно зайти в “phpMyAdmin” до бази даних сайту, перейти на таблицю “​wp_options” і виправити перші два рядки.

Поширити: Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestEmail this to someone

шПійон

Перший хлопець на селі. Виконуючий обов'язки Голови Сільради.

Вам це має сподобатися...

4 відгуків

  1. триздун сказав:

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

  2. Роман сказав:

    Доброго дня!
    А для чого потрібеш плагін CloudFlare Flexible SSL?
    одного CloudFlare не достатньо?

    • шПійон сказав:

      Впринципі це додатковий плагін і він не є обов’язковим. Здебільшого все залежить від хостера та/чи налаштувань вашого сервера/сайту. Іноді все працює чудово і без нього. В мене були проблеми з входом в адмінку і ще щось, нажаль зараз вже не пригадую що саме. На днях маю переводити ще один WordPress сайт на https, от на ньому і протестую, та постараюся тут відзвітувати. За потреби доповню інструкцію.

  3. Роман сказав:

    Завдяки статті перевів і свій сайт на https://kernpro.info
    Але мушу відмітити один нюанс з практики, якщо міняти всі посилання в базі src=”http:// на src=”//, а потім http:// на https://
    то зачіпитися можуть і посилання на інші сайти, і вони перестануть працювати

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *