Paplašinot theme.json uz pielāgotiem ierakstu veidiem un spraudņu izvadi: Praktisks ceļvedis

Kopsavilkums

Daudzi WordPress izstrādātāji veido pielāgotus ierakstu veidus vai spraudņus, kas izvada saturu (piemēram, atsauksmes, portfeļus). Tomēr theme.json — centrālā konfigurācija globālajiem stiliem — pēc noklusējuma bieži ignorē šos pielāgotos elementus, radot nesaskaņotu dizainu. Šis raksts jūs iepazīstinās ar to, kā reģistrēt pielāgotus ierakstu veidus, lai tie mantotu theme.json stilus, pārrakstīt iestatījumus konkrētiem blokiem un savienot spraudņu izvadi ar pamata dizaina marķieriem. Jūs saņemsiet soli pa solim instrukcijas, reālus piemērus, piemēram, 'Komandas dalībnieka' pielāgotā ierakstu veida stila noformēšanu, un piezīmes par veiktspēju un trešo pušu konfliktiem. Beigās jūs varēsiet nodrošināt, ka jebkurš pielāgots saturs atbilst jūsu vietnes redaktorā definētajai dizaina sistēmai.

Vai esat kādreiz izveidojis pielāgotu ierakstu veidu vai integrējis trešās puses spraudni, tikai atklājot, ka tā izvade pilnībā ignorē skaisto dizaina sistēmu, kuru jūs rūpīgi konfigurējāt theme.json? Jūs neesat viens. Pēc noklusējuma theme.json attiecas tikai uz WordPress pamatblokiem un reģistrētajiem bloku stiliem, atstājot pielāgotos ierakstu veidus un spraudņu ģenerēto saturu pašplūsmā. Tas parasti rada iekļautus CSS, dublētus fontu komplektus vai nesaskaņotu krāsu paleti, kas sabojā lietotāja pieredzi. Bet ir labāks veids: jūs varat paplašināt theme.json, lai tas aptvertu šos pielāgotos elementus, nodrošinot konsekventu, uzturamu dizaina sistēmu visā jūsu vietnē. Šajā ceļvedī mēs apskatīsim četras praktiskas darbības, lai to panāktu, kopā ar koda piemēriem un reālās dzīves piezīmēm.

Izpratne par theme.json darbības jomu

Pirms iedziļināties, ir svarīgi saprast, ka theme.json ir bloku tēmas koncepts. Tas definē globālos stilus, iestatījumus (piemēram, krāsu paletes un fontu izmērus) un bloku specifiskus stilus bloku redaktoram un priekšgalam. Tomēr tā sasniedzamība ir ierobežota: tas kontrolē tikai blokus, kas skaidri deklarē atbalstu theme.json rekvizītiem, izmantojot register_block_type vai vecāku add_theme_support. Pielāgoti ierakstu veidi, kas izveidoti ar register_post_type, automātiski nemanto šos stilus, ja vien tie nav veidoti ar blokiem vai skaidri noformēti.

1. solis: Pielāgotu ierakstu veidu reģistrēšana ar bloku redaktora atbalstu

Pirmais solis ir nodrošināt, lai jūsu pielāgotais ierakstu veids izmanto bloku redaktoru. Izsaucot register_post_type, iestatiet 'show_in_rest' => true un iekļaujiet 'editor' masīvā supports. Tas iespējo bloku redaktoru šim ierakstu veidam, ļaujot autoriem izmantot bloku līmeņa stilus no theme.json. Piemēram, šeit ir "Komandas dalībnieka" pielāgotais ierakstu veids:

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' );

Tagad, kad rediģējat komandas dalībnieka ierakstu, jūs redzēsiet bloku redaktoru ar jūsu tēmas globālajiem stiliem, kas piemēroti pamatblokiem, piemēram, Rindkopa, Virsraksts un Attēls. Tas vien bieži vien atrisina lielāko daļu stila problēmu. Ja nepieciešama precīzāka kontrole, pārejiet pie nākamā soļa. Lai dziļāk izpētītu bloku tēmu veidošanu ar theme.json, skatiet Kā izveidot pielāgotu WordPress bloku tēmu ar theme.json.

2. solis: Pielāgotu bloku stilu pievienošana, izmantojot theme.json

Dažreiz vēlaties piemērot īpašus stilus visiem jūsu pielāgotā ierakstu veida satura gadījumiem — piemēram, piešķirt visam ierakstam fona krāsu vai īpašu polsterējumu. Varat mērķēt core/post-content vai ietīt savu saturu pielāgotā grupas blokā un noformēt to, izmantojot theme.json. Pievienojiet sekojošo savam theme.json failam zem objekta styles:

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

Tas piemēros gaišu fonu un polsterējumu visu ierakstu satura apgabalam, ieskaitot jūsu Komandas dalībnieka pielāgoto ierakstu veidu. Varat arī definēt bloku specifiskas variācijas iekšpusē settings.blocks, lai nodrošinātu stila iespējas redaktorā.

3. solis: theme.json pielāgoto rekvizītu izmantošana spraudņu izvadei

Spraudņi bieži izvada saturu, izmantojot īskodus, logrīkus vai pielāgotus blokus. Lai tos konsekventi noformētu, izmantojiet CSS pielāgotos rekvizītus, ko ģenerē theme.json. Piemēram, ja jūsu tēma definē primāro krāsu kā --wp--preset--color--primary, varat to izmantot sava spraudņa CSS:

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

Tas nodrošina, ka tad, kad vietnes administrators maina krāsu paleti theme.json, jūsu spraudņa poga automātiski atjauninās. Lai to padarītu robustu, vienmēr izmantojiet iepriekš iestatītos CSS mainīgos, nevis cieti kodētas vērtības. Turklāt, ja jūsu spraudnis reģistrē savus blokus, varat mantot theme.json iestatījumus, izmantojot useSetting JavaScript vai nododot $attributes PHP renderēšanā, kā aprakstīts Apgūstot WordPress dinamiskos blokus.

4. solis: Dinamisku bloku apstrāde

Pielāgotiem blokiem, kas izvada dinamisku saturu (piemēram, atsauksmju slīdnis), jums ir jāreģistrē bloks ar bloku redaktora atbalstu un skaidri jāsaista ar theme.json. PHP izmantojiet register_block_type ar $args, kas ietver 'render_callback', un nodrošiniet, ka jūsu bloka fails block.json iestata 'supports' => array( 'color' => true, 'typography' => true ). Pēc tam renderēšanas atgriezeniskajā saistījumā varat piekļūt globālajiem stiliem, izmantojot wp_get_global_styles(), un tos piemērot. Piemēram:

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>';
}

Šī pieeja nodrošina, ka jūsu pielāgotais bloks respektē tēmas dizaina marķierus. Lai uzzinātu vairāk par bloku reģistrāciju, skatiet Stabilu WordPress spraudņu veidošana.

Piezīmes

Lai gan theme.json paplašināšana ir spēcīga, uzmanieties no šīm lamatām:

1. Veiktspēja: Pievienojot pārāk daudz pielāgotu stilu theme.json, fails var kļūt smags un palielināt CSS parsēšanas laiku. Pieturieties pie globāliem iestatījumiem un izmantojiet bloku specifiskus stilus taupīgi.
2. Spraudņu konflikti: Daži spraudņi atiestata vai pārraksta theme.json iestatījumus. Vienmēr testējiet ar minimālu spraudņu komplektu un apsveriet iespēju pieslēgties pie after_setup_theme, lai atkārtoti piemērotu savus pielāgojumus.
3. Klasiskās tēmas: Ja jūsu tēma neizmanto bloku redaktoru (t.i., tā ir klasiska tēma), theme.json ir ierobežota ietekme. Apsveriet iespēju migrēt uz bloku tēmu vai izmantot funkciju wp_enqueue_global_styles, lai ielādētu stilus.
4. Pārlūka kešatmiņa: Izmaiņas theme.json var neparādīties uzreiz kešatmiņas dēļ. Notīriet pārlūka kešatmiņu un izmantojiet versiju noteikšanu savai stila lapai.

Secinājums

Tagad jums ir skaidrs ceļvedis, kā panākt, lai pielāgotie ierakstu veidi un spraudņu izvades labi saderētu ar jūsu theme.json dizaina sistēmu. Atslēga ir reģistrēt savu pielāgoto ierakstu veidu ar bloku redaktora atbalstu, definēt konkrētus stilus ierakstu satura blokam, izmantot CSS pielāgotos rekvizītus spraudņu izvadē un reģistrēt savus pielāgotos blokus ar atbilstošu theme.json integrāciju. Šī pieeja novērš nekonsekvenci, samazina uzturēšanas darbu un dod vietnes administratoriem iespēju kontrolēt izskatu un sajūtu no viena patiesības avota. Sāciet ieviest šīs darbības jau šodien, lai ienestu saskaņotību savos WordPress projektos.