Używasz motywu blokowego i widzisz plik theme.json w WordPressie? Być może zastanawiasz się, jaki jest cel tego pliku i czy powinieneś go edytować.
Plik theme.json jest kluczową częścią pełnej edycji witryny w WordPress. Ponieważ motywy blokowe stają się coraz bardziej powszechne, ważne jest, aby zrozumieć, co robi theme.json i jak go poprawnie edytować.
Właśnie dlatego w WPBeginner przygotowaliśmy ten kompleksowy przewodnik. W tym artykule wyjaśnimy, czym jest plik theme.json i jak można go wykorzystać do dostosowania własnej witryny WordPress.
Czym jest plik WordPress theme.json?
Plik theme.json to specjalny plik motywu wprowadzony w WordPress 5.8. Odgrywa on kluczową rolę w pełnej edycji witryny (FSE), która pozwala wizualnie dostosować każdy aspekt twojego motywu blokowego WordPress.
Zasadniczo plik theme.json działa jak plan, który kontroluje styl i funkcjonalność twojego motywu blokowego. Zawiera kod, który mówi WordPressowi, jak powinny wyglądać i zachowywać się różne elementy, takie jak kolory, typografia, układy i szablony.
Dlaczego motywy blokowe WordPress wymagają pliku theme.json?
Edycja motywu blokowego w WordPress różni się od edycji klasycznego motywu.
Klasyczne motywy używają pliku functions. php do włączania funkcji, takich jak własne menu lub wyróżniające się obrazki za pomocą funkcji add_theme_support(). Następnie można stylizować te funkcje za pomocą reguł CSS w pliku arkusza stylów CSS (style.css).
W motywach blokowych, theme.json działa jako centralne centrum dla wszystkiego, co definiuje wygląd i styl twojego motywu blokowego. Pozwala definiować takie rzeczy jak krój pisma, kolory i opcje układu w jednym miejscu, zastępując potrzebę add_theme_support() w functions.php.
Dlatego plik functions.php w motywach blokowych jest często mniejszy niż jego odpowiednik w klasycznych motywach.
Posiadanie dedykowanego pliku theme.json oferuje kilka wspaniałych korzyści w porównaniu z poprzednim klasycznym systemem motywów.
Po pierwsze, theme.json współpracuje z pełnym edytorem witryny WordPress. Umożliwia to łatwe dostosowanie stylów i ustawień twojego motywu bezpośrednio w edytorze bez konieczności dotykania jakiegokolwiek kodu.
Co więcej, theme.json ma na celu stworzenie spójnego doświadczenia zarówno dla programistów, jak i użytkowników. Niektórzy użytkownicy uważają, że zmiana motywu jest naprawdę frustrująca, ponieważ muszą nauczyć się zupełnie nowych układów i opcji stylizacji.
Dzięki theme.json przełączanie motywów staje się płynniejszym procesem, ponieważ wszystko jest zorganizowane w podobny sposób.
Wreszcie, korzystając z theme.json, twórcy motywów i użytkownicy mogą zabezpieczyć swoją pracę na przyszłość, ponieważ WordPress nadal rozszerza swoje pełne możliwości edycji witryn.
Teraz, gdy omówiliśmy już, czym jest plik theme.json, zagłębmy się głębiej w ten motyw. Możesz skorzystać z poniższych odnośników, aby poruszać się po tym przewodniku:
Gdzie można znaleźć plik WordPress theme.json?
Plik theme.json znajduje się w katalogu motywów na twoim serwerze WWW. Typowa ścieżka do pliku to public_html ” wp-content ” themes ” twoja nazwa motywu ” theme.json.
Aby uzyskać do niego dostęp, należy najpierw połączyć się z twoją witryną za pośrednictwem FTP lub menedżera plików konta hostingowego.
Jeśli korzystasz z Bluehost, możesz logować się i przejść do karty „Witryny internetowe”. Następnie kliknij przycisk „Ustawienia” pod twoją witryną internetową.
Teraz upewnij się, że pozostajesz na karcie „Przegląd”.
Następnie przewiń w dół, aby kliknąć przycisk „Menedżer plików”.
Po otwarciu menedżera plików w ten sposób, automatycznie znajdziesz się w katalogu głównym twojej witryny internetowej.
Tutaj poszukaj katalogu „wp-content” i otwórz go. Znajdziesz tam katalog „themes”, który zawiera wszystkie twoje zainstalowane motywy WordPress.
Otwórz katalog konkretnego motywu blokowego, którego używasz. Plik theme.json będzie znajdował się bezpośrednio w katalogu motywu wraz z innymi plikami motywu.
Po jego znalezieniu można zobaczyć plik theme.json za pomocą edytora kodu.
Jak wygląda plik theme.json?
Plik theme.json ma określoną strukturę, która organizuje wszystkie globalne ustawienia twojego motywu blokowego WordPress.
W zależności od tego, jak złożony lub prosty jest twój motyw, plik ten może być bardzo krótki lub długi. Można jednak łatwo podzielić ten plik na 7 sekcji najwyższego poziomu:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}
Oto uproszczony podział:
Schemat
Ta część jest w rzeczywistości opcjonalna w motywach blokowych, więc możesz ją zobaczyć lub nie w twoim.
Właściwość schema odnośnik URL do schematu WordPress JSON, który definiuje globalne ustawienia, style i inne konfiguracje dla twojego motywu.
Wersja
Ta sekcja określa, która wersja API formatu theme.json jest używana przez plik i zapewnia jego prawidłową strukturę.
W chwili pisania tego artykułu API jest w wersji 2.
Ustawienia
Ta właściwość definiuje opcje i elementy sterujące dostępne dla klientów w celu dostosowania własnego motywu. Obejmują one wstępne ustawienia palety kolorów motywu, typografii, odstępów, gradientów, cieni, obramowań itp.
Oto bardzo prosty przykład tego, jak wygląda właściwość ustawień:
{
"settings": {
"color": {
"palette": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},
{
"slug": "contrast",
"color": "#222222",
"name": "Dark"
},
{
"slug": "accent",
"color": "#f08080",
"name": "Pink"
},
{
"slug": "accent-2",
"color": "#90ee90",
"name": "Light Green"
},
{
"slug": "accent-3",
"color": "#e0ffff",
"name": "Light Blue"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "Open Sans, sans-serif",
"slug": "open-sans",
"name": "Open Sans"
},
{
"fontFamily": "Arial, sans-serif",
"slug": "arial",
"name": "Arial"
},
{
"fontFamily": "Times New Roman, serif",
"slug": "times-new-roman",
"name": "Times New Roman"
}
],
"fontSizes": [
{
"name": "Extra Small",
"slug": "xx-small",
"size": "0.75rem"
},
{
"name": "Small",
"slug": "small",
"size": "0.875rem"
},
{
"name": "Medium",
"slug": "medium",
"size": "1rem"
},
{
"name": "Large",
"slug": "large",
"size": "1.125rem"
},
{
"name": "Extra Large",
"slug": "x-large",
"size": "1.25rem"
},
{
"name": "XX-Large",
"slug": "xx-large",
"size": "1.5rem"
}
],
"spacing": {
"units": ["rem"],
"values": {
"small": "1rem",
"medium": "1.5rem",
"large": "2rem"
}
}
}
}
}
Jeśli spojrzysz na kod, użyty język jest dość łatwy do zrozumienia. Można powiedzieć, że ustawienia definiują kolory, rodziny pism, wielkości liter i odstępy używane w motywie.
Jeśli są jakieś odniesienia tutaj lub w twoim motywie, których nie rozumiesz, możesz sprawdzić oficjalne odniesienie do ustawień WordPress.
Niektóre elementy, takie jak kolory i rodziny pism, mają uproszczone nazwy, takie jak ta:
{
"settings": {
"color": {
"palette": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},
Przydadzą się one później w sekcji stylów do tworzenia ustawień wstępnych, które wyjaśnimy w następnej części.
Style
Podczas gdy sekcja ustawień definiuje domyślne opcje konfiguratora motywu, sekcja stylów stosuje je do motywu.
W tym miejscu można zastosować ustawienia konfiguratora do całej witryny internetowej lub na poziomie bloku przy użyciu ustawień wstępnych.
Sprawdźmy poniższy przykład:
{
"settings": {
// Existing settings from the previous example
},
"styles": {
"color": {
"background": "var(--wp--preset--color--base)",
"text": "var(--wp--preset--color--contrast)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"h1": {
"fontSize": "var(--wp--preset--font-size--xx-large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
},
"h2": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
},
"h3": {
"fontSize": "var(--wp--preset--font-size--large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
}
}
}
}
Jak widać, w całym tym fragmencie kodu pojawia się ta linia kodu: var(--wp--preset--xxx). Są to ustawienia wstępne, które są skrótami w sekcji stylów, które odwołują się do wartości zdefiniowanych w sekcji ustawień.
Na przykład, rozważ {"uproszczona nazwa": "base", "color": "#ffffff", "name": ” biały"} w sekcji ustawień. W tym przypadku ” base" to uproszczona nazwa, a odpowiednie ustawienie wstępne dla tego koloru to var(--wp--preset--color--base).
Dlatego kod "color": {"background": "var(--wp--preset--color--base)" w stylach mówi, że kolor tła tego motywu jest biały.
Własne szablony
Twórcy motywów blokowych mogą tworzyć predefiniowane układy dla własnych stron, wpisów lub typów treści, z których mogą korzystać użytkownicy.
Na przykład motyw Twenty Twenty-Four ma kilka własnych szablonów zdefiniowanych w pliku theme.json: Strona bez tytułu, Strona z panelem bocznym, Strona z szerokim obrazkiem i Strona pojedyncza z panelem bocznym.
Możesz użyć dowolnego z nich do stworzenia twojej treści.
],
"customTemplates": [
{
"name": "page-no-title",
"postTypes": ["page"],
"title": "Page No Title"
},
{
"name": "page-with-sidebar",
"postTypes": ["page"],
"title": "Page With Sidebar"
},
{
"name": "page-wide",
"postTypes": ["page"],
"title": "Page with wide Image"
},
{
"name": "single-with-sidebar",
"postTypes": ["post"],
"title": "Single with Sidebar"
}
]
Jedną rzeczą, na którą należy zwrócić uwagę, jest to, że plik theme.json odwołuje się tylko do szablonów według nazwy i zawiera metadane na ich temat, takie jak ich tytuł i typy treści, dla których są przeznaczone.
Jednak rzeczywisty wygląd i funkcjonalność własnych szablonów są zdefiniowane w oddzielnych plikach szablonów wewnątrz katalogu motywu.
Aby je zobaczyć, możesz przejść do public_html ” wp-content ” themes ” your-theme-name ” templates.
Fragmenty szablonu
Fragmenty szablonu to obszary wielokrotnego użytku, które można zastosować we własnych szablonach. Są to elementy takie jak nagłówki, stopki, panele boczne itp.
Oto jak wyglądają te fragmenty szablonu zarejestrowane w pliku theme.json:
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "sidebar", // Removed "uncategorized"
"name": "sidebar",
"title": "Sidebar"
},
{
"area": "post-meta", // Removed "uncategorized"
"name": "post-meta",
"title": "Post Meta"
}
]
Podobnie jak szablony własne, plik theme.json odwołuje się tylko do szablonów.
Ich rzeczywisty wygląd jest zdefiniowany w ich własnych plikach fragmentów szablonu w katalogu parts.
Wzorce
Wzorce to gotowe kolekcje bloków, które pozwalają tworzyć własne układy treści na stronach, wpisach lub w dowolnym innym miejscu twojego motywu.
Po otwarciu pełnego edytora witryny możesz powiadomić menu Wzorce. Jest to miejsce, w którym można znaleźć wszystkie dostępne wzorce dla twojego motywu blokowego Gutenberg.
Dzięki theme.json twórcy motywów mogą odwoływać się do wzorców z publicznego katalogu Pattern. To świetny sposób na zaoferowanie większej liczby opcji konfiguratora bez konieczności samodzielnego projektowania bloków wielokrotnego użycia.
Na przykład motyw Twenty Twenty-Four odwołuje się do dwóch wzorców z oficjalnego katalogu: trzech kolumn usług i sekcji klientów:
"patterns": [
"three-columns-of-services",
"clients-section"
]
Wiemy o tym, ponieważ te wzorce znajdują się w menu Wzorce w pełnym edytorze witryny.
Nie ma ich jednak w katalogu wzorców w katalogu motywu.
Uwaga: Możesz powiadomić, że katalogi szablonów, fragmentów i wzorców w twoim katalogu motywu zawierają pliki nieokreślone w pliku theme.json, ale są one nadal widoczne w pełnym edytorze witryny.
Wynika to z faktu, że WordPress został zaprojektowany tak, aby automatycznie rozpoznawać i używać tych folderów w oparciu o ich konwencje nazewnictwa i lokalizację w katalogu motywu.
Co należy zrobić przed edycją pliku theme.json
Ponieważ theme.json jest rdzennym plikiem motywu, edytowanie go bezpośrednio na twojej witrynie internetowej WordPress wiąże się z pewnym ryzykiem. Przypadkowe błędy mogą potencjalnie zepsuć twój motyw lub witrynę internetową.
Bezpieczniejszym podejściem jest użycie motywu potomnego.
Motyw potomny dziedziczy wszystkie style i funkcje motywu nadrzędnego (używanego motywu blokowego), ale umożliwia dostosowanie rzeczy bez modyfikowania samego motywu nadrzędnego. W ten sposób, jeśli motyw nadrzędny otrzyma aktualizacje, twoje konfiguratory nie zostaną nadpisane.
Możesz przeczytać nasz przewodnik na temat tworzenia motywu potomnego w WordPress, aby uzyskać więcej informacji. Ten artykuł pokazuje łatwą metodę z wtyczką Create Block Theme, która automatycznie wygeneruje nowy plik theme.json tylko dla twojego motywu potomnego.
Aby zapewnić płynną edycję i uniknąć przestojów witryny internetowej, zalecamy również utworzenie nowej kopii zapasowej twojej witryny WordPress. W ten sposób, jeśli coś pójdzie nie tak, możesz łatwo przywrócić twoją witrynę do poprzedniego stanu.
Zalecamy korzystanie z wtyczki takiej jak Duplicator , aby uzyskać szybkie i niezawodne rozwiązanie do tworzenia kopii zapasowych.
Zaleca się również pracę w lokalnym środowisku programistycznym WordPress lub na witrynie przejściowej. Tworzy to replikę twojej działającej witryny internetowej, w której możesz bezpiecznie testować zmiany, nie mając wpływu na odwiedzających.
Oto kilka wskazówek, o których warto pamiętać:
- Zacznij od drobnych zmian w twoim pliku theme.json i przetestuj je dokładnie przed wprowadzeniem bardziej złożonych zmian.
- Jeśli nie masz pewności co do konkretnej właściwości lub ustawienia w pliku theme.json, zapoznaj się z oficjalną dokumentacją WordPress.
- Nie wahaj się szukać pomocy u zespołu wsparcia twórcy motywu lub na forach wsparcia WordPress.org, jeśli napotkasz jakiekolwiek problemy. Zapoznaj się z naszym przewodnikiem na temat tego, jak poprosić o pomoc techniczną WordPress, aby uzyskać więcej informacji.
Jak edytować plik WordPress theme.json
Na podstawie naszych badań i testów odkryliśmy dwa sposoby edycji pliku WordPress theme.json: za pomocą edytora na całej witrynie lub za pomocą kodu. Pierwsza opcja jest znacznie łatwiejsza i bezpieczniejsza oraz pozwala zobaczyć twoje modyfikacje z poziomu front-endu witryny internetowej.
Tymczasem drugi wybór jest zalecany, jeśli czujesz się komfortowo z zaawansowanym rozwojem WordPress.
Edycja motywu.json bez kodu (dla początkujących)
Aby edytować twój plik theme.json bez bezpośredniego dotykania kodu, możesz użyć wtyczki Create Block Theme. Wtyczka ta została opublikowana przez oficjalny zespół WordPress.org, aby umożliwić użytkownikom tworzenie, edytowanie i zapisywanie odmian stylu ich motywu blokowego.
Najpierw zainstaluj wtyczkę WordPress w twoim obszarze administracyjnym. Następnie otwórz edytor całej witryny, przechodząc do Wygląd ” Edytor.
Zobaczysz teraz kilka menu do edycji twojego motywu.
Tutaj wybierz opcję „Style”.
Następnie kliknij ikonkę ołówka „Edytuj style”.
Spowoduje to przejście do edytora bloków w celu edycji globalnych stylów twojej witryny internetowej.
Teraz możesz zmienić styl twojego motywu jak zwykle. Aby uzyskać więcej informacji, przeczytaj sekcję dotyczącą edycji stylów globalnych twojego motywu w naszym przewodniku po pełnej edycji witryny WordPress.
Spróbujmy stworzyć własną paletę kolorów jako przykład.
Schemat kolorów lub paleta to zestaw domyślnych kolorów dla elementów takich jak tekst, tła i przyciski. Zapewnia on spójny wygląd całej twojej witryny internetowej.
Elementy korzystające z tego samego ustawienia kolorów zawsze będą do siebie pasować, dzięki czemu Twoja witryna internetowa będzie wyglądać na dopracowaną i profesjonalną.
Aby edytować paletę, wybierz „Kolory” na panelu bocznym ustawień stylów.
Na następnym ekranie zobaczysz kilka ustawień, które pozwolą ci dostosować kolory twojego motywu.
Tutaj kliknij kolory w sekcji „Paleta”.
W tym przykładzie motyw Twenty Twenty-Four zdefiniował już 5 kolorów w palecie, ale można zmienić dowolny z nich, aby utworzyć własny od podstaw.
Aby to zrobić, kliknij jeden z kolorów w sekcji „Motyw”. Następnie wybierz dowolny kolor w narzędziu do wybierania kolorów.
Teraz, po wyświetleniu podglądu twojej witryny internetowej, zobaczysz, że określone bloki lub elementy, które używały poprzedniego koloru, zostały zastąpione kolorem, który właśnie wybrałeś z palety.
Możesz powtórzyć te same kroki dla każdego koloru. Następnie kliknij „Zapisz”.
Po zapisaniu twoich zmian kliknij przycisk Utwórz motyw blokowy (ikonka klucza).
Następnie wybierz opcję „Zapisz zmiany w motywie”.
Na następnym ekranie należy przewinąć ekran w dół.
Następnie kliknij „Zapisz zmiany”. Spowoduje to, że WordPress zapisze wszystkie zmiany wprowadzone w twoim motywie w pliku theme.json.
Gdy to zrobisz, edytor bloków odświeży się.
Teraz ponownie kliknij przycisk Utwórz motyw blokowy i wybierz opcję „Zobacz theme.json”.
Aby zobaczyć kod dla twojej własnej palety kolorów, poszukaj palety, która jest zagnieżdżona wewnątrz kolorów i ustawień, w ten sposób:
"settings": {
// Some code...
"color": {
// Some code...
"palette":
}
}
Pod nim powinieneś zobaczyć nowe kody szesnastkowe twojej własnej palety kolorów.
Edycja motywu.json za pomocą kodu (użytkownicy zaawansowani)
Ta metoda jest zalecana, jeśli jesteś początkującym programistą motywów WordPress lub masz pewne doświadczenie z kodem.
Najpierw otwórz plik theme.json twojego motywu blokowego w katalogu WordPress. Możesz użyć edytora kodu w menedżerze plików twojego serwera WWW lub pobrać plik, edytować go na komputerze i przesłać z powrotem na twój serwer.
Do celów demonstracyjnych użyjemy motywu Twenty Twenty-Four i menedżera plików Bluehost. Jeśli jesteś użytkownikiem Bluehost i korzystasz z menedżera plików, możesz po prostu kliknąć prawym przyciskiem myszy twój plik theme.json i kliknąć „Edytuj”.
Jeśli korzystasz z FTP, możesz przeczytać nasz przewodnik na temat korzystania z FTP do przesyłania plików do WordPress.
Wypróbujmy prosty przykład edycji pliku theme.json: tworzenie własnych wielkości liter.
Ponownie, należy pamiętać, że właściwość settings określa domyślne style twojego motywu, podczas gdy właściwość styles je implementuje. Z tego powodu będziemy edytować właściwość settings w pliku theme.json.
Jeśli korzystasz z motywu potomnego, możesz po prostu skopiować i wkleić poniższy kod do pliku theme.json i zmienić wielkości liter w pikselach według własnego uznania:
{
"settings": {
"typography": {
"fluid": false,
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "16px"
},
{
"name": "Medium",
"slug": "medium",
"size": "24px"
},
{
"name": "Large",
"slug": "large",
"size": "40px"
},
{
"name": "Extra Large",
"slug": "x-lagrge", // Typo fixed (large -> large)
"size": "48px"
}
]
}
}
}
Uwaga: Jeśli edytujesz bezpośrednio plik motywu nadrzędnego, musisz znaleźć kod, który mówi fontSizes.
Powinien on być zagnieżdżony wewnątrz typografii i ustawień, w następujący sposób:
{
"settings": {
// Some code...
"typography": {
// Some code...
"fontSizes": [
// Font size definitions here
]
}
}
}
Następnie zastąp te linie kodu fragmentem kodu z powyższego akapitu. Upewnij się tylko, że nie ma w nim błędów składni.
Po zakończeniu zapisz plik i wyświetl podgląd twojej witryny internetowej, aby zobaczyć wprowadzone zmiany. Użytkownicy Bluehost mogą po prostu kliknąć „Zapisz zmiany” w edytorze kodu menedżera plików.
Jeśli chcesz dalej edytować twój motyw.json, zdecydowanie zachęcamy do zapoznania się ze strukturą pliku, jak wyjaśniono w poprzedniej sekcji.
Sugerujemy również przeczytanie oficjalnego dokumentu WordPress Settings Reference, który zawiera pełną listę dostępnych właściwości ustawień i instrukcje ich używania.
Dodatkowa wskazówka: Użyj WPCode, aby dodać własny kod do twojego motywu.
W tym przewodniku dowiedziałeś się o pliku theme.json i jego potencjale w zakresie konfiguratora motywu. Ale być może bezpośrednia edycja nadal wydaje się nieco przytłaczająca.
Na szczęście istnieje inna przyjazna dla użytkownika opcja dodawania własnego kodu i wprowadzania zaawansowanych dostosowań: WPCode.
WPCode umożliwia wstawienie własnych fragmentów kodu bez konieczności dotykania plików Twojego motywu. To znacznie zmniejsza ryzyko zepsucia twojej witryny internetowej podczas konfiguratora.
Jeśli chcesz dowiedzieć się więcej o tym fragmencie kodu, sprawdź naszą pełną recenzję WPCode.
Poniżej znajduje się kilka pomocnych poradników, które pomogą ci rozpocząć korzystanie z WPCode:
- Przydatne fragmenty kodu WordPress dla początkujących (wybór eksperta)
- Jak wyróżnić nowe wpisy dla powracających użytkowników WordPressa?
- Jak wyróżnić tekst w WordPress
- Jak łatwo dodać cień ramki w WordPress
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się więcej o pliku theme.json w WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących, jak edytować witry nę internetową WordPress i naszym wyborem ekspertów najlepszych kreatorów stron typu „przeciągnij i upuść” dla WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.