Jak stworzyć blokowy motyw potomny w WordPress

Opublikowany: 2023-07-14

Wyobraź sobie taki scenariusz: Właśnie znalazłeś prawie idealny motyw do wykorzystania w swojej witrynie. Jest dobrze zaprojektowany, zawiera układy, które chcesz, ale chcesz zmienić paletę kolorów i ograniczyć klientom możliwość modyfikowania niektórych obszarów. Niestety motyw, którego używasz, nie pozwala na usunięcie domyślnych kolorów ani blokad.

Chociaż możesz bezpośrednio edytować pliki motywu, wszystkie modyfikacje zostaną utracone po uruchomieniu aktualizacji motywu. Możesz dodać trochę niestandardowego CSS za pomocą wtyczki fragmentu kodu, ale to nie zmieni opcji stylu dostępnych dla zalogowanych użytkowników.

Więc co możesz zrobić? Jak zmienić dostępne opcje stylu globalnego? Do tego potrzebny jest blokowy motyw potomny.

Co to jest motyw potomny WordPress?

Zgodnie z dokumentacją programisty WordPress:

Motyw potomny dziedziczy wygląd i styl motywu nadrzędnego oraz wszystkie jego funkcje, ale można go użyć do modyfikacji dowolnej części motywu. W ten sposób dostosowania są oddzielone od plików motywu nadrzędnego. Korzystanie z motywu potomnego umożliwia uaktualnienie motywu nadrzędnego bez wpływu na dostosowania wprowadzone w witrynie.

Aby więc skorzystać z motywu potomnego w WordPressie, musisz mieć również zainstalowany motyw nadrzędny. Twój motyw potomny dziedziczy wszystko od rodzica, z kilkoma dodanymi odmianami.

Jak stworzyć motyw potomny

Czy wolisz opcję kodu, aby dostosować styl w swojej witrynie? Podobnie jak zastępowanie innych motywów WordPress, użycie motywu potomnego jest najlepszym sposobem na zastąpienie kodu. Po zaktualizowaniu motywu kod motywu podrzędnego pozostanie.

W tym artykule omówimy kluczowe elementy, które składają się na dobry motyw potomny WordPress i zapewniamy szczegółowe zasoby do czytania.

1. Kiedy używać blokowego motywu potomnego

Motywy potomne są często świetnym rozwiązaniem. Jeśli jednak chcesz dodać tylko trochę kodu CSS, cały motyw potomny może być przesadą. Rozważ wtyczkę, taką jak fragmenty kodu, aby dodać tylko odrobinę dostosowywania.

Dostosowywanie witryn klientów

Gdy tworzysz witryny dla klientów, warto zaoferować dodatkowe opcje dostosowywania.

Jeśli chcesz kontrolować możliwość wstawiania nowych bloków, przenoszenia istniejących lub usuwania bloków przez użytkowników, możesz zaimplementować blokowanie bloków. Z tego samouczka wprowadzającego dowiesz się, jak blokować bloki i nie tylko.

Tworzenie wariacji tematycznych

Oprócz zdefiniowania, które regiony układu motywu klienci mogą modyfikować, możesz także zmienić opcje ich palety kolorów, pomijając to, co jest domyślnie dostarczane z motywem lub WordPressem i dodając unikalne opcje. Możesz także zdefiniować opcje gradientów i bichromii, które powinny być również dostępne w twoim motywie.

2. Wybierz dobry motyw WordPress

Nie wszystkie motywy są tworzone w ten sam sposób. Oprócz tego, co widzisz w projekcie motywu, wybór motywu nadrzędnego obejmuje dodatkowe czynniki, takie jak częstotliwość aktualizacji, jakość pomocy technicznej, dokumentacji i reputacji twórcy motywu. Dowiedz się więcej w Jak używać motywów WordPress do budowy strony internetowej.

3. Stwórz środowisko testowe

Do tej pory wybrałeś motyw nadrzędny, zebrałeś zasoby marki i zdecydowałeś, które ustawienia chcesz zastąpić. Następnie musisz skonfigurować środowisko testowe.

Jeśli korzystasz z zarządzanego dostawcy hostingu WordPress, takiego jak zarządzany hosting WordPress firmy GoDaddy, możesz użyć witryny testowej jednym kliknięciem jako środowiska programistycznego. Jeśli używasz czegoś takiego jak cPanel lub VPS do hostingu, możesz skonfigurować osobną instalację WordPress i sklonować lub skopiować istniejącą witrynę do nowej instalacji.

Jeśli nie stosujesz motywu potomnego do istniejącej witryny lub wolisz budować od zera, możesz utworzyć lokalne środowisko programistyczne WordPress na swoim komputerze za pomocą narzędzia takiego jak MAMP lub DesktopServer z ServerPress.

4. Utwórz katalog motywów

Najpierw musisz zainstalować motyw nadrzędny. Następnie za pomocą klienta FTP połącz się ze swoim środowiskiem programistycznym i przejdź do miejsca, w którym znajdują się pliki WordPress.

Szukasz następującego folderu:

 /wp-content/themes/

Tutaj możesz znaleźć wszystkie zainstalowane motywy WordPress. Każdy motyw ma swój własny folder lub katalog zawierający wszystkie pliki motywu. Zamierzasz dodać nowy katalog do listy, w którym będzie przechowywany Twój motyw potomny. Skończysz z czymś takim:

 /wp-content/themes/motyw-twojego-dziecka/

5. Utwórz pliki motywu

W naszym przykładzie założymy, że używamy motywu Twenty Twenty Two. Musisz mieć zainstalowany ten motyw, aby motyw potomny mógł się do niego odwoływać.

W nowym folderze katalogu motywu potomnego utworzysz dwa nowe pliki:

 styl.css
motyw.json

Oba te pliki służą określonemu celowi. Plik style.css służy do dostarczania WordPressowi informacji o motywie, takich jak nazwa, autor, tagi i identyfikator motywu nadrzędnego.

Plik theme.json służy do definiowania wielu ustawień w stylach globalnych i nie tylko. Dowiedz się więcej o pliku theme.json z podręcznika programisty.

W poprzednich motywach Classic plik functions.php był niezbędny w motywach potomnych. Blokowe motywy potomne nie wymagają tego kroku.

Styl.css

Co należy do Twojego pliku style.css ? Dokumentacja programisty mówi:

Twój arkusz stylów musi zawierać poniższy wymagany komentarz nagłówka na samej górze pliku. To przekazuje WordPressowi podstawowe informacje o motywie, w tym fakt, że jest to motyw potomny z określonym rodzicem.

Będziesz musiał dołączyć szablon w pliku style.css zawierającym informacje o nagłówku. Nazwa szablonu: odpowiada nazwie folderu (katalogu) motywu nadrzędnego, na którym budujesz. Domena tekstowa : nazwa jest unikalna dla Twojego motywu potomnego WordPress.

Poniżej znajduje się przykład motywu potomnego wykorzystującego Twenty Twenty Two:

 /*
Nazwa motywu: Dwadzieścia dwadzieścia dwa dziecko
Identyfikator URI motywu: https://example.com/
Autor: Twoje imię
Identyfikator URI autora: https://example.com/
Opis: Dwadzieścia dwadzieścia dwa motyw potomny
Wymaga co najmniej: 5.8
Testowane do: 5.9
Wymaga PHP: 5.6
Wersja: 0.1
Licencja: Powszechna Licencja Publiczna GNU v2 lub nowsza
URI licencji: http://www.gnu.org/licenses/gpl-2.0.html
Domena tekstowa: dwadzieścia dwa-dziecko
Szablon: dwadzieścia dwadzieścia dwa
Tagi: niestandardowe kolory, niestandardowe menu, niestandardowe logo, styl edytora, wyróżnione obrazy, pełna edycja witryny, wzory blokowe

Motyw WordPress Twenty Twenty-Two Child, (C) 2021 WordPress.org
Twenty Twenty-Two Child jest rozpowszechniane na warunkach licencji GNU GPL.
*/

Motyw.json

Zapoznaj się z dokumentacją programisty, aby uzyskać szczegółowe informacje na temat pliku theme.json. Rzućmy okiem na plik Twenty Twenty Two theme.json:

 {
 "wersja 2,
 "ustawienia": {},
 "style": {},
 "niestandardowe szablony": {},
 "templateParts": {}
}

W ramach każdego z nich dostępne są dalsze style. Na przykład w obszarze stylu Twenty Twenty Two używa:

 {
 "ustawienia": {
 "appearanceTools": prawda,
 "kolor": {
 "dwutonowy": [
 {
 "kolory": [
 "#000000",
 „#ffffff”
 ],
 "slug": "pierwszy plan i tło",
 "name": "Pierwszy plan i tło"
}

Potrzebujesz pomocy przy tworzeniu pliku theme.json? Sprawdź aplikację themegen.app, aby znaleźć przewodnik po tworzeniu wielu opcji dla pliku theme.json.

6. Dostosowywanie motywu podrzędnego bloku

Chociaż możesz łatwo utworzyć plik theme.json i dołączyć go do swojego motywu, pozostało jeszcze kilka innych opcji. Motywy potomne, a nawet motywy blokowe to nowy obszar WordPress. Edytor witryny wyraźnie ma na sobie etykietę wersji beta w momencie pisania tego postu. Będziesz chciał wrócić, aby zobaczyć, co jeszcze działa, a co nie w motywach potomnych, takich jak części szablonu.

Ponadto możesz znaleźć ustawienia, których style globalne i plik theme.json jeszcze nie obsługują. Jeśli dodajesz dodatkowy CSS, taki jak obramowanie bloku grupy z cieniem pudełka, możesz dodać to do swojego pliku style.css .

 .has-primary-border-color {
 box-shadow: .1rem .1rem .05rem #647BAF ;
}

7. Przetestuj swój motyw potomny

Gdy uznasz, że Twoja witryna wygląda dobrze w obecnym środowisku programistycznym, nadszedł czas, aby ją przetestować przed przesłaniem do działającej witryny.

  • Testuj w różnych rozmiarach przeglądarek, takich jak rzutnie mobilne
  • Przetestuj w różnych przeglądarkach lub użyj narzędzia takiego jak BrowserStack
  • Zapoznaj się ze standardami dostępności. Rozpocznij pracę z WebAimem

8. Przygotuj się do przesłania swojego blokowego motywu potomnego

Jeśli tworzysz w witrynie testowej, Twoje pliki są dokładnie tam, gdzie powinny. Możesz przejść do opcji hostingu, aby uruchomić witrynę testową. Jeśli tworzysz pliki w lokalnym środowisku deweloperskim, nadszedł czas, aby spakować pliki style.css i theme.json jako jeden plik ZIP i przesłać je do swojej witryny.

Podsumuj tworzenie motywu blokowego podrzędnego

  1. Zdecyduj, czy potrzebujesz blokowego motywu potomnego
  2. Wybierz motyw nadrzędny
  3. Skonfiguruj swoje środowisko testowe
  4. Utwórz katalog motywów
  5. Utwórz pliki motywu
  6. Dostosuj swój blokowy motyw potomny
  7. Przetestuj swój motyw potomny
  8. Prześlij je do witryny na żywo

Podobnie jak klasyczne motywy w WordPress, motywy blokowe nadal potrzebują miejsca do przechowywania dostosowań, które nie zostaną nadpisane, gdy motyw nadrzędny otrzyma aktualizację. Utworzenie blokowego motywu potomnego umożliwia dodawanie, blokowanie i pomijanie opcji dostępnych dla innych użytkowników w witrynie.