Fare in modo che l'editor di WordPress sembri piuttosto usando CodeMirror

WordPress contiene due editor incorporati che ti permettono di modificare i file dei temi direttamente dal browser, loro l'Editor dei temi e il Plugin Editor. Per impostazione predefinita, l'editor sembra molto semplice e difficile da modificare perché i colori sono totalmente neri e grigi. In questo tutorial, ti mostrerò come integrare CodeMirror.js negli editor per renderlo più carino. I nostri frammenti di codice saranno evidenziati con più colori, gli editor avranno anche numeri di linea e altro ancora.

Fase 1 Preparazione

Prima di tutto, è necessario scaricare la libreria CodeMirror. È una potente libreria e supporta molti linguaggi e funzionalità di programmazione. Dopo aver scaricato ed estratto, posizioniamo questa directory nella directory del tuo tema (io uso Twenty Eleven come demo) e la chiamo CodeMirror.

Quindi, creiamo un file chiamato codemirror.php all'interno di questa directory e includere questo file nel file functions.php file del tuo tema.

 // functions.php include ("codemirror / codemirror.php");

Apri il nostro codemirror.php e passare al passaggio successivo.

"CodeMirror è un componente JavaScript che fornisce un editor di codice nel browser.Quando una modalità è disponibile per la lingua in cui stai codificando, colorerà il tuo codice e facoltativamente aiuterà con il rientro."

Passaggio 2 Registrare script e stili

 add_action ('load-theme-editor.php', 'codemirror_register'); add_action ('load-plugin-editor.php', 'codemirror_register'); function codemirror_register () wp_register_script ('codemirror', get_template_directory_uri (). "/ codemirror / lib / codemirror.js"); wp_register_style ('codemirror', get_template_directory_uri (). "/ codemirror / lib / codemirror.css"); wp_register_style ('cm_blackboard', get_template_directory_uri (). "/ codemirror / theme / blackboard.css"); wp_register_script ('cm_xml', get_template_directory_uri (). "/ codemirror / xml / xml.js"); wp_register_script ('cm_javascript', get_template_directory_uri (). "/ codemirror / javascript / javascript.js"); wp_register_script ('cm_css', get_template_directory_uri (). "/ codemirror / css / css.js"); wp_register_script ('cm_php', get_template_directory_uri (). "/ codemirror / php / php.js"); wp_register_script ('cm_clike', get_template_directory_uri (). "/ codemirror / clike / clike.js"); add_action ('admin_enqueue_scripts', 'codemirror_enqueue_scripts'); add_action ('admin_head', 'codemirror_control_js');

I frammenti sopra ameranno il codemirror_register funzione in due ganci, carico-theme-editor.php e carico-plugin-editor.php. Significa che quando viene richiesto l'Editor temi o l'Editor Plugin, chiameranno il nostro codemirror_register funzione.

Core Library

All'interno di questa funzione, registriamo tutti i file di script e di stile necessari. codemirror.js e codemirror.css sono due componenti principali della libreria CodeMirror, sono nel lib elenco.

Tema

blackboard.css è un file di temi, il tema la directory nella libreria CodeMirror ha anche molti altri file di temi, puoi cambiare a seconda delle tue preferenze. Ci sono più temi disponibili, vedili qui:

Predefinito:
Lavagna:

Modalità

Modalità sono programmi JavaScript che aiutano a colorare (e facoltativamente indentare) il testo scritto in una determinata lingua. Il loro valore è un valore di tipo MIME, questi dipendono dalla lingua con cui lavoriamo. Puoi vedere tutte le modalità in modalità directory all'interno della libreria CodeMirror. Poiché l'editor integrato di WordPress può modificare HTML, PHP, CSS (altro qui), quindi registro questi script nelle righe successive di codemirror_register funzione. Il motivo per cui ho registrato script XML e Clike verrà spiegato in seguito.

Dopo aver registrato tutti i file di script, dobbiamo accodarli ogni volta che viene caricata la nostra sezione di amministrazione. Quindi aggiungo il codemirror_enqueue_scripts funzione al admin_enqueue_scripts gancio. Quindi incorporiamo anche un file javascript di controllo (possiamo modificare, aggiungere o eliminare lo script di opzioni) di CodeMirror a admin head.

Passaggio 3 Accodare gli script

 function codemirror_enqueue_scripts () wp_enqueue_script ('codemirror'); wp_enqueue_style ( 'CodeMirror'); wp_enqueue_style ( 'cm_blackboard'); wp_enqueue_script ( 'cm_xml'); wp_enqueue_script ( 'cm_javascript'); wp_enqueue_script ( 'cm_css'); wp_enqueue_script ( 'cm_php'); wp_enqueue_script ( 'cm_clike');

La funzione di cui sopra non ha grandi problemi da spiegare, ma accoda tutti gli script che abbiamo registrato in precedenza. Apri l'Editor temi e visualizza l'origine e vedrai che questi script sono stati incorporati nell'intestazione.

Passaggio 4 Script di aggancio

Utilizzo generale

Fondamentalmente, il nostro script è:

function codemirror_enqueue_scripts () ?>

Questa funzione verrà incorporata nella sezione della testa di amministrazione, CodeMirror attaccherà qualsiasi elemento che contiene il file nuovo contenuto ID, perché il nostro textarea l'elemento che contiene i nostri frammenti di codice ha questo ID.

Quando si utilizza CodeMirror senza alcuna opzione, CodeMirror utilizzerà le proprie opzioni predefinite. Per ulteriori informazioni sull'uso di più opzioni, possiamo farlo in questo modo:

function codemirror_enqueue_scripts () ?>

Queste opzioni aggiuntive renderanno il nostro editor i numeri di riga e il tema della lavagna. Avviso nel modalità opzione, questa opzione determinerà cosa modalità CodeMirror dovrebbe usare (Nel passaggio 2, abbiamo menzionato cosa modalità è). Poiché ogni tipo di file ha una sua modalità, dobbiamo definire questa opzione per far funzionare correttamente CodeMirror e visualizzarlo in modo più accurato. Di seguito sono riportati alcuni valori del tipo MIME:

"Text / javascript" per la modalità JavaScript
"Text / css" per la modalità CSS
"Application / x-httpd-php" per la modalità PHP, questa modalità richiede le modalità XML, JavasScript, CSS e C-Like. Questo è il motivo per cui dobbiamo registrare gli script XML e C-Like sopra.

Semplice modalità HTML / PHP basata sulla modalità C-like. Dipende dalle modalità PHP, XML, JavaScript, CSS e C. (Vedere qui)

Uso avanzato

Per un utilizzo ottimale, dobbiamo definire il tipo di file che stiamo modificando per utilizzare la modalità corretta. Il nostro obiettivo è fare in modo che lo script utilizzi automaticamente la modalità corretta. Ecco una soluzione:

function codemirror_control_js () if (isset ($ _ GET ['file'])) // $ _GET ['file'] contiene il percorso del file che modifichiamo $ filename_to_edit = end (esplode ("/", $ _GET ['file '])); // Dobbiamo ottenere il nome del file $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Ottieni l'estensione dell'estensione del file ($ file) // Assegna il valore del tipo MIME appropriato a $ file variable case "php": $ file = "application / x-httpd-php"; rompere; case "js": $ file = "text / javascript"; rompere; case "css": $ file = "text / css"; rompere; else $ file_script = $ _SERVER ['SCRIPT_NAME']; $ file_script = end (explode ('/', $ file_script)); if ($ file_script == 'theme-editor.php') $ file = "testo / css"; else $ file = "application / x-httpd-php"; ?>

Ogni volta che clicchiamo su un file per modificarlo, il $ _GET [ 'file] variabile manterrà il percorso di quel file. Per esempio:

wp-admin / theme-editor.php? file = header.php
wp-admin / theme-editor.php? file = style.css
wp-admin / plugin-editor.php? file = akismet.php

E questi frammenti di codice ci aiuteranno a definire le estensioni di file che stiamo modificando:

 $ filename_to_edit = end (explode ("/", $ _GET ['file'])); // Dobbiamo ottenere il nome del file $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Ottieni l'estensione del file

Quindi, a seconda di ogni estensione, assegniamo un valore di tipo MIME diverso per quella corrispondenza.

Tranne la prima volta che apriamo il tema o l'editor del plugin, non facciamo clic su alcun file per modificarlo $ _GET [ 'file'] la variabile non esiste. WordPress aprirà un file predefinito da modificare automaticamente. Per l'Editor temi, il file predefinito è il style.css file e un altro file PHP nell'Editor Plugin. Quindi dobbiamo definire il valore del tipo MIME come "Text / css" nell'editor di temi e "Application / x-httpd-php" nell'Editor Plugin.

Messa in piega

Tutto è fatto ma l'editore sembra disordinato. Abbiamo bisogno di modificare un po 'il file CSS. Nel lib directory, apriamo il codemirror.css file, trova i frammenti di codice seguenti:

 .CodeMirror-scroll overflow-x: auto; overflow-y: nascosto; altezza: 300 px; / * Questo è necessario per prevenire un errore IE [67] in cui il contenuto a scorrimento è visibile al di fuori della casella di scorrimento. * / position: relativo; contorni: nessuno;

Sostituirlo con:

 .CodeMirror, .CodeMirror div margin-right: 0! Important;  .CodeMirror-scroll overflow-x: auto; overflow-y: nascosto; altezza: 450 px; / * Questo è necessario per prevenire un errore IE [67] in cui il contenuto a scorrimento è visibile al di fuori della casella di scorrimento. * / position: relativo; contorni: nessuno;

Il tuo turno

CodeMirror ha molte caratteristiche, è una libreria javascript davvero potente. Leggi il manuale di CodeMirror per essere pienamente informato sulle funzionalità disponibili. Puoi scoprire le altre funzionalità o come personalizzarle e aggiungerle al tuo codice WordPress. È abbastanza facile: Registrare, enqueue e allacciare la sceneggiatura, come il modo in cui ho fatto sopra.

Conclusione

In questo tutorial, non mi concentro troppo su CodeMirror e le sue funzionalità, ma dimostro semplicemente il modo di integrarlo nell'Editor di WordPress per rendere il nostro Editor più carino o facile da usare. Spero che questo tutorial sia stato utile per tutti.

Se pensi che il mio tutorial abbia qualche problema o che tu abbia idee migliori o qualcosa da aggiungere, lascia i tuoi commenti qui sotto! Lo apprezzeremmo molto.

Codice