Share
Som utvecklare är vi vana vid att titta på linjer och rader av kod i monospaced font och samtidigt "se" vad sidan skulle se ut i en webbläsare. Det sagt är det lätt för oss att förbise det faktum att det finns en hel del icke-utvecklare där ute.
Editor stil är en snygg funktion som låter dig matcha utseendet på postinnehållet i TinyMCE-redigeraren till vad som visas för besökare på webbplatsen. Det är extremt lätt att använda, men om ditt tema har teckensnitt och speciellt om det använder Google Fonts behöver redigeringsstil lite extra arbete för att skriva text baserat på teckensnittvärden.
Förutom lastning editor-style.css använda add_editor_style () funktion, vi måste göra följande saker:
Innan du gör något måste du redan ha en möjlighet för webbplatsadministratören att välja vilka teckensnitt de vill använda. Du kan gå med inställnings API, eller - om du är en av de coola barnen - Theme Customizer, men förklarar hur man arbetar med endera, handlar inte det här handledningen handlar om.
För att hoppa på detta projekt använder jag Underscores-temat och teman Customizer Boilerplate. Det kommer att ge mig ett starttema och ett sätt att snabbt lägga till alternativ till temat anpassaren, men hur du hanterar den här delen är helt upp till dig.
Så hämtade jag en ny kopia av Underscores-temat, tillagde Theme Customizer Boilerplate till det och nu är jag redo att lägga till några alternativ till Theme Customizer, med Customizer Boilerplate. Detta går direkt in i tematets functions.php fil:
Accentsconagua
/ ** * Alternativ array för Theme Customizer Boilerplate * * @ link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate * @return array Temaalternativ * / add_filter ('thsp_cbp_options_array', 'thsp_theme_options_array', 1 ); funktionen thsp_theme_options_array () // Använda Customizer Boilerplate helperfunktion för att få standard krävs kapacitet $ thsp_cbp_capability = thsp_cbp_capability (); $ options = array (// Section ID 'thsp_typography_section' => array ('existing_section' => false, 'args' => array ('title' => __ ('Typografi', 'cazuela'), 'beskrivning' = > __ ('Välj typsnitt', 'cazuela'), 'prioritet' => 20), 'fält' => array ('body_font' => array ('setting_args' => sans ',' type '=>' alternativ ',' kapacitet '=> $ thsp_cbp_capability,' transport '=>' uppdatera '), // Slut inställningsargs' control_args '=> array (' label '=> __ 'Body' = 'array'), 'typ' => 'välj', // Välj kontroll 'val' => array ('arial' => array ('label' => 'Arial' sans '=> array (' label '=>' Öppna Sans ',' google_font '=>' Öppna + Sans: 400italic, 700italic, 400,700 '),' pt-sans '=> array (' label '=>' PT Sans ',' google_font '=>' PT + Sans: 400,700,400italic, 700italic ')),' prioritet '=> 1) // Slutkontroll args),' heading_font '=> array (' setting_args '=> array standard '=>' open-sans ',' type '=>' alternativ ',' kapacitet '=> $ thsp_cbp_capability,' transport '=>' uppdatera ' // Slut inställning args 'control_args' => array ('label' => __ ('Rubrik typsnitt', 'cazuela'), 'typ' => 'välj', // Välj kontroll 'val' => array georgia '=> array (' label '=>' Georgia '),' open-sans '=> array (' label '=>' Öppna Sans ',' google_font '=>' Öppna + Sans: 400italic, 700italic, 400.700 '),' droid-serif '=> array (' label '=>' Droid Serif ',' google_font '=>' Droid + Serif: 700 ')),' prioritet '=> 2) // Slutkontroll args) ,) // Slutfält)); returnera $ alternativ Som du kan se på det här matriset, lägger jag till ett teckensnitt för typsnitt och rubriken till temat anpassningsanordningen, med tre möjliga val för var och en - Arial, Open Sans och PT Sans för kroppsfonten, Georgia, Open Sans och Droid Serif för rubriken rubrik.
För Google Fonts finns det google_font värde som jag ska använda senare för att ladda in Google Fonts stylesheets.
Om vi ska kunna ändra teckensnitt i TinyMCE-editoren dynamiskt, baserat på vad användarna väljer i temat anpassningsanordningen, måste vi skicka lite information till TinyMCE-objektet.
Till exempel, om Open Sans väljs som kroppstyp, lägger du till en "kropps-open-sans"klass till redaktören kommer att göra tricket. Detta kan göras genom att använda tiny_mce_before_init filterkrok och byt ut body_class värdet i inställningen TinyMCE.
Kontrollera inline kommentarer:
/ ** * Passar anpassade typografi klasser till Tiny MCE editor * * @param $ thsp_mceInit array * @uses thsp_cbp_get_options_values () hjälparfunktion definierad i /customizer-boilerplate/helpers.php * @return $ thsp_mceInit array * / funktion thsp_tiny_mce_classes ($ thsp_mceIncit ) // Använd Teman Customizer Boilerplate hjälparfunktion för att hämta tematillval $ thsp_theme_options = thsp_cbp_get_options_values (); / ** * $ thsp_mceInit-arrayen lagrar sina kroppsklasser som en sträng * * Whitespace-tecken används som separator mellan klasser, * så när du lägger till klasser måste de ha ett mellanslag före dem * / $ thsp_mceInit ['body_class']. = 'body - '. $ thsp_theme_options [ 'body_font']; // Body font class $ thsp_mceInit ['body_class']. = 'Rubrik-'. $ thsp_theme_options [ 'heading_font']; // Rubrik av teckensnittsklass returnering $ thsp_mceInit; add_filter ('tiny_mce_before_init', 'thsp_tiny_mce_classes'); Det lägger till anpassade klasser till TinyMCE-redigeraren, som du kan se på den här skärmdumpen:
Anpassade klasser (body-open-sans och heading-droid-serif) i WordPress TinyMCE editor Om du vill se hela TinyMCE-inställningsrutan, kolla in denna Gist.
Återigen använder jag Teman Customizer Boilerplate och några av dess funktioner för att påskynda saker, hur du hanterar dina temanalternativ är upp till dig.
Några av teckensnitten i utbudet av alternativ som jag passerade till teman Customizer Boilerplate hade google_font värde definierat. Det här hjälper till att avgöra om stilfönstret för Google Fonts måste laddas och vad dess webbadress är. Med hjälp av den informationen kan du nu haka in i mce_css filtrera och lägg till anpassade stilark till TinyMCE-redigeringsfönstret:
$ mce_css är en kommaseparerad lista över stilark-URI, så om du använder ett typsnitt i Google Fonts-stilarket måste du använda en HTML-enhet istället. Eftersom jag lagt till ett alternativ för både kropps- och rubrikfonter måste jag kolla båda för att se om de kräver typsnittet för Google Fonts:
/ ** * Ladda Google-teckensnitt för att använda i Tiny MCE * * @param $ mce_css-strängen * @uses thsp_cbp_get_options_values () definierad i /customizer-boilerplate/helpers.php * @uses thsp_cbp_get_fields () definierad i / customizer-boilerplate / helpers. php * @return $ mce_css sträng * / funktion thsp_mce_css ($ mce_css) $ theme_options = thsp_cbp_get_options_values (); $ theme_options_fields = thsp_cbp_get_fields (); // Använda Teman Customizer Boilerplate för att hämta inställningsalternativvärden för temat font $ body_font_value = $ theme_options ['body_font']; $ heading_font_value = $ theme_options ['heading_font']; // Använda Theme Customizer Boilerplate för att hämta alla temaalternativ $ 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']; // Kontrollera protokoll $ protocol = is_ssl ()? 'https': 'http'; // Kontrollera om det är en Google-teckensnitt om (isset ($ body_font_options [$ body_font_value] ['google_font'])) // Komma måste vara HTML-kodade $ body_font_string = str_replace (',', ',', $ body_font_options [$ body_font_value] ['google_font']); $ mce_css. = ','. $ protokoll. ': //fonts.googleapis.com/css? family ='. $ Body_font_string; // Kontrollera om det är en Google-teckensnitt om (isset ($ heading_font_options [$ heading_font_value] ['google_font'])) // Komma måste vara HTML-kodade $ heading_font_string = str_replace (',', ',', $ heading_font_options [ $ heading_font_value] ['google_font']); $ mce_css. = ','. $ protokoll. ': //fonts.googleapis.com/css? family ='. $ Heading_font_string; returnera $ mce_css; add_filter ('mce_css', 'thsp_mce_css'); Efter de sista två stegen är det här den enkla delen. TinyMCE-redigeraren har nu anpassade klasser baserade på aktiva teckensnitt, och stylesheets för Google Fonts laddas när det behövs. Allt som är kvar att göra är att lägga till lite typsnittsfamilj stilar till editor-style.css:
/ * Kroppsfonter * / .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; / * Rubriker * / .heading-georgia h1, .heads-georgia h2, .heads-georgia h3, .heads-georgia h4, .heads-georgia h5, .heads georgia h6 font-family: georgia, serif; .öppning-open-sans h1, .heads-open-sans h2, .heads-open-sans h3, .heads-open-sans h4, .heads-open-sans h5, .head-open-sans h6 -familj: "Open Sans", sans-serif; .dire-droid-serif h1, .head-droid-serif h2, .head-droid-serif h3, .head-droid-serif h4, .head-droid-serif h5, .head-droid-serif h6 -familj: "Droid Serif", serif;
Nu kan den här metoden inte göra för mycket mening om ditt tema tillåter användare att välja från "600+ Google-teckensnitt". Men att veta att WordPress är byggt på Beslut, inte alternativ Princip och erbjuder mer än 600 val för bara ett av alternativen gör ännu mindre mening.
Om du föredrar att hålla dina temanalternativ sane genom att fatta några beslut hoppas du uppskattar denna metod att lägga till Google Fonts till TinyMCE-redigeraren. Din feedback är välkommen.
