wordpress

Budowa motywu w WordPressie

WordPress to najpopularniejszy system CMS na świecie. Stworzenie strony internetowej przy jego użyciu jest naprawdę proste. Zazwyczaj opiera się na instalacji gotowego motywu (szablonu) i wypełnieniu go treścią z poziomu panelu administratora. Na oficjalnej stronie projektu można znaleźć setki darmowych motywów do pobrania. Wiele serwisów oferuje też płatne, ale za to bardzo profesjonalne szablony, np. themeforest.net/category/wordpress.

ZALETY I WADY GOTOWYCH MOTYWÓW

Zalety to głównie niskie koszty oraz czas realizacji.

Cena profesjonalnego motywu waha się pomiędzy 200 zł a 500 zł. Czyli można rzec, że na każdą kieszeń. Ale są oczywiście droższe. To zależy też od tego, czy chcemy kupić motyw na wyłączność, wtedy cena wzrośnie nawet o parę tysięcy złotych. A jeśli nie chcemy ponieść żadnych kosztów, to pozostają oczywiście darmowe “skórki” :).

Uruchomienie strony internetowej opartej o silnik WordPressa (przy minimalnej wiedzy informatycznej) zajmie nam dosłownie kilka minut (zakładając, że mamy już skonfigurowany i działający hosting). Są również firmy, takie jak nazwa.pl, które oferują WordPress w pakiecie, a więc nie musimy nawet używać klienta FTP, żeby samemu wgrać pliki na serwer lub skonfigurować dostęp do bazy danych. Instalacja następuje automatycznie i można nią zarządzać w panelu Active.admin. Warto wspomnieć, że dzięki gwarantowanej mocy 20 GHz i 8 GB pamięci RAM, które nazwa.pl przydziela dla każdej pojedynczej usługi CloudHosting WordPress, możemy być pewni, że nasza strona będzie działała błyskawicznie.

Wracając do kwestii motywów – większość darmowych “gotowców” może nie przypaść nam do gustu ze względu na “szablonową” strukturę. Zazwyczaj wymagają sporo korekt wizualnych, więc trzeba je samemu dostosować lub zlecić to komuś innemu. Posiadają też wiele wad dotyczących słabej optymalizacji pod kątem wydajności, nieaktualnych bibliotek JS, a w konsekwencji luk w bezpieczeństwie. Z kolei płatne, o ile są zrobione na wysokim poziomie, to ich CMS-y wyposażone są w potężne kreatory stron (tzw. buildery), które działają wolno i topornie. Z jednej strony można konfigurować praktycznie wszystko: kolorystykę, style czcionek, edytować poszczególne bloki i rozmieszczać je w layoucie metodą “przeciągnij i upuść” (drag & drop), a z drugiej strony narzędzia te są tak monolityczne, że edycja źródła jest wręcz niemożliwa. Zazwyczaj blokują też możliwość przełączenia się na “edytor kodu”. Na pewno nie są to przyjazne środowiska dla programistów :), za to przyjazne dla użytkowników bez wiedzy informatycznej.

W świecie programowania znajomość tworzenia szablonów do WordPressa jest na pewno cenna i przydatna. Zazwyczaj do każdego projektu musimy podejść indywidualnie i dostosować go do oczekiwań klienta. Poza tym możemy dobrać odpowiedni stack technologiczny (komponenty, biblioteki etc.) i tym samym zbudować stronę lekką, zoptymalizowaną pod kątem wydajności i SEO.

TWORZENIE NOWEGO MOTYWU “OD ZERA”


1. ORGANIZOWANIE PLIKÓW I KATALOGÓW MOTYWU

Motywy w WordPressie przechowywane są w katalogu /wp-content/themes/. Jak widać na poniższym obrazku każdy motyw ma swój osobny katalog.

katalog z motywami wordpress

Budowę nowego motywu zaczniemy więc od utworzenia nowego katalogu z dowolną nazwą (np. geekster). W katalogu tym zapisz trzy podstawowe pliki, które definiują motyw:

  • index.php – główny plik szablonu,
  • screenshot.png – obrazek przedstawiający wygląd motywu,
  • style.css – główny arkusz stylów, zawiera informacje o motywie, np.:

To już wystarczy, aby nasz nowy motyw był widoczny w panelu admina w zakładce “Wygląd” -> “Motywy”.

wordpress nowy motyw

Kiedy klikniesz w obrazek motywu, wyświetli się część informacyjna, która jest w pliku style.css (screen poniżej). Zaczyna się coś dziać ;). Włącz nowy motyw. Odśwież front strony i zobacz efekt. Nowy motyw jest aktywny, ale na razie pusty, bo plik index.php nie ma zawartości. Na początek możesz zapisać w nim krótką informację typu “Strona w budowie”.

szczegóły motywu z pliku style.css

W katalogu głównym motywu, oprócz plików wymaganych: index.php i style.css, istnieje jeszcze szereg innych podstron specjalnych i części szablonów, które odpowiadają za wyświetlanie specyficznych treści:

  • 404.php – szablon wyświetlany, gdy post lub strona nie może zostać odnaleziona pod wskazanym adresem URL,
  • archive.php – szablon archiwum z postami wyświetlanymi według kategorii, autora lub daty (zostanie nadpisany, jeśli pojawią się bardziej szczegółowe pliki szablonów: category.php, author.php i date.php),
  • attachment.php – szablon z załącznikiem, np. plikiem PDF, obrazkiem lub innymi mediami,
  • author.php – szablon strony autora (zazwyczaj z jego postami),
  • category.php – szablon postów wyświetlanych według kategorii,
  • comments.php – szablon z komentarzami do posta,
  • date.php – szablon postów wyświetlanych według daty lub godziny, np. https://geekster.pl/blog/2021/01/15
  • footer.php – szablon stopki strony,
  • front-page.php – szablon strony głównej (niezależny od ustawień w menu “Ustawienia” => “Czytanie“) lub home.php (jeśli nie ustawisz statycznej strony głównej to szablon będzie wyświetlał najnowsze posty),
wordpress ustawienia czytania
  • functions.php – w pliku tym definiujemy własne funkcjonalności do nowego motywu lub możemy wywoływać wbudowane funkcje WordPressa,
  • header.php – szablon nagłówka strony (zawiera metadane, łącza do arkuszy stylów lub innych bibliotek, np. jQuery, Bootstrap itp.),
  • image.php – szablon pojedynczej strony z załącznikiem graficznym,
  • page.php – szablon pojedynczej strony opisowej (np. “O firmie”),
  • search.php – szablon z wynikami wyszukiwania,
  • single.php – szablon pojedynczego wpisu z bloga,
  • sidebar.php – szablon panelu bocznego (np. ze skrótami wpisów, reklamami, listą kategorii itp.),
  • tag.php – szablon postów wyświetlanych według tagów.

Oczywiście nie zawsze zaistnieje potrzeba tworzenia tych wszystkich plików, więc nie musisz ich bezzasadnie kopiować z innego motywu. To zależy od charakteru strony. Być może będzie to tylko strona opisowa bez bloga lub landing page reklamujący produkt, wtedy może wystarczyć zaledwie plik index.php, style.css i szablony cząstkowe: header.php, footer.php.

Co do struktury katalogów motywu, to zalecana jest organizacja, jak na poniższym obrazku:

wordpress organizacja plików i katalogów

Jak widać, katalog zasobów (assets) zawiera podkatalog z arkuszami stylów (css), skryptami JavaScript (js) oraz obrazkami (images). Części szablonów zapisujemy w template-parts i są one również podzielone na fragmenty dotyczące: stopki strony (footer), nagłówka (header), statycznych stron (page) oraz wpisów blogowych (post). Podkatalog inc przechowuje podstawowe funkcjonalności systemowe (np. funkcje menu).

2. TAGI SZABLONÓW

Tagi szablonów to wbudowane funkcje WordPressa, które są używane do pobierania treści z bazy danych i wyświetlania ich w odpowiednich miejscach szablonów (np. tytuł strony, treść posta, wyszukiwarka itp). Bez tagów WordPressa byłoby nam ciężko cokolwiek zrobić, dlatego ta wiedza jest niezbędna do dalszej pracy ;).

Lista najczęściej używanych tagów:

  • the_title() – wczytuje tytuł strony lub posta,
  • bloginfo() – wczytuje informacje o witrynie np. bloginfo(‘name’) – nazwę bloga, bloginfo(‘version’) – wersję WordPressa, bloginfo(‘charset’) – kodowanie strony, np. utf-8, bloginfo(‘language’) – język WordPressa, np. pl,
  • get_header() – wczytuje szablon nagłówka strony z pliku header.php do szablonu głównego, np. index.php,
  • get_footer() – wczytuje stopkę strony z pliku footer.php,
  • get_sidebar() – wczytuje panel boczny z pliku sidebar.php,
  • single_post_title() – tytuł posta lub strony,
  • the_post() – wpis z bloga,
  • get_template_part() – wczytuje część szablonu, np. get_template_part(‘header’) – załaduje plik header.php. Dobrą praktyką jest przechowywanie mniejszych fragmentów szablonów w katalogu “template-parts“, np. get_template_part(“template-parts/newsletter”) – załaduje plik newsletter.php z podkatalogu /template-parts,
  • get_search_form() – wczytuje plik searchform.php. Jeśli nie istnieje, zostanie wyświetlony domyślny formularz wyszukiwania,
  • get_stylesheet_uri() – pobiera identyfikator URI arkusza stylów (style.css) dla bieżącego motywu,
  • get_stylesheet_directory_uri() – pobiera identyfikator URI katalogu arkusza stylów dla bieżącego motywu, np.
    https://example.com/wp-content/themes/geekster,
  • get_template_directory_uri() – pobiera identyfikator URI katalogu bieżącego motywu.

Jeśli masz problemy ze zrozumieniem tej części artykułu, to nie przejmuj się, za chwilę wszystko się wyjaśni ;). Znasz już wszystkie niezbędne podstawy, a więc możemy przejść do clou i w końcu coś zakodować.

Użycie tagów jest naprawdę proste. Zaktualizuj plik szablonu index.php:

Jak widać, jest to standardowa struktura dokumentu HTML wymieszana z kodem PHP. Poszczególne tagi zostaną zastąpione w źródle strony przez odpowiednie wartości pobrane z CMSa:

  • bloginfo(‘language’) – język witryny: pl-PL,
  • bloginfo(‘charset’) – kodowanie dokumentu HTML w standardzie utf-8,
  • wp_title(‘|’, true, ‘right’) – automatycznie dopasowuje tytuł strony (separator “|” wyświetli się po prawej stronie – right),
  • bloginfo(‘name’) – tytuł witryny.
wordpress ustawienia ogólne

3. AKCJE NAGŁÓWKA I STOPKI

Akcje nagłówka i stopki (wp_head(), wp_footer()) są niezwykle istotne. Bez nich Twój motyw nie wczyta do źródła strony wtyczek innych dostawców itp. Uzupełnij więc szablon, jak poniżej:

4. PĘTLE

Pętla to pojęcie, które jest Ci zapewne znane z języków programowania :). W WordPressie pełni podobną funkcję. Jest to prosty mechanizm wczytujący posty, strony, komentarze lub inne niestandardowe treści.

Zaktualizuj zawartość sekcji <body> w szablonie index.php:

W tym momencie możesz już odświeżyć stronę i zobaczyć efekt swojej pracy. Na razie jest on dość mizerny, ale już coś widać ;). Jeśli nie dodawałeś jeszcze postów, to pojawi się domyślny wpis z powitaniem.

5. SZABLONY CZĄSTKOWE

Aby nie powielać kodu, który będzie powtarzał się na każdej podstronie (sekcje nagłówka i stopki), podzielmy go na części: header.php i footer.php.

Szablon header.php:

Szablon footer.php:

Zaktualizuj plik szablonu głównego index.php:

Do wczytania szablonów cząstkowych wykorzystałem tagi get_header() i get_footer(). WordPress wie, że przypisane są do nich pliki header.php i footer.php. Możemy użyć również wersji precyzyjniejszej do wczytywania niestandardowych plików szablonów: get_template_part(‘header’) i get_template_part(‘footer’). W nawiasie podajemy ścieżkę do pliku bez rozszerzenia.

6. DOŁĄCZANIE ARKUSZY STYLÓW I SKRYPTÓW

Do budowy szablonów i ich stylowania użyjemy gotowych narzędzi Bootstrapa. Linkowanie do skryptów i stylów możemy wprowadzić bezpośrednio w pliku header.php w sekcji <head></head>, aczkolwiek właściwym i zalecanym sposobem jest umieszczenie tego w tzw. kolejce – w pliku functions.php.

Służą do tego dwie funkcje:

  • $handle – nazwa arkusza stylów,
  • $src – ścieżka do pliku ze stylami,
  • $deps (opcjonalny) – wskazuje style powiązane z tym arkuszem stylów (domyślnie tablica – array()),
  • $ver (opcjonalny) – numer wersji (false – ustawi wersję WP, null – nie wyświetli numeru wersji),
  • $media (opcjonalny) – typ mediów (‘all‘, ‘screen‘,’print‘ lub ‘handheld‘).
  • $handle – nazwa skryptu,
  • $src – ścieżka do skryptu,
  • $deps (opcjonalny) – tablica, która może obsłużyć inne skrypty, od których zależny jest Twój nowy skrypt (np. jQuery),
  • $ver (opcjonalny) – numer wersji,
  • $in_footer (opcjonalny) – umożliwia umieszczenie skryptów w stopce dokumentu HTML (true lub false).

Utwórz plik functions.php (w katalogu głównym motywu) i zapisz w nim poniższą zawartość:

Zakolejkowane style i skrypty umieszczone są w jednej funkcji add_theme_scripts(), która jest wywołana za pomocą akcji wp_enqueue_scripts. Biblioteki Bootstrapa zaciągane są z zewnętrznego serwera CDN. Oczywiście możesz je pobrać i zapisać w katalogu swojego motywu, np.:

7. PRZYGOTOWANIE LAYOUTU STRONY

Korzystając z dobrodziejstw Bootstrapa, zakodujemy layout według wzoru:

wordpress layout

7.1. DOSTOSOWANIE NAGŁÓWKA STRONY

W pierwszej kolejności edytujemy plik header.php, dodając po znaczniku <body> zapis: get_template_part(‘template-parts/header/site-header’):

W nowym szablonie (/template-parts/header/site-header.php) zawarte będą specyficzne elementy, takie jak nazwa witryny, menu i wyszukiwarka. Oczywiście nie musimy tego robić i cały kod nagłówka możemy umieścić bezpośrednio w pliku header.php, ale jak już wspominałem na początku takie podejście nie jest zalecane. Rozdzielenie tego na mniejsze fragmenty daje więcej swobody i elastyczności przy zarządzaniu poszczególnymi częściami szablonów.

Zawartość site-header.php:

Ten fragment zawiera gotowy kod paska nawigacyjnego ze strony getbootstrap.com/docs/5.1/components/navbar/. Bootstrap jest świetny, przyspiesza pracę jak mało co ;). Nie musimy kodować od zera całego mechanizmu belki i na dodatek jest już responsywny. Tagi wp_nav_menu() i get_search_form() wczytują domyślne szablony WP dla menu nawigacyjnego i wyszukiwarki. Tę część jeszcze zmodyfikujemy.

7.1.1. WYSZUKIWARKA

Formularz wyszukiwarki można wstawić za pomocą gotowego tagu get_search_form(), z tym że nie będzie posiadał klas Bootstrapa, dlatego nadpiszemy go. W tym celu zmień get_search_form() na:

Szablon cząstkowy site-search.php zapisz (zgodnie z powyższym) w lokalizacji /template-parts/header/:

Efekt:

wordpress wyszukiwarka

7.1.2. MENU

Tag wp_nav_menu() pozwala wstawić menu nawigacyjne do szablonu strony. Menu możesz dostosować w panelu CMS w sekcji: Wygląd -> Menu. Domyślnie menu pobiera linki do zwykłych stron i nie mamy nad tym kontroli. Możemy to zmienić, tworząc własne menu:

wordpress menu

Jak widać, menu można dowolnie personalizować: dodawać własne odnośniki, dołączać konkretne strony, posty a nawet kategorie i tagi.

Aby dodać niestandardowe menu do szablonu, należy je wpierw zarejestrować za pomocą funkcji:

Parametr $location określa lokalizację (położenie) menu, a $description – krótki opis lokalizacji (np. “Menu główne”).

wordpress menu lokalizacja

Nowe menu należy zdefiniować w pliku functions.php:

Akcja add_action(‘init’, ‘register_my_menu’) inicjuje nowe menu. Teraz z łatwością możemy wstawić je do szablonu za pomocą instrukcji:

Kiedy odświeżysz stronę w przeglądarce internetowej, zobaczysz, że menu wczytuje się poprawnie, niestety jego wygląd jest mizerny. Oczywiście możesz je ostylować w pliku style.css lub użyć filtrów, ale najlepszym sposobem będzie użycie gotowej klasy implementującej menu Bootstrapa.

7.1.3. IMPLEMENTACJA MENU BOOTSTRAPA

Skopiuj klasę z github.com/wp-bootstrap/wp-bootstrap-navwalker/blob/master/class-wp-bootstrap-navwalker.php do katalogu /classes:

wordpress klasa bootstrap

Następnie zarejestruj klasę w pliku functions.php:

Zaktualizuj zapis menu w pliku site-header.php:

Teraz menu będzie wyglądać elegancko ;).

wordpress bootstrap navbar

W tym punkcie nauczyliśmy się korzystać z zewnętrznych bibliotek.

7.2 DOSTOSOWANIE ZAWARTOŚCI STRONY I PASKA BOCZNEGO

W tym punkcie przygotujemy zawartość strony, która jest chyba najistotniejsza dla odwiedzającego. Layout strony podzielimy na dwa obszary, jak na poniższym obrazku. W lewej kolumnie (posts) będą wyświetlane wpisy z bloga lub zwykłe strony, a w prawej kolumnie (sidebar) – treść poboczna (np. kategorie). Taki układ jest często spotykany w sieci Internet.

wordpress treść i sidebar

7.2.1. PERSONALIZACJA WPISÓW BLOGOWYCH

Edytuj szablon główny index.php:

W tym szablonie wyświetlane będą skróty wpisów z bloga. Domyślny szablon skrótu nadpisujemy, używając szablonu cząstkowego content-excerpt.php w katalogu /template-parts/content/:

Zawartość szablonu cząstkowego content-excerpt.php:

Tag the_post_thumbnail() wyświetla zdjęcie lub obrazek posta (rozmiary: “thumbnail” – 150 x 150, “medium” – 300 x 300, “medium_large” – 768, “large” – 1024 x 1024, “full” – oryginalny rozmiar, niestandardowy np. array(100,100)). Skrót posta the_excerpt() wyświetlany jest bez znaczników HTML i obcinany do 55 wyrazów.

Teraz musimy przygotować szablon główny dla całego posta – single.php, np.:

Szablon single.php ma podobny układ dwukolumnowy jak index.php. Szablon cząstkowy posta zapisujemy w pliku content-single.php w katalogu /template-parts/content/ (podobnie jak content-excerpt.php).

Zawartość szablonu cząstkowego content-single.php:

Analogicznie przygotuj pozostałe szablony główne (404.php, page.php, category.php itd.). Możesz wzorować się też na innych motywach, np. twentytwentyone.

7.2.2. INFORMACJE O AUTORZE I DATA PUBLIKACJI POSTA

Szablony z wpisami lub z widokiem całego posta możemy rozszerzyć o różne informacje o autorze posta:

wordpress profil


W naszym przykładzie rozszerzymy szablon z widokiem całego posta, czyli content-single.php:

Funkcje _e() tłumaczą frazy podane w nawiasach _e(‘Published’) i _e(‘Author’). Przydatne dla stron wielojęzycznych. Funkcja get_the_date() pobiera i wyświetla datę utworzenia posta. Aby wyświetlić informacje o autorze posta, korzystamy z zapisu, który wyciąga cały obiekt użytkownika Wp_user:

Dzięki temu możemy odczytać następujące dane:

Z kolei aby wyświetlić obrazek awatara użytkownika, użyj:

Funkcja przyjmuje dwa parametry:

  • $email – adres email użytkownika – $author->user_email (możemy również podać id użytkownika – $author_id),
  • $size – rozmiar obrazka (w naszym przykładzie – 100 pikseli).

Aby wygenerować link do strony z postami autora, używamy funkcji:

7.2.3. SIDEBAR – ZAWARTOŚĆ POBOCZNA

Polecenie get_sidebar() dołącza szablon paska bocznego z widżetami. Domyślnie wczytuje elementy tak, jak na obrazku poniżej:

wordpress sidebar widżety

Aby nadpisać ten szablon, wystarczy utworzyć w katalogu głównym motywu plik sidebar.php lub sidebar-{name}.php – gdzie “name” to dowolna nazwa, np. sidebar-primary.php. W tym drugim przypadku musimy zmienić wywołanie szablonu w get_sidebar() na get_sidebar(“primary”). Jak widać, podajemy tylko drugi człon nazwy pliku, bez słowa kluczowego sidebar.

Zawartość szablonu możesz dostosować do swoich potrzeb, np.:

Wyświetli:

wordpress sidebar

7.2.4. PAGINACJA

WordPress oferuje gotową funkcjonalność z numeracją stron oraz odnośnikami do kolejnych lub poprzednich postów. W ustawieniach czytania możemy określić liczbę wpisów na stronie.

wordpress ustawienia czytania

Aby dodać paginację, edytuj szablon index.php:

Obiekt WP_Query() zmienia działanie głównej pętli i ustawia tablicę z numerem strony (paged) pobranym za pomocą funkcji get_query_var(‘paged’).

Do wyświetlenia szablonu z numeracją możemy użyć gotowej metody:

7.3. DOSTOSOWANIE STOPKI STRONY

Do stopki strony dodamy krótką informację o prawach autorskich.

Edytuj szablon footer.php:

Jak widać, potrzebny będzie szablon copyright.php (/template-parts/footer/copyright.php):


8. WGRYWANIE MOTYWU NA SERWER

Gotowy motyw możesz przenosić na różne środowiska WordPressa. Wystarczy spakować katalog z motywem za pomocą programu do archiwizacji, np. WinRAR. Koniecznie musi być to format ZIP, inaczej podczas uploadu zgłoszony zostanie wyjątek:

Paczka nie mogła zostać zainstalowana. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

Po zalogowaniu do panelu administracyjnego, w sekcji Wygląd -> Motywy możesz wgrać motyw na serwer. WordPress sam wypakuje pliki do odpowiedniego katalogu :).

wordpress wgrywanie motywu

Inny sposób to oczywiście przeniesienie plików na serwer metodą drag & drop. W tym celu musisz posiadać program zwany klientem FTP, np. WinSCP. Serwery są różne, ale zasada jest ta sama i odbywa się to praktycznie w ten sam sposób. Cały proces dokładnie opisany jest w samouczku nazwa.pl/pomoc/baza-wiedzy/jak-wgrac-pliki-na-serwer.

PODSUMOWANIE

Tym oto sposobem dotarliśmy do końca tego artykułu. Jak już wiesz, tworzenie szablonów w WordPressie nie jest zbyt skomplikowane :). Wystarczy trochę czasu i chęci, aby zbudować coś swojego i niekonwencjonalnego. Wiedza w tym artykule jest wystarczająca do rozpoczęcia pisania motywów. Więcej szczegółowych informacji można przeczytać w dokumentacji: developer.wordpress.org/themes/basics/.

Przykłady z tego artykułu możesz pobrać z repozytorium GitHub:

POBIERZ z GitHub →



Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *