Een aangepaste CSS-editor aan uw thema toevoegen met behulp van ACE

Wanneer iemand jouw thema downloadt en besluit dat een deel van de CSS niet voor hen werkt, gaan ze meestal in style.css en het stylesheet handmatig naar wens aan te passen. Dit is niet zo moeilijk om te doen, maar het geeft wel een probleem wanneer de volgende versie van je thema beschikbaar is en ze besluiten om te updaten.

Al hun wijzigingen worden dan overschreven. Een geweldige oplossing is om een ​​aangepaste CSS-editor aan te bieden, zodat alle wijzigingen die ze maken veilig worden opgeslagen in de database en dat het up-to-date blijven geen probleem is.

---

De ACE-editor

Iedereen die bekend is met het gebruik van een desktop-IDE zoals Coda, Sublime en Kimodo, voelt zich meteen thuis in de interface van de ACE-editor. ACE is een webgebaseerde codebewerker die eenvoudig kan worden ingesloten in een webpagina of online app. Het biedt syntax-highlighting voor meer dan 40 talen en bevat ook een controle van de live code om uw code te helpen verbeteren terwijl u schrijft.

In deze zelfstudie wil ik u door de stappen leiden die nodig zijn om ACE in uw thema te installeren, zodat u deze geweldige functie aan uw gebruikers kunt aanbieden..

---

Stap 1: ACE installeren

De ACE-editor wordt gehost op GitHub, maar als je kijkt naar wat je krijgt als je het project downloadt, ben je misschien overweldigd door het aantal bestanden. Er zijn eigenlijk maar drie bestanden die we nodig hebben en je kunt ze vinden in het downloadpakket dat ik heb geleverd via de downloadlink hierboven.

• ace.js
• mode-css.js
• worker-css.js

Deze drie bestanden moeten worden opgenomen in een map met de naam "aasPlaats deze map in de hoofdmap van uw thema.

---

Stap 2: Het Helper-bestand

Als u ACE wilt invoegen in uw thema, moet u een helper JavaScript-bestand maken dat alles op uw pagina instelt om de ACE-editor correct te laten werken. Maak een nieuw bestand met de naam "custom-css.js"met de volgende code en voeg deze ook toe aan de hoofdmap van uw thema.

 (functie (globaal, $) var editor, syncCSS = function () $ ('#custom_css_textarea') .val (editor.getSession (). getValue ());, loadAce = function () editor = ace. edit ('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); ; if ($ .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 );

De bovenstaande code voegt de ACE-editor in de pagina en zorgt ervoor dat de CSS die uw gebruikers invoeren ook wordt ingevoerd in het veld textarea, zodat het kan worden opgeslagen in de WordPress-database. Er is ook een check-in voor IE7, wat niet compatibel is met ACE, dus laadt het alleen het basis-tekstgebied.

---

Stap 3: de bestanden vervolgen

Met alle juiste JavaScript-bestanden toegevoegd, moet je inhaken admin_enqueue_scripts om ervoor te zorgen dat uw scripts worden weergegeven op de beheerpagina van uw aangepaste CSS-editor.

 add_action ('admin_enqueue_scripts', 'custom_css_scripts'); functie 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', true); wp_enqueue_script ( '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 (). '/ custom-css .js ', array (' jquery ',' ace_code_highlighter_js '),' 1.0.0 ', true);

---

Stap 4: De aangepaste CSS-editor

Nu moet je je thema-optiepagina maken in de wp-admin waar de aangepaste CSS-editor wordt weergegeven. Om een ​​pagina met thema-opties toe te voegen, moet u de .haak in opnemen ADMIN_MENU actie.

Voeg het volgende toe aan functions.php:

 add_action ('admin_menu', 'custom_css_admin_page'); functie custom_css_admin_page () add_theme_page ('Aangepaste CSS', __ ('Aangepaste CSS'), 'edit_theme_options', 'custom_css_admin_page_content', 'custom_css_admin_page_content'); 

U moet ook een veld Aangepaste CSS-instellingen registreren zodat u het in de WordPress-database kunt opslaan. Om dat te doen, moet je de admin_init actie en gebruik de register_settings () functie.

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

Aangezien u de optiepagina al hebt toegevoegd en de instellingen hebt geregistreerd, kunt u nu de inhoud van uw pagina maken:

 function custom_css_admin_page_content () // Het standaardbericht dat wordt weergegeven $ custom_css_default = __ ('/ * Welkom bij de aangepaste CSS-editor! Voeg hier alstublieft al uw aangepaste CSS toe en vermijd het wijzigen van de kernthema-bestanden, want dat maakt upgraden het thema problematisch.Uw aangepaste CSS wordt geladen na de stylesheets van het thema, wat betekent dat uw regels voorrang krijgen. Voeg hier gewoon uw CSS toe voor wat u wilt wijzigen, u hoeft niet alle thema's te kopiëren \ 's style.css inhoud. * /'); $ custom_css = get_option ('custom_css', $ custom_css_default); ?> 
 
 
 
'. __ ('Aangepaste CSS bijgewerkt.'). '
'; ?> 
  
 
 
 <?php echo $custom_css; ?> 
 
 

 functie custom_css_validation ($ input) if (! empty ($ input ['custom_css'])) $ input ['custom_css'] = trim ($ input ['custom_css']); return $ input; 

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