Motywy: motywy blokowe i motywy klasyczne

Moduł 5: Motywy i wtyczki · Czas czytania: 9 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili wyjaśnić różnicę między motywami blokowymi a motywami klasycznymi oraz świadomie wybrać motyw.

Kluczowe pojęcia: motyw, hierarchia szablonów, motyw blokowy, szablon (template), część szablonu (template part), theme.json, Edytor witryny, motyw klasyczny, szablony PHP, Personalizacja, widżety, kreator stron, lock-in, katalog motywu

Co robi motyw

Motyw określa, jak wygląda Państwa strona i jak zbudowane są poszczególne strony: nagłówek z logo i menu, szerokość treści, czcionki i kolory, stopkę, wygląd listy wpisów czy wyników wyszukiwania. Sama treść (teksty, strony, obrazy) znajduje się w bazie danych i pozostaje zachowana przy zmianie motywu.

Każdy motyw znajduje się we własnym katalogu w wp-content/themes/, na przykład wp-content/themes/twentytwentyfive/. W tym katalogu zawsze znajduje się plik style.css z nagłówkiem opisującym motyw (nazwa, wersja, autor). Zobaczą to Państwo w lekcji 5.2.

Od WordPressa 5.9 (początek 2022 roku) istnieją dwa rodzaje motywów, które działają naprawdę inaczej.

Motywy klasyczne

Motyw klasyczny składa się z plików PHP: header.php, footer.php, single.php, page.php, index.php i tak dalej. To, który plik jest używany dla jakiej strony, wynika z hierarchii szablonów (lekcja 1.2). Dostosowania wprowadza się:

• w Personalizacji (Wygląd > Personalizacja): logo, kolory, opcje oferowane przez motyw;
• za pomocą widżetów (Wygląd > Widżety): bloki w pasku bocznym lub stopce;
• za pomocą menu (Wygląd > Menu, lekcja 4.3);
• w kodzie, za pomocą motywu potomnego (lekcja 5.2).

Wiele znanych motywów jest (nadal) klasycznych lub hybrydowych. Działają one dobrze i będą jeszcze przez wiele lat wspierane.

Motywy blokowe

Motyw blokowy zbudowany jest z tych samych bloków co Państwa treść. Motyw zawiera:

• szablony (templates) jako pliki HTML z blokami, w katalogu templates/: index.html, single.html, page.html, 404.html;
• części szablonu (template parts) w parts/: header.html, footer.html;
• plik theme.json z ustawieniami stylów: paletą kolorów, czcionkami, rozmiarami czcionek, szerokością treści, odstępami między blokami.

Mały fragment theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "podstawowy", "color": "#1e3a5f", "name": "Podstawowy" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Dostosowań dokonuje się w Edytorze witryny (Wygląd > Edytor): edytują Państwo nagłówek, stopkę i szablony za pomocą bloków, a w sekcji Style wybierają kolory, czcionki i odstępy dla całej strony.

Ważna różnica, którą warto znać: to, co zmienią Państwo w Edytorze witryny, zapisywane jest w bazie danych, a nie w plikach motywu. Aktualizacja motywu nie nadpisuje więc wprowadzonych zmian. Oznacza to jednak również, że zmodyfikowany szablon w bazie danych ma pierwszeństwo przed szablonem w motywie. Jeśli twórca wyda ulepszony szablon, nie zobaczą go Państwo, dopóki istnieje Państwa zmodyfikowana wersja. W Edytorze witryny można "przywrócić" szablon do wersji z motywu.

Kreatory stron

Kreator stron (taki jak Elementor, Divi czy WPBakery) to wtyczka lub motyw z własnym edytorem, w którym przeciągają Państwo elementy i projektują strony. Są popularne, ponieważ oferują wiele możliwości bez pisania kodu. Proszę mieć świadomość wad:

• Lock-in: formatowanie zapisane jest we własnym formacie (często shortcode'y lub własne dane w wp_postmeta). Jeśli wyłączą Państwo kreator, z Państwa stron często pozostaje chaos kodów. Przejście na inne rozwiązanie zazwyczaj oznacza budowanie wszystkiego od nowa.
• Większe obciążenie: wiele kreatorów ładuje dodatkowe skrypty i arkusze stylów na każdej stronie. Może to spowolnić Państwa stronę (moduł 6).
• Kolejny element do utrzymania, z własnymi aktualizacjami i własnymi lukami bezpieczeństwa.

Kreator stron nie jest złym wyborem, ale warto go wybrać świadomie. Dla wielu stron to, czego Państwo potrzebują, można osiągnąć również za pomocą motywu blokowego i wzorców.

Wybór motywu

Na co zwrócić uwagę, w tej kolejności:

1. Pochodzenie: katalog motywów na wordpress.org (sprawdzany przez wolontariuszy) lub znany twórca z własną stroną. Nigdy "darmowa" kopia płatnego motywu z serwisu do pobierania plików: taka kopia często zawiera backdoora (lekcja 5.3).
2. Konserwacja: kiedy motyw był ostatnio aktualizowany? Motyw bez aktualizacji w ciągu ostatniego roku staje się ryzykiem.
3. Blokowy czy klasyczny: czy pasuje do sposobu, w jaki chcą Państwo pracować? Motyw blokowy, jeśli chcą Państwo móc dostosowywać stronę w Edytorze witryny, motyw klasyczny, jeśli chcą Państwo kontynuować istniejącą stronę w ten sam sposób.
4. Co ze sobą niesie: motyw, który "potrafi wszystko" (slider, portfolio, formularz kontaktowy, SEO) wiąże funkcje z motywem. Jeśli później go zmienią, stracą Państwo te funkcje. Funkcje powinny znajdować się we wtyczkach, a wygląd w motywie.
5. Dostępność i szybkość: w katalogu motywów na wordpress.org mogą Państwo filtrować według cechy "Accessibility Ready" (gotowy pod kątem dostępności). Proszę sprawdzić demo motywu w PageSpeed Insights (lekcja 6.1).
6. Język: czy motyw jest przetłumaczony na Państwa język, czy mogą Państwo samodzielnie dostosować teksty?

Zmiana motywu

Przy zmianie motywu treść pozostaje, ale zmienia się wszystko wokół niej. Proszę nigdy nie robić tego od razu na stronie produkcyjnej:

• Proszę najpierw wypróbować nowy motyw za pomocą Podglądu na żywo (w Wygląd > Motywy), lub lepiej w środowisku testowym (staging) (lekcja 8.3).
• Następnie proszę sprawdzić menu (lekcja 4.3), widżety, logo, stronę główną oraz typy wpisów, które dostarczał poprzedni motyw (lekcja 4.2).
• Shortcode'y z poprzedniego motywu pojawią się jako zwykły tekst ([slider id="3"]) na Państwa stronach.

Podsumowanie

• Motyw określa wygląd i strukturę; treść jest przechowywana oddzielnie, w bazie danych.
• Motywy klasyczne to szablony PHP, dostosowywane za pomocą Personalizacji, widżetów i menu.
• Motywy blokowe zbudowane są z bloków i pliku theme.json, a dostosowuje się je w Edytorze witryny; te zmiany zapisywane są w bazie danych.
• Kreatory stron oferują wiele możliwości, ale wiążą Państwa z sobą i mogą obciążać stronę.
• Proszę wybierać motyw na podstawie pochodzenia, konserwacji i prostoty; funkcje powinny znajdować się we wtyczkach, a nie w motywie.

Quiz

Zadanie

Zadanie A5.1: Jakiego motywu używa Państwa strona? Proszę wyszukać w kodzie źródłowym swojej strony głównej (Ctrl+U) ciąg /wp-content/themes/ i wpisać nazwę katalogu motywu, który występuje najczęściej. Jeśli używają Państwo motywu potomnego (lekcja 5.2), proszę podać katalog motywu potomnego oraz motywu nadrzędnego. Proszę również podać, czy jest to motyw blokowy czy klasyczny, oraz w jaki sposób to Państwo ustalili. Program odczyta stronę główną oraz plik style.css podanego motywu i porówna wyniki.

Dalsza lektura

Na temat pracy w samym WordPressie nie mamy jeszcze własnych artykułów; oficjalna dokumentacja WordPressa jest obszerna.

• Czym jest motyw? (developer.wordpress.org, po angielsku): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Motywy na wordpress.org: https://wordpress.org/themes/
• Edytor witryny (wordpress.org, po angielsku): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, po angielsku): https://developer.wordpress.org/themes/global-settings-and-styles/
• Gdzie mogę znaleźć informacje na temat samego WordPressa?