Jak stworzyć swój własny motyw (theme) na WordPress? – Podstawowy szkielet

Motyw (klasyczny) w systemie zarządzania treścią WordPress to zbiór szablonów, które określają to jak wygląda serwis www, na którym jest on wykorzystany, jak wyglądają strony i wpisy. Zawiera przede wszystkim pliki php, skrypty JavaScript, style CSS, grafiki, fonty oraz pliki tekstowe z instrukcją użytkowania lub tzw. changelog.

Należy jednak pamiętać o fundamentalnych różnicach między wtyczką a motywem. Twórcy WordPress rekomendują, by w ramach motywu nie dodawać krytycznych funkcjonalności, które w ramach zmiany motywu na inny zostały odebrane użytkownikowi np.: dodatkowe taksonomie. Zobacz moją roadmapę umiejętności WordPressowca!

Z tego wpisu dowiesz się, jak wygląda podstawowa struktura motywu, jakie pliki powinien zawierać oraz o czym musisz pamiętać, tworząc swój własny motyw.

Czym jest dedykowany motyw?

Dedykowany motyw (z ang. theme) dla strony opartej o WordPress to przede wszystkim optymalizacja szybkości ładowania się strony, ograniczenie zbędnego kodu oraz pełna kontrola nad nim, ale także kontrola nad kształtem i wyglądem tworzonej strony.

Motywy dostępne w repozytorium oferują szeroki zakres funkcjonalności, by jak najwięcej użytkowników mogło je dopasować do swoich potrzeb, co niesie za sobą wiele linijek, często nadmiarowego kodu.

Stworzenie własnego motywu – jak zacząć?

By stworzyć swój motyw, musisz przejść do folderu ze swoją instancją WordPress do folderu /wp-content/themes/, a następnie utworzyć w nim folder z nazwą Twojego motywu.

Podstawowe pliki, jakie są wymagane, by móc włączyć motyw to: style.css oraz index.php. Wewnątrz tego pierwszego umieszczamy przede wszystkim informacje o naszym theme, w tym:

• nazwa motywu, autor i informacje o nim,
• licencja,
• opis i wymogi,
• wersja,
• dane do translacji.

Jak to wygląda w praktyce?

/*
Theme Name: Ten od WordPressa
Theme URI: https://tenodwordpressa.pl
Author: Ten od WordPressa
Author URI: https://tenodwordpressa.pl/
Description: Własny szybki motyw, zastosowany na stronie tenodwordpressa.pl
Tags: ten od wordpressa, własny motyw,
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tenodwp
*/

Natomiast drugi plik – index.php – w przypadku braku innych plików jest odpowiedzialny, za obsłużenie wszystkich typów postów (stron i wpisów) na przykład za pomocą warunków w PHP.

Jednakże na potrzeby włączenia motywu może być on pusty. Wówczas strona główna naszego serwisu będzie cała biała i nie będzie zawierała kodu HTML. Tak opracowany folder i zawartość wyżej wymienionych plików pozwala wyświetlać nasz theme w WP oraz go włączyć i wyłączyć.

By dodać obraz, wyświetlany w WordPress razem z informacjami o naszym motywie należy umieścić w jego folderze plik screenshot.jpg o rozdzielczości 1200 x 900 px.

Szczegółowe omówienie struktury motywu

Każdy motyw w WordPressie składa się z wielu plików, które pełnią różne role. Oto kilka najważniejszych:

• header.php: Ten plik definiuje górny fragment każdej strony, zazwyczaj zawierający nagłówek i menu nawigacyjne.
• footer.php: Analogicznie do header.php, footer.php definiuje dolny fragment każdej strony, zazwyczaj zawierający stopkę i linki do stron informacyjnych.
• sidebar.php: Ten plik definiuje pasek boczny, który może zawierać różne widżety, takie jak lista najnowszych postów, formularz wyszukiwania, linki do stron zewnętrznych i wiele innych.
• functions.php: Jest to serce każdego motywu. W tym pliku możemy zdefiniować różne funkcje używane w naszym motywie, a także dodać wsparcie dla różnych funkcji WordPressa, takich jak obrazy wyróżniające, menu, widżety i wiele innych.
• single.php: Ten plik jest używany do renderowania pojedynczych postów. Możemy zdefiniować, jak ma wyglądać układ naszego postu, gdzie ma się znajdować tytuł, treść, obraz wyróżniający, informacje o autorze i komentarze.

Pamiętaj, że WordPress korzysta z hierarchii szablonów, co oznacza, że jeśli określony plik szablonu nie istnieje, WordPress poszuka innego pliku, który może go zastąpić. Na przykład, jeśli single.php nie istnieje, WordPress użyje index.php do renderowania pojedynczych postów.

Przykładowy motyw

Aby zrozumieć, jak tworzyć motywy WordPressa, warto zacząć od prostego przykładu. Oto kroki, które należy podjąć, aby stworzyć podstawowy motyw:

1. Utworzenie katalogu motywu: Na początek stworzymy katalog dla naszego motywu w folderze wp-content/themes/. Nazwijmy go moj_motyw.
2. Utworzenie plików style.css i index.php: Każdy motyw musi mieć te dwa pliki. Plik style.css powinien zawierać nagłówek motywu z metadanymi, podobny do tego, który pokazaliśmy w poprzednim wpisie. Plik index.php jest głównym plikiem szablonu, który jest używany do wyświetlania stron, jeśli nie ma innych odpowiednich plików szablonu.
3. Dodanie szablonów stron i postów: W folderze naszego motywu możemy teraz dodać pliki header.php, footer.php, sidebar.php i single.php. Te pliki definiują, jak będą wyglądać różne części naszej strony i postów.
4. Dodanie pliku functions.php: W tym pliku możemy dodać różne funkcje, które zmienią sposób działania naszego motywu. Na przykład, możemy dodać wsparcie dla obrazów wyróżniających lub zdefiniować własne widżety.

Przy tworzeniu motywu pamiętaj o zachowaniu czystego i przejrzystego kodu oraz zastosowaniu najlepszych praktyk bezpieczeństwa.

Udostępnienie swojego motywu w repozytorium WordPress

By udostępnić swój motyw w repozytorium WordPressa, musi on składać się tylko z 4 plików. Poza wcześniej omówionymi należy umieścić również plik umożliwiający dodawanie i wyświetlanie komentarzy.

• index.php
• style.css
• screenshot.jpg
• comments.php

Jeśli twój motyw zawiera wyżej wymienione pliki, możesz go wysłać tutaj, następnie zostanie on sprawdzony przez zespół odpowiedzialny za opiniowanie motywów dostępnych w repozytorium.

Możesz zostać poproszony o dodanie pozostałych plików szablonów lub może on zostać zaakceptowany i z czasem będzie dostępny w repozytorium WordPress.org.

Dodatkowe zasoby do nauki tworzenia motywów

Oto kilka zasobów, które mogą pomóc Ci dowiedzieć się więcej o tworzeniu motywów WordPress:

• Oficjalna dokumentacja WordPress: Znajdziesz tu szczegółowe informacje o tworzeniu motywów, hierarchii szablonów, funkcjach WordPressa i wiele więcej.
• ThemeShaper Tutorial: To jest szczegółowy poradnik dla początkujących, który pokazuje, jak stworzyć własny motyw WordPress od podstaw.
• ACF Theme Code Pro: Ten plugin automatycznie generuje kod szablonu dla pól zaawansowanych niestandardowych (Advanced Custom Fields, ACF), co może przyspieszyć proces tworzenia motywu.
• Understrap: To jest popularny starter theme, który łączy Underscores starter theme od Automattic (twórców WordPressa) z Bootstrapem.