Popularność WordPressa sprawia, że coraz więcej Front-End Developer’ów postanawia spróbować swoich sił w tworzeniu motywów na ten system. Jako świeża osoba w tej dziedzinie powinniśmy poznać wiele czynników, dzięki którym stworzymy profesjonalny motyw przyjazny dla użytkowników. Sprawdźmy dobre praktyki tworzenia skórek dla CMS WordPress, które mam nadzieję, zmniejszą problemy i pozytywnie wpłyną na bezpieczeństwo naszego serwisu.

Lektura na początek

Dobrym pomysłem na początek jest instalacja systemu WordPress w środowisku developerskim (lokalnie na komputerze) i próba stworzenia swojego bloga. Dzięki temu zyskamy wiedzę na temat jego obsługi i wbudowanych funkcjonalności.  W następnym kroku polecam przejrzeć kodeks dostępnego na stronie codex.wordpress.org oraz przejrzenie (kodu źródłowego) najnowszego motywu dołączonego do instalacji CMS’a (w trakcie pisania jest to „Twenty Seventeen”) – codex.wordpress.org/Twenty_Seventeen.

Twórz i modyfikuj pliki jedynie w katalogu skórki

Wychodzenie poza bezpieczną ścieżkę wp-content/themes wiąże się automatycznie z utratą możliwości aktualizacji silnika (nadpisanie zmian). Ten punkt dotyczy również zmian we wtyczkach, które są objęte aktualizacją autora. Może to spowodować liczne problemy z bezpieczeństwem i stabilnością. Chcąc sprawić, aby inne komponenty WordPress’a dobrze współgrały z naszym motywem, można zastosować metody, dzięki którym jesteśmy w stanie zmodyfikować praktycznie wszystko.

Fallback

Tworząc motyw wymagający pewnych wtyczek, powinnyśmy upewnić się o ich istnieniu. Dzięki zastosowaniu warunku function_exists() lub class_exists() zmniejszamy ryzyko błędów na stronie, które w najgorszym przypadku zablokują wczytywanie strony bez wyświetlenia informacji o problemie.

Dołączanie plików CSS i JS w WordPress

Tworząc stronę na statycznych plikach, umieszczamy tagi z linkami do plików w odpowiednim miejscu HTML’a. W przypadku systemu WordPress istnieją wbudowane funkcje takie jak wp_enqueue_style  i wp_enqueue_script pozwalające dodać pliki bardziej elastycznie, w odpowiednim miejscu dokumentu HTML. Dodatkowo możemy dołączyć te funkcje, w funkcji add_action( 'wp_enqueue_scripts’, '…’ ).

function customTheme_jscss() {

    // Theme CSS
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    // Theme JS
    wp_enqueue_script( 'main', get_theme_file_uri( '/assets/js/scripts.min.js' ), '' , '1.0', true );

}
add_action( 'wp_enqueue_scripts', 'customTheme_jscss' );

Pamiętajmy, aby dołączać jak najmniej plików, najlepiej tylko po jednym. Wtyczki zapewne będą dodatkowo podpinać swoje pliki, więc czas wczytywania strony się odrobinę wydłuży.

Plusy wynikające z użycia tej metody:

• Zmniejszenie ryzyka wielokrotnego załadowania tego samego pliku
• Zachowanie zależności dla skryptów

Funkcja wp_enqueue_script przyjmuje parametry $handle, $src, $deps, $ver i $in_footer. Zmienna $deps jest tablicą, w której możemy określić nazwy skryptów, które zostaną załadowana przed naszym skryptem.

• Intuicyjne tworzenie tłumaczeń
• Dodanie wersji plików dla pamięci podręcznej

Wczytywanie plików na każdej stronie

Przeznaczenie części tworzonych przez nas stylów bądź skryptów będzie dotyczyła jedynie pojedynczych stron, bądź panelu administracyjnego. Nie ma potrzeby dołączać wszystkich plików zwykłym użytkownikom serwisu. Powodujemy jedynie opóźnienia wczytywania strony, zmniejszamy wydajność serwera i poziom bezpieczeństwa.

Zastosujmy instrukcje warunkowe z zastosowaniem funkcji is_admin(), get_post_type() i current_user_can(’administrator’).

if (current_user_can('administrator')) {
    wp_enqueue_script( 'addon', get_theme_file_uri( '/assets/js/addon.js' ), '' , '1.0', true );
}

Powyższy kod dołączy plik addon.js, jeśli użytkownik ma prawa administratora.

Ścieżki do plików

Używanie sztywnych ścieżek w motywie pozbawia go elastyczności (dotyczy to również używanie relatywnych ścieżek).  Z pomocą przychodzą tutaj funkcje wbudowane w silnik WordPress’a, które zwracają ścieżki do odpowiednich katalogów. Pełna lista funkcji dostępna jest na stronie codex.wordpress.org/Determining_Plugin_and_Content_Directories.

Przykładowe użycie:

function add_img($title) { ?>
  <img class="image" src="<?php echo get_template_directory_uri() . '/assets/images/' . $title;?>">
<?php };

Twórz motyw według hierarchii

Spoglądając do kodu źródłowego motywu  „Twenty Seventeen” dołączonego do instalacji WordPress’a, widać nazwy plików, które łatwo rozpoznać:

• index.php
• footer.php
• header.php
• itd.

Na stronie wphierarchy.com przedstawiono relacje poszczególnych plików między sobą.  Wordpress zaczynając od lewej strony, sprawdza, który plik ma czytać dla danej strony. Mając to na uwadze, możemy z łatwością wyświetlać odpowiednie widoki stron bez konieczności tworzenia instrukcji warunkowych dla każdego widoku.

Takie działanie będzie zmuszało nas do zamieszczenia na początku i na końcu takiego pliku funkcji get_header() i get_footer().

Testowanie motywu

W miarę powiększania motywu o dodatkowe funkcjonalności może się okazać, że nas serwis już nie jest tak szybki, jak kiedyś. Warto zastosować działania, które wyeliminują ten problem. W środowisku developerskim zalecam dodanie wtyczki Debug Bar pozwalającej przyjrzeć się działaniom wykonywanym przez CMS. Pozwala uzyskać łatwy podgląd do informacji takich jak:

• ilość i czas zapytań oraz zwracane obiekty
• obiekty znajdujące się w pamięci podręcznej WordPress’a
• błędy i ostrzeżenia

Do prawidłowego funkcjonowania wtyczki potrzeba dodać/zmienić  w pliku wp-config.php dwie linijki.

define( 'WP_DEBUG', true );
define( 'SAVEQUERIES', true );

Ponadto dzięki dodatkowym modyfikacjom dla Debug Bar dostępnym w repozytorium, można znacząco poszerzyć jej działanie.

Testowanie treści

Po utworzeniu i przetestowaniu motywu na wielu przeglądarkach i urządzeniach wciąż mogą wyniknąć problemy związane z wyświetlaniem różnego rodzaju treści. Przyczyną jest tutaj brak dummy content’u testującego zachowanie elementów. Z pomocą przychodzi zestaw wptest.io, dzięki któremu zaimportujemy szereg postów, stron, komentarzy i innych przydatnych danych pozwalających przetestować odporność naszej strony na wyświetlanie różnego rodzaju treści. Przykładowe importowane dane można sprawdzić na stronie wptest.io/demo.

Importowanie dummy content’u na naszej stronie jest bardzo proste:

• Pobieramy archiwum ze strony projektu, a następnie je wypakowujemy.
• Na stronie przechodzimy do Kokpit>Narzędzie>Import, a następnie instalujemy system „WordPress”.
• Klikamy „Uruchom Importer” i po wybraniu pliku „wptest.xml” naciskamy przycisk „Wyślij plik na serwer i zaimportuj go”.

Bezpieczeństwo

Żaden serwis nie jest w 100% bezpieczny, ale ryzyko dzięki roztropnym planowaniom i działaniom da się zminimalizować. Warto zainstalować wtyczki skanujące nasz motyw w środowisku developerskim. Częściowo wykrywają niezgodności w plikach php, których naprawienie z pewnością podniesie bezpieczeństwo. Przykładowymi wtyczkami są Theme Authenticity Checker (TAC) albo Theme Checker. Warto również zapoznać się z artykułem na stronie developer.wordpress.org znacząco poszerzający wiedzę na ten temat.

Więcej informacji na temat bezpieczeństwa w WordPress’ie można przeczytać we wcześniejszym wpisie: gogomedia.pl/wordpress-jak-prosto-zwiekszyc-bezpieczenstwo-strony

Podsumowanie

Poruszany temat jest dopiero czubkiem góry lodowej dokumentacji CMS WordPress. Istnieje mnóstwo przydatnych i ułatwiających pracę funkcji i rozwiązań nieporuszanych we wpisie. Najlepszym sposobem, aby je poznać to praktyka oraz uczenie się od mistrzów, czyli gotowych motywów, których kod źródłowy jedynie czeka na przeanalizowanie.