Share
Å være utviklere, er vi vant til å se på linjer og linjer med kode i monospaced font og samtidig "se" hva siden vil se ut i en nettleser. Når det er sagt, er det lett for oss å overse det faktum at det er ganske mange ikke-utviklere der ute.
Editor stil er en nifty funksjon som lar deg passe utseendet på innlegget innhold i TinyMCE editoren til det som vises til besøkende. Det er ekstremt enkelt å bruke, men hvis temaet ditt har skrifttypealternativer og spesielt hvis det bruker Google Fonts, trenger editor stil litt ekstra arbeid for å skrive tekst basert på fontvalgsverdier.
I tillegg til lasting redaktør style.css bruker add_editor_style () funksjon, må vi gjøre følgende ting:
Før du gjør noe av det, må du allerede ha en måte for nettstedadministratoren å velge hvilke fonter de vil bruke. Du kan gå med Innstillinger API, eller - hvis du er en av de kule barna - Theme Customizer, men å forklare hvordan du arbeider med en, er ikke hva denne opplæringen handler om.
For å hoppe på dette prosjektet, bruker jeg Underscores-temaet og Theme Customizer Boilerplate. Det vil gi meg et startmål og en måte å raskt legge til alternativer til Theme Customizer, men hvordan du håndterer denne delen, er helt opp til deg.
Så jeg lastet ned en ny kopi av Underscores tema, lagt til Theme Customizer Boilerplate til det, og nå er jeg klar til å legge til noen alternativer til Theme Customizer, ved hjelp av Customizer Boilerplate. Dette går rett inn i temaets functions.php fil:
Accentsconagua
/ ** * Alternativ array for Theme Customizer Boilerplate * * @link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate * @return array Temaalternativer * / add_filter ('thsp_cbp_options_array', 'thsp_theme_options_array', 1 ); funksjon thsp_theme_options_array () // Bruke Customizer Boilerplate helper funksjon for å få standard nødvendig evne $ thsp_cbp_capability = thsp_cbp_capability (); $ options = array (// Section ID 'thsp_typography_section' => array ('existing_section' => false, 'args' => array ('title' => __ ('Typografi', 'cazuela'), 'beskrivelse' = > __ ('Velg fonter', 'cazuela'), 'prioritet' => 20), 'felt' => array ('body_font' => array ('setting_args' => sans ',' type '=>' alternativ ',' capability '=> $ thsp_cbp_capability,' transport '=>' oppdater '), // Slutt innstilling args' control_args '=> array (' label '=> __ 'Body', 'cazuela'), 'type' => 'velg', // Velg kontroll 'valg' => array ('arial' => array ('label' => 'Arial'), sans '=> array (' label '=>' Åpne Sans ',' google_font '=>' Åpne + Sans: 400italic, 700italic, 400,700 '),' pt-sans '=> array (' label '=>' PT Sans ',' google_font '=>' PT + Sans: 400,700,400italic, 700italic ')),' prioritet '=> 1) // Avslutt kontroll args),' heading_font '=> array (' setting_args '=> array standard '=>' open-sans ',' type '=>' alternativ ',' capability '=> $ thsp_cbp_capability,' transport '=>' oppdater ' // End innstilling args 'control_args' => array ('label' => __ ('Overskrift font', 'cazuela'), 'type' => 'velg', // Velg kontroll 'valg' => array georgia '=> array (' label '=>' Georgia '),' open-sans '=> array (' label '=>' Åpne Sans ',' google_font '=>' Åpne + Sans: 400italic, 700italic, 400.700 '),' droid-serif '=> array (' label '=>' Droid Serif ',' google_font '=>' Droid + Serif: 700 ')),' prioritet '=> 2) / End kontroll args) ,) / Sluttfelt)); returnere $ alternativer; Som du kan fortelle at du ser på det, legger jeg til et alternativ for karosserifont og alternativet for skrifttype til Theme Customizer, med tre mulige valg for hver enkelt - Arial, Open Sans og PT Sans for kroppsskriften, Georgia, Open Sans og Droid Serif for overskriften font.
For Google Fonts er det google_font verdi som jeg vil bruke senere til å laste inn Google Fonts stilark.
Hvis vi skal kunne endre skrifter i TinyMCE-editoren dynamisk, basert på hva brukerne velger i Theme Customizer, må vi sende litt informasjon til TinyMCE-objektet.
Hvis for eksempel Open Sans er valgt som kroppstype, legger du til en 'body-åpen-sansklassen til redaktøren vil gjøre kunsten. Dette kan gjøres ved å bruke tiny_mce_before_init filterkrok og bytt ut body_class verdi i TinyMCE-innstillingsarrayen.
Sjekk inline kommentarer:
/ ** * Passerer tilpassede typografi klasser til Tiny MCE editor * * @param $ thsp_mceInit array * @uses thsp_cbp_get_options_values () hjelperfunksjon definert i /customizer-boilerplate/helpers.php * @return $ thsp_mceInit array * / funksjon thsp_tiny_mce_classes ($ thsp_mceInc ) // Bruk Theme Customizer Boilerplate hjelperfunksjon for å hente temaalternativer $ thsp_theme_options = thsp_cbp_get_options_values (); / ** * $ thsp_mceInit array lagrer kroppsdelene som en streng * * Whitespace-karakter brukes som separator mellom klasser, * så når du legger til klasser må de ha en plass før dem * / $ thsp_mceInit ['body_class']. = 'body - '. $ thsp_theme_options [ 'body_font']; // Body font class $ thsp_mceInit ['body_class']. = 'Heading-'. $ thsp_theme_options [ 'heading_font']; // Overskrift font class return $ thsp_mceInit; add_filter ('tiny_mce_before_init', 'thsp_tiny_mce_classes'); Det vil legge til egendefinerte klasser til TinyMCE-editoren, som du kan se på dette skjermbildet:
Tilpassede klasser (body-open-sans og heading-droid-serif) i WordPress TinyMCE editor Hvis du vil se hele TinyMCE-innstillingslisten, sjekk ut denne Gist.
Igjen bruker jeg Theme Customizer Boilerplate og noen av funksjonene for å få fart på ting, hvordan du håndterer temaalternativer, er opp til deg.
Noen av skrifter i utvalg av alternativer jeg passerte til Theme Customizer Boilerplate hadde google_font verdi definert. Dette bidrar til å avgjøre om stilarket for Google Fonter må lastes og hva nettadressen er. Ved å bruke denne informasjonen kan du nå koble til mce_css filtrer og legg til egendefinerte stilark til TinyMCE-editor-vinduet:
$ mce_css er en kommaseparert liste over stilark-URIer, så hvis Google Fonts-stilarket du laster inn, har et komma i det, må du bruke en HTML-enhet i stedet. Siden jeg har lagt til et alternativ for både kropps- og overskriftsfonter, må jeg sjekke begge for å se om de trenger stilarket Google Fonts:
/ ** * Legg inn Google Fonter for å bruke i Tiny MCE * * @param $ mce_css string * @uses thsp_cbp_get_options_values () definert i /customizer-boilerplate/helpers.php * @uses thsp_cbp_get_fields () definert i / customizer-boilerplate / helpers. php * @return $ mce_css string * / funksjon thsp_mce_css ($ mce_css) $ theme_options = thsp_cbp_get_options_values (); $ theme_options_fields = thsp_cbp_get_fields (); // Bruke Theme Customizer Boilerplate for å hente tema fontalternativer verdier $ body_font_value = $ theme_options ['body_font']; $ heading_font_value = $ theme_options ['heading_font']; // Bruke Theme Customizer Boilerplate for å hente alle temaalternativer $ 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'] ['valg']; // Sjekk protokoll $ protocol = is_ssl ()? 'https': 'http'; // Sjekk om det er en Google-skrift hvis (isset ($ body_font_options [$ body_font_value] ['google_font'])) // Komma må være HTML-kodet $ body_font_string = str_replace (',', ',', $ body_font_options [$ body_font_value] ['google_font']); $ mce_css. = ','. $ protokoll. ': //fonts.googleapis.com/css? family ='. $ Body_font_string; // // Sjekk om det er en Google-skrifttype hvis (isset ($ heading_font_options [$ heading_font_value] ['google_font'])) // Komma må være HTML-kodet $ heading_font_string = str_replace (',', ',', $ heading_font_options [ $ heading_font_value] ['google_font']); $ mce_css. = ','. $ protokoll. ': //fonts.googleapis.com/css? family ='. $ Heading_font_string; returner $ mce_css; add_filter ('mce_css', 'thsp_mce_css'); Etter de to siste trinnene er dette den enkle delen. TinyMCE-editor har nå egendefinerte klasser basert på aktive skrifttypealternativer, og stilarter for Google Fonts er lastet, når det er nødvendig. Alt som er igjen å gjøre er å legge til noen font-family stiler til redaktør style.css:
/ * Kroppsskrifter * / .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; / * Overskrifter * / .heading-georgia h1, .heading-georgia h2, .heading-georgia h3, .heading-georgia h4, .heading-georgia h5, .heading-georgia h6 font-familien: 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 -familie: "Open Sans", sans-serif; .drift-droid-serif h1, .drift-droid-serif h2, .drift-droid-serif h3, .drift-droid-serif h4, .drift-droid-serif h5, .drift-droid-serif h6 -familie: "Droid Serif", serif;
Nå kan denne metoden ikke gjøre for mye fornuft hvis temaet lar brukerne velge fra "600 + Google Fonts". Men å vite at WordPress er bygget på Beslutninger, ikke alternativer prinsippet og tilbyr mer enn 600 valg for bare ett av alternativene, gir enda mindre mening.
Hvis du foretrekker å holde tema-alternativene dine søte ved å ta noen avgjørelser, håper du at du vil sette pris på denne metoden for å legge til Google Fonts til TinyMCE-editoren. Din tilbakemelding er velkommen.
