Gestione dei caratteri nei temi a blocchi di WordPress

I caratteri sono una caratteristica distintiva del design di qualsiasi sito. Ciò include i temi WordPress, dove è comune per gli sviluppatori di temi integrare un servizio come Google Fonts nelle impostazioni del Customizer di WordPress per un tema "classico" basato su PHP. Questo non è stato proprio il caso dei temi a blocchi di WordPress. Sebbene l'integrazione di Google Fonts nei temi classici sia ben documentata, al momento non è disponibile nulla per i temi a blocchi nel Manuale del tema WordPress.

Questo è ciò che vedremo in questo articolo. I temi a blocchi possono effettivamente utilizzare Google Fonts, ma il processo per registrarli è molto diverso da quello che avresti potuto fare prima nei temi classici.

Quello che già sappiamo

Come ho detto, c'è poco da fare per iniziare. Il tema Twenty Twenty-Two è il primo tema WordPress predefinito basato su blocchi e dimostra come possiamo utilizzare i file di font scaricati come risorse nel tema. Ma è piuttosto ingombrante perché comporta un paio di passaggi: (1) registrare i file in functions.php filetto e (2) definire i font raggruppati nel theme.json filetto.

Da quando Twenty Twenty-Two è stato rilasciato, tuttavia, il processo è diventato più semplice. I font raggruppati ora possono essere definiti senza registrarli, come mostrato nel file Tema ventitré. Tuttavia, il processo richiede ancora di scaricare manualmente i file dei font e raggrupparli nei temi. Questo è un ostacolo che in qualche modo vanifica lo scopo di font semplici, drop-in, ospitati che vengono serviti su un CDN veloce.

Cosa c'è di nuovo

Se non lo sapevi già, il file Progetto Gutenberg è un plug-in sperimentale in cui le funzionalità sviluppate per WordPress Block and Site Editor sono disponibili per l'uso e il test iniziali. In un recente Articolo sulla modellazione del tema, Architetto capo del progetto Gutenberg Matia Ventura discute di come Google Fonts - o qualsiasi altro font scaricato, se è per questo - può essere aggiunto per bloccare i temi usando il Crea un tema a blocchi .

Questo breve video su Impara WordPress fornisce una buona panoramica del plug-in Crea tema a blocchi e di come funziona. Ma la linea di fondo è che fa quello che dice sulla scatola: crea temi a blocchi. Ma lo fa fornendo controlli nell'interfaccia utente di WordPress che ti consentono di creare un intero tema, un tema figlio o una variazione di stile del tema senza scrivere alcun codice o dover mai toccare i file modello.

Ci ho provato! E poiché Crea tema a blocchi lo è creato e gestito da WordPress.org team, direi che è la direzione migliore che abbiamo per integrare Google Fonts in un tema. Detto questo, vale sicuramente la pena notare che il plugin è in fase di sviluppo attivo. Ciò significa che le cose potrebbero cambiare abbastanza rapidamente.

Prima di arrivare a come funziona, rinfreschiamoci brevemente con il processo "tradizionale" per aggiungere Google Fonts ai classici temi WordPress.

Come si faceva

Questo articolo di ThemeShaper del 2014 fornisce un eccellente esempio di come lo facevamo nei classici temi PHP, così com'è questo nuovo articolo di Cloudways di Ibad Ur Rehman.

Per rinfrescarci la memoria, ecco un esempio dal default Twenty Seventeen tema che mostra come i caratteri di Google vengono accodati nel file functions.php file.

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' ); if ( 'off' !== $libre_franklin ) { $font_families = array(); $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i'; $query_args = array( 'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin,latin-ext' ), ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); } return esc_url_raw( $fonts_url );
}

Quindi Google Fonts è precollegato al tema in questo modo:

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

Cosa c'è di sbagliato nel modo tradizionale

Fantastico, vero? C'è un intoppo, però. Nel gennaio 2022, a Il tribunale regionale tedesco ha imposto un'ammenda su un proprietario di un sito web per aver violato l'Europa Requisiti del GDPR. Il problema? L'accodamento di Google Fonts sul sito ha esposto l'indirizzo IP di un visitatore, mettendo a repentaglio la privacy dell'utente. CSS-Tricks ne ha parlato qualche tempo fa.

I Crea un tema a blocchi il plug-in soddisfa i requisiti di privacy GDPR, in quanto sfrutta l'API di Google Fonts per fungere esclusivamente da proxy per il fornitore locale. I caratteri vengono forniti all'utente sullo stesso sito Web anziché sui server di Google, proteggendo la privacy. Taverna WP discute la sentenza del tribunale tedesco e include collegamenti a guide per l'hosting autonomo di Google Fonts.

Come utilizzare Google Fonts con temi a blocchi

Questo ci porta al modo "moderno" di oggi di utilizzare Google Fonts con i temi a blocchi di WordPress. Per prima cosa, creiamo un sito di test locale. Io uso Flywheel Locali app per lo sviluppo locale. Puoi usare quello o quello che preferisci, quindi usare il Plug-in dei dati di test del tema dal team dei temi WordPress per lavorare con contenuti fittizi. E, naturalmente, vorrai il Crea un tema a blocchi plug-in anche lì.

Hai installato e attivato quei plugin? In tal caso, vai a Forma → Gestisci i caratteri del tema dal menu di amministrazione di WordPress.

La schermata "Gestisci i caratteri del tema" mostra un elenco di tutti i caratteri già definiti nei temi theme.json file. Ci sono anche due opzioni nella parte superiore dello schermo:

• Aggiungi i caratteri Google. Questa opzione aggiunge Google Fonts direttamente al tema dall'API di Google Fonts.
• Aggiungi font locali. Questa opzione aggiunge al tema i file dei font scaricati.

Sto usando un tema completamente vuoto di WordPress chiamato Tema vuoto. Sei libero di seguire il tuo tema, ma volevo sottolineare che ho rinominato Emptytheme in "EMPTY-BLANK" e l'ho modificato, quindi non ci sono caratteri e stili predefiniti.

Ho pensato di condividere uno screenshot della struttura dei file del mio tema e theme.json file per mostrare che non ci sono letteralmente stili o configurazioni in corso.

Facciamo clic sul pulsante "Aggiungi Google Fonts". Ci porta in una nuova pagina con le opzioni per scegliere qualsiasi carattere disponibile dalla corrente Google FAPI.

Per questa demo, ho selezionato Inter dal menu delle opzioni e selezionato i pesi 300, Regular e 900 dalla schermata di anteprima:

Una volta che ho salvato le mie selezioni, gli stili di carattere dell'Inter che ho selezionato vengono automaticamente scaricati e memorizzati nei temi assets/fonts cartella:

Si noti anche come queste selezioni siano state scritte automaticamente nel file theme.json file in quello screenshot. Il plug-in Crea tema a blocchi aggiunge persino il percorso ai file dei caratteri.

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

Se andiamo alla schermata principale di Crea tema a blocchi e facciamo clic su Gestisci i caratteri del tema pulsante di nuovo, vedremo le varianti di peso 300, 400 (regolare) e 900 dell'Inter visualizzate nel pannello di anteprima.

A casella di anteprima del testo dimostrativo in alto ti consente persino di visualizzare in anteprima i caratteri selezionati all'interno della frase, dell'intestazione e del paragrafo con il cursore di selezione della dimensione del carattere. Puoi dare un'occhiata a questa nuova funzione in azione in questo video GitHub.

I font selezionati sono disponibili anche in Site Editor Stili globali (Forma → editore), in particolare nel pannello Design.

Da qui, vai a Modelli → Indice e fai clic sul blu Modifica pulsante per modificare il file index.html modello. Vogliamo aprire il Stili globali impostazioni, che sono rappresentate da un'icona di contrasto situata nella parte superiore destra dello schermo. Quando clicchiamo sul Testo impostazioni e apri il fonte menu nel Tipografia sezione… vediamo l'Inter!

Stessa cosa, ma con caratteri locali

Potremmo anche considerare l'aggiunta di caratteri locali a un tema poiché il plug-in Crea tema di blocco fornisce tale opzione. Il vantaggio è che puoi utilizzare qualsiasi file di font che desideri da qualsiasi servizio di font che preferisci.

Senza il plug-in, dovremmo prendere i nostri file di font, rilasciarli da qualche parte nella cartella del tema, quindi ricorrere al tradizionale percorso PHP di accodarli nel functions.php file. Ma possiamo lasciare che WordPress si faccia carico di questo fardello caricando il file del font sul file Aggiungi font locali schermata utilizzando l'interfaccia Crea tema a blocchi. Una volta selezionato un file da caricare, le caselle delle definizioni dei caratteri vengono riempite automaticamente.

Anche se possiamo usare qualsiasi .ttf, .woff, o .woff2 file, ho semplicemente scaricato Apri i file dei caratteri Sans da Google Fonts per questo esercizio. Ho strappato due variazioni di peso, normale e 800.

La stessa gestione dei file auto-magica e theme.json l'aggiornamento che abbiamo visto con l'opzione Google Fonts si verifica ancora una volta quando carichiamo i file dei font (che vengono eseguiti uno alla volta). Scopri dove sono finiti i caratteri nella mia cartella del tema e come vengono aggiunti theme.json:

Rimozione dei caratteri

Il plug-in ci consente anche di rimuovere i file dei caratteri da un tema a blocchi dall'amministratore di WordPress. Eliminiamo una delle varianti Open Sans che abbiamo installato nell'ultima sezione per vedere come funziona.

Facendo clic sul Rimuovere links attiva un avviso per confermare l'eliminazione. Faremo clic OK per continuare.

Apriamo la nostra cartella del tema e controlliamo il file theme.json file. Abbastanza sicuro, il file Open Sans 800 che abbiamo eliminato nella schermata del plug-in ha rimosso il file del font dalla cartella del tema e il riferimento ad esso è sparito da tempo theme.json.

Ci sono lavori in corso

Si parla di aggiungere questa funzione "Font Manager" a WordPress Core piuttosto che aver bisogno di un plugin separato.

Un'iterazione iniziale della funzionalità è disponibile nel repositorye utilizza esattamente lo stesso approccio utilizzato in questo articolo. Dovrebbe essere Conforme al GDPR, pure. La caratteristica è programmato per atterrare con WordPress 6.3 rilascio entro la fine dell'anno.

Concludendo

Il plug-in Crea tema di blocco migliora notevolmente l'esperienza dell'utente quando si tratta di gestire i caratteri nei temi di blocco di WordPress. Il plug-in ci consente di aggiungere o eliminare qualsiasi tipo di carattere rispettando i requisiti GDPR.

Abbiamo visto come la selezione di un Google Font o il caricamento di un file di font locale inserisca automaticamente il font nella cartella del tema e lo registri nella theme.json file. Abbiamo anche visto come il carattere sia un'opzione disponibile nelle impostazioni Stili globali nel Site Editor. E se dobbiamo rimuovere un font? Il plug-in si occupa totalmente anche di questo, senza toccare i file o il codice del tema.

Grazie per aver letto! Se hai commenti o suggerimenti, condividili nei commenti. Mi piacerebbe sapere cosa ne pensi di questa possibile direzione per la gestione dei font in WordPress.

Risorse addizionali

Ho fatto affidamento su molte ricerche per scrivere questo articolo e ho pensato di condividere gli articoli e le risorse che ho usato per fornirti un contesto aggiuntivo.

Gestione dei caratteri WordPress

Problemi con GitHub

Requisiti europei del GDPR

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/