W moim poprzednim wpisie (otwiera się w nowej karcie) 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 (otwiera się w nowej karcie)
. 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="http://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:
- 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)
- Otwieramy do edycji nasz plik wp-config.php
- Nad linią
require_once(ABSPATH . 'wp-settings.php')wklejamy poniższy kod: - A poniżej linii
require_once(ABSPATH . 'wp-settings.php')wklejamy: - 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 (otwiera się w nowej karcie) 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 po wdrożeniu Cloudflare audyt w Ahrefs zgłosi dziwny adres, zobacz wpis o naprawie błędu email-protection w Ahrefs . Jeśli nadal macie problemy z wdrożeniem certyfikatu oferowanego przez Cloudflare do Waszego Wordpressa zachęcamy do kontaktu [email protected]
