Legge til en tilpasset CSS-editor til temaet ditt ved hjelp av ACE

Når noen laster ned temaet ditt og bestemmer at noen av CSS ikke fungerer for dem, går de vanligvis inn style.css og manuelt endre stilarket til deres smak. Dette er ikke så vanskelig å gjøre, men det presenterer et problem når neste utgave av temaet ditt er tilgjengelig, og de bestemmer seg for å oppdatere.

Alle endringene vil da bli overskrevet. Et godt arbeid er å tilby et tilpasset CSS-redigeringsprogram, slik at alle endringene de lager vil bli lagret trygt i databasen og holde seg oppdatert i fremtiden, vil ikke være et problem.

---

ACE-editoren

Alle som er kjent med å bruke en desktop IDE som Coda, Sublime og Kimodo, vil være hjemme i ACE-editorens grensesnitt. ACE er en nettbasert kodeditor som enkelt kan legges inn i en hvilken som helst nettside eller nettbasert app. Den har syntaksutheving for over 40 språk, og inkluderer også en live code checker for å forbedre koden din når du skriver.

I denne veiledningen planlegger jeg å lede deg gjennom trinnene som trengs for å få ACE installert i temaet ditt, slik at du kan tilby denne flotte funksjonen til brukerne dine.

---

Trinn 1: Installere ACE

ACE-editoren er vert for GitHub, men hvis du ser på hva du får når du laster ned prosjektet, kan du bli overveldet av antall filer. Det er egentlig bare tre filer vi trenger, og du kan finne dem i nedlastingspakken jeg ga med nedlastingslenken ovenfor.

• ace.js
• modus-css.js
• arbeideren-css.js

Disse tre filene må inkluderes i en mappe med navnet "ess"Plasser denne mappen i roten av temaet ditt.

---

Trinn 2: Hjelperfilen

For å sette inn ACE i temaet ditt, må du opprette en helper JavaScript-fil som vil sette alt opp på siden din for å gjøre ACE-editoren riktig. Opprett en ny fil kalt "custom-css.js"med følgende kode og legg den til roten til temaet ditt også.

 (funksjon (global, $) var editor, syncCSS = funksjon () $ ('#custom_css_textarea') .val (editor.getSession (). getValue ());, loadAce = function () editor = ess. rediger ('custom_css'); global.safecss_editor = editor; editor.getSession (). setUseWrapMode (true); editor.setShowPrintMargin (false); editor.getSession (). setValue ($ ('#custom_css_textarea') .val ); editor.getSession (). setMode ("ace / mode / css"); jQuery.fn.spin && $ ('#custom_css_container') .spin (false); $ ('#custom_css_form') .submit (syncCSS); ; hvis ($ .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 );

Koden ovenfor legger inn ACE-editoren i siden og sørger for at CSS brukerne oppgir, også skrives inn i tekstområdet, slik at det kan lagres i WordPress-databasen. Det er også en innsjekking der for IE7, som er uforenlig med ACE, så det vil bare laste grunnleggende tekstområdet.

---

Trinn 3: Enqueueing Filene

Med alle passende JavaScript-filer lagt til, må du koble til admin_enqueue_scripts for å forsikre deg om at skriptene vises på administrasjonssiden for CSS-redigeringsverktøyet.

 add_action ('admin_enqueue_scripts', 'custom_css_scripts'); funksjon custom_css_scripts ($ hook) if ('appearance_page_custom_css_admin_page_content' == $ krok) wp_enqueue_script ('ace_code_highlighter_js', get_template_directory_uri (). '/ace/ace.js', ',' 1.0.0 ', true); wp_enqueue_script 'ace_mode_js', get_template_directory_uri (). '/ace/mode-css.js', array ('ace_code_highlighter_js'), '1.0.0', sant); wp_enqueue_script ('custom_css_js', get_template_directory_uri (). '/ custom-css .js ', array (' jquery ',' ace_code_highlighter_js '),' 1.0.0 ', sant);

---

Trinn 4: Den egendefinerte CSS-editoren

Nå må du opprette temaalternativer-siden din i wp-admin der Custom CSS Editor vil bli vist. For å legge til en temaalternativside, må du koble til admin_menu handling.

Legg til følgende til functions.php:

 add_action ('admin_menu', 'custom_css_admin_page'); funksjon custom_css_admin_page () add_theme_page ('Custom CSS', __ ('Custom CSS'), 'edit_theme_options', 'custom_css_admin_page_content', 'custom_css_admin_page_content'); 

Du må også registrere et egendefinert CSS-innstillingsfelt, slik at du kan lagre det i WordPress-databasen. For å gjøre det må du koble inn i admin_init handling og bruk register_settings () funksjon.

 add_action ('admin_init', 'register_custom_css_setting'); funksjon register_custom_css_setting () register_setting ('custom_css', 'custom_css', 'custom_css_validation'); 

Siden du allerede har lagt til opsjonssiden og registrert innstillingene, kan du nå opprette innholdet på siden din:

 funksjon custom_css_admin_page_content () // Standard meldingen som vil vises $ custom_css_default = __ ('/ * Velkommen til Custom CSS editor! Vennligst legg til alle dine egendefinerte CSS her og unngå å endre kjerne tema filer, siden det vil gjøre oppgradering temaet problematisk. Din egendefinerte CSS vil bli lastet etter temaets stilark, noe som betyr at reglene vil ha forrang. Bare legg til CSS her for hva du vil endre, du trenger ikke å kopiere hele temaet \ 's style.css innhold. * /'); $ custom_css = get_option ('custom_css', $ custom_css_default); ?> 
 
 
 
'. __ ('Custom CSS updated.'). '
'; ?> 
  
 
 
 <?php echo $custom_css; ?> 
 
 

 funksjon custom_css_validation ($ input) hvis (! tomt ($ input ['custom_css'])) $ input ['custom_css'] = trim ($ input ['custom_css']); returner $ input; 

 add_action ('wp_head', 'display_custom_css'); funksjon display_custom_css () ?>