Aggiunta di un editor CSS personalizzato al tema Uso di ACE

Ogni volta che qualcuno scarica il tuo tema e decide che alcuni dei CSS non funzionano per loro, di solito entrano in gioco style.css e modificare manualmente il foglio di stile a loro piacimento. Questo non è troppo difficile da fare, ma presenta un problema quando è disponibile la prossima versione del tuo tema e decidono di aggiornarsi.

Tutte le loro modifiche verranno quindi sovrascritte. Un'ottima soluzione consiste nell'offrire un editor CSS personalizzato in modo che tutte le modifiche apportate vengano archiviate in modo sicuro nel database e che il loro aggiornamento in futuro non costituisca un problema.

---

L'editor ACE

Chiunque abbia familiarità con l'utilizzo di un IDE desktop come Coda, Sublime e Kimodo sarà a proprio agio nell'interfaccia dell'editor ACE. ACE è un editor di codice basato sul web che può essere facilmente incorporato in qualsiasi pagina web o app online. È dotato di evidenziazione della sintassi per oltre 40 lingue e include anche un correttore di codice live per migliorare il codice durante la scrittura.

In questo tutorial, ho intenzione di guidarti attraverso i passaggi necessari per installare ACE nel tuo tema in modo da poter offrire questa fantastica funzionalità ai tuoi utenti.

---

Passaggio 1: installazione di ACE

L'editor ACE è ospitato su GitHub, ma se dai un'occhiata a ciò che ottieni quando scarichi il progetto, potresti essere sopraffatto dal numero di file. Ci sono veramente solo tre file di cui abbiamo bisogno e puoi trovarli nel pacchetto di download che ho fornito tramite il link Download qui sopra.

• ace.js
• mode-css.js
• operai css.js

Questi tre file devono essere inclusi in una cartella denominata "assoMsgstr "Posiziona questa cartella nella radice del tema.

---

Passaggio 2: il file di supporto

Per inserire ACE nel tuo tema, devi creare un file JavaScript di supporto che imposterà tutto sulla tua pagina per far funzionare correttamente l'editor ACE. Crea un nuovo file chiamato "custom-css.js"con il seguente codice e aggiungilo alla radice del tuo tema.

 (function (global, $) 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 );

Il codice sopra inserisce l'editor ACE nella pagina e si assicura che anche il CSS che gli utenti inseriscono sia inserito nel campo textarea in modo che possa essere memorizzato nel database di WordPress. C'è anche un check in per IE7, che è incompatibile con ACE quindi caricherà solo la textarea di base.

---

Passaggio 3: accodamento dei file

Con tutti i file JavaScript appropriati aggiunti, devi collegarti admin_enqueue_scripts per assicurarti che i tuoi script vengano visualizzati nella pagina di amministrazione dell'editor CSS personalizzato.

 add_action ('admin_enqueue_scripts', 'custom_css_scripts'); function 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', vero); wp_enqueue_script ( 'ace_mode_js', get_template_directory_uri (). '/ace/mode-css.js', array ('ace_code_highlighter_js'), '1.0.0', vero); wp_enqueue_script ('custom_css_js', get_template_directory_uri (). '/ custom-css .js ', array (' jquery ',' ace_code_highlighter_js '),' 1.0.0 ', vero);

---

Passaggio 4: l'Editor CSS personalizzato

Ora è necessario creare la pagina delle opzioni del tema nel wp-admin in cui verrà visualizzato l'editor CSS personalizzato. Per aggiungere una pagina delle opzioni del tema, è necessario collegarsi al admin_menu azione.

Aggiungi il seguente a functions.php:

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

È inoltre necessario registrare un campo delle impostazioni CSS personalizzate in modo da poterlo archiviare nel database di WordPress. Per farlo devi agganciarti al admin_init azione e usa il register_settings () funzione.

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

Poiché hai già aggiunto la pagina delle opzioni e registrato le impostazioni, ora puoi creare il contenuto della tua pagina:

 function custom_css_admin_page_content () // Il messaggio predefinito che apparirà $ custom_css_default = __ ('/ * Benvenuto nell'editor CSS personalizzato! Aggiungi qui il tuo CSS personalizzato ed evita di modificare i file del tema principale, dato che eseguirai l'aggiornamento il tema problematico. Il tuo CSS personalizzato verrà caricato dopo i fogli di stile del tema, il che significa che le tue regole avranno la precedenza. Aggiungi il tuo CSS qui per quello che vuoi cambiare, non è necessario copiare tutto il tema \ 's style.css content. * /'); $ custom_css = get_option ('custom_css', $ custom_css_default); ?> 
 
 
 
'. __ ('Custom CSS aggiornato.'). '
'; ?> 
  
 
 
 <?php echo $custom_css; ?> 
 
 

 function custom_css_validation ($ input) if (! empty ($ input ['custom_css'])) $ input ['custom_css'] = trim ($ input ['custom_css']); restituire $ input; 

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