Accentsconagua

Å gjøre WordPress Editor ser pent ut ved hjelp av CodeMirror

Kode
Share

WordPress inneholder to innebygde redaktører som lar deg redigere temafiler direkte fra nettleseren, de Theme Editor og Plugin Editor. Som standard ser editoren seg veldig enkelt ut, og det er vanskelig å redigere fordi fargene er helt svart og grå. I denne veiledningen vil jeg vise deg hvordan du integrerer CodeMirror.js i redaktørene for å gjøre utseendet vakrere. Våre kodestykker vil bli uthevet med mer farge, redaktørene vil til og med ha linjenummer og mer.

Trinn 1 Forbereder

Først og fremst må du laste ned CodeMirror-biblioteket. Det er et kraftig bibliotek, og støtter mange programmeringsspråk og funksjoner. Etter å ha lastet ned og hentet ut, la oss plassere denne katalogen i temaets katalog (jeg bruker tjue elleve som en demo) og nevne det codemirror.

Deretter oppretter vi en fil som heter codemirror.php inne i denne katalogen og inkludere denne filen i functions.php fil av temaet ditt.

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

Åpne vår codemirror.php og gå videre til neste trinn.

"CodeMirror er en JavaScript-komponent som gir en kodeditor i nettleseren. Når en modus er tilgjengelig for språket du koder inn, vil det farge koden din og eventuelt hjelpe med innrykk."

Trinn 2 Registrer skript og stiler

 add_action ('load-theme-editor.php', 'codemirror_register'); add_action ('load-plugin-editor.php', 'codemirror_register'); funksjon 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');

Over snippets vil koble til codemirror_register Fungerer i to kroker, load-tema-editor.php og last-plugin-editor.php. Det betyr at når Theme Editor eller Plugin Editor er forespurt, vil de ringe vår codemirror_register funksjon.

Kjernebibliotek

Innenfor denne funksjonen registrerer vi alle nødvendige skript og stilfiler. codemirror.js og codemirror.css er to hovedkomponenter i CodeMirror biblioteket, de er i lib katalog.

Tema

blackboard.css er en temafil, den tema katalog i CodeMirror-biblioteket har også mange andre temafiler, du kan endre avhengig av dine preferanser. Det er flere tilgjengelige temaer, se dem her:

  • Misligholde:
  • Tavle:

Modus

Modes er JavaScript-programmer som hjelper farger (og eventuelt innrykk) tekst skrevet på et gitt språk. Verdien er en MIME type verdi, disse avhenger av språket vi jobber med. Du kan se alle modi i modus katalog i CodeMirror-biblioteket. Fordi WordPress 'innebygde editor kan redigere HTML, PHP, CSS (mer her), så registrerer jeg disse skriptene på de neste linjene codemirror_register funksjon. Årsaken til at jeg har registrert XML og Clike-skript, vil bli forklart senere.

Etter at du har registrert alle skriptfiler, må vi enqueue dem hver gang vår administrasjonsdel laster. Så legger jeg til codemirror_enqueue_scripts funksjon til admin_enqueue_scripts kroken. Da legger vi også inn en kontroll javascript-fil (vi kan endre, legge til eller slette opsjonsskript) av CodeMirror til admin head.

Trinn 3 Enqueue Scripts

 funksjon 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');

Ovennevnte funksjon har ikke noe stort problem å forklare, det bare enqueues alle skript som vi registrerte tidligere. Åpne Theme Editor og View Source, og du vil se at disse skriptene var innebygd i overskriften.

Trinn 4 Hook Up Script

Oversikt Bruk

I utgangspunktet er vårt skript:

 funksjon codemirror_enqueue_scripts () ?>   
Denne funksjonen vil bli innebygd i admin hodet delen, CodeMirror vil påvirke ethvert element som inneholder newcontent ID, fordi vår textarea Elementet som inneholder kodestykker, har denne IDen.
  
Når CodeMirror brukes uten noen alternativer, vil CodeMirror bruke sine egne standardalternativer. For mer bruk av flere alternativer kan vi gjøre slik:
 
 funksjon codemirror_enqueue_scripts () ?>   
Disse tilleggsalternativene gjør at redaktøren vår har linjenumre og tavle-temaet. Merknad i modus alternativet, vil dette alternativet bestemme hva modus CodeMirror skal bruke (I trinn 2 nevnte vi hva modus er). Fordi hver filtype har sin egen modus, må vi definere dette alternativet for å få CodeMirror til å fungere fint og vise mer nøyaktig. Nedenfor er noen MIME type verdier:
 
     
  •  "Text / javascript" for JavaScript-modus
    •  
  •  "Text / css" for CSS-modus
    •  
  •  "Application / x-httpd-php" For PHP-modus krever denne modusen XML, JavasScript, CSS og C-Like moduser. Det er derfor vi må registrere XML og C-lignende skript ovenfor.
    •  
 
 
Enkel HTML / PHP-modus basert på C-lignende modus. Avhenger av PHP, XML, JavaScript, CSS og C-lignende moduser. (se her)
 
 
Avansert bruk
 
For best mulig bruk må vi definere hvilken filtype vi redigerer for å bruke riktig modus. Vårt mål er å gjøre skriptet bruk riktig modus automatisk. Her er en løsning:
 
 funksjonen codemirror_control_js () if (isset ($ _ GET ['fil'])) // $ _GET ['fil'] har sti av fil vi rediger $ filename_to_edit = end (eksplodere ("/", $ _GET ['fil '])); // Vi trenger å få filnavn $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Få filtypebryter ($ file) // og tilordne passende MIME-typeverdi til $ file variable case "php": $ file = "application / x-httpd-php"; gå i stykker; tilfelle "js": $ file = "text / javascript"; gå i stykker; tilfelle "css": $ file = "text / css"; gå i stykker;  else $ file_script = $ _SERVER ['SCRIPT_NAME']; $ file_script = end (eksplodere ('/', $ file_script)); hvis ($ file_script == 'theme-editor.php') $ file = "text / css"; ellers $ file = "application / x-httpd-php"; ?>   
Hver gang vi klikker på en fil for å redigere den, $ _GET [ 'fil] variabel vil holde banen til den filen. For eksempel:
 
     
  •  wp-admin / tema-editor.php? file = header.php 
    •  
  •  wp-admin / tema-editor.php? file = style.css 
    •  
  •  wp-admin / plugin-editor.php? file = akismet.php 
    •  
 
Og disse kodene vil hjelpe oss med å definere filtillegg som vi redigerer:
 
 $ filename_to_edit = end (eksplodere ("/", $ _GET ['fil'])); // Vi trenger å få filnavn $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Få filtypenavn
 
Deretter tilordner vi en annen MIME-typeverdi for den kampen, avhengig av hver utvidelse.
 
Bortsett fra for første gang åpner vi Theme eller Plugin Editor, vi klikker ikke på noen fil for å redigere så $ _GET [ 'fil'] variabel eksisterer ikke. WordPress åpner en standardfil for å redigere automatisk. For Theme Editor er standardfilen style.css fil og en annen PHP-fil i Plugin Editor. Så vi må definere MIME type verdien som "Text / css" i Theme Editor og "Application / x-httpd-php" i Plugin Editor.
 
styling
 
Alt er gjort, men redaktøren ser rotete ut. Vi må endre CSS-filen litt. I lib katalog, åpner vi codemirror.css fil, finn under kodestykker:
 
 .CodeMirror-scroll overflow-x: auto; overflow-y: hidden; høyde: 300px; / * Dette er nødvendig for å forhindre en IE [67] bug hvor det rullede innholdet er synlig utenfor rulleboksen. * / stilling: relativ; oversikt: ingen; 
 
Erstatt med:
 
 .CodeMirror, .CodeMirror div margin-right: 0! Important;  .CodeMirror-scroll overflow-x: auto; overflow-y: hidden; høyde: 450px; / * Dette er nødvendig for å forhindre en IE [67] bug hvor det rullede innholdet er synlig utenfor rulleboksen. * / stilling: relativ; oversikt: ingen; 
 
Din tur
 
CodeMirror har mange funksjoner, det er et veldig kraftig javascript-bibliotek. Les CodeMirror's manual for å få fullt informert om funksjonene som er tilgjengelige. Du kan finne ut de andre funksjonene eller hvordan du tilpasser dem, og legg deg til WordPress-koden selv. Det er ganske enkelt: registrere, Enqueue og koble opp Skriptet, som jeg har gjort ovenfor.
 
 
Konklusjon
 
I denne opplæringen fokuserer jeg ikke for mye på CodeMirror og dens funksjoner, jeg demonstrerer bare måten å integrere den i WordPress Editor for å gjøre redaktøren vår se finere eller lett å jobbe med. Håper denne opplæringen var nyttig for alle.
 
Hvis du tror at opplæringen min har noe problem, eller du har bedre ideer, eller noe å legge til, legg igjen dine kommentarer nedenfor! Vi vil gjerne sette pris på det.





	
	
			
	   
	







Kode
×