Share
Fiind dezvoltatori, suntem obișnuiți să privim linii și linii de cod în font monospațial și, în același timp, "vedem" ce ar arăta pagina într-un browser. Acestea fiind spuse, este ușor să nu uităm că există destul de puțini dezvoltatori acolo.
Editorul de stil este o caracteristică minunată care vă permite să potriviți aspectul și simțul conținutului post în interiorul editorului TinyMCE la ceea ce se arată vizitatorilor site-ului. Este extrem de ușor de utilizat, dar dacă tema dvs. are opțiuni pentru fonturi și mai ales dacă utilizează Fonturi Google, stilul editorului are nevoie de puțină muncă suplimentară pentru textul de stil, pe baza valorilor opțiunilor pentru font.
În afară de încărcare Editor-style.css folosind add_editor_style () trebuie să facem următoarele lucruri:
Înainte de a face oricare dintre acestea, trebuie să aveți deja o cale pentru administratorul site-ului să selecteze ce fonturi ar dori să folosească. Puteți merge cu API-ul Setări sau - dacă sunteți unul dintre copiii interesați - Tema Customizer, dar explicând cum să lucrați cu oricare dintre ele nu este despre ce este vorba acest tutorial.
Pentru a începe acest proiect, voi folosi tema Underscores și Boilerplate Theme Customizer. Acest lucru îmi va da o temă de început și o modalitate de a adăuga rapid opțiuni la Theme Customizer, dar cum vă ocupați de această parte este complet până la tine.
Deci, am descarcat o copie proaspata de tema Underscores, am adaugat tema Customizer Boilerplate si acum sunt gata sa adaug cateva optiuni pentru Theme Customizer, folosind Customizer Boilerplate. Acest lucru merge direct în tema functions.php fişier:
Accentsconagua
/ ** * Array opțiuni pentru Tematică Personalizator Boilerplate * * @link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate * @return array Opțiuni tematice * / add_filter ('thsp_cbp_options_array', 'thsp_theme_options_array', 1 ); function thsp_theme_options_array () // Utilizarea functiei Customizer Boilerplate helper pentru a obtine capacitatea implicita necesara $ thsp_cbp_capability = thsp_cbp_capability (); $ opțiuni = array (// Secțiunea ID 'thsp_typography_section' => array ('existing_section' => false, 'args' => array > __ ("selectare fonturi", "cazuela"), "prioritate" => 20), 'fields' => array (' sans ',' type '=>' opțiune ',' capability '=> $ thsp_cbp_capability,' transport '=>' refresh '), // End set args' control_args '=> 'Arial' => array ('label' => 'Arial'), 'open' sans '=> array (' label '=>' Open Sans ',' google_font '=> Sans ',' google_font '=>' PT + Sans: 400,700,400italic, 700italic ')),' prioritate '=> 1) // arge control end,' heading_font '=> implicit '=>' open-sans ',' type '=>' opțiune ',' capability '=> $ thsp_cbp_capability, // setarea 'control_args' ARGS End => array (=> __ ( 'Titlu font', 'cazuela'), 'tip' 'eticheta' => 'selectați', // Selectează 'opțiuni' de control => array ( ' georgia '=> array (' label '=>' Georgia '),' open-sans '=> array (' label '=>' Open Sans ',' google_font '=>' '),' droid-serif '=> array (' label '=>' Droid Serif ',' google_font '=> ,) // Câmpuri de sfârșit)); returneaza optiunile $; După cum puteți spune că vă uitați la acea matrice, voi adăuga o opțiune pentru fonturi corporale și o opțiune pentru fontul de titlu pentru Tema Customizer, cu trei opțiuni posibile pentru fiecare - Arial, Open Sans și PT Sans pentru fontul corpului, Georgia, Open Sans și Droid Serif pentru fonturile de titlu.
Pentru Google Fonts, există google_font valoare pe care o voi folosi mai târziu pentru a încărca foile de stil ale Fonturilor Google.
Dacă vom reuși dinamic să schimbăm fonturile din editorul TinyMCE, în funcție de ce utilizatori selectează în Theme Customizer, trebuie să trecem câteva informații la obiectul TinyMCE.
De exemplu, dacă Open Sans este selectat ca font corp, adăugând un "open-corp-sans"clasa editorului va face truc. Acest lucru se poate face folosind tiny_mce_before_init cârlig filtru și schimbarea body_class valoare în matricea setărilor TinyMCE.
Verificați comentariile inline:
/ ** * Paseaza clase personalizate de tipografie la editorul Tiny MCE * * @param $ thsp_mceInit array * @functia helper functionata in /customizer-boilerplate/helpers.php * @return $ thsp_mceInit array * / function thsp_tiny_mce_classes ($ thsp_mce_nit ) // Utilizați funcția Temporizator Customizer Boilerplate pentru a prelua opțiunile temei $ thsp_theme_options = thsp_cbp_get_options_values (); / ** * $ thsp_mceInit matrice stochează clasele corpului ca un șir * * caracterul de spațiu alb este folosit ca separator între clase, * atunci când adăugați clase trebuie să aibă un spațiu înaintea lor * / $ thsp_mceInit ['body_class']. - ". $ thsp_theme_options [ 'body_font']; // Clasa corpului fontului $ thsp_mceInit ['body_class']. = 'Heading-'. $ thsp_theme_options [ 'heading_font']; // Încărcare clasă inversă $ thsp_mceInit; add_filter ('tiny_mce_before_init', 'thsp_tiny_mce_classes'); Acest lucru va adăuga clase personalizate editorului TinyMCE, după cum puteți vedea în această captură de ecran:
Clase personalizate (body-open-sans și heading-droid-serif) în editorul WordPress TinyMCE Dacă doriți să vedeți întreaga gamă de setări TinyMCE, verificați această descriere.
Din nou, folosesc Boilerplate Tema Customizer și unele dintre funcțiile sale pentru a grăbi lucrurile, cum să vă ocupați de opțiunile tematice depinde de dvs..
Unele dintre fonturile dintr-o serie de opțiuni pe care le-am transferat la Theme Customizer Boilerplate au avut google_font valoare definită. Acest lucru vă ajută să determinați dacă trebuie să fie încărcat foaia de stil Google Fonts și ce URL este. Folosind aceste informații, puteți acum să vă conectați la mce_css filtrați și adăugați foi de stil personalizate în fereastra editorului TinyMCE:
$ mce_css este o listă separată prin virgulă a URI-urilor de stil, astfel încât dacă foaia de stil Google Fonts pe care o încărcați are o virgulă în ea, trebuie să utilizați în schimb o entitate HTML. De când am adăugat o opțiune pentru fonturile de caroserie și de titlu, va trebui să verific pe ambele pentru a vedea dacă acestea necesită foaia de stil Google Fonts:
/ ** * Încărcați Fonturile Google pentru a le utiliza în Tiny MCE * * @param $ mce_css string * @sunt thsp_cbp_get_options_values () definite în /customizer-boilerplate/helpers.php * @used thsp_cbp_get_fields () definite în / customizer-boilerplate / helpers. php * @return $ mce_css șir * / funcția thsp_mce_css ($ mce_css) $ theme_options = thsp_cbp_get_options_values (); $ theme_options_fields = thsp_cbp_get_fields (); // Folosind Boilerplate pentru personalizarea temei pentru a extrage valorile opțiunilor pentru fonturile tematice $ body_font_value = $ theme_options ['body_font']; $ title_font_value = $ theme_options ['titlu_font']; // Folosind Boilerplate pentru personalizarea temei pentru a prelua toate opțiunile de temă $ body_font_options = $ theme_options_fields ['thsp_typography_section'] ['fields'] ['body_font'] ['control_args'] ['options']; $ title_font_options = $ theme_options_fields ['thsp_typography_section'] ['câmpuri'] ['heading_font'] ['control_args'] ['options']; // Verificați protocolul $ protocol = is_ssl ()? 'https': 'http'; // Verificați dacă este un font Google dacă (isset ($ body_font_options [$ body_font_value] [ 'google_font'])) // virgulele trebuie să fie codificat HTML $ body_font_string = str_replace ( ' '',', $ body_font_options [$ body_font_value] ['google_font']); $ mce_css. = ','. $ protocol. ': //fonts.googleapis.com/css? family ='. body_font_string $; // Verificați dacă este un font Google dacă (isset ($ heading_font_options [$ heading_font_value] [ 'google_font'])) // virgulele trebuie să fie codificat HTML $ heading_font_string = str_replace ( ' '',', $ heading_font_options [ $ title_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');
După ultimii doi pași, aceasta este partea ușoară. Editorul TinyMCE are acum clase personalizate bazate pe opțiunile de fonturi active, iar foile de stil ale Fonturilor Google sunt încărcate, atunci când este necesar. Tot ce trebuie să faceți este să adăugați câteva familie de fonturi stiluri la Editor-style.css:
/ * Fonturi corporale * / .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; / * Titlurile * / .clasarea-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 h1, .heading-open-sans h4, .head-open-sans h4, - familia: "Open Sans", sans-serif; .doc-serif h1, .heading-droid-serif h5, .head-droid-serif h6, .head-droid-serif h6, .head-droid-serif h6 font - familie: "Droid Serif", serif;
Acum, această metodă ar putea să nu aibă prea mult sens dacă tema permite utilizatorilor să selecteze din "600 + Fonturi Google". Cu toate acestea, știind că WordPress este construit pe Deciziile, nu opțiunile principiul și oferind mai mult de 600 de opțiuni pentru doar una dintre opțiuni face chiar mai puțin sens.
Dacă preferați să vă păstrați opțiunile tematice făcând unele decizii, sper că veți aprecia această metodă de adăugare a Fonturilor Google la editorul TinyMCE. Feedback-ul dvs. este binevenit.
