Share
Als Entwickler sind wir es gewohnt, Zeilen und Codezeilen in Monospaced-Schrift zu betrachten und gleichzeitig zu "sehen", wie die Seite in einem Browser aussehen würde. Es ist jedoch leicht zu übersehen, dass es einige Nicht-Entwickler gibt.
Der Editor-Stil ist eine raffinierte Funktion, mit der Sie das Aussehen und Verhalten von Postinhalten im TinyMCE-Editor an das anpassen können, was den Besuchern der Website angezeigt wird. Es ist extrem einfach zu verwenden, aber wenn Ihr Design über Schriftoptionen verfügt und insbesondere wenn Sie Google-Schriftarten verwenden, erfordert der Editorstil ein wenig mehr Arbeit, um Text basierend auf den Werten für Schriftoptionen zu gestalten.
Neben dem Laden editor-style.css Verwendung der add_editor_style () Funktion müssen wir folgende Dinge tun:
Bevor Sie dies tun, müssen Sie dem Site-Administrator bereits die Möglichkeit geben, die Schriftarten auszuwählen, die er verwenden möchte. Sie können mit der Einstellungs-API oder - wenn Sie zu den coolen Kindern gehören - dem Theme-Customizer gehen, aber in diesem Tutorial wird nicht erklärt, wie mit beiden zu arbeiten ist.
Um dieses Projekt voranzutreiben, verwende ich das Unterstrich-Thema und die Motivanpassungs-Boilerplate. Dies gibt mir ein Starter-Thema und eine Möglichkeit, schnell Optionen zum Design-Customizer hinzuzufügen, aber wie Sie mit diesem Teil umgehen, liegt ganz bei Ihnen.
Also habe ich eine neue Version des Underscores-Themes heruntergeladen, das Theme Customizer Boilerplate hinzugefügt und jetzt bin ich bereit, dem Theme-Customizer einige Optionen hinzuzufügen, indem ich das Customizer Boilerplate verwendet. Das geht direkt in die Themes Functions.php Datei:
Accentsconagua
/ ** * Options-Array für Theme Customizer Boilerplate * * @link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate * @return array Designoptionen * / add_filter ('thsp_cbp_options_array', 'thsp_theme_options_array', 1 ); function thsp_theme_options_array () // Verwenden der Boilerplate-Hilfsfunktion des Customizers, um die standardmäßig erforderliche Fähigkeit zu erhalten $ thsp_cbp_capability = thsp_cbp_capability (); $ options = array (// Abschnitts-ID 'thsp_typography_section' => array ('exists_section' => false, 'args' => array ('title' => __ ('Typografie', 'cazuela'), 'description' = > __ ('Schriftarten auswählen', 'cazuela'), 'Priorität' => 20), 'Felder' => array ('body_font' => array ('setting_args' => array ('default' => 'open- sans ',' type '=>' option ',' Capability '=> $ thsp_cbp_capability,' transport '=>' refresh ',), // Beenden der Einstellung args' control_args '=> array (' label '=> __ ( 'Body font', 'cazuela'), 'type' => 'select', // Auswahlmöglichkeiten für die Auswahl '=> 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) // Steuerbefehle beenden),' Heading_font '=> array (' setting_args '=> array (' default '=>' open-sans ',' type '=>' option ',' Capability '=> $ thsp_cbp_capability,' transport '=>' refresh ',), // Ende der Einstellung args 'control_args' => array ('label' => __ ('Heading font', 'cazuela'), 'type' => 'select', // Auswahlmöglichkeiten für die Auswahl '=> 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) // Steuerbefehle beenden) ,) // Endefelder)); $ Optionen zurückgeben; Wie Sie sich das Array ansehen können, füge ich dem Theme-Customizer eine Body-Font-Option und eine Heading-Font-Option hinzu. Drei Optionen stehen zur Auswahl: Arial, Open Sans und PT Sans für die Body-Schriftart Georgia, Open Sans und Droid Serif für die Überschriftenschrift.
Für Google Fonts gibt es die google_font Wert, den ich später verwenden werde, um Stylesheets von Google Fonts zu laden.
Wenn wir Schriftarten im TinyMCE-Editor dynamisch ändern können, abhängig davon, was der Benutzer im Design-Customizer auswählt, müssen wir einige Informationen an das TinyMCE-Objekt übergeben.
Wenn beispielsweise Open Sans als Hauptschriftart ausgewählt ist, fügen Sie ein 'Body-Open-Sans'Klasse für den Editor wird den Trick tun. Dies kann mit der tiny_mce_before_init Filterhaken und Wechsel der body_class Wert im TinyMCE-Einstellungs-Array.
Überprüfen Sie die Inline-Kommentare:
/ ** * Übergibt benutzerdefinierte Typografieklassen an den kleinen MCE-Editor. * * @Param $ thsp_mceInit array * @uses thsp_cbp_get_options_values () - Hilfsfunktion, die in /customizer-boilerplate/helpers.php definiert ist * @return $ thsp_mceInit array * / function thsp_tiny_mc_clatch ) // Verwenden Sie die Hilfefunktion für die Benutzerdefinierte Boilerplate-Funktion zum Abrufen von Themenoptionen. $ Thsp_theme_options = thsp_cbp_get_options_values (); / ** * Das Array $ thsp_mceInit speichert seine Body-Klassen als Zeichenfolge. * Das Whitespace-Zeichen wird als Trennzeichen zwischen Klassen verwendet. Wenn Sie Klassen hinzufügen, müssen sie ein Leerzeichen vor ihnen haben. * / $ thsp_mceInit ['body_class']. = 'body - '. $ thsp_theme_options ['body_font']; // Body-Font-Klasse $ thsp_mceInit ['body_class']. = 'Überschrift-'. $ thsp_theme_options ['heading_font']; // Überschrift font class return $ thsp_mceInit; add_filter ('tiny_mce_before_init', 'thsp_tiny_mce_classes'); Dadurch werden dem TinyMCE-Editor benutzerdefinierte Klassen hinzugefügt, wie Sie in diesem Screenshot sehen können:
Benutzerdefinierte Klassen (Body-Open-Sans und Heading-Droid-Serif) in WordPress TinyMCE-Editor Wenn Sie das gesamte TinyMCE-Einstellungsfeld sehen möchten, sehen Sie sich diese Liste an.
Auch hier benutze ich die Theme Customizer Boilerplate und einige ihrer Funktionen, um die Dinge zu beschleunigen. Es liegt an Ihnen, wie Sie mit Ihren Theme-Optionen umgehen.
Einige der Zeichensätze in der Reihe von Optionen, die ich an die Motivanpassungs-Boilerplate übergab, hatten die google_font Wert definiert. Auf diese Weise können Sie feststellen, ob das Stylesheet von Google Fonts geladen werden muss und wie seine URL lautet. Anhand dieser Informationen können Sie sich jetzt in die mce_css filtern und fügen Sie benutzerdefinierte Stylesheets zum TinyMCE-Editorfenster hinzu:
$ mce_css ist eine durch Kommas getrennte Liste von Stylesheet-URIs. Wenn das zu ladende Google Fonts-Stylesheet ein Komma enthält, müssen Sie stattdessen eine HTML-Entität verwenden. Da ich eine Option für Schriftarten für Textkörper und Überschriften hinzugefügt habe, muss ich beide prüfen, ob sie das Stylesheet von Google Fonts benötigen:
/ ** * Laden von Google-Schriftarten zur Verwendung in Tiny MCE * * @param $ mce_css string * @uses thsp_cbp_get_options_values () definiert in /customizer-boilerplate/helpers.php * @uses thsp_cbp_get_fields () definiert 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 (); // Verwenden von Theme Customizer Boilerplate zum Abrufen der Werte für die Optionen für die Design-Schriftart $ body_font_value = $ theme_options ['body_font']; $ heading_font_value = $ theme_options ['heading_font']; // Verwenden von Theme Customizer Boilerplate zum Abrufen aller Theme-Optionen $ body_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['body_font'] ['control_args'] ['options']; $ heading_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['heading_font'] ['control_args'] ['choice']; // Protokoll prüfen $ protocol = is_ssl ()? 'https': 'http'; // Prüfen Sie, ob es sich um eine Google-Schriftart handelt (ifet ($ body_font_options [$ body_font_value] ['google_font'])) // Kommas müssen HTML-codiert sein. $ Body_font_string = str_replace (',', ', $ body_font_options [$ body_font_value] ['google_font']); $ mce_css. = ','. $ Protokoll. ': //fonts.googleapis.com/css? family ='. $ body_font_string; // Prüfen Sie, ob es sich um eine Google-Schriftart handelt, wenn (isset ($ title_font_options [$ heading_font_value] ['google_font'])) // Kommas müssen HTML-codiert sein. $ Title_font_string = str_replace (',', ', $ title_font_options [ $ heading_font_value] ['google_font']); $ mce_css. = ','. $ Protokoll. ': //fonts.googleapis.com/css? family ='. $ head_font_string; return $ mce_css; add_filter ('mce_css', 'thsp_mce_css'); Nach den letzten beiden Schritten ist dies der einfache Teil. Der TinyMCE-Editor verfügt jetzt über benutzerdefinierte Klassen, die auf aktiven Schriftartoptionen basieren, und bei Bedarf werden Stylesheets von Google Fonts geladen. Jetzt müssen Sie nur noch einige hinzufügen Schriftfamilie Stile zu editor-style.css:
/ * Body Fonts * / .body-arial font-family: Arial, serifenlos; .body-open-sans Schriftfamilie: "Open Sans", serifenlos; .body-pt-sans Schriftfamilie: "PT Sans", serifenlos; / * Überschriften * / .heading-georgia h1, .heading-georgia h2, .heading-georgia h3, .heading-georgia h4, .heading-georgia h5, .heading-georgia h6 Schriftfamilie: 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", Serifenlose; .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 -Familie: "Droid Serif", Serife;
Nun macht diese Methode möglicherweise nicht viel Sinn, wenn Ihr Design Benutzern die Wahl zwischen "600+ Google Fonts" ermöglicht. Zu wissen, dass WordPress jedoch auf der Entscheidungen, keine Optionen Das Prinzip und die Auswahl von mehr als 600 Optionen für eine der Optionen ist noch weniger sinnvoll.
Wenn Sie es vorziehen, Ihre Theme-Optionen durch einige Entscheidungen vernünftig zu gestalten, hoffen Sie, dass Sie diese Methode zum Hinzufügen von Google Fonts zum TinyMCE-Editor schätzen werden. Ihr Feedback ist willkommen.
