Powrót do kategorii
Frontend
tagi
motyw, skórka, wordpress,

WordPress – dobre praktyki tworzenia skórki

GOGO.Developer, 23/06/2017

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.

Zarządzanie motywami w WordPress
Zarządzanie motywami w WordPress

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ć metodydzię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  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:

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.

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ć:

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:

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:

 

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.

Podobne artykuły

WordPress – Tworzenie motywu potomnego

Stwórz motyw potomny aby bezpiecznie edytować stylistykę projektu!

Tworzenie listy powiązanych wpisów w WordPress

Tworzenie własnego plug-inu podpowiadającego podobne wpisy

Poznajmy się
Poznajmy się
Chcesz porozmawiać o start-upach, projektach lub programowaniu?

GOGOmedia Sp. z o.o.
ul. Klimczaka 1
02-797 Warszawa

+48 22 378 47 27
GOGOmedia
GOGOmedia
Internet Software House

Jesteśmy internetową firmą technologiczną, dostarczamy kompletne rozwiązania informatyczne z zakresu web aplikacji. Kompleksowo obsługujemy klientów z różnych sektorów biznesu w zakresie dedykowanego oprogramowania. Prowadzimy szkolenia, doradzamy, wykonujemy specjalistyczne audyty i dzielimy się zdobytą przez lata wiedzą. Dla wielu jesteśmy partnerem, który pomaga osiągać wyznaczone cele biznesowe w najbardziej optymalny sposób.

Polecamy
Polecamy
narzędzia wspierające naszą codzienną pracę
  • New Relic
  • CloudFlare
  • JIRA
  • Bamboo
  • Axure
  • Zendesk
  • Microsoft Project