Share
WordPress innehåller två inbyggda redaktörer som låter dig redigera temafiler direkt från webbläsaren, de temredigerare och pluginredigerare. Som standard ser redigeraren ut mycket enkelt och svår att redigera eftersom färgerna är helt svarta och gråa. I denna handledning kommer jag att visa dig hur du integrerar CodeMirror.js i redaktörerna för att göra utseendet sötare. Våra kodsekvenser kommer att markeras med mer färg, redaktörerna kommer även att ha linjenummer och mer.
Först av allt måste du ladda ner CodeMirror-biblioteket. Det är ett kraftfullt bibliotek, och stöder många programmeringsspråk och funktioner. Efter att ha hämtat och extraherat, låt oss placera den här katalogen i ditt temas katalog (jag använder tjugo elva som en demo) och namnge den codemirror.
Då skapar vi en fil som heter codemirror.php i den här katalogen och inkludera den här filen i functions.php fil av ditt tema.
Accentsconagua
// functions.php include ("codecirror / codemirror.php"); Öppna vår codemirror.php och gå vidare till nästa steg.
"CodeMirror är en JavaScript-komponent som tillhandahåller en kodredigerare i webbläsaren. När ett läge är tillgängligt för det språk du kodar in kommer det att färga din kod och eventuellt hjälpa till med indryckning."
add_action ('load-theme-editor.php', 'codemirror_register'); add_action ('load-plugin-editor.php', 'codemirror_register'); funktion 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'); Ovan snippets kommer att haka på codemirror_register fungera i två krokar, last-theme-editor.php och last-plugin-editor.php. Det betyder att när temededitoren eller pluginredigeraren begärs, kommer de att ringa vår codemirror_register fungera.
Inne i den här funktionen registrerar vi alla nödvändiga skript och stilfiler. codemirror.js och codemirror.css är två huvudkomponenter i CodeMirror biblioteket, de är i lib katalog.
blackboard.css är en temafil, den tema katalog i CodeMirror-biblioteket har också många andra temafiler, du kan ändra beroende på dina önskemål. Det finns fler tillgängliga teman, se dem här:
lägen är JavaScript-program som hjälper färg (och eventuellt inmatad) text som skrivs på ett visst språk. Deras värde är ett MIME-typvärde, det beror på vilket språk vi arbetar med. Du kan se alla lägen i läge katalog i CodeMirror-biblioteket. Eftersom WordPress inbyggda redigerare kan redigera HTML, PHP, CSS (mer här), så registrerar jag dessa skript på nästa rader av codemirror_register fungera. Anledningen till att jag har registrerat XML och Clike-skript kommer att förklaras senare.
Efter att ha registrerat alla skriptfiler måste vi skämma bort dem varje gång vår admin sektion laddas. Så lägger jag till codemirror_enqueue_scripts funktion till admin_enqueue_scripts krok. Sedan lägger vi också in en kontroll javascript-fil (vi kan modifiera, lägga till eller ta bort alternativskript) av CodeMirror till adminhuvudet.
funktion 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'); Ovanstående funktion har ingen stor fråga att förklara, det bara enqueues alla skript som vi registrerade tidigare. Öppna Theme Editor och View Source och du kommer se att dessa skript är inbäddade i rubriken.
I grund och botten är vårt skript:
funktion codemirror_enqueue_scripts () ?>Denna funktion kommer att inbäddas i adminhuvuddelen, CodeMirror påverkar alla element som innehåller
nytt innehållID, för vårtextareaelement som innehåller våra kodsekvenser har detta ID.
När CodeMirror används utan några alternativ använder CodeMirror sina egna standardalternativ. För mer att använda fler alternativ kan vi göra så här:
funktion codemirror_enqueue_scripts () ?>Dessa ytterligare alternativ gör att vår redaktör har linjenummer och blackboard-temat. Meddelande i
lägealternativet, detta alternativ kommer att avgöra vad läge CodeMirror ska använda (I steg 2 nämnde vi vad läge är). Eftersom varje filtyp har sitt eget läge måste vi definiera det här alternativet så att CodeMirror fungerar bra och visas mer exakt. Nedan finns några MIME-typvärden:
"Text / javascript" för JavaScript-läge"Text / css" för CSS-läge"Application / x-httpd-php" För PHP-läget kräver detta läge XML, JavasScript, CSS och C-liknande lägen. Det är anledningen till att vi måste registrera XML och C-liknande skript ovan.Enkelt HTML / PHP-läge baserat på C-liknande läget. Beror på PHP, XML, JavaScript, CSS och C-liknande lägen. (kolla här)
För bästa användning måste vi definiera vilken filtyp vi redigerar för att använda rätt läge. Vårt mål är att låta manuset använda rätt läge automatiskt. Här är en lösning:
funktionen codemirror_control_js () if (isset ($ _ GET ['fil'])) // $ _GET ['fil'] håller sökvägen för filen vi redigerar $ filename_to_edit = end (explodera ("/", $ _GET ['fil '])); // Vi måste hämta filnamn $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Hämta filtilläggsknapp ($ file) // Och ange lämpligt MIME-typvärde till $ file variable case "php": $ file = "application / x-httpd-php"; ha sönder; fallet "js": $ file = "text / javascript"; ha sönder; fallet "css": $ file = "text / css"; ha sönder; else $ file_script = $ _SERVER ['SCRIPT_NAME']; $ file_script = end (explodera ('/', $ file_script)); om ($ file_script == 'theme-editor.php') $ file = "text / css"; annars $ file = "application / x-httpd-php"; ?> Varje gång vi klickar på en fil för att redigera den, $ _GET [ 'file] variabel kommer att hålla sökvägen till den filen. Till exempel:
Och dessa kodrader hjälper oss att definiera filtillägg som vi redigerar:
$ filename_to_edit = end (explodera ("/", $ _GET ['fil'])); // Vi måste hämta filnamn $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Hämta filtillägg Sedan beror vi på ett annat MIME-typvärde för den matchningen beroende på varje förlängning.
Förutom för första gången öppnar vi temat eller Plugin Editor, vi klickar inte på någon fil för att redigera så $ _GET [ 'file'] variabel existerar inte. WordPress öppnar en standardfil för att redigera automatiskt. För temredigeraren är standardfilen den style.css fil och en annan PHP-fil i Plugin Editor. Så vi måste definiera MIME-typvärdet som "Text / css" i temagedirken och "Application / x-httpd-php" i pluginredigeraren.
Allt är klart, men redaktören ser suddig ut. Vi behöver ändra CSS-filen lite. I lib katalog öppnar vi codemirror.css fil, hitta nedan kod snippets:
.CodeMirror-scroll overflow-x: auto; överflöde-y: dolda; höjd: 300px; / * Detta behövs för att förhindra en IE [67] bugg där det rullade innehållet är synligt utanför rullningsrutan. * / position: relativ; kontur: ingen;
Ersätta med:
.CodeMirror, .CodeMirror div margin-right: 0! Important; .CodeMirror-scroll overflow-x: auto; överflöde-y: dolda; höjd: 450px; / * Detta behövs för att förhindra en IE [67] bugg där det rullade innehållet är synligt utanför rullningsrutan. * / position: relativ; kontur: ingen;
CodeMirror har många funktioner, det är ett riktigt kraftfullt javascript-bibliotek. Läs CodeMirrors manual för att få fullständig information om de tillgängliga funktionerna. Du kan ta reda på de andra funktionerna eller hur du anpassar dem och lägg till din WordPress-kod själv. Det är ganska enkelt: Registrera, enqueue och träffas Skriptet, som jag har gjort ovan.
I denna handledning fokuserar jag inte för mycket på CodeMirror och dess funktioner, jag visar bara hur man integrerar den i WordPress Editor för att göra vår redaktör snyggare eller lätt att arbeta med. Hoppas att denna handledning var användbar för alla.
Om du tycker att min handledning har något problem, eller om du har bättre idéer eller något att lägga till, lämna dina kommentarer nedan! Vi skulle verkligen uppskatta det.
