Share
WordPress conține două editoare încorporate care vă permit să editați fișierele tematice direct din browser, ele sunt editorul tematic și editorul de pluginuri. Implicit, editorul arată foarte simplu și greu de editat, deoarece culorile sunt total negre și gri. În acest tutorial, vă voi arăta cum să integrați CodeMirror.js în editori pentru a face ca aspectul să fie mai frumos. Fragmentele noastre de cod vor fi evidențiate cu mai multă culoare, editorii vor avea chiar și numere de linie și multe altele.
Mai întâi de toate, trebuie să descărcați biblioteca CodeMirror. Este o bibliotecă puternică și susține multe limbi de programare și caracteristici. După descărcare și extragere, hai să plasăm acest director în directorul temei dvs. (eu folosesc Twenty Eleven ca demo) și îl numesc codemirror.
Apoi, creăm un fișier numit codemirror.php în acest director și includeți acest fișier în functions.php fișier al temei.
Accentsconagua
// funcții.php includ ("codemirror / codemirror.php"); Deschide-ne codemirror.php și treceți la pasul următor.
"CodeMirror este o componentă JavaScript care oferă un editor de cod în browser. Când un mod este disponibil pentru limba în care codificați, acesta va colora codul dvs. și, opțional, va ajuta la indentare."
add_action ('load-theme-editor.php', 'codemirror_register'); add_action ('load-plugin-editor.php', 'codemirror_register'); funcția 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'); Fragmentele de mai sus vor închide codemirror_register funcționează în două cârlige, încărcare-temă-editor.php și încărcare-plugin-editor.php. Înseamnă că atunci când editorul de teme sau editorul de pluginuri este solicitat, ei vor suna la noi codemirror_register funcţie.
În cadrul acestei funcții, înregistrăm toate fișierele de script și de stil necesare. codemirror.js și codemirror.css sunt două componente principale ale bibliotecii CodeMirror, ele sunt în lib director.
blackboard.css este un fișier de temă, temă directorul din biblioteca CodeMirror are, de asemenea, multe alte fișiere tematice, puteți schimba în funcție de preferințele dvs. Există mai multe teme disponibile, vedeți-le aici:
Moduri sunt programe JavaScript care ajută textul colorat (și opțional indentat) scris într-o anumită limbă. Valoarea lor este o valoare de tip MIME, acestea depind de limba în care lucrăm. Puteți vedea toate modurile din mod director în biblioteca CodeMirror. Deoarece WordPress "built-in Editor poate edita HTML, PHP, CSS (mai mult aici), așa că înregistrez script-uri de teze pe liniile următoare codemirror_register funcţie. Motivul pentru care am înregistrat scripturile XML și Clike va fi explicat mai târziu.
După înregistrarea tuturor fișierelor de script, trebuie să le enquege de fiecare dată când secțiunea de administrare se încarcă. Așa că am adăugat codemirror_enqueue_scripts funcția la admin_enqueue_scripts cârlig. Apoi, de asemenea, vom încorpora un fișier javascript de control (putem modifica, adăuga sau șterge script-ul de opțiuni) al CodeMirror la capul admin.
funcția 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'); Funcția de mai sus nu are o problemă mare de explicat, ci doar encrige toate scripturile pe care le-am înregistrat mai devreme. Deschideți Editorul tematic și vizualizați sursa și veți vedea că aceste scripturi au fost încorporate în antet.
Practic, scriptul nostru este:
funcția codemirror_enqueue_scripts () ?>Această funcție va fi încorporată în secțiunea cap de admin, CodeMirror va afecta orice element care conține
conținut nouID, pentru că noitextareaelementul care conține fragmentele noastre de cod are acest cod.
Când utilizați CodeMirror fără opțiuni, CodeMirror va utiliza propriile opțiuni implicite. Pentru mai multe opțiuni, putem face acest lucru:
funcția codemirror_enqueue_scripts () ?>Aceste opțiuni suplimentare vor face editorul nostru să aibă numere de linie și tema tabloului. Observați în
modopțiune, această opțiune va determina ce mod CodeMirror ar trebui să folosească (La pasul 2, am menționat ce mod este). Deoarece fiecare tip de fișier are propriul său mod, trebuie să definim această opțiune pentru a face CodeMirror să funcționeze bine și să se afișeze cu mai multă precizie. Mai jos sunt câteva valori de tip MIME:
"Text / javascript" pentru modul JavaScript"Text / css" pentru modul CSS"Application / x-httpd-php" pentru modul PHP, acest mod necesită moduri XML, Javascript, CSS și C-Like. Acesta este motivul pentru care trebuie să înregistrăm scripturi XML și C-Like de mai sus.Mod simplu HTML / PHP bazat pe modul C-like. Depinde de modurile PHP, XML, JavaScript, CSS și C. (Vezi aici)
Pentru cea mai bună utilizare, trebuie să definim tipul de fișier pe care îl editați pentru a utiliza modul corect. Scopul nostru este de a face scriptul să folosească automat modul corect. Iată o soluție:
funcția codemirror_control_js () if (isset ($ _GET ['fișier'])) // $ _GET ['file'] păstrează calea fișierului editat $ filename_to_edit = „])); // Trebuie să obțineți numele fișierului $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Descărcați comutatorul pentru extensia fișierului ($ file) // Și atribuiți valoarea de tip MIME corespunzătoare casei variabile $ file "php": $ file = "application / x-httpd-php"; pauză; cazul "js": $ file = "text / javascript"; pauză; cazul "css": $ file = "text / css"; pauză; altfel $ file_script = $ _SERVER ['SCRIPT_NAME']; $ file_script = sfârșit (explode ('/', $ file_script)); dacă ($ file_script == 'temă-editor.php') $ file = "text / css"; altfel $ file = "aplicație / x-httpd-php"; ?> De fiecare dată când facem clic pe un fișier pentru ao edita, $ _GET [ 'fișier] va menține calea către acel fișier. De exemplu:
Și aceste fragmente de cod ne vor ajuta să definim extensiile de fișiere pe care le editați:
$ filename_to_edit = end (exploda ("/", $ _GET ['fișier'])); // Trebuie să obțineți numele fișierului $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Descărcați extensia de fișier Apoi, în funcție de fiecare extensie, atribuim o valoare de tip MIME diferită pentru acea potrivire.
Cu excepția pentru prima dată când deschidem editorul tematic sau pluginul, nu faceți clic pe niciun fișier pentru a fi modificat $ _GET [ 'fisier'] variabilă nu există. WordPress va deschide un fișier implicit pentru a fi editat automat. Pentru editorul tematic, fișierul implicit este style.css fișier și un alt fișier PHP în Editorul Plugin. Așadar, trebuie să definim valoarea tipului MIME ca "Text / css" în Editorul tematic și "Application / x-httpd-php" în editorul Plugin.
Totul sa terminat, dar editorul pare a fi dezordonat. Trebuie să modificăm puțin fișierul CSS. În lib director, deschidem codemirror.css fișier, găsiți fragmente de cod de mai jos:
.CodeMirror-derulare overflow-x: auto; overflow-y: ascuns; înălțime: 300px; / * Acest lucru este necesar pentru a preveni o eroare IE [67] unde conținutul derulat este vizibil în afara casetei de defilare. * / poziție: relativă; contur: nici unul;
Înlocui cu:
.CodeMirror, .CodeMirror div marginea-dreapta: 0! Important; .CodeMirror-derulare overflow-x: auto; overflow-y: ascuns; înălțime: 450 px; / * Acest lucru este necesar pentru a preveni o eroare IE [67] unde conținutul derulat este vizibil în afara casetei de defilare. * / poziție: relativă; contur: nici unul;
CodeMirror are multe caracteristici, este o bibliotecă javascript foarte puternică. Citiți manualul CodeMirror pentru a vă informa complet despre caracteristicile disponibile. Puteți afla celelalte funcții sau cum să le personalizați și adăugați-vă personal la codul dvs. WordPress. Este destul de ușor: Inregistreaza-te, Puneți în coadă și None scenariul, așa cum am făcut mai sus.
În acest tutorial, nu mă concentrez prea mult pe CodeMirror și pe caracteristicile acestuia, dar demonstrez modul în care îl integrez în Editorul WordPress pentru a face editorul nostru să pară mai frumos sau ușor de utilizat. Sper că acest tutorial a fost util pentru toată lumea.
Dacă credeți că tutorialul meu are probleme sau dacă aveți idei mai bune sau ceva de adăugat, lăsați-vă comentariile de mai jos! Am aprecia foarte mult.
