Share
Als ontwikkelaars zijn we gewend om naar regels en regels met code te kijken in een lettertype met een enkele letter en tegelijkertijd te "zien" hoe de pagina eruit zou zien in een browser. Dat gezegd hebbende, is het voor ons gemakkelijk om het feit over het hoofd te zien dat er nogal wat niet-ontwikkelaars zijn.
Editor-stijl is een handige functie waarmee u het uiterlijk en het gevoel van post-inhoud in de TinyMCE-editor kunt afstemmen op wat bezoekers van de site te zien krijgen. Het is buitengewoon gemakkelijk te gebruiken, maar als uw thema lettertype-opties heeft en met name als het Google-lettertypen gebruikt, heeft de redactiestijl een beetje extra werk nodig om tekst te stijlen op basis van waarden voor lettertype-opties.
Naast het laden editor-style.css de ... gebruiken add_editor_style () functie, moeten we de volgende dingen doen:
Voordat u hieraan iets doet, moet u de beheerder van de site al een manier hebben om te selecteren welke lettertypen zij willen gebruiken. Je kunt kiezen voor de Settings API, of - als je een van de coolste kinderen bent - de Theme Customizer, maar uitleggen hoe je met een van beide kunt werken, is niet waar deze tutorial over gaat.
Om dit project een vliegende start te geven, gebruik ik het Underscores-thema en de thema-aanpasser-boilerscherm. Dat geeft me een startthema en een manier om snel opties toe te voegen aan de Theme Customizer, maar hoe je dit gedeelte aanpakt, is helemaal aan jou.
Dus heb ik een nieuw exemplaar van Underscores-thema gedownload, heb ik Theme Customizer Boilerplate eraan toegevoegd en nu ben ik klaar om een aantal opties toe te voegen aan de Theme Customizer, met behulp van de Customizer Boilerplate. Dit gaat rechtstreeks in op de thema's functions.php het dossier:
Accentsconagua
/ ** * Optiesreeks voor thema-aanpassing Boilerplate * * @link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate * @return array Thema-opties * / add_filter ('thsp_cbp_options_array', 'thsp_theme_options_array', 1 ); function thsp_theme_options_array () // Gebruik Customizer Boilerplate-helperfunctie om standaard vereiste functionaliteit $ thsp_cbp_capability = thsp_cbp_capability () te krijgen; $ options = array (// Sectie ID 'thsp_typography_section' => array ('existing_section' => false, 'args' => array ('title' => __ ('Typografie', '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', // Selecteer controle 'keuzes' => array ('arial' => array ('label' => 'Arial'), 'open- sans '=> array (' label '=>' Open Sans ',' google_font '=>' Open + 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 (' standaard '=>' open-sans ',' type '=>' option ',' capability '=> $ thsp_cbp_capability,' transport '=>' refresh ',), // Eindinstelling args 'control_args' => array ('label' => __ ('Koplettertype', 'cazuela'), 'type' => 'selecteer', // Selecteer besturingselement 'keuzes' => array (' georgia '=> array (' label '=>' Georgia '),' open-sans '=> array (' label '=>' Open Sans ',' google_font '=>' Open + Sans: 400italic, 700italic, 400.700 '),' droid-serif '=> array (' label '=>' Droid Serif ',' google_font '=>' Droid + Serif: 700 ')),' priority '=> 2) // Eindcontrole args) ,) // Einde velden)); return $ opties; Zoals je kunt zien als je naar die array kijkt, voeg ik een body font optie en heading font optie toe aan de Theme Customizer, met drie mogelijke keuzes voor elk array - Arial, Open Sans en PT Sans voor het body font, Georgia, Open Sans en Droid Serif voor het koptekstlettertype.
Voor Google Fonts is er de google_font waarde die ik later zal gebruiken om de stylesheets van Google Fonts te laden.
Als we de lettertypen in de TinyMCE-editor dynamisch kunnen wijzigen op basis van wat gebruikers in de Themaspecifieke aanpasser selecteren, moeten we wat informatie doorgeven aan het TinyMCE-object.
Als Open Sans bijvoorbeeld is geselecteerd als het hoofdlettertype, voegt u een 'body-open sans'klasse voor de redacteur zal het lukken. Dit kan gedaan worden door de tiny_mce_before_init filterhaak en verander de body_class waarde in de array TinyMCE-instellingen.
Controleer inline reacties:
/ ** * Geeft aangepaste typografie-klassen door aan Tiny MCE-editor * * @param $ thsp_mceInit-array * @uses thsp_cbp_get_options_values () helperfunctie gedefinieerd in /customizer-boilerplate/helpers.php * @return $ thsp_mceInit array * / function thsp_tiny_mce_classes ($ thsp_mceInit ) // Gebruik thema-aanpasser Boilerplate-helperfunctie om thema-opties op te halen $ thsp_theme_options = thsp_cbp_get_options_values (); / ** * $ thsp_mceInit array slaat zijn body classes op als een string * * Whitespace karakter wordt gebruikt als scheidingsteken tussen classes, * dus bij het toevoegen van classes moeten ze een spatie ervoor hebben * / $ thsp_mceInit ['body_class']. = 'body - '. $ Thsp_theme_options [ 'body_font']; // Body font class $ thsp_mceInit ['body_class']. = 'Heading-'. $ Thsp_theme_options [ 'heading_font']; // Kopregellettertype return $ thsp_mceInit; add_filter ('tiny_mce_before_init', 'thsp_tiny_mce_classes'); Dat voegt aangepaste klassen toe aan de TinyMCE-editor, zoals u kunt zien in deze schermafbeelding:
Aangepaste klassen (body-open-sans en heading-droid-serif) in WordPress TinyMCE-editor Als je de hele TinyMCE-instellingenreeks wilt zien, bekijk dan deze Gist.
Nogmaals, ik gebruik de Theme Customizer Boilerplate en enkele van zijn functies om dingen te versnellen, hoe je omgaat met je thema-opties is aan jou.
Sommige van de lettertypen in de reeks opties die ik heb doorgegeven aan de Theme Customizer Boilerplate hadden de google_font waarde gedefinieerd. Dit helpt bepalen of de stylesheet van Google Fonts moet worden geladen en wat de URL ervan is. Met die informatie kunt u nu inhaken op de mce_css filter en voeg aangepaste stylesheets toe aan het TinyMCE-editorvenster:
$ mce_css is een door komma's gescheiden lijst van URI's voor stijlbladen, dus als het stijlblad van Google Fonts dat u laadt een komma bevat, moet u in plaats daarvan een HTML-entiteit gebruiken. Omdat ik een optie heb toegevoegd voor zowel hoofdletterlettertypen als lettertypen, moet ik beide controleren om te zien of ze het Google Fonts-stylesheet nodig hebben:
/ ** * Google-lettertypen laden om te gebruiken in Tiny MCE * * @param $ mce_css string * @uses thsp_cbp_get_options_values () gedefinieerd in /customizer-boilerplate/helpers.php * @uses thsp_cbp_get_fields () gedefinieerd in / customizer-boilerplate / helpers. php * @return $ mce_css string * / function thsp_mce_css ($ mce_css) $ theme_options = thsp_cbp_get_options_values (); $ theme_options_fields = thsp_cbp_get_fields (); // Gebruik thema-aanpasser Boilerplate om thema-opties voor het font op te halen $ body_font_value = $ theme_options ['body_font']; $ heading_font_value = $ theme_options ['heading_font']; // Gebruik thema-aanpasser Boilerplate om alle thema-opties op te halen $ 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']; // Controleer protocol $ protocol = is_ssl ()? 'https': 'http'; // Controleer of het een Google-lettertype is if (isset ($ body_font_options [$ body_font_value] ['google_font'])) // Komma's moeten HTML-gecodeerd zijn $ body_font_string = str_replace (',', ',', $ body_font_options [$ body_font_value] ['google_font']); $ mce_css. = ','. $ protocol. ': //fonts.googleapis.com/css? family ='. $ Body_font_string; // Controleer of het een Google-lettertype is if (isset ($ heading_font_options [$ heading_font_value] ['google_font'])) // Komma's moeten HTML-gecodeerd zijn $ heading_font_string = str_replace (',', ',', $ heading_font_options [ $ heading_font_value] ['google_font']); $ mce_css. = ','. $ protocol. ': //fonts.googleapis.com/css? family ='. $ Heading_font_string; return $ mce_css; add_filter ('mce_css', 'thsp_mce_css'); Na de laatste twee stappen is dit het makkelijke gedeelte. De TinyMCE-editor heeft nu aangepaste klassen op basis van actieve lettertype-opties en indien nodig worden Google Fonts-stylesheets geladen. Het enige wat je hoeft te doen is er wat aan toevoegen font-family stijlen naar editor-style.css:
/ * Lichaamslettertypen * / .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; / * Headings * / .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 -familie: "Open Sans", sans-serif; .heading-droid-serif h1, .heading-droid-serif h2, .heading-droid-serif h3, .head-droid-serif h4, .head-droid-serif h5, .head-droid-serif h6 font -familie: "Droid Serif", serif;
Nu is het voor deze methode misschien niet zo zinnig als uw thema gebruikers toestaat om te kiezen uit "600+ Google-lettertypen". Echter, wetende dat WordPress is gebouwd op de Beslissingen, geen opties principe en biedt meer dan 600 keuzes voor slechts een van de opties maakt nog minder zin.
Als u liever uw thema-opties gezond houdt door een paar beslissingen te nemen, hoop ik dat u deze methode om Google Fonts toe te voegen aan de TinyMCE-editor zult waarderen. Uw feedback is welkom.
