Share
Essendo sviluppatori, siamo abituati a guardare linee e linee di codice in caratteri monospaziati e allo stesso tempo "vedere" come apparirebbe la pagina in un browser. Detto questo, è facile per noi trascurare il fatto che ci sono parecchi non-sviluppatori là fuori.
Lo stile dell'editor è una funzionalità elegante che ti consente di abbinare l'aspetto del contenuto dei post all'interno dell'editor TinyMCE a ciò che viene mostrato ai visitatori del sito. È estremamente facile da usare, ma se il tuo tema ha opzioni di carattere e soprattutto se usa Google Fonts, lo stile dell'editor richiede un po 'di lavoro extra per lo stile del testo basato sui valori delle opzioni dei font.
Oltre al caricamento redattore style.css usando il add_editor_style () funzione, dobbiamo fare le seguenti cose:
Prima di fare ciò, devi già avere un modo per l'amministratore del sito per selezionare i tipi di carattere che vorrebbero utilizzare. Puoi andare con l'API Settings o, se sei uno dei ragazzi fantastici, il Theme Customizer, ma spiegare come lavorare con uno dei due non è ciò che questo tutorial tratta.
Per far partire questo progetto, userò il tema Underscores e il tema Boiler Customizer. Questo mi darà un tema introduttivo e un modo per aggiungere rapidamente opzioni al Customizer tema, ma come gestisci questa parte dipende completamente da te.
Quindi, ho scaricato una nuova copia del tema Underscores, aggiunto Theme Customizer Boilerplate e ora sono pronto ad aggiungere alcune opzioni al Customizer tema, usando Customizer Boilerplate. Questo va dritto al tema functions.php file:
Accentsconagua
/ ** * Array di opzioni per Theme Customizer Boilerplate * * @link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate * @return array Opzioni di tema * / add_filter ('thsp_cbp_options_array', 'thsp_theme_options_array', 1 ); function thsp_theme_options_array () // Utilizzo della funzione helper Customizer Boilerplate per ottenere la funzionalità richiesta predefinita $ thsp_cbp_capability = thsp_cbp_capability (); $ options = array (// Section ID 'thsp_typography_section' => array ('existing_section' => false, 'args' => array ('title' => __ ('Typography', 'cazuela'), 'description' = > __ ('Select fonts', 'cazuela'), 'priority' => 20), 'fields' => array ('body_font' => array ('setting_args' => array ('default' => 'open- sans ',' type '=>' option ',' capability '=> $ thsp_cbp_capability,' transport '=>' refresh ',), // End setting args' control_args '=> array (' label '=> __ ( 'Body font', 'cazuela'), 'type' => 'select', // Seleziona control 'choices' => array ('arial' => array ('label' => 'Arial'), 'open- sans '=> array (' label '=>' Apri Sans ',' google_font '=>' Apri + Sans: 400italic, 700italic, 400.700 '),' pt-sans '=> array (' label '=>' PT Sans ',' google_font '=>' PT + Sans: 400,700,400italic, 700italic ')),' priority '=> 1) // End control args),' heading_font '=> array (' setting_args '=> array (' default '=>' open-sans ',' type '=>' option ',' capability '=> $ thsp_cbp_capability,' transport '=>' refresh ',), // End setting args 'control_args' => array ('label' => __ ('Intestazione font', 'cazuela'), 'tipo' => 'seleziona', // Seleziona controllo 'scelte' => array (' georgia '=> array (' label '=>' Georgia '),' open-sans '=> array (' label '=>' Apri Sans ',' google_font '=>' Apri + Sans: 400italic, 700italic, 400.700 '),' droid-serif '=> array (' label '=>' Droid Serif ',' google_font '=>' Droid + Serif: 700 ')),' priority '=> 2) // End control args) ,) // Fine campi)); restituire $ opzioni; Come puoi vedere guardando quell'array, sto aggiungendo un'opzione per il carattere del corpo e un'opzione per il carattere al Customizer del tema, con tre possibili scelte per ciascuno: Arial, Open Sans e PT Sans per il carattere del corpo, Georgia, Open Sans e Droid Serif per il carattere di intestazione.
Per Google Fonts, c'è il google_font valore che userò in seguito per caricare i fogli di stile di Google Fonts.
Se saremo in grado di cambiare i font nell'editor TinyMCE in modo dinamico, in base a ciò che gli utenti selezionano nel Customizer tema, dobbiamo passare alcune informazioni all'oggetto TinyMCE.
Ad esempio, se Open Sans è selezionato come font del corpo, aggiungendo un 'body-open-sans'classe per l'editor farà il trucco. Questo può essere fatto usando il tiny_mce_before_init filtro gancio e cambiando il body_class valore nell'array delle impostazioni TinyMCE.
Controlla i commenti in linea:
/ ** * Passa le classi di tipografia personalizzate all'editor Tiny MCE * * @param $ thsp_mceInit array * @use thsp_cbp_get_options_values () funzione helper definita in /customizer-boilerplate/helpers.php * @return $ thsp_mceInit array * / function thsp_tiny_mce_classes ($ thsp_mceInit ) // Usa la funzione helper Custom Theme Boilerplate per recuperare le opzioni del tema $ thsp_theme_options = thsp_cbp_get_options_values (); / ** * $ thsp_mceInit array memorizza le sue classi del corpo come una stringa * * Il carattere di spaziatura viene usato come separatore tra le classi, * quindi quando si aggiungono le classi devono avere uno spazio prima di esse * / $ thsp_mceInit ['body_class']. = 'corpo - '. $ thsp_theme_options [ 'body_font']; // Classe font del corpo $ thsp_mceInit ['body_class']. = 'Heading-'. $ thsp_theme_options [ 'heading_font']; // Titolo della classe di caratteri return $ thsp_mceInit; add_filter ('tiny_mce_before_init', 'thsp_tiny_mce_classes'); Questo aggiungerà classi personalizzate all'editor TinyMCE, come puoi vedere in questo screenshot:
Classi personalizzate (body-open-sans e heading-droid-serif) nell'editor TinyMCE di WordPress Se vuoi vedere l'intero array di impostazioni TinyMCE, guarda questo Gist.
Ancora una volta, sto usando il tema Customizer Boilerplate e alcune delle sue funzioni per accelerare le cose, il modo in cui gestisci le opzioni del tema dipende da te.
Alcuni dei tipi di carattere nella serie di opzioni che ho passato al tema Customizer Boilerplate avevano il google_font valore definito. Questo aiuta a determinare se il foglio di stile di Google Fonts deve essere caricato e qual è il suo URL. Usando queste informazioni, puoi ora collegarti a mce_css filtra e aggiungi fogli di stile personalizzati alla finestra dell'editor TinyMCE:
$ mce_css è un elenco separato da virgola di URI del foglio di stile, quindi se il foglio di stile di Google Fonts che stai caricando ha una virgola, devi invece usare un'entità HTML. Dato che ho aggiunto un'opzione per i caratteri del corpo e dell'intestazione, dovrò controllare entrambi per vedere se richiedono il foglio di stile di Google Fonts:
/ ** * Carica i caratteri di Google da utilizzare in Tiny MCE * * @param $ mce_css stringa * @usati thsp_cbp_get_options_values () definiti in /customizer-boilerplate/helpers.php * @uses thsp_cbp_get_fields () definiti in / customizer-boilerplate / helpers. php * @return $ mce_css stringa * / function thsp_mce_css ($ mce_css) $ theme_options = thsp_cbp_get_options_values (); $ theme_options_fields = thsp_cbp_get_fields (); // Utilizzo di Theme Customizer Boilerplate per recuperare i valori delle opzioni dei font del tema $ body_font_value = $ theme_options ['body_font']; $ heading_font_value = $ theme_options ['heading_font']; // Utilizzo di Theme Customizer Boilerplate per recuperare tutte le opzioni del tema $ body_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['body_font'] ['control_args'] ['choices']; $ heading_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['heading_font'] ['control_args'] ['choices']; // Controlla il protocollo $ protocol = is_ssl ()? "https": "http"; // Controlla se è un font Google se (isset ($ body_font_options [$ body_font_value] ['google_font'])) // Le virgole devono essere codificate in HTML $ body_font_string = str_replace (',', ',', $ body_font_options [$ body_font_value] ['google_font']); $ mce_css. = ','. $ protocollo. ': //fonts.googleapis.com/css? family ='. $ Body_font_string; // Controlla se è un font Google se (isset ($ heading_font_options [$ heading_font_value] ['google_font'])) // Le virgole devono essere codificate in HTML $ heading_font_string = str_replace (',', ',', $ heading_font_options [ $ heading_font_value] ['google_font']); $ mce_css. = ','. $ protocollo. ': //fonts.googleapis.com/css? family ='. $ Heading_font_string; return $ mce_css; add_filter ('mce_css', 'thsp_mce_css'); Dopo gli ultimi due passaggi, questa è la parte facile. L'editor TinyMCE ora dispone di classi personalizzate basate su opzioni di carattere attive e, quando necessario, vengono caricati i fogli di stile di Google Fonts. Tutto quello che resta da fare è aggiungere un po ' famiglia di font stili a redattore style.css:
/ * Caratteri del corpo * / .body-arial font-family: Arial, sans-serif; .body-open-sans font-family: "Open Sans", sans-serif; .body-pt-sans font-family: "PT Sans", sans-serif; / * Intestazioni * / .heading-georgia h1, .heading-georgia h2, .heading-georgia h3, .heading-georgia h4, .heading-georgia h5, .heading-georgia h6 font-family: Georgia, serif; .heading-open-sans h1, .heading-open-sans h2, .heading-open-sans h3, .heading-open-sans h4, .heading-open-sans h5, .heading-open-sans h6 font -famiglia: "Open Sans", sans-serif; .heading-droid-serif h1, .heading-droid-serif h2, .heading-droid-serif h3, .heading-droid-serif h4, .heading-droid-serif h5, .heading-droid-serif h6 font -famiglia: "Droid Serif", serif;
Ora, questo metodo potrebbe non avere molto senso se il tuo tema consente agli utenti di selezionare "600+ Google Fonts". Tuttavia, sapendo che WordPress è costruito sul Decisioni, non opzioni principio e offrire più di 600 scelte per una sola opzione rende ancora meno sensato.
Se preferisci mantenere le tue opzioni tematiche prendendo decisioni, spero che apprezzerai questo metodo per aggiungere Google Fonts all'editor TinyMCE. Il tuo feedback è il benvenuto.
