SlideShare a Scribd company logo
Bezpieczna i szybka strona statyczna
z funkcjonalnością Wordpressa.
Czy to możliwe?
Łukasz Wilczak
/GrandParadePoland
#wiosna 2017
Agenda
• Wstęp
• Bezpiecznie i szybko, czyli statyczne
pliki
• Warunki
• Konfiguracja środowiska (serwer)
• Przygotowanie strony – elementy
dynamiczne
• Formularz kontaktowy
• Komentarze
• Wyszukiwarka
/GrandParadePoland
www.grandparade.co.uk
• Zabezpieczenie WordPressa (htaccess)
• Wtyczka Simply Static
• Konfiguracja wtyczki
• Generowanie plików statycznych
• Weryfikacja i uzupełnienie
brakujących plików
• Strona 404
• Update strony
• Podsumowanie
• Linki
Wstęp
Mimo, że WordPress z założenia jest platformą do budowania
blogów, obecnie wiele stron na tym silniku to po prostu "strony
firmowe". Składają się one z strony głównej, kilku podstron typu
oferta, portfolio, aktualności, o nas czy kontakt. I takie strony
niewielkim nakładem pracy i bez modyfikacji kodu możemy
zabezpieczyć i przyspieszyć.
/GrandParadePoland
www.grandparade.co.uk
Bezpiecznie i szybko, czyli statyczne pliki
BEZPIECZEŃSTWO
Strona statyczna nie posiada kilku
mankamentów, które ma Wordpress:
• dziury w wtyczkach I motywach
• dziury w core WP
• dziury w PHP, MySQL
• wyciek lub słabe dane do logowania
do panelu
• ataki brute force, xss, SQL injection
SZYBKOŚĆ
Pliki statyczne nie potrzebują zasobów
serwera do:
● interpretacji PHP
● dostępu do bazy danych
● setek operacji I/O
Na przykładzie bezpiecznywp.pl
dla strony głównej (index.html)
● WordPress: 300 ms
● Plik statyczny: 30 ms
/GrandParadePoland
www.grandparade.co.uk
Warunki
• Strona na WordPress nie może być duża - do kilkuset artykułów / stron
• Dynamiczne elementy muszą mieć swoje odpowiedniki dostępne dla stron
statycznych. Na szczęście najczęściej używane funkcjonalności dla stron
firmowych je mają. Należą do nich formularze, komentarze, ankiety czy
wyszukiwarki.
• Nie powinno być zbyt dużej liczby osób zarządzających stroną i zbyt częstych
aktualizacji treści. Nie jest to warunek konieczny, ale wymaga pewnej
koordynacji.
• Brak rejestracji / logowania użytkowników
• Rezygnujemy z pingback, trackback
/GrandParadePoland
www.grandparade.co.uk
Konfiguracja środowiska (serwer)
Potrzebne są dwie lokalizacje na jednym serwerze – jedna dla WordPressa, jedna
dla strony statycznej. WordPress niedostępny z zewnątrz, natomiast strona
statyczna pod docelową domeną. Istotne jest, żeby skrypt WordPressa miał
dostęp do tej drugiej lokalizacji.
Przykładowo:
Pod pierwszą z nich uruchamiamy WordPressa, drugą zostawiamy pustą.
/GrandParadePoland
www.grandparade.co.uk
Przygotowanie strony – elementy dynamiczne
Funkcjonalności server-side należy podmienić na usługi zewnętrzne.
Trzy najczęściej używane elementy dynamiczne w stronach firmowych dynamiczne to:
Formularz kontaktowy Komentarze Wyszukiwarka
/GrandParadePoland
www.grandparade.co.uk
Formularz kontaktowy
Usługa: https://formspree.io/
Plugin: bez pluginu
1. Należy dodać stronę z podziękowaniem pod adresem http://bezpiecznywp.pl/contact-thank-you/
2. Na stronie kontaktu w edytorze tekstowym w odpowiednim miejscu trzeba wkleić kod:
<form action="http://formspree.io/lukasz.wilczak@wilnet.eu" method="POST">
<input name="_next" type="hidden" value="http://bezpiecznywp.pl/contact-
thank-you/" />
<input name="subject" type="text" placeholder="Subject" />
<input name="email" type="email" placeholder="Your email" />
<textarea name="message" placeholder="Your message"></textarea>
<button type="submit">Send</button>
</form>
1. Ostatnim krokiem jest odblokowanie wysyłki poprzez wysłanie pierwszego formularza. Wtedy na zdefiniowaną
skrzynkę przyjdzie mail aktywacyjny.
/GrandParadePoland
www.grandparade.co.uk
Komentarze
Usługa: https://developers.facebook.com/docs/plugins/comments/
Plugin: https://wordpress.org/plugins/facebook-comments-plugin/
1. Pierwszą rzeczą jest wyłączenie
wbudowanego systemu komentarzy.
Można to zrobić za pomocą wtyczki:
https://wordpress.org/plugins/disabl
e-comments/
2. Do uruchomienia usługi konieczne
jest stworzenie aplikacji facebooka.
W ustawieniach wtyczki można
odszukać szybką instrukcję jak to
zrobić.
3. Po uzyskaniu Facebook App ID
można przystąpić do konfiguracji. W
naszym przypadku (generowania
stron statycznych) komentarze
działają przy następujących
ustawieniach (po prawej)
4. Domyślnie wtyczka aktywuje
komentarze na wszystkich stronach i
wpisach. W ustawieniach można je
wyłączyć dla stron, lub w edycji
konkretnego wpisu czy strony
/GrandParadePoland
www.grandparade.co.uk
Wyszukiwarka
Usługa: https://cse.google.com/
Plugin: https://wordpress.org/plugins/wp-google-search/
1. Konieczna jest rejestracja Google Custom Search
Engine i pobranie Search Engine ID.
Uwaga, należy w konfiguracji podać docelową
domenę, czyli tą pod którą będzie statyczna wersja, a
w części “Look and feel” wybrać “Overlay”.
W zakładce “Customize” można dostosować wygląd
pola wyszukiwania zgodnie z szablonem WordPressa.
/GrandParadePoland
www.grandparade.co.uk
Wyszukiwarka
2. W ustawieniach pluginu trzeba podać Search
Engine ID
Aby poprawnie wyświetlane były wyniki
wyszukiwania konieczne jest zaznaczenie
“Support Overlay Display”
W przypadku “Overlay” Search Page Target URL
nie jest już używane
3. Teraz można już dodawać widget “WP Google
Search (WGS) gdzie chcemy.
UWAGA!
1. Custom Search Engine potrzebuje około doby
aby zindeksować naszą stronę. Zatem wyniki
wyszukiwania nie będą dostępne od razu.
2. Niestety oprócz wyników wyszukiwania zostaną
nam wyświetlone reklamy Ads by Google
/GrandParadePoland
www.grandparade.co.uk
Zabezpieczenie WordPressa (.htaccess)
WordPress w naszej konfiguracji jest tylko generatorem,
do którego powinno być dostępu z zewnątrz dla innych
użytkowników i robotów. Możemy zatem użyć basic
access authorization i ustawić nazwę usera i hasło.
Ponieważ wtyczka Simply Static działa na zasadzie web
grabbera, również jej trzeba zapewnić dostęp. Możemy ją
autoryzować poprzez IP.
Na koniec konieczne jest dodanie instrukcji Satisfy Any,
która pozwoli na dostęp jeżeli jeden
z powyższych warunków będzie spełniony.
.htaccess
//tutaj część standardowa z WP
...
AuthType Basic
AuthUserFile /home/user/.htpasswd
AuthName "Ops..."
require valid-user
ErrorDocument 401 "Unauthorized Access"
order allow,deny
deny from all
allow from 185.23.21.239
allow from 94.6.123.11
Satisfy Any
UWAGA: Polecam generator wpisów .htaccess http://www.htaccessredirect.net/
/GrandParadePoland
www.grandparade.co.uk
Wtyczka Simply Static
Plugin: https://wordpress.org/plugins/simply-static/
Jak ona działa?
Jest to przystosowany pod WordPressa web grabber.
Łączy się do frontu strony i poruszając się po
wewnętrznych linkach zapisuje strony jako pliki HTML.
Podmienia w źródle HTML domenę z WordPressa na
wskazaną przez nas (tą przypiętą do static) lub na linki
relatywne.
/GrandParadePoland
www.grandparade.co.uk
Konfiguracja wtyczki
Najlepiej wybrać Use absolute url
i wpisać naszą domenę docelową
z lokalizacji static.
/GrandParadePoland
www.grandparade.co.uk
Poniżej trzeba wybrać opcję
Local Directory oraz podać
lokalizację naszego statica.
Konfiguracja wtyczki
Jeżeli jakieś pliki nie zostaną
automatycznie pobrane, można
podać je w Additional URLs.
W opisanym przykładzie trzeba dodać
link do strony z podziękowaniami,
ponieważ nie jest ona nigdzie
w kodzie podlinkowana
i web grabber jej nie znajdzie.
/GrandParadePoland
www.grandparade.co.uk
Generowanie plików statycznych
Można przystąpić do
generowania plików statycznych.
Czas generowania typowej
“strony domowej”
na standardowym hostingu
to ok. 30-40 sekund.
Gotowe! Prawie...
/GrandParadePoland
www.grandparade.co.uk
Weryfikacja i uzupełnienie brakujących plików
Po wygenerowaniu należy przeklikać stronę,
sprawdzić czy wszystko działa oraz sprawdzić
czy nie brakuje plików. W tym celu można
posłużyć się np narzędziem wbudowanym w
przeglądarkę Google Chrome.
W tym celu należy kliknąć prawym
przyciskiem na stronie, wybrać opcję inspect.
Otworzy się konsola, w której pojawią się
zakładki. Po wybraniu Network konieczne jest
odświeżenie strony, aby strona jeszcze raz
zaciągnęła pliki. Teraz należy sprawdzić
statusy, zwracając szczególną uwagę na 404 -
oznacza to że strona odwołuje się do
nieistniejącego pliku.
Jeżeli wystąpi taka sytuacja należy pełen adres
do tego pliku podać w ustawieniach wtyczki
w Additional URLs i ponownie wygenerować
stronę.
/GrandParadePoland
www.grandparade.co.uk
Strona 404
WordPress domyślnie obsługuje strony
błędów, a w tym najczęściej używaną
Not Found z statusem 404.
Po wygenerowaniu plików niestety
znika ta funkcjonalność.
Standardowe hostingi mają domyślnie
ustawione strony 404, ale da się podać
własną, zgodną z layoutem strony.
Czynności do wykonania:
1. utworzenie normalnej, nowej strony, np pod linkiem:
/not-found-404/
1. dodanie pliku .htaccess w lokalizacji /var/www/static z
wpisem:
ErrorDocument 404 /var/www/static/not-found-404/index.html
/GrandParadePoland
www.grandparade.co.uk
Update strony
Jeżeli wystąpi potrzeba zakutalizowania treści strony, jedyna różnicą
jest konieczność wciśnięcia przycisku
/GrandParadePoland
www.grandparade.co.uk
Dodatkową zaletą rozwiązania jest możliwość obejrzenia strony
przez wygenerowaniem na WordPressie.
Uwaga: Jeżeli usunięta zostanie np. jakaś strona i pliki zostaną
ponownie wygenerowane, strona ta nie zostanie usunięta ze static.
Należy to zrobić ręcznie.
Podsumowanie
Generowanie plików statycznych z WordPressa nie jest idealnym
rozwiązaniem, nie usunie wszystkich zagrożeń, nie uchroni przed
wyciekiem danych do FTP czy słabym hasłem. Natomiast pozwala
w znacznym stopniu zredukować ilość dziur. Pozwala też spać
spokojnie osobom, które rzadko zmieniają swoją stronę i nie
śledzą aktualizacji WordPressa. Ponadto zaprezentowane
rozwiązanie zmniejsza obciążenie zasobów serwera i przyśpiesza
w spektakularny sposób działanie strony.
/GrandParadePoland
www.grandparade.co.uk
Linki
Usługi dla stron statycznych
https://developers.facebook.com/docs/plugins/comments/
https://cse.google.com/
https://formspree.io/
Inne narzędzia
http://www.htaccessredirect.net/
Wtyczki
https://wordpress.org/plugins/simply-static/
https://wordpress.org/plugins/facebook-comments-plugin/
https://wordpress.org/plugins/wp-google-search/
Prezentacja “Statycznie czy dynamicznie?”
http://dziudek.pl/imprezy/statycznie-czy-dynamicznie-moja-prezentacja-z-ostatnich-wordupow
Gdzie pracuję
https://www.grandparade.co.uk/
http://wilnet.eu/
http://szkoleniacms.pl/
/GrandParadePoland
www.grandparade.co.uk
Dziękuję za uwagę.
/GrandParadePoland
www.grandparade.co.uk
Pytania?
Łukasz Wilczak
email: lukasz.wilczak@grandparade.co.uk
lukasz.wilczak@wilnet.eu
linkedin /lukaszwilczak
#wiosna 2017
/GrandParadePoland
www.grandparade.co.uk

More Related Content

What's hot

Jak ożenić WordPressa ze sklepem internetowym
Jak ożenić WordPressa ze sklepem internetowymJak ożenić WordPressa ze sklepem internetowym
Jak ożenić WordPressa ze sklepem internetowym
Tomasz Kołkiewicz
 
Jak nadążyć za światem front endu
Jak nadążyć za światem front enduJak nadążyć za światem front endu
Jak nadążyć za światem front endu
Tomasz Dziuda
 
Statycznie czy dynamicznie? v.2.0
Statycznie czy dynamicznie? v.2.0Statycznie czy dynamicznie? v.2.0
Statycznie czy dynamicznie? v.2.0
Tomasz Dziuda
 
Contributor Day - WordCamp Lublin 2017 - przegląd motywów
Contributor Day - WordCamp Lublin 2017 - przegląd motywówContributor Day - WordCamp Lublin 2017 - przegląd motywów
Contributor Day - WordCamp Lublin 2017 - przegląd motywów
Tomasz Dziuda
 
Optymalizacja WP pod SEO
Optymalizacja WP pod SEOOptymalizacja WP pod SEO
Optymalizacja WP pod SEO
Tomasz Kołkiewicz
 
Jak Twoja strona może wygenerować niespodziewane koszta
Jak Twoja strona może wygenerować niespodziewane kosztaJak Twoja strona może wygenerować niespodziewane koszta
Jak Twoja strona może wygenerować niespodziewane koszta
Tomasz Dziuda
 
Optymalizacja Wordpress jedną wtyczką - SEMURAI on AIR #1
Optymalizacja Wordpress jedną wtyczką - SEMURAI on AIR #1Optymalizacja Wordpress jedną wtyczką - SEMURAI on AIR #1
Optymalizacja Wordpress jedną wtyczką - SEMURAI on AIR #1
Tomasz Stopka
 
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp SilesiaJak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
Tomasz Dziuda
 
Electron + WordPress = ❤
Electron + WordPress = ❤Electron + WordPress = ❤
Electron + WordPress = ❤
Tomasz Dziuda
 
Content is King & linking is Queen. Królewskie reguły SEO w WordPressie
Content is King & linking is Queen. Królewskie reguły SEO w WordPressieContent is King & linking is Queen. Królewskie reguły SEO w WordPressie
Content is King & linking is Queen. Królewskie reguły SEO w WordPressie
Tomasz Kołkiewicz
 
Motywy Wordpressa Historia Prawdziwa
Motywy Wordpressa Historia PrawdziwaMotywy Wordpressa Historia Prawdziwa
Motywy Wordpressa Historia Prawdziwa
Tomasz Dziuda
 
Long Tail SEO w e-commerce
Long Tail SEO w e-commerceLong Tail SEO w e-commerce
Long Tail SEO w e-commerce
Tomasz Kołkiewicz
 
Statycznie czy dynamicznie?
Statycznie czy dynamicznie?Statycznie czy dynamicznie?
Statycznie czy dynamicznie?
Tomasz Dziuda
 
Word up łódź kwiecień 2015
Word up łódź   kwiecień 2015Word up łódź   kwiecień 2015
Word up łódź kwiecień 2015
Tomasz Dziuda
 
SEO w WordPressie. Słowa kluczowe - relikt, czy mus?
SEO w WordPressie. Słowa kluczowe - relikt, czy mus?SEO w WordPressie. Słowa kluczowe - relikt, czy mus?
SEO w WordPressie. Słowa kluczowe - relikt, czy mus?
Tomasz Kołkiewicz
 
Motywy dla WordPressa - historia prawdziwa - WordUp Warszawa
Motywy dla WordPressa - historia prawdziwa - WordUp WarszawaMotywy dla WordPressa - historia prawdziwa - WordUp Warszawa
Motywy dla WordPressa - historia prawdziwa - WordUp Warszawa
Tomasz Dziuda
 
10 trików w adwords, które pozwolą zaoszczędzić twój budżet
10 trików w adwords, które pozwolą zaoszczędzić twój budżet10 trików w adwords, które pozwolą zaoszczędzić twój budżet
10 trików w adwords, które pozwolą zaoszczędzić twój budżet
SeoStation.pl
 
Wprowadzenie do WP-API
Wprowadzenie do WP-APIWprowadzenie do WP-API
Wprowadzenie do WP-API
Tomasz Dziuda
 
Podstawy SEO
Podstawy SEOPodstawy SEO
Podstawy SEO
Paweł Harajda
 
Long Tail SEO w WordPressie
Long Tail SEO w WordPressieLong Tail SEO w WordPressie
Long Tail SEO w WordPressie
Tomasz Kołkiewicz
 

What's hot (20)

Jak ożenić WordPressa ze sklepem internetowym
Jak ożenić WordPressa ze sklepem internetowymJak ożenić WordPressa ze sklepem internetowym
Jak ożenić WordPressa ze sklepem internetowym
 
Jak nadążyć za światem front endu
Jak nadążyć za światem front enduJak nadążyć za światem front endu
Jak nadążyć za światem front endu
 
Statycznie czy dynamicznie? v.2.0
Statycznie czy dynamicznie? v.2.0Statycznie czy dynamicznie? v.2.0
Statycznie czy dynamicznie? v.2.0
 
Contributor Day - WordCamp Lublin 2017 - przegląd motywów
Contributor Day - WordCamp Lublin 2017 - przegląd motywówContributor Day - WordCamp Lublin 2017 - przegląd motywów
Contributor Day - WordCamp Lublin 2017 - przegląd motywów
 
Optymalizacja WP pod SEO
Optymalizacja WP pod SEOOptymalizacja WP pod SEO
Optymalizacja WP pod SEO
 
Jak Twoja strona może wygenerować niespodziewane koszta
Jak Twoja strona może wygenerować niespodziewane kosztaJak Twoja strona może wygenerować niespodziewane koszta
Jak Twoja strona może wygenerować niespodziewane koszta
 
Optymalizacja Wordpress jedną wtyczką - SEMURAI on AIR #1
Optymalizacja Wordpress jedną wtyczką - SEMURAI on AIR #1Optymalizacja Wordpress jedną wtyczką - SEMURAI on AIR #1
Optymalizacja Wordpress jedną wtyczką - SEMURAI on AIR #1
 
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp SilesiaJak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
 
Electron + WordPress = ❤
Electron + WordPress = ❤Electron + WordPress = ❤
Electron + WordPress = ❤
 
Content is King & linking is Queen. Królewskie reguły SEO w WordPressie
Content is King & linking is Queen. Królewskie reguły SEO w WordPressieContent is King & linking is Queen. Królewskie reguły SEO w WordPressie
Content is King & linking is Queen. Królewskie reguły SEO w WordPressie
 
Motywy Wordpressa Historia Prawdziwa
Motywy Wordpressa Historia PrawdziwaMotywy Wordpressa Historia Prawdziwa
Motywy Wordpressa Historia Prawdziwa
 
Long Tail SEO w e-commerce
Long Tail SEO w e-commerceLong Tail SEO w e-commerce
Long Tail SEO w e-commerce
 
Statycznie czy dynamicznie?
Statycznie czy dynamicznie?Statycznie czy dynamicznie?
Statycznie czy dynamicznie?
 
Word up łódź kwiecień 2015
Word up łódź   kwiecień 2015Word up łódź   kwiecień 2015
Word up łódź kwiecień 2015
 
SEO w WordPressie. Słowa kluczowe - relikt, czy mus?
SEO w WordPressie. Słowa kluczowe - relikt, czy mus?SEO w WordPressie. Słowa kluczowe - relikt, czy mus?
SEO w WordPressie. Słowa kluczowe - relikt, czy mus?
 
Motywy dla WordPressa - historia prawdziwa - WordUp Warszawa
Motywy dla WordPressa - historia prawdziwa - WordUp WarszawaMotywy dla WordPressa - historia prawdziwa - WordUp Warszawa
Motywy dla WordPressa - historia prawdziwa - WordUp Warszawa
 
10 trików w adwords, które pozwolą zaoszczędzić twój budżet
10 trików w adwords, które pozwolą zaoszczędzić twój budżet10 trików w adwords, które pozwolą zaoszczędzić twój budżet
10 trików w adwords, które pozwolą zaoszczędzić twój budżet
 
Wprowadzenie do WP-API
Wprowadzenie do WP-APIWprowadzenie do WP-API
Wprowadzenie do WP-API
 
Podstawy SEO
Podstawy SEOPodstawy SEO
Podstawy SEO
 
Long Tail SEO w WordPressie
Long Tail SEO w WordPressieLong Tail SEO w WordPressie
Long Tail SEO w WordPressie
 

Similar to Bezpieczna i szybka strona statyczna z funkcjonalnością Wordpressa. Czy to możliwe?

WordPress dla początkujących
WordPress dla początkującychWordPress dla początkujących
WordPress dla początkujących
Katarzyna Javaheri-Szpak
 
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WPWordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Mariusz Szatkowski
 
Wydajny frontend 2023
Wydajny frontend 2023Wydajny frontend 2023
Wydajny frontend 2023
Bartłomiej Miś
 
Wydajny frontend 2024 - nowości optymalizacyjne
Wydajny frontend 2024 - nowości optymalizacyjneWydajny frontend 2024 - nowości optymalizacyjne
Wydajny frontend 2024 - nowości optymalizacyjne
Bartłomiej Miś
 
SEO Surgery Polska #1 by Łukasz Rogala
SEO Surgery Polska #1 by Łukasz RogalaSEO Surgery Polska #1 by Łukasz Rogala
SEO Surgery Polska #1 by Łukasz Rogala
Anton Shulke
 
WordUp Warszawa - Wordpress dla początkujących
WordUp Warszawa - Wordpress dla początkującychWordUp Warszawa - Wordpress dla początkujących
WordUp Warszawa - Wordpress dla początkujących
Tomasz Dziuda
 
Wtyczkowe Kompendium - WordUp Łódź #12
Wtyczkowe Kompendium - WordUp Łódź #12Wtyczkowe Kompendium - WordUp Łódź #12
Wtyczkowe Kompendium - WordUp Łódź #12
Tomasz Dziuda
 
Wtyczkowe Kompendium - WordUp Lublin
Wtyczkowe Kompendium - WordUp LublinWtyczkowe Kompendium - WordUp Lublin
Wtyczkowe Kompendium - WordUp Lublin
Tomasz Dziuda
 
Wtyczkowe kompendium - WordUp Warszawa
Wtyczkowe kompendium - WordUp WarszawaWtyczkowe kompendium - WordUp Warszawa
Wtyczkowe kompendium - WordUp Warszawa
Tomasz Dziuda
 
WordUp Kraków - maj 2015
WordUp Kraków - maj 2015WordUp Kraków - maj 2015
WordUp Kraków - maj 2015
Tomasz Dziuda
 
Social media training 26.10.10_wk
Social media training 26.10.10_wkSocial media training 26.10.10_wk
Social media training 26.10.10_wk
Małgorzata Nowak
 
Wszystko, co chciałbyś wiedzieć 
o WooCommerce, ale bałeś się zapytać
Wszystko, co chciałbyś wiedzieć 
o WooCommerce, ale bałeś się zapytaćWszystko, co chciałbyś wiedzieć 
o WooCommerce, ale bałeś się zapytać
Wszystko, co chciałbyś wiedzieć 
o WooCommerce, ale bałeś się zapytać
Maciej Swoboda
 
Google App Engine i Google Play Services w Twoich aplikacjach
Google App Engine i Google Play Services w Twoich aplikacjachGoogle App Engine i Google Play Services w Twoich aplikacjach
Google App Engine i Google Play Services w Twoich aplikacjach
3camp
 
WP-API - teoria i praktyka - WordUp Trójmiasto #2
WP-API - teoria i praktyka - WordUp Trójmiasto #2WP-API - teoria i praktyka - WordUp Trójmiasto #2
WP-API - teoria i praktyka - WordUp Trójmiasto #2
Tomasz Dziuda
 
Google webmaster tools - Poznaj swojego przyjaciela!
Google webmaster tools - Poznaj swojego przyjaciela!Google webmaster tools - Poznaj swojego przyjaciela!
Google webmaster tools - Poznaj swojego przyjaciela!
Tomasz Stopka
 
WP-API - teoria i praktyka - WordUp Łódź #4
WP-API - teoria i praktyka - WordUp Łódź #4WP-API - teoria i praktyka - WordUp Łódź #4
WP-API - teoria i praktyka - WordUp Łódź #4
Tomasz Dziuda
 
Łukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski Optymalizacja on page seoŁukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski
 
Przydatne narzędzia pozycjonera / Arkadiusz Podlaski
Przydatne narzędzia pozycjonera / Arkadiusz PodlaskiPrzydatne narzędzia pozycjonera / Arkadiusz Podlaski
Przydatne narzędzia pozycjonera / Arkadiusz Podlaski
Darmowe Ebooki
 
Zaplecze w seo. O teroii i praktyce ...
Zaplecze w seo. O teroii i praktyce ...Zaplecze w seo. O teroii i praktyce ...
Zaplecze w seo. O teroii i praktyce ...
Silesia SEM
 
Przydatne narzędzia pozycjonera
Przydatne narzędzia pozycjoneraPrzydatne narzędzia pozycjonera
Przydatne narzędzia pozycjonera
Ebooki za darmo
 

Similar to Bezpieczna i szybka strona statyczna z funkcjonalnością Wordpressa. Czy to możliwe? (20)

WordPress dla początkujących
WordPress dla początkującychWordPress dla początkujących
WordPress dla początkujących
 
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WPWordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
 
Wydajny frontend 2023
Wydajny frontend 2023Wydajny frontend 2023
Wydajny frontend 2023
 
Wydajny frontend 2024 - nowości optymalizacyjne
Wydajny frontend 2024 - nowości optymalizacyjneWydajny frontend 2024 - nowości optymalizacyjne
Wydajny frontend 2024 - nowości optymalizacyjne
 
SEO Surgery Polska #1 by Łukasz Rogala
SEO Surgery Polska #1 by Łukasz RogalaSEO Surgery Polska #1 by Łukasz Rogala
SEO Surgery Polska #1 by Łukasz Rogala
 
WordUp Warszawa - Wordpress dla początkujących
WordUp Warszawa - Wordpress dla początkującychWordUp Warszawa - Wordpress dla początkujących
WordUp Warszawa - Wordpress dla początkujących
 
Wtyczkowe Kompendium - WordUp Łódź #12
Wtyczkowe Kompendium - WordUp Łódź #12Wtyczkowe Kompendium - WordUp Łódź #12
Wtyczkowe Kompendium - WordUp Łódź #12
 
Wtyczkowe Kompendium - WordUp Lublin
Wtyczkowe Kompendium - WordUp LublinWtyczkowe Kompendium - WordUp Lublin
Wtyczkowe Kompendium - WordUp Lublin
 
Wtyczkowe kompendium - WordUp Warszawa
Wtyczkowe kompendium - WordUp WarszawaWtyczkowe kompendium - WordUp Warszawa
Wtyczkowe kompendium - WordUp Warszawa
 
WordUp Kraków - maj 2015
WordUp Kraków - maj 2015WordUp Kraków - maj 2015
WordUp Kraków - maj 2015
 
Social media training 26.10.10_wk
Social media training 26.10.10_wkSocial media training 26.10.10_wk
Social media training 26.10.10_wk
 
Wszystko, co chciałbyś wiedzieć 
o WooCommerce, ale bałeś się zapytać
Wszystko, co chciałbyś wiedzieć 
o WooCommerce, ale bałeś się zapytaćWszystko, co chciałbyś wiedzieć 
o WooCommerce, ale bałeś się zapytać
Wszystko, co chciałbyś wiedzieć 
o WooCommerce, ale bałeś się zapytać
 
Google App Engine i Google Play Services w Twoich aplikacjach
Google App Engine i Google Play Services w Twoich aplikacjachGoogle App Engine i Google Play Services w Twoich aplikacjach
Google App Engine i Google Play Services w Twoich aplikacjach
 
WP-API - teoria i praktyka - WordUp Trójmiasto #2
WP-API - teoria i praktyka - WordUp Trójmiasto #2WP-API - teoria i praktyka - WordUp Trójmiasto #2
WP-API - teoria i praktyka - WordUp Trójmiasto #2
 
Google webmaster tools - Poznaj swojego przyjaciela!
Google webmaster tools - Poznaj swojego przyjaciela!Google webmaster tools - Poznaj swojego przyjaciela!
Google webmaster tools - Poznaj swojego przyjaciela!
 
WP-API - teoria i praktyka - WordUp Łódź #4
WP-API - teoria i praktyka - WordUp Łódź #4WP-API - teoria i praktyka - WordUp Łódź #4
WP-API - teoria i praktyka - WordUp Łódź #4
 
Łukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski Optymalizacja on page seoŁukasz Trześniewski Optymalizacja on page seo
Łukasz Trześniewski Optymalizacja on page seo
 
Przydatne narzędzia pozycjonera / Arkadiusz Podlaski
Przydatne narzędzia pozycjonera / Arkadiusz PodlaskiPrzydatne narzędzia pozycjonera / Arkadiusz Podlaski
Przydatne narzędzia pozycjonera / Arkadiusz Podlaski
 
Zaplecze w seo. O teroii i praktyce ...
Zaplecze w seo. O teroii i praktyce ...Zaplecze w seo. O teroii i praktyce ...
Zaplecze w seo. O teroii i praktyce ...
 
Przydatne narzędzia pozycjonera
Przydatne narzędzia pozycjoneraPrzydatne narzędzia pozycjonera
Przydatne narzędzia pozycjonera
 

Bezpieczna i szybka strona statyczna z funkcjonalnością Wordpressa. Czy to możliwe?

  • 1. Bezpieczna i szybka strona statyczna z funkcjonalnością Wordpressa. Czy to możliwe? Łukasz Wilczak /GrandParadePoland #wiosna 2017
  • 2. Agenda • Wstęp • Bezpiecznie i szybko, czyli statyczne pliki • Warunki • Konfiguracja środowiska (serwer) • Przygotowanie strony – elementy dynamiczne • Formularz kontaktowy • Komentarze • Wyszukiwarka /GrandParadePoland www.grandparade.co.uk • Zabezpieczenie WordPressa (htaccess) • Wtyczka Simply Static • Konfiguracja wtyczki • Generowanie plików statycznych • Weryfikacja i uzupełnienie brakujących plików • Strona 404 • Update strony • Podsumowanie • Linki
  • 3. Wstęp Mimo, że WordPress z założenia jest platformą do budowania blogów, obecnie wiele stron na tym silniku to po prostu "strony firmowe". Składają się one z strony głównej, kilku podstron typu oferta, portfolio, aktualności, o nas czy kontakt. I takie strony niewielkim nakładem pracy i bez modyfikacji kodu możemy zabezpieczyć i przyspieszyć. /GrandParadePoland www.grandparade.co.uk
  • 4. Bezpiecznie i szybko, czyli statyczne pliki BEZPIECZEŃSTWO Strona statyczna nie posiada kilku mankamentów, które ma Wordpress: • dziury w wtyczkach I motywach • dziury w core WP • dziury w PHP, MySQL • wyciek lub słabe dane do logowania do panelu • ataki brute force, xss, SQL injection SZYBKOŚĆ Pliki statyczne nie potrzebują zasobów serwera do: ● interpretacji PHP ● dostępu do bazy danych ● setek operacji I/O Na przykładzie bezpiecznywp.pl dla strony głównej (index.html) ● WordPress: 300 ms ● Plik statyczny: 30 ms /GrandParadePoland www.grandparade.co.uk
  • 5. Warunki • Strona na WordPress nie może być duża - do kilkuset artykułów / stron • Dynamiczne elementy muszą mieć swoje odpowiedniki dostępne dla stron statycznych. Na szczęście najczęściej używane funkcjonalności dla stron firmowych je mają. Należą do nich formularze, komentarze, ankiety czy wyszukiwarki. • Nie powinno być zbyt dużej liczby osób zarządzających stroną i zbyt częstych aktualizacji treści. Nie jest to warunek konieczny, ale wymaga pewnej koordynacji. • Brak rejestracji / logowania użytkowników • Rezygnujemy z pingback, trackback /GrandParadePoland www.grandparade.co.uk
  • 6. Konfiguracja środowiska (serwer) Potrzebne są dwie lokalizacje na jednym serwerze – jedna dla WordPressa, jedna dla strony statycznej. WordPress niedostępny z zewnątrz, natomiast strona statyczna pod docelową domeną. Istotne jest, żeby skrypt WordPressa miał dostęp do tej drugiej lokalizacji. Przykładowo: Pod pierwszą z nich uruchamiamy WordPressa, drugą zostawiamy pustą. /GrandParadePoland www.grandparade.co.uk
  • 7. Przygotowanie strony – elementy dynamiczne Funkcjonalności server-side należy podmienić na usługi zewnętrzne. Trzy najczęściej używane elementy dynamiczne w stronach firmowych dynamiczne to: Formularz kontaktowy Komentarze Wyszukiwarka /GrandParadePoland www.grandparade.co.uk
  • 8. Formularz kontaktowy Usługa: https://formspree.io/ Plugin: bez pluginu 1. Należy dodać stronę z podziękowaniem pod adresem http://bezpiecznywp.pl/contact-thank-you/ 2. Na stronie kontaktu w edytorze tekstowym w odpowiednim miejscu trzeba wkleić kod: <form action="http://formspree.io/lukasz.wilczak@wilnet.eu" method="POST"> <input name="_next" type="hidden" value="http://bezpiecznywp.pl/contact- thank-you/" /> <input name="subject" type="text" placeholder="Subject" /> <input name="email" type="email" placeholder="Your email" /> <textarea name="message" placeholder="Your message"></textarea> <button type="submit">Send</button> </form> 1. Ostatnim krokiem jest odblokowanie wysyłki poprzez wysłanie pierwszego formularza. Wtedy na zdefiniowaną skrzynkę przyjdzie mail aktywacyjny. /GrandParadePoland www.grandparade.co.uk
  • 9. Komentarze Usługa: https://developers.facebook.com/docs/plugins/comments/ Plugin: https://wordpress.org/plugins/facebook-comments-plugin/ 1. Pierwszą rzeczą jest wyłączenie wbudowanego systemu komentarzy. Można to zrobić za pomocą wtyczki: https://wordpress.org/plugins/disabl e-comments/ 2. Do uruchomienia usługi konieczne jest stworzenie aplikacji facebooka. W ustawieniach wtyczki można odszukać szybką instrukcję jak to zrobić. 3. Po uzyskaniu Facebook App ID można przystąpić do konfiguracji. W naszym przypadku (generowania stron statycznych) komentarze działają przy następujących ustawieniach (po prawej) 4. Domyślnie wtyczka aktywuje komentarze na wszystkich stronach i wpisach. W ustawieniach można je wyłączyć dla stron, lub w edycji konkretnego wpisu czy strony /GrandParadePoland www.grandparade.co.uk
  • 10. Wyszukiwarka Usługa: https://cse.google.com/ Plugin: https://wordpress.org/plugins/wp-google-search/ 1. Konieczna jest rejestracja Google Custom Search Engine i pobranie Search Engine ID. Uwaga, należy w konfiguracji podać docelową domenę, czyli tą pod którą będzie statyczna wersja, a w części “Look and feel” wybrać “Overlay”. W zakładce “Customize” można dostosować wygląd pola wyszukiwania zgodnie z szablonem WordPressa. /GrandParadePoland www.grandparade.co.uk
  • 11. Wyszukiwarka 2. W ustawieniach pluginu trzeba podać Search Engine ID Aby poprawnie wyświetlane były wyniki wyszukiwania konieczne jest zaznaczenie “Support Overlay Display” W przypadku “Overlay” Search Page Target URL nie jest już używane 3. Teraz można już dodawać widget “WP Google Search (WGS) gdzie chcemy. UWAGA! 1. Custom Search Engine potrzebuje około doby aby zindeksować naszą stronę. Zatem wyniki wyszukiwania nie będą dostępne od razu. 2. Niestety oprócz wyników wyszukiwania zostaną nam wyświetlone reklamy Ads by Google /GrandParadePoland www.grandparade.co.uk
  • 12. Zabezpieczenie WordPressa (.htaccess) WordPress w naszej konfiguracji jest tylko generatorem, do którego powinno być dostępu z zewnątrz dla innych użytkowników i robotów. Możemy zatem użyć basic access authorization i ustawić nazwę usera i hasło. Ponieważ wtyczka Simply Static działa na zasadzie web grabbera, również jej trzeba zapewnić dostęp. Możemy ją autoryzować poprzez IP. Na koniec konieczne jest dodanie instrukcji Satisfy Any, która pozwoli na dostęp jeżeli jeden z powyższych warunków będzie spełniony. .htaccess //tutaj część standardowa z WP ... AuthType Basic AuthUserFile /home/user/.htpasswd AuthName "Ops..." require valid-user ErrorDocument 401 "Unauthorized Access" order allow,deny deny from all allow from 185.23.21.239 allow from 94.6.123.11 Satisfy Any UWAGA: Polecam generator wpisów .htaccess http://www.htaccessredirect.net/ /GrandParadePoland www.grandparade.co.uk
  • 13. Wtyczka Simply Static Plugin: https://wordpress.org/plugins/simply-static/ Jak ona działa? Jest to przystosowany pod WordPressa web grabber. Łączy się do frontu strony i poruszając się po wewnętrznych linkach zapisuje strony jako pliki HTML. Podmienia w źródle HTML domenę z WordPressa na wskazaną przez nas (tą przypiętą do static) lub na linki relatywne. /GrandParadePoland www.grandparade.co.uk
  • 14. Konfiguracja wtyczki Najlepiej wybrać Use absolute url i wpisać naszą domenę docelową z lokalizacji static. /GrandParadePoland www.grandparade.co.uk Poniżej trzeba wybrać opcję Local Directory oraz podać lokalizację naszego statica.
  • 15. Konfiguracja wtyczki Jeżeli jakieś pliki nie zostaną automatycznie pobrane, można podać je w Additional URLs. W opisanym przykładzie trzeba dodać link do strony z podziękowaniami, ponieważ nie jest ona nigdzie w kodzie podlinkowana i web grabber jej nie znajdzie. /GrandParadePoland www.grandparade.co.uk
  • 16. Generowanie plików statycznych Można przystąpić do generowania plików statycznych. Czas generowania typowej “strony domowej” na standardowym hostingu to ok. 30-40 sekund. Gotowe! Prawie... /GrandParadePoland www.grandparade.co.uk
  • 17. Weryfikacja i uzupełnienie brakujących plików Po wygenerowaniu należy przeklikać stronę, sprawdzić czy wszystko działa oraz sprawdzić czy nie brakuje plików. W tym celu można posłużyć się np narzędziem wbudowanym w przeglądarkę Google Chrome. W tym celu należy kliknąć prawym przyciskiem na stronie, wybrać opcję inspect. Otworzy się konsola, w której pojawią się zakładki. Po wybraniu Network konieczne jest odświeżenie strony, aby strona jeszcze raz zaciągnęła pliki. Teraz należy sprawdzić statusy, zwracając szczególną uwagę na 404 - oznacza to że strona odwołuje się do nieistniejącego pliku. Jeżeli wystąpi taka sytuacja należy pełen adres do tego pliku podać w ustawieniach wtyczki w Additional URLs i ponownie wygenerować stronę. /GrandParadePoland www.grandparade.co.uk
  • 18. Strona 404 WordPress domyślnie obsługuje strony błędów, a w tym najczęściej używaną Not Found z statusem 404. Po wygenerowaniu plików niestety znika ta funkcjonalność. Standardowe hostingi mają domyślnie ustawione strony 404, ale da się podać własną, zgodną z layoutem strony. Czynności do wykonania: 1. utworzenie normalnej, nowej strony, np pod linkiem: /not-found-404/ 1. dodanie pliku .htaccess w lokalizacji /var/www/static z wpisem: ErrorDocument 404 /var/www/static/not-found-404/index.html /GrandParadePoland www.grandparade.co.uk
  • 19. Update strony Jeżeli wystąpi potrzeba zakutalizowania treści strony, jedyna różnicą jest konieczność wciśnięcia przycisku /GrandParadePoland www.grandparade.co.uk Dodatkową zaletą rozwiązania jest możliwość obejrzenia strony przez wygenerowaniem na WordPressie. Uwaga: Jeżeli usunięta zostanie np. jakaś strona i pliki zostaną ponownie wygenerowane, strona ta nie zostanie usunięta ze static. Należy to zrobić ręcznie.
  • 20. Podsumowanie Generowanie plików statycznych z WordPressa nie jest idealnym rozwiązaniem, nie usunie wszystkich zagrożeń, nie uchroni przed wyciekiem danych do FTP czy słabym hasłem. Natomiast pozwala w znacznym stopniu zredukować ilość dziur. Pozwala też spać spokojnie osobom, które rzadko zmieniają swoją stronę i nie śledzą aktualizacji WordPressa. Ponadto zaprezentowane rozwiązanie zmniejsza obciążenie zasobów serwera i przyśpiesza w spektakularny sposób działanie strony. /GrandParadePoland www.grandparade.co.uk
  • 21. Linki Usługi dla stron statycznych https://developers.facebook.com/docs/plugins/comments/ https://cse.google.com/ https://formspree.io/ Inne narzędzia http://www.htaccessredirect.net/ Wtyczki https://wordpress.org/plugins/simply-static/ https://wordpress.org/plugins/facebook-comments-plugin/ https://wordpress.org/plugins/wp-google-search/ Prezentacja “Statycznie czy dynamicznie?” http://dziudek.pl/imprezy/statycznie-czy-dynamicznie-moja-prezentacja-z-ostatnich-wordupow Gdzie pracuję https://www.grandparade.co.uk/ http://wilnet.eu/ http://szkoleniacms.pl/ /GrandParadePoland www.grandparade.co.uk
  • 23. Łukasz Wilczak email: lukasz.wilczak@grandparade.co.uk lukasz.wilczak@wilnet.eu linkedin /lukaszwilczak #wiosna 2017 /GrandParadePoland www.grandparade.co.uk