W moim poprzednim wpisie opisywałem usługę Cloudflare. Teraz pokażę jak zintegrować naszą stronę WWW opartą na WordPressie z tą właśnie usługą.

Oficjalny plugin Cloudflare

Pierwszą metodą, która jest zalecana przez Cloudflare jest skorzystanie z ich pluginu dostępnego TUTAJ. Po instalacji przechodzimy w naszym menu do zakładki „Ustawienia -> Cloudflare” gdzie ukaże się nam taki ekran:

W sekcji „CloudFlare Domain Name” wpisujemy adres naszej strony bez http i www.
W sekcji „CloudFlare API Key” klikamy w link (Get this?), zostaniemy przeniesieni na stronę cloudflare, gdzie będziemy mogli pobrać swój klucz API.
W sekcji „CloudFlare API Email” podajemy adres mailowy za pomocą którego zakładaliśmy konto na Cloudflare.
Sekcja „Development Mode” pozwala nam włączyć tryb „Edycji strony”. Dzięki niemu zmiany wprowadzone na naszej stronie będą od razu widoczne a nie będą pobierane z cache Cloudflare.
Sekcja „HTTPS Protocol Rewriting” zajmuje się zmianą adresów do obrazów oraz plików CSS i JS. Konkretnie usuwa http:// z adresów plików by uniknąć tzw. Mixed Content – opcję tą należy włączyć.

Po zapisaniu ustawień przenosimy się na stronę Cloudflare i w panelu naszej strony wybieramy „Page Rules”. W polu „URL Pattern” wpisujemy *nazwa-naszej-domeny.pl*, zaznaczamy opcję „Always use https” i klikamy w button „Add Rule”:

Pamiętajmy, by po zastosowaniu powyższych czynności, nie zmieniać adresu strony w ustawianiach WP (Ustawienia -> Ogólne) z http:// na https:// ,gdyż spowoduje to pętle przekierowań i uniemożliwi wczytanie witryny.

Teoretycznie obok adresu waszej strony powinna się pojawić zielona kłódka – praktycznie, rzadko działa to od razu:) Problemem jest tak zwane „Mixed Content” czyli ładowanie części zasobów poprzez http, a części poprzez https. Gdy zamiast naszej kłódki, pojawi się (w Chrome) symbol kartki z zagiętym rogiem i po kliknięciu w niego, zobaczycie poniższy komunikat, oznacza to, że trzeba trochę pokombinować.

Najczęstszą przyczyną takiego stanu rzeczy jest podawanie ścieżek do obrazów, plików czy fontów z użyciem http:// w adresie (przykładowo w kodzie strony adres logo jest zapisany w postaci <img src="https://moja-strona.pl/img/logo.png"> zamiast <img src="/img/logo.png">) ,wtedy przeglądarka pobiera obrazek poprzez http a nie https – bo tak jej kazaliśmy.

Aby wyświetlić listę plików powodujących błędy, klikamy na klawiaturze przycisk F12, który uruchomi nam narzędzia developerskie. Przechodzimy w nich do zakładki „Console” i ukaże się nam coś podobnego do poniższego obrazeka z listą plików.

Musimy wtedy odnajdywać w naszym motywie WP wylistowane pliki i zmieniać ich adresy. Najlepiej tworzyć ścieżki względne, a jeśli to nie możliwe (np. gdy ściągamy pliki z zewnętrznych serwerów) usuwać http: zostawiając adres bez protokołu (czyli np //zewnetrzny-serwer.pl/js/biblioteka.js).

Modyfikacja wp-config.php

Drugą metodą, którą stosuję z powodzeniem i która bardzo rzadko powoduje wyżej wymieniony „Mixed Content”, jest modyfikacja pliku wp-config.php , znajdującego się w głównym katalogu WordPressa. W tym przypadku nie korzystamy z pluginu, więc musimy mieć dostęp do FTP.

Najpierw, podobnie jak w przypadku konfiguracji z pluginem, musimy dodać regułę na stronie Cloudflare:
Przenosimy się na stronę Cloudflare i w panelu naszej strony wybieramy „Page Rules”. W polu „URL Pattern” wpisujemy *nazwa-naszej-domeny.pl*, zaznaczamy opcję „Always use https” i klikamy w button „Add Rule”:

Teraz edycja samego pliku:

1. Tworzymy sobie kopię zapasową pliku wp-config.php, na swoim komputerze albo w folderze WP (tutaj pamiętajmy o zmianie nazwy np. na wp-config.php.bak)
2. Otwieramy do edycji nasz plik wp-config.php
3. Nad linią require_once(ABSPATH . 'wp-settings.php') wklejamy poniższy kod:

4. A poniżej linii require_once(ABSPATH . 'wp-settings.php') wklejamy:

5. Pod linią define('WP_DEBUG', false); umieszczamy następujący kod:

define('WP_HOME','https://moja-strona.pl');
define('WP_SITEURL','https://moja-strona.pl');

Gdzie oczywiście zamieniamy https://moja-strona.pl na adres naszej witryny. Zapisujemy plik wp-config.php i jeśli był edytowany na komputerze to wysyłamy go na serwer.
6. Pamiętajmy o wyczyszczeniu cache na stronie Cloudflare w zakładce „Caching” -> „Purge everything”

I to by było na tyle. Nasza strona powinna zyskać zieloną kłódkę obok adresu i szyfrować komunikację pomiędzy klientem a chmurą Cloudflare.

Jeśli nadal macie problemy z wdrożeniem certyfikatu oferowanego przez Cloudflare do Waszego WordPressa zachęcamy do kontaktu [email protected]