Adăugarea unui editor CSS personalizat la tema dvs. utilizând ACE

Ori de câte ori cineva vă descarcă tema și decide că o parte din CSS nu lucrează pentru ei, ei intră, de obicei style.css și modificați manual foaia de stil pentru a le plăcea. Acest lucru nu este prea greu de făcut, dar prezintă o problemă atunci când următoarea versiune a temei este disponibilă și decide să se actualizeze.

Toate schimbările vor fi apoi suprascrise. Un lucru extraordinar este să oferiți un editor CSS personalizat, astfel încât toate modificările pe care le va face să fie stocate în siguranță în baza de date și păstrarea actualizării în viitor nu va fi o problemă.

---

Editorul ACE

Oricine este familiarizat cu utilizarea unui IDE desktop, cum ar fi Coda, Sublime și Kimodo, va fi chiar acasă în cadrul interfeței editorului ACE. ACE este un editor de cod bazat pe web care poate fi ușor încorporat în orice pagină web sau aplicație online. Dispune de evidențierea sintaxei pentru peste 40 de limbi și include, de asemenea, un cod de verificare a codului live pentru a vă îmbunătăți codul pe măsură ce scrieți.

În acest tutorial, am de gând să vă călăuzească prin pașii necesari pentru a obține ACE instalat în tema dvs., astfel încât să puteți oferi această facilitate extraordinară pentru utilizatorii dvs..

---

Pasul 1: Instalarea ACE

Editorul ACE este găzduit pe GitHub, dar dacă analizați ceea ce obțineți atunci când descărcați proiectul, este posibil să fiți copleșiți de numărul de fișiere. Există într-adevăr doar trei fișiere de care avem nevoie și le puteți găsi în pachetul de descărcări pe care l-am furnizat prin intermediul link-ului de descărcare de mai sus.

• ace.js
• mode-css.js
• lucrător-css.js

Aceste trei fișiere trebuie să fie incluse într-un folder numit "as"Plasați acest director în rădăcina temei.

---

Pasul 2: Fișierul Helper

Pentru a introduce ACE în tema dvs., trebuie să creați un fișier JavaScript helper care va seta totul în pagină pentru a face editorul ACE să funcționeze corect. Creați un nou fișier numit "personalizate-css.js"cu următorul cod și adăugați-l și la rădăcina temei.

 (funcția (globală, $) var editor, syncCSS = funcție () $ ('#custom_css_textarea') .val (editor.getSession () getValue ()); editați ('custom_css'); global.safecss_editor = editor; editor.getSession () setUseWrapMode (adevărat); editor.setShowPrintMargin (false); editor.getSession ); editor.getSession () setMode ("as / mode / css"); jQuery.fn.spin && $ ('#custom_css_container') .spin (false); $ ('#custom_css_form') .submit (syncCSS); , dacă ($ .browser.msie && parseInt ($ .browser.version, 10) <= 7 )  $( '#custom_css_container' ).hide(); $( '#custom_css_textarea' ).show(); return false;  else  $( global ).load( loadAce );  global.aceSyncCSS = syncCSS;  )( this, jQuery );

Codul de mai sus introduce editorul ACE în pagină și asigură că CSS-ul pe care îl introduc utilizatorii este introdus și în câmpul textarea astfel încât să poată fi stocat în baza de date WordPress. Există, de asemenea, o verificare acolo pentru IE7, care este incompatibil cu ACE, astfel încât va încărca doar textarea de bază.

---

Pasul 3: Încărcarea fișierelor

Cu toate fișierele JavaScript adecvate adăugate, trebuie să vă conectați admin_enqueue_scripts pentru a vă asigura că scripturile dvs. apar pe pagina de administrare personalizată a editorului CSS.

 add_action ('admin_enqueue_scripts', 'custom_css_scripts'); funcția custom_css_scripts ($ hook) if ('appearance_page_custom_css_admin_page_content' == $ hook) wp_enqueue_script ('ace_code_highlighter_js', get_template_directory_uri () ./ace/ace.js ',' 1.0.0 ' 'ace_mode_js', get_template_directory_uri () '/ace/mode-css.js', array ('ace_code_highlighter_js'), '1.0.0', true); wp_enqueue_script ('custom_css_js', get_template_directory_uri .js ', array (' jquery ',' ace_code_highlighter_js '),' 1.0.0 ', adevărat);

---

Pasul 4: Editorul personalizat CSS

Acum trebuie să creați pagina de opțiuni temă în wp-admin unde va fi afișat editorul Custom CSS. Pentru a adăuga o pagină cu opțiuni de temă, trebuie să intrați în admin_menu acțiune.

Adăugați următoarele la functions.php:

 add_action ('admin_menu', 'custom_css_admin_page'); funcție custom_css_admin_page () add_theme_page ('Custom CSS', __ ('Custom CSS'), 'edit_theme_options', 'custom_css_admin_page_content', 'custom_css_admin_page_content'); 

De asemenea, trebuie să înregistrați un câmp de setări personalizate CSS, astfel încât să îl puteți păstra în baza de date WordPress. Pentru a face acest lucru trebuie să vă cârlig în admin_init acționați și utilizați register_settings () funcţie.

 add_action ('admin_init', 'register_custom_css_setting'); funcția register_custom_css_setting () register_setting ('custom_css', 'custom_css', 'custom_css_validation'); 

Din moment ce ați adăugat deja pagina de opțiuni și ați înregistrat setările, puteți crea acum conținutul paginii dvs.:

 function custom_css_admin_page_content () // Mesajul implicit care va aparea $ custom_css_default = __ ('/ * Bine ati venit la editorul Custom CSS! Va rugam sa adaugati aici tot CSS-ul personalizat si sa evitati modificarea fisierelor tematice de baza, deoarece \ tema problematica CSS personalizat va fi incarcat dupa foile de stil ale tematicii, ceea ce inseamna ca regulile dvs. vor avea prioritate Doar adaugati CSS-ul aici pentru ceea ce doriti sa schimbati nu va trebui sa copiati toate temele \ 's stil.css. * /'); $ custom_css = get_option ('custom_css', $ custom_css_default); ?> 
 
 
 
". __ ("Actualizat CSS personalizat."). '
„; ?> 
  
 
 
 <?php echo $custom_css; ?> 
 
 

 funcția custom_css_validation ($ input) if (! empty ($ input ['custom_css'])) $ input ['custom_css'] = trim ($ input ['custom_css']); returnați $ input; 

 add_action ('wp_head', 'display_custom_css'); funcția display_custom_css () ?>