Strony WWW

Konfiguracja Cloudflare + WordPress

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:

config

  • 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ć.

mixed1

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.

mixex-content

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]

Incoming search terms:

  • robert mleczko

Robert Mleczko

Robert Mleczko – nasz Web Developer. Tworzy responsywne strony internetowych. Ekspert od zadań specjalnych. Rzeczy niemożliwe wykonuje od ręki. Jak nikt potrafi przełożyć wizję klienta i koncept grafika na zgrabny kod i przyjazną dla użytkownika witrynę. Jego specjalnością jest WordPress, Woocommerce oraz Twitter Bootstrap, o którym prowadzi bloga. Nie obce mu są także techniki optymalizacji stron pod SEO. Na bieżąco śledzi nowinki związane z HTML5 i CSS3, by wykorzystać je w swoich projektach.

More Posts - Website