Share
WordPress enthält zwei integrierte Editoren, mit denen Sie Themendateien direkt aus dem Browser heraus bearbeiten können. Dazu gehören der Themeneditor und der Plugin-Editor. Standardmäßig sieht der Editor sehr einfach aus und ist schwer zu bearbeiten, da die Farben vollständig schwarz und grau sind. In diesem Tutorial zeige ich Ihnen, wie Sie CodeMirror.js in die Editoren integrieren, um den Look schöner zu gestalten. Unsere Code-Snippets werden farblich hervorgehoben, die Editoren enthalten sogar Zeilennummern und vieles mehr.
Zunächst müssen Sie die CodeMirror-Bibliothek herunterladen. Es ist eine leistungsfähige Bibliothek und unterstützt viele Programmiersprachen und Funktionen. Nach dem Herunterladen und Extrahieren legen wir dieses Verzeichnis in das Verzeichnis Ihres Themas (ich verwende Twenty Eleven als Demo) und benenne es codemirror.
Dann erstellen wir eine Datei namens codemirror.php in diesem Verzeichnis und fügen Sie diese Datei in das Verzeichnis ein Functions.php Datei Ihres Designs.
Accentsconagua
// functions.php include ("codemirror / codemirror.php"); Öffne unsere codemirror.php und fahren Sie mit dem nächsten Schritt fort.
"CodeMirror ist eine JavaScript-Komponente, die im Browser einen Code-Editor bereitstellt. Wenn für die Sprache, in der Sie codieren, ein Modus verfügbar ist, wird Ihr Code farbig dargestellt und optional beim Einrücken unterstützt."
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'); Über Schnipsel haken die codemirror_register Funktion in zwei Haken, load-theme-editor.php und load-plugin-editor.php. Das heißt, wenn der Theme-Editor oder der Plugin-Editor angefordert wird, rufen sie unseren an codemirror_register Funktion.
Innerhalb dieser Funktion registrieren wir alle benötigten Skript- und Style-Dateien. codemirror.js und codemirror.css sind zwei Hauptkomponenten der CodeMirror - Bibliothek. Sie befinden sich in der lib Verzeichnis.
blackboard.css ist eine Theme-Datei, die Thema Das Verzeichnis in der CodeMirror-Bibliothek enthält auch viele andere Motivdateien, die Sie je nach Ihren Vorlieben ändern können. Es gibt mehr verfügbare Themen, siehe hier:
Modi sind JavaScript-Programme, die Text in einer bestimmten Sprache einfärben (und optional einrücken). Ihr Wert ist ein MIME-Typ, der von der Sprache abhängt, mit der wir arbeiten. Sie können alle Modi im sehen Modus Verzeichnis innerhalb der CodeMirror-Bibliothek. Da der eingebaute Editor von WordPress HTML, PHP, CSS (mehr hier) bearbeiten kann, registriere ich diese Skripts in den nächsten Zeilen von codemirror_register Funktion. Der Grund, warum ich XML- und Clike-Skripts registriert habe, wird später erläutert.
Nach der Registrierung aller Skriptdateien müssen wir sie jedes Mal beim Laden unseres Admin-Abschnitts in die Warteschlange stellen. Also füge ich das hinzu codemirror_enqueue_scripts Funktion zum admin_enqueue_scripts Haken. Dann haben wir auch eine JavaScript-Kontrolldatei (wir können das Optionsskript ändern, hinzufügen oder löschen) von CodeMirror in den Administrationskopf eingebettet.
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'); Die obige Funktion hat keine großen Probleme zu erklären, sie reiht einfach alle Skripts ein, die wir zuvor registriert haben. Öffnen Sie den Themeneditor und die Ansichtsquelle. Sie werden sehen, dass diese Skripts in den Header eingebettet wurden.
Grundsätzlich lautet unser Skript:
Funktion codemirror_enqueue_scripts () ?>Diese Funktion wird in den Admin-Kopfbereich eingebettet. CodeMirror wirkt sich auf alle Elemente aus, die das enthalten
neuer InhaltID, weil unserTextbereichElement, das unsere Codeausschnitte enthält, hat diese ID.
Wenn Sie CodeMirror ohne Optionen verwenden, verwendet CodeMirror seine eigenen Standardoptionen. Wenn Sie mehr Optionen verwenden möchten, können Sie dies folgendermaßen tun:
Funktion codemirror_enqueue_scripts () ?>Durch diese zusätzlichen Optionen erhält unser Editor Zeilennummern und das Blackboard-Thema. Beachten Sie in der
ModusOption, bestimmt diese Option was Modus CodeMirror sollte verwenden (In Schritt 2 haben wir erwähnt, was Modus ist). Da jeder Dateityp einen eigenen Modus hat, müssen wir diese Option definieren, damit CodeMirror einwandfrei funktioniert und genauer angezeigt wird. Im Folgenden sind einige Werte für den MIME-Typ aufgeführt:
"Text / Javascript" für den JavaScript-Modus"text / css" für den CSS-Modus"Anwendung / x-httpd-php" Für den PHP-Modus erfordert dieser Modus die Modi XML, JavasScript, CSS und C-Like. Aus diesem Grund müssen wir oben XML- und C-Like-Skripts registrieren.Einfacher HTML / PHP-Modus basierend auf dem C-like-Modus. Abhängig von PHP, XML, JavaScript, CSS und C-ähnlichen Modi. (siehe hier)
Für eine optimale Verwendung müssen wir definieren, welchen Dateityp wir bearbeiten, um den korrekten Modus zu verwenden. Unser Ziel ist es, dass das Skript automatisch den richtigen Modus verwendet. Hier ist eine Lösung:
function codemirror_control_js () if (isset ($ _ GET ['file'])) // $ _GET ['file'] enthält den Pfad der Datei. Wir bearbeiten $ filename_to_edit = end (explode ("/", $ _GET ['file.) '])); // Wir müssen den Dateinamen $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1) erhalten. // Erhalte den Dateierweiterungsschalter ($ file) // Und weise den entsprechenden Wert des MIME-Typs zu $ file variable "php": $ file = "application / x-httpd-php"; brechen; case "js": $ file = "text / javascript"; brechen; Fall "css": $ file = "text / css"; brechen; else $ file_script = $ _SERVER ['SCRIPT_NAME']; $ file_script = end (explode ('/', $ file_script)); if ($ file_script == 'theme-editor.php') $ file = "text / css"; else $ file = "Anwendung / x-httpd-php"; ?> Jedes Mal, wenn wir auf eine Datei klicken, um sie zu bearbeiten, klicken Sie auf $ _GET ['datei] Die Variable enthält den Pfad zu dieser Datei. Zum Beispiel:
Und diese Codeausschnitte helfen uns, die Dateierweiterungen zu definieren, die wir bearbeiten:
$ filename_to_edit = end (explode ("/", $ _GET ['file'])); // Wir müssen den Dateinamen $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1) erhalten. // Dateierweiterung abrufen Abhängig von der jeweiligen Erweiterung weisen wir dann für diese Übereinstimmung einen anderen MIME-Typwert zu.
Außer beim ersten Öffnen des Design- oder Plugin-Editors klicken wir nicht auf eine Datei, um sie zu bearbeiten $ _GET ['Datei'] Variable existiert nicht WordPress öffnet eine Standarddatei zur automatischen Bearbeitung. Für den Themeneditor ist die Standarddatei die style.css Datei und eine weitere PHP-Datei im Plugin-Editor. Daher müssen wir den MIME-Typwert als definieren "text / css" im Theme Editor und "Anwendung / x-httpd-php" im Plugin-Editor.
Alles ist erledigt, aber der Editor sieht unordentlich aus. Wir müssen die CSS-Datei ein wenig ändern. In dem lib Verzeichnis öffnen wir die codemirror.css Datei finden Sie unter Code-Snippets:
.CodeMirror-scroll overflow-x: auto; Überlauf-y: versteckt; Höhe: 300px; / * Dies ist erforderlich, um einen IE [67] - Fehler zu verhindern, bei dem der gescrollte Inhalt außerhalb des Bildlauffelds sichtbar ist. * / position: relativ; Umriss: keine;
Ersetzen mit:
.CodeMirror, .CodeMirror div margin-right: 0! Important; .CodeMirror-scroll overflow-x: auto; Überlauf-y: versteckt; Höhe: 450px; / * Dies ist erforderlich, um einen IE [67] - Fehler zu verhindern, bei dem der gescrollte Inhalt außerhalb des Bildlauffelds sichtbar ist. * / position: relativ; Umriss: keine;
CodeMirror hat viele Funktionen, es ist eine wirklich leistungsfähige Javascript-Bibliothek. Lesen Sie das CodeMirror-Handbuch, um sich umfassend über die verfügbaren Funktionen zu informieren. Sie können die anderen Funktionen herausfinden oder wie Sie sie anpassen und Ihren WordPress-Code selbst hinzufügen. Es ist sehr leicht: registrieren, Enqueue und anschließen das Skript, wie ich es oben gemacht habe.
In diesem Tutorial konzentriere ich mich nicht zu sehr auf CodeMirror und seine Funktionen. Ich demonstriere nur die Art und Weise, wie ich es in den WordPress-Editor integrieren kann, damit unser Editor schöner oder einfacher aussieht. Ich hoffe, dieses Tutorial war für alle nützlich.
Wenn Sie der Meinung sind, dass mein Tutorial ein Problem hat, oder haben Sie bessere Ideen oder etwas, das Sie hinzufügen können, lassen Sie unten Ihre Kommentare! Wir würden es sehr schätzen.
