Kompleksowy przewodnik po pliku WordPress theme.json

Dokonywanie niestandardowych zmian stylistycznych w witrynie WordPress zazwyczaj oznacza ręczną edycję wielu plików. Ponadto, jeśli zmienisz motyw, będziesz musiał ponownie skonfigurować wszystkie te ustawienia od podstaw. Może to być czasochłonny proces.

Na szczęście, kiedy WordPress uruchomił wersję 5.8, wprowadził nowy plik theme.json . Jest to dedykowane miejsce do stylizowania edytora bloków (i poszczególnych bloków) z przodu iz tyłu. W rezultacie znacznie łatwiej jest zarządzać stylami witryny.

W tym poście przyjrzymy się bliżej plikowi theme.json . Następnie omówimy kilka kluczowych kwestii, zanim pokażemy, jak edytować plik theme.json .

Co to jest theme.json w WordPressie?

Plik theme.json to mechanizm, który umożliwia konfigurowanie Edytora bloków z większą kontrolą. Jest to przydatne do wprowadzania zmian stylistycznych w całej witrynie, ponieważ można przypisać domyślne style do wszystkich (lub niektórych) bloków.

Zasadniczo theme.json to rozwiązanie, które zwiększa możliwości API Block Editor. Na przykład z theme.json zyskasz możliwość programowego kontrolowania edytora. Ponadto możesz zintegrować system stylu blokowego. Ułatwia to zarządzanie użytkownikami, motywami i podstawowymi preferencjami.

Plik theme.json został wprowadzony w tym samym czasie co Edytor strony. W połączeniu theme.json jest jednym z pierwszych głównych kroków do zarządzania stylami dla przyszłych wersji WordPress. To świetny sposób na uzyskanie większej kontroli nad motywem (i witryną), dzięki czemu możesz wprowadzać zmiany w menu, nagłówkach i stopkach.

Krótko mówiąc, Edytor Witryny umożliwia wprowadzanie mnóstwa globalnych zmian stylistycznych, podczas gdy theme.json to mechanizm, który pozwala konfigurować niestandardowe opcje dla Twoich bloków.

Można na przykład przedefiniować ustawienia Edytora bloku, aby ukryć lub pokazać opcje dostosowywania dla określonych użytkowników. Dodatkowo możesz zdefiniować domyślne kolory i rozmiary czcionek dla swoich bloków podczas konfigurowania nowej szerokości lub wyrównania dla edytora.

Gdzie znajduje się plik theme.json?

Możesz znaleźć plik theme.json w katalogu głównym katalogu motywu. Jeśli korzystasz z Edytora witryny i aktywowałeś motyw oparty na blokach, taki jak Twenty Twenty-Three , na pewno będziesz mieć dostęp do pliku theme.json .

Jeśli jednak wybrany motyw nie zawiera pliku theme.json , możesz zmienić motyw lub utworzyć własny plik. Należy pamiętać, że niektóre motywy zawierają bardzo specyficzne CSS lub bloki stylów, które mogą być niezgodne ze zmianami wprowadzonymi w pliku theme.json. Na przykład tryb ciemny w Twenty Twenty-One nie może zostać zastąpiony zmianami stylistycznymi dodanymi w pliku theme.json.

Co zrobić przed edycją pliku theme.json

Teraz, gdy wiesz już trochę więcej o pliku theme.json , przyjrzyjmy się kilku ważnym czynnikom, które należy wziąć pod uwagę przed wprowadzeniem zmian.

1. Utwórz kopię zapasową swojej witryny

Przed wprowadzeniem jakichkolwiek znaczących zmian ważne jest, aby wykonać kopię zapasową witryny. W ten sposób, jeśli coś pójdzie nie tak, możesz odzyskać swoją witrynę i zacząć od nowa.

Korzystanie z wtyczki Jetpack VaultPress Backup to jeden z najłatwiejszych sposobów tworzenia kopii zapasowych witryny.

To narzędzie Jetpack tworzy kopie zapasowe w chmurze w czasie rzeczywistym i przechowuje je w bezpiecznej sieci serwerów WordPress.com. Ponadto proces przywracania jest szybki i prosty.

Możesz skorzystać z przywracania jednym kliknięciem z aplikacji mobilnej, nawet jeśli Twoja witryna jest całkowicie niedostępna.

2. Rozważ skorzystanie z witryny przejściowej

Witryna przejściowa to świetny sposób na przetestowanie zmian, które chcesz wprowadzić, bez wpływu na działającą witrynę. Zasadniczo witryna przejściowa to kopia Twojej witryny, która nie jest udostępniana ogółowi społeczeństwa. Dzięki temu zyskasz prywatność, aby przetestować nowe funkcje lub zaktualizować swoją witrynę.

W ten sposób nie będziesz musiał się martwić, że coś pójdzie nie tak podczas edytowania pliku theme.json . Ponadto, jeśli wystąpi problem, nadal będziesz mieć dostęp do swojej aktywnej witryny. Oznacza to również, że kiedy w końcu wprowadzisz jakiekolwiek zmiany w działającej witrynie, możesz mieć pewność, że nie wpłyną one negatywnie na funkcjonalność Twoich stron.

Istnieje wiele sposobów konfigurowania witryny przejściowej. Możesz poprosić swojego usługodawcę hostingowego, ręcznie skonfigurować różne subdomeny dla swojej witryny lub zainstalować wtyczkę. Ale może być łatwiej wybrać lokalne narzędzie programistyczne WordPress.

Jak edytować plik theme.json

W tym momencie możesz uzyskać dostęp do pliku theme.json i edytować go! W tej sekcji pokażemy kilka przydatnych sposobów edytowania pliku theme.json, takich jak tworzenie palety kolorów i zastępowanie domyślnego rozmiaru czcionki bloków.

Aby rozpocząć, musisz przejść do katalogu głównego swojej witryny. Możesz to zrobić za pomocą klienta SFTP, takiego jak FileZilla, lub odwiedzając Menedżera plików. Następnie po prostu przejdź do katalogu public_html . W tym miejscu zlokalizuj folder wp-content .

Następnie przejdź do motywów i wybierz aktywny motyw dla swojej witryny. Tutaj znajdziesz plik theme.json , jeśli Twój motyw go posiada.

1. Utwórz domyślną paletę kolorów

Możesz chcieć ustalić ustaloną paletę kolorów dla Edytora. W ten sposób możesz szybko uzyskać dostęp do swoich kolorów i zapewnić spójną wizualną markę na swoich stronach.

Poza tym pomocne może być posiadanie innych użytkowników, którzy tworzą posty i strony w Twojej witrynie, ponieważ będą oni mieli dostęp tylko do kolorów zawartych w repozytorium kolorów. Ponadto nie będą mieli możliwości tworzenia własnych odcieni i przejść tonalnych.

Aby rozpocząć, zlokalizuj plik theme.json, wykonując czynności opisane wcześniej. Aby włączyć to ustawienie, należy wziąć pod uwagę trzy czynniki:

1. Musisz wyłączyć niestandardowe gradienty
2. Musisz wyłączyć niestandardowe opcje kolorów
3. Musisz dodać niestandardową paletę z kolorami swojej marki

Po połączeniu się z plikami motywu za pomocą SFTP lub Menedżera plików musisz skopiować następujący kod i zapisać go w katalogu głównym motywu:

 { “version”: 1, “settings”: { “color”: { “custom”: false, “customGradient”: false, “gradients”:[], “link”: false, “palette”:[ { “slug”: “vivadcyanblue”, “color”: “#0693E3” }, { “slug”: “vividgreencyan”, “color”: “#00D084”, }, { “slug”: “white”, “color”: “#ffffff” } ] }

Pamiętaj, że będziesz musiał zmodyfikować powyższy kod, aby odzwierciedlić swoje preferencje. Tutaj wyłączyliśmy niestandardowe opcje gradientu i niestandardowego koloru.

Ponadto ustaliliśmy ustaloną paletę kolorów trzech różnych odcieni. Dlatego gdy użytkownicy tworzą posty i strony w witrynie, będą mieli dostęp tylko do tych odcieni.

Wspaniałe w tworzeniu niestandardowej palety w pliku theme.json jest to, że WordPress przepisze również cały wymagany CSS. W ten sposób wszelkie zmiany kolorów dokonane w Edytorze bloku zostaną również odzwierciedlone na interfejsie użytkownika.

2. Skonfiguruj niestandardowe rozmiary czcionek

Przydatne może być również skonfigurowanie określonych rozmiarów czcionek dla bloku akapitu. Oczywiście blok zapewnia zestaw domyślnych rozmiarów czcionek, ale możesz użyć pliku theme.json , aby zastąpić go własnymi preferencjami.

Ponownie musisz znaleźć katalog główny swojego motywu, odwiedzając folder motywów w wp-content . Następnie zlokalizuj plik theme.json. Rozmiary czcionek są dodawane do pliku theme.json w ustawieniach → typografia → rozmiary czcionek.

Następnie musisz wprowadzić swoje wartości. Użyjesz rozmiaru , aby dodać prawidłową wartość rozmiaru czcionki CSS. Tymczasem ślimak to identyfikator używany przez WordPress we właściwości niestandardowej CSS. Możesz także dodać nazwę , ale jest to tylko na własny użytek, ponieważ zobaczysz ją w edytorze.

W WordPress domyślny „mały” rozmiar czcionki ma wartość 13 pikseli, więc możesz oprzeć swoje wartości na tym. Podsumowując, po dodaniu tego kodu do pliku plik theme.json będzie wyglądał mniej więcej tak:

 add_theme_support( 'editor-font-sizes', array(    array(        'name' => esc_attr__( 'Small', 'themeLangDomain' ),        'size' => 12,        'slug' => 'small'    ),    array(        'name' => esc_attr__( 'Regular', 'themeLangDomain' ),        'size' => 16,        'slug' => 'regular'    ),    array(        'name' => esc_attr__( 'Large', 'themeLangDomain' ),        'size' => 36,        'slug' => 'large'    ),    array(        'name' => esc_attr__( 'Huge', 'themeLangDomain' ),        'size' => 50,        'slug' => 'huge'    ) ) );

Po prostu zapisz zmiany, aby zaktualizować ustawienia blokowania WordPress.

3. Twórz niestandardowe szablony i części szablonów

Innym sposobem edytowania pliku theme.json jest tworzenie niestandardowych szablonów i części szablonów. Ponieważ motywy mogą zawierać listę niestandardowych szablonów, które są obecne w folderze szablonów , możesz zadeklarować typy postów, które mogą z nich korzystać, oraz tytuł, który pokazujesz swoim użytkownikom.

Aby rozpocząć, otwórz plik theme.json. Musisz wymyślić nazwę, tytuł i typ postu, chociaż ostatnie ustawienie jest opcjonalne. Następnie, dodaj następujący kod do pliku:

 { “version”: 1, “customTemplates”: [ { “name”: “custom-template-example”, “title”: “The Custom Template Title”, “postTypes”: [ “page”, “post”, “my-cpt” ] } ] }

W tym momencie utworzyłeś szablon dla swoich stron, postów i niestandardowych typów postów. Możesz pójść o krok dalej i stworzyć części szablonu dla swojego motywu.

W ten sposób możesz skonfigurować plik theme.json , aby zadeklarował termin obszaru dla części szablonu, takiej jak blok nagłówka lub stopki. Definiując to w pliku theme.json , możesz mieć pewność, że ustawienie zostanie zastosowane do wszystkich zastosowań tej części szablonu, a nie tylko do pojedynczego bloku.

Zanim zaczniesz, musisz wziąć pod uwagę nazwę, tytuł i obszar części szablonu. Ważne jest, aby pamiętać, że jeśli nie określisz obszaru, zostanie on ustawiony jako „nieskategoryzowany” i nie spowoduje zmiany bloku.

Aby utworzyć część szablonu dla swojego motywu, dodaj następujący kod do pliku theme.json :

 { “version”: 1, “templateParts”: [ { “name: “my-template-part”, “title”: “Footer”, “area”: “footer” } ] }

Następnie pamiętaj o zapisaniu zmian przed wyjściem z pliku theme.json.

Często zadawane pytania dotyczące theme.json w WordPress

Teraz już wiesz, jak edytować plik theme.json, ale nadal możesz mieć co do tego kilka wątpliwości. Dlatego poniżej odpowiedzieliśmy na niektóre z najczęstszych pytań dotyczących pliku theme.json !

Kiedy po raz pierwszy w WordPress pojawił się theme.json?

Plik theme.json został po raz pierwszy wprowadzony wraz z wydaniem WordPress 5.8. To wtedy uruchomiono pełną edycję witryny (FSE) wraz z możliwością korzystania z motywów opartych na blokach.

To wydanie oznaczało ogromną zmianę na platformie, ponieważ użytkownicy uzyskali możliwość wprowadzania zmian w całej witrynie i uzyskali większą kontrolę nad ustawieniami stylistycznymi. Później, wraz z WordPress 5.9, theme.json ewoluował do drugiej wersji.

Co możesz zrobić z plikiem theme.json?

Krótko mówiąc, theme.json umożliwia zmianę i zastosowanie nowych ustawień związanych ze stylem do wszystkich bloków WordPress. Dzięki temu zyskujesz lepszą kontrolę nad zmianami stylistycznymi. Ponadto oznacza to, że można uniknąć konieczności konfigurowania tych zmian indywidualnie na poziomie bloku.

Na przykład możesz edytować plik theme.json , aby wyłączać/włączać funkcje, takie jak inicjał, dopełnienie, margines i niestandardowa wysokość linii. Ponadto możesz dodać wiele palet kolorów, bichromii i przejść tonalnych, aby przyspieszyć nakładanie kolorów marki na elementy na stronie.

Co więcej, możesz określić dokładne rozmiary czcionek i zastosować to w całej witrynie. Lub dodaj domyślne szerokości treści i przypisz części szablonu do obszarów części szablonu.

Jakie są wymagania wstępne dotyczące korzystania z pliku theme.json?

Edytowanie pliku theme.json to łatwy sposób na wprowadzanie zmian stylistycznych w całej witrynie. Ale niestety nie jest to opcja dla wszystkich użytkowników.

Po pierwsze, musisz użyć Edytora bloków. Jeśli wolisz korzystać z programów budujących strony, nie będziesz mógł skorzystać z tej funkcji. Ponadto musisz mieć pewną wiedzę na temat CSS i czuć się komfortowo, edytując pliki witryny.

Na koniec musisz mieć dostęp do pliku theme.json. Jak omówiliśmy wcześniej, nie każdy motyw ma plik theme.json . Ponadto ustawienia niektórych motywów zastąpią wszelkie zmiany wprowadzone w pliku theme.json .

Jeśli Twój motyw zawiera plik theme.json , znajdziesz go w katalogu głównym swojej witryny. Możesz to zlokalizować za pomocą SFTP lub odwiedzając Menedżera plików. Następnie znajdź folder motywów w wp-content . To tutaj znajduje się plik theme.json . Jeśli Twój motyw nie zawiera pliku theme.json, możesz zmienić motyw lub samodzielnie utworzyć plik theme.json .

Użyj pliku WordPress theme.json, aby usprawnić projektowanie stron internetowych

Wprowadzanie niestandardowych zmian w całej witrynie często oznacza edytowanie wielu plików lub wykonywanie wielu zadań ręcznych. Ale dzięki theme.json otrzymasz dedykowaną przestrzeń do kontrolowania i zarządzania wszystkimi ustawieniami stylistycznymi Twojej witryny.

Plik theme.json znajduje się w katalogu głównym Twojej witryny począwszy od wersji WordPress 5.8. Możesz edytować plik, aby wprowadzić rozległe zmiany, takie jak zastosowanie niestandardowej palety kolorów do swojej witryny i zastąpienie domyślnych rozmiarów czcionek WordPress.

Przed edycją pliku theme.json ważne jest, aby wykonać kopię zapasową witryny. Jetpack VaultPress Backup to łatwa w użyciu wtyczka, która umożliwia przywracanie witryny nawet w trybie offline. Ponadto tworzy kopie zapasowe wszystkich plików, danych WooCommerce i bazy danych!