Rozszerzanie theme.json na niestandardowe typy wpisów i wyniki wtyczek: praktyczny przewodnik

Podsumowanie

Wielu programistów WordPressa tworzy niestandardowe typy wpisów lub wtyczki, które generują treści (np. referencje, portfolio). Jednak theme.json – centralna konfiguracja globalnych stylów – często domyślnie ignoruje te niestandardowe elementy, prowadząc do niespójnego projektu. Ten artykuł przeprowadzi Cię przez rejestrację niestandardowych typów wpisów, aby dziedziczyły style z theme.json, nadpisywanie ustawień dla konkretnych bloków oraz łączenie wyników wtyczek z podstawowymi tokenami projektu. Otrzymasz instrukcje krok po kroku, przykłady z życia wzięte, takie jak stylowanie CPT „Członek zespołu”, a także uwagi o wydajności i konfliktach z zewnętrznymi wtyczkami. Dzięki temu możesz zapewnić, że każda niestandardowa treść będzie zgodna z systemem projektowym zdefiniowanym w edytorze.

Czy kiedykolwiek zbudowałeś niestandardowy typ wpisu lub zintegrowałeś wtyczkę innej firmy, tylko po to, by odkryć, że jej wyniki całkowicie ignorują piękny system projektowy, który skrupulatnie skonfigurowałeś w theme.json? Nie jesteś sam. Domyślnie theme.json dotyczy tylko podstawowych bloków WordPressa i zarejestrowanych stylów bloków, pozostawiając niestandardowe typy wpisów i treści generowane przez wtyczki same sobie. Skutkuje to zazwyczaj osadzonym CSS, duplikowaniem zestawów czcionek lub niedopasowaną paletą kolorów, co psuje doświadczenia użytkownika. Ale jest lepszy sposób: możesz rozszerzyć theme.json na te niestandardowe elementy, zapewniając spójny, łatwy w utrzymaniu system projektowy na całej witrynie. W tym przewodniku omówimy cztery praktyczne kroki, aby to osiągnąć, wraz z przykładami kodu i rzeczywistymi zastrzeżeniami.

Zrozumienie zakresu theme.json

Zanim zaczniemy, ważne jest, aby zrozumieć, że theme.json jest koncepcją motywów blokowych. Definiuje globalne style, ustawienia (takie jak palety kolorów i rozmiary czcionek) oraz style specyficzne dla bloków w edytorze bloków i na froncie. Jednak jego zasięg jest ograniczony: kontroluje tylko bloki, które jawnie deklarują obsługę właściwości theme.json za pomocą register_block_type lub starszego add_theme_support. Niestandardowe typy wpisów utworzone za pomocą register_post_type nie dziedziczą automatycznie tych stylów, chyba że są zbudowane z bloków lub jawnie stylizowane.

Krok 1: Rejestracja niestandardowych typów wpisów z obsługą edytora bloków

Pierwszym krokiem jest zapewnienie, że Twój niestandardowy typ wpisu używa edytora bloków. Podczas wywoływania register_post_type ustaw 'show_in_rest' => true i dołącz 'editor' do tablicy supports. Umożliwia to edytor bloków dla tego typu wpisu, pozwalając autorom korzystać ze stylów bloków z theme.json. Na przykład, oto CPT „Członek zespołu”:

function create_team_member_cpt() {
    $args = array(
        'public' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'show_in_menu' => true,
        'labels' => array(
            'name' => 'Team Members',
            'singular_name' => 'Team Member',
        ),
        'rewrite' => array( 'slug' => 'team' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

Teraz, gdy edytujesz wpis członka zespołu, zobaczysz edytor bloków z globalnymi stylami Twojego motywu zastosowanymi do podstawowych bloków, takich jak Akapit, Nagłówek i Obraz. To samo często rozwiązuje większość problemów ze stylowaniem. Jeśli potrzebujesz bardziej szczegółowej kontroli, przejdź do następnego kroku. Aby dowiedzieć się więcej o budowaniu motywów blokowych z theme.json, zobacz Jak zbudować niestandardowy motyw blokowy WordPress z theme.json.

Krok 2: Dodawanie niestandardowych stylów bloków za pomocą theme.json

Czasami chcesz zastosować określone style do wszystkich wystąpień treści swojego niestandardowego typu wpisu – na przykład nadać całemu wpisowi kolor tła lub specjalne wypełnienie. Możesz celować w core/post-content lub opakować swoją treść w niestandardowy blok grupy i stylizować go przez theme.json. Dodaj następujące elementy do pliku theme.json w obiekcie styles:

{
  "styles": {
    "blocks": {
      "core/post-content": {
        "css": "background-color: var(--wp--preset--color--light); padding: 2rem;"
      }
    }
  }
}

Spowoduje to zastosowanie jasnego tła i wypełnienia do obszaru treści wszystkich wpisów, w tym Twojego CPT Członka zespołu. Możesz także zdefiniować warianty specyficzne dla bloków wewnątrz settings.blocks, aby udostępnić opcje stylów w edytorze.

Krok 3: Używanie niestandardowych właściwości theme.json dla wyników wtyczek

Wtyczki często generują treści za pomocą shortcode'ów, widgetów lub niestandardowych bloków. Aby stylizować je spójnie, wykorzystaj niestandardowe właściwości CSS generowane przez theme.json. Na przykład, jeśli Twój motyw definiuje kolor podstawowy jako --wp--preset--color--primary, możesz go użyć w CSS swojej wtyczki:

.my-plugin-button {
    background-color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

Dzięki temu, gdy administrator zmieni paletę kolorów w theme.json, przycisk wtyczki automatycznie się zaktualizuje. Aby to było niezawodne, zawsze używaj presetowych zmiennych CSS zamiast twardego kodowania wartości. Dodatkowo, jeśli Twoja wtyczka rejestruje własne bloki, możesz dziedziczyć ustawienia theme.json, używając useSetting w JavaScript lub przekazując $attributes w renderowaniu PHP, co opisano w Opanowanie dynamicznych bloków WordPress.

Krok 4: Obsługa dynamicznych bloków

W przypadku niestandardowych bloków, które generują dynamiczną treść (np. suwak referencji), musisz zarejestrować blok z obsługą edytora bloków i jawnie powiązać go z theme.json. W PHP użyj register_block_type z $args, które zawierają 'render_callback' i upewnij się, że plik block.json bloku ustawia 'supports' => array( 'color' => true, 'typography' => true ). Następnie w funkcji zwrotnej renderowania możesz uzyskać dostęp do globalnych stylów za pomocą wp_get_global_styles() i zastosować je. Na przykład:

function render_testimonial_block( $attributes, $content ) {
    $styles = wp_get_global_styles();
    $color = $styles['elements']['link']['color']['text'] ?? '#000';
    return '<div style="color: ' . esc_attr( $color ) . ';">' . $content . '</div>';
}

Takie podejście zapewnia, że Twój niestandardowy blok respektuje tokeny projektu motywu. Więcej na temat rejestracji bloków znajdziesz w Budowanie solidnych wtyczek WordPress.

Zastrzeżenia

Rozszerzanie theme.json jest potężne, ale uważaj na następujące pułapki:

1. Wydajność: Dodawanie zbyt wielu niestandardowych stylów w theme.json może rozdąć plik i wydłużyć czas parsowania CSS. Trzymaj się globalnych ustawień i oszczędnie używaj stylów specyficznych dla bloków.
2. Konflikty wtyczek: Niektóre wtyczki resetują lub nadpisują ustawienia theme.json. Zawsze testuj z minimalnym zestawem wtyczek i rozważ podpięcie się do after_setup_theme, aby ponownie zastosować swoje modyfikacje.
3. Klasyczne motywy: Jeśli Twój motyw nie używa edytora bloków (tj. jest klasycznym motywem), theme.json ma ograniczony efekt. Rozważ migrację do motywu blokowego lub użycie funkcji wp_enqueue_global_styles do załadowania stylów.
4. Pamięć podręczna przeglądarki: Zmiany w theme.json mogą nie pojawić się natychmiast z powodu buforowania. Wyczyść pamięć podręczną przeglądarki i użyj wersjonowania arkusza stylów.

Podsumowanie

Masz teraz jasny plan, jak sprawić, by niestandardowe typy wpisów i wyniki wtyczek współpracowały z Twoim systemem projektowym theme.json. Kluczem jest zarejestrowanie CPT z obsługą edytora bloków, zdefiniowanie konkretnych stylów dla bloku treści wpisu, użycie niestandardowych właściwości CSS w wynikach wtyczek oraz zarejestrowanie własnych bloków z odpowiednią integracją z theme.json. To podejście eliminuje niespójności, zmniejsza nakład pracy związany z utrzymaniem i daje administratorom witryny możliwość kontrolowania wyglądu i stylu z jednego źródła. Zacznij wdrażać te kroki już dziś, aby wprowadzić spójność do swoich projektów WordPress.