Wer bei WordPress oft Code remote bearbeiten muss und nicht immer einen FTP-Zugang benutzen kann, der wird sich, wie ich, schon oft über den sehr spartanischen Theme- und Plugin-Editor geärgert haben. Ohne Zeilennummern und Syntax Highlighting fühlt man sich dabei schlimmer als mit vi.
Ich habe aufbauend auf der wunderbaren Codepress-Bibliothek von Fernando M.A.d.S. und Michael Hurni, die Zeilennummern und Syntax-Highlighting für CSS, HTML, Java, Javascript, Perl, Php, Ruby und Sql mitbringt ein simples WordPress Plugin programmiert, was diese Funktionalitäten für den WordPress Theme-Editor und den Plugin-Editor schmerzlos nachrüstet.
Das Ergebnis kann sich sehen lassen:

Das Plugin erkennt, ob man sich im Theme-Editor “theme-editor.php” oder Plugin-Editor “plugin-editor.php” befindet und fügt nur dann den benötigten Javascript-Code ein. Für weitere Funktiondetails siehe den Sourcecode.
Installation:
- Download des Plugins.
- Plugin entpacken und nach /wp-content/plugins/code-editor hochladen.
- Unter Plugins im Adminstrationsbereich aktivieren.
- Fertig!
Sobald ein Template oder ein Plugin bearbeitet wird, steht, Javascript vorrausgesetzt, ein vollwertiger Editor zur Verfügung, der sogar die Benutzung des Tabulators (hurra!) erlaubt und diverse Shortcuts unterstützt.
Update am 21.01.2009 auf Version 1.2
Das Update bringt keine neuen funktionen, aber dafür eine besser gekapselte Codebase.
Wird WordPress wie hier beschrieben in einem UnterVerzeichnis auf dem Server abgelegt und so konfiguriert, das es trotzdem über die Domain aufrufbar ist, so liefert der Aufruf von get_bloginfo(‘url’) einen falschen Pfad, an den richtigen kommt man mit get_bloginfo(‘wpurl’) heran. Die wenigsten werden dieses Minor-Update einspielen müssen, wer es braucht.
Download


Mal eben so programmiert… Mein Respekt, ehrlich!
Könnte ich damit auch die htaccess bearbeiten, bspw.?
Oder beliebige andere Dateien im Verzeichnisbaum?
[...] etc. Naden hat mich via Kommentar darauf hingewiesen, dass er auf Basis von CodePress ein WordPress-Plugin erstellt hat. Ich habe es nicht getestet, aber für Leute, die gerne online ihre Dateien bzw. [...]
[...] Server zurückzuspielen, ist es einfacher, dies schnell online zu bewerkstelligen. Dank des genialen Code Editor-Plugins von naden ist genau das nun möglich. Die Erweiterung basiert auf dem Online-Editor CodePress. [...]
Genial. Vielen Dank für dieses sinnvolle Plugin.
[...] öfter direkt in WordPress an seinem Themes bastelt, kann nun CodePress durch diesen Plugin mit WordPress [...]
[...] WordPress Plugin Code Editor Syntax Highlighting, Tabulatur-Benutzung, Shortcuts, yeah! (via) (tags: wordpress wp-plugins plugin code html css php) Verwandte Einträge No Related Posts [...]
[...] prima Plugin: Codepress for WordPress [...]
Das Plugin hat bei mir zwar erst funktioniert nachdem ich mich aus- und wieder eingeloggt hab.
Aber trotzdem: Sehr geiles Teil :)
Vielen Dank
installiert und: funktioniert!
vielen dank dafür! :-)
Wunderbar, vielen Dank dafür. :)
Läuft sauber, soweit ich das jetzt im Schnelltest beurteilen konnte. :)
[...] WordPress Code Editor: Syntax-Highlighting im Theme und Plugin Editor [...]
[...] Hier geht es zum Download. [...]
[...] – WordPress Plugin Code Editor für WordPresser, die den Komfort des Code-Editors gern erhöhen wollen. (tags: PHP Editor [...]
[...] WordPress Code Editor: Syntax-Highlighting im Theme und Plugin Editor [...]
Danke, ein sehr schönes plugin und es funktioniert wunderbar.
Danke für das durchweg positive Feedback :)
@Kopfschüttler
Man kann nur die Template- oder Plugin-Dateien bearbeiten, da sich das Plugin ja nur in den vorhandenen Editor einklinkt.
Tatsächlich habe ich vor einigen Monaten ein Plugin gebaut, was als Editor für die .htaccess und die robotx.txt dient. Ich werde es bald mal posten.
@markus
Ich denke, das lag dann am Caching des Browsers oder am WordPress-Cache, fals du das installiert hast.
Da ich WordPress in einem eigenen Unterverzeichnid installiert habe, funktioniert das Plugin so nicht. Man muss dafür in der Datei code-editor.php folgende Änderung machen machen: get_bloginfo(‘url’) durch get_bloginfo(‘wpurl’) ersetzen.
@sven
ich finde das recht merkwürdig, da ich meinen Blog auch in einem Unterverzeichnis http://www.naden.de/blog laufen habe und es funktioniert.
Der folgende Code
var ce_url = ‘http://www.naden.de/blog’;
erfasst bei mir die Domain und das Unterverzeichnis richtig.
Welche WordPress Version nutzt du?
Ich nutze WordPress 2.2
In meinen Einstellungen habe ich folgendes eingetragen:
WordPress-Adresse: http://www.seven.lu/wp
Blog-Adresse: http://www.seven.lu
Vielleicht haben wir uns auch falsch verstanden. Ich meinte jedenfalls, dass ich sämtliche WordPress Dateien in ein Unterverzeichnis auf dem Server gelegt habe (/wp) wie es hier beschrieben ist: http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory
Da dein Plugin demnach im Verzeichnis /wp/wp-content/plugins/code-editor liegt, muss man die Variable ce_url mit get_bloginfo(’wpurl’) initialisieren (=WordPress-Adresse).
@sven
Da habe ich dich in der Tat nicht richtig verstanden. Danke für den Hinweis, ich werde das Plugin entsprechend anpassen.
[...] WordPress Plugin Code EditorÄußerst nützliches WP Plugin [...]
hi,
das plugin geht bei mir nicht :(
hab WordPress 2.2, liegt unter http://viktor-dite.de/…/miZine/ und ist direkt über http://mizine.de erreichbar.
WP URL ist http://mizine.de
BLOG URL ist ebenfalls http://mizine.de
Weder die eine noch die andere Version funktionieren — weder mit noch ohne Tigerstyle
Das Problem hat sich erledigt und lag am Safari Browser (trotz version 3)
Das Plugin funktioniert wunderbar mit Firefox und WordPress2.2
danke!
Ich freue mich und spare mir einen unsachlichen Kommentar zum Mac. :)
[...] andere gute Idee für WordPress. Naden nahm den JavaScript Code Editor CodePress und baute daraus eine Erweiterung für das bearbeiten der Themes und Plugins. Nicht das in diesem Blog viel an dem Code geschraubt wird aber wenn dann macht es sich schon um [...]
[...] Zeilennummern und Syntaxhervorhebung ist das sehr mühsam. Heute fand ich ein tolles Plugin bei http://www.naden.de, was genau die erwähnten Funktionen in WP integriert. Die Installation läuft denkbar einfach ab: [...]
Hallo naden,
mit Plugin-Programmierung kenne ich mich noch nicht so aus, aber wäre es möglich, auch den Texteditor von WP mit Zeilennummern und farbiger Syntax auszustatten? Ich hatte als erstes den tiny-Editor abgeschaltet und schreibe meine Texte in eine ganz normale Textarea-Box. Wäre natürlich genial, wenn das auch gehen würde. Ich finde so schon, dass dieses Plugin zu den Top10 gehört! Klasse Arbeit!
LG,
Jens
@jens, es ist kein Problem, den normalen Editor auf zu werwandeln.
Dazu sind nur marginale Änderungen am Code nötig:
code-editor.php
Ersetze ‘plugin-editor.php’ durch ‘post.php’ und ‘theme-editor.php’ durch ‘post-new.php’.
code-editor.js
Ersetze ‘template’ durch ‘post’ und ‘newcontent’ durch ‘content’.
Wenn du diese Änderungen durchgeführt hast, ist der Editor allerdings nicht mehr für Templates oder Plugins zu gebrauchen.
Ich kann bei Gelegenheit mal eine neue Version bauen, wo man optional auch den normalen Editor hooken kann.
[...] WordPress Code Editor [...]
[...] CodePress 是一个完全çâ€Â¨ Javascript 写æˆÂçš„ HTML Textarea 增强程åºÂ,利çâ€Â¨Ã¥Â®Æ’,你åª需è¦Â简å•的修æâ€Â¹Ã¯Â¼Å’å°±å¯以将你网页ä¸Âçš„ Textarea å˜æˆÂ一个æâ€Â¯Ã¦Å’Âè¯Â法高亮的程åºÂ编辑器。CodePress 完全开æºÂ,éž常容易集æˆÂ。 [...]
DANKE! DANKE! DANKE!
[...] habe ich hier etwas über CodePress und das Plugin von naden.de geschrieben, aber es ist nicht angekommen. Aus diesem Grund (und noch ein paar anderen), die ich [...]
[...] puedes editar tu código fuente bien formateado tanto dentro de wordpress como en una página aparte.Soporta ASP, C#, CSS, HTML, Java, JavaScript, Perl, PHP, Ruby, SQL y [...]
[...] Fonte: Naden [...]
[...] 1. Eklentiyi indir. 2. code-editor klasörünü plugins dizinine açın. ( /wp-content/plugins/code-editor ) 3. Admin panelinden Eklentiyi aktifleÅŸtirin. WordPress Code Editor 1.1 Henüz kimse indirmemiş.. Kaynakça codepress Plugin Code Editor [...]
[...] noch wird der Code gehighlighted (eingefärbt). Doch genau diese zwei wichtigen Dinge ändert das Code Editor Plugin von Naden [...]
[...] Adsense-Deluxe Follow-URL Google Sitemaps semmelstatz2 Spam Karma 2 Spreadshop SyntaxHighlighter WordPress Code Editor XSD Snapr [...]
Sehr schönes Plugin, nun kann man auch mal von unterweg an seiner HP arbeiten. Danke
Nun ist das editieren des Codes auf jeden Fall etwas komfortabler, und macht zumindest in meinem Fall das php Progi überflüssig. Gut gemacht. :)
Ja, es macht das Editieren sehr viel komfortabler. Einzig eine Suche müsste ich mal nachrüsten.
einfach nur Danke, genial
Hab ein Problem: wenn ich mit dem WP-Editor zB Themes bearbeite, werden zusätzliche Zeilenumbrüche gespeichert. So wird aus
text
text
text2
nach dem Speichern
text
text
text2
Kann es sein, dass dies durch das Code-Plugin verursacht wird? Danke für jede Hilfe!
@robert ich kann das Problem leider nicht nachstellen. Ich habe DOS/Unix Dateiformate auf Linux und Windows getestet. Eventl. hast du ja Details bzw. schickst mir mal eine Testdatei.
ich hatte schon befürchtet, dass du es nicht nachvollziehen kannst. Danke trotzdem für deine Hilfe – werde versuchen, zusätzliche Infos zu bekommen…
@robert, solltest du was finden, dann fixe ich das gerne.
Wow! Great plugin! You actually made a real code editor for WP!
Would there be any way to make it display whitespace and indentation lines (like Scintilla-based editors do)?
Vielen Dank!
@stop Thanks for the compliment. I just wrote the plugin which is heavely based on the Codepress library by Fernando M.A.d.S. and Michael Hurni. Afaik there is no option to modify the whitespaces etc. the way you want it. Maybe you can try to patch the codepress library directly to fit you needs.
Vielen Dank für das großartige Plugin. Da ich durch Ausbildung usw oft die PCs wechseln muss versuche ich kleine Wartungsarbeiten immer dort zu verrichten wo ich gerade bin, und dein Code-Highlighter hat mir soeben das Leben um einiges leichter gemacht :)
@Askhari Super dass es hilft. Ich schicke dir eine Rechnung! ;)
[...] wurde ich hier von einem Theme-Editor in WordPress, dem in seiner Standardausgabe vielleicht etwas Syntax-Highlightning [...]
[...] jetzt das Plugin WordPress Code Editor gefunden. Scheint gut zu funktionieren. Ich werde das mal ein wenig [...]
Das Plugin ist für mich wirklich nützlich. Hab vorhin noch drüber gebloggt, dass mich das nervt und kurz darauf finde ich, was ich suche mit deinem Plugin.
Vielen Dank.
@funker, freut mich. Ich sag ja immer, darüber reden (schreiben) hilft oft :)
viele dank für dieses wirklich nützliche plugin. läuft wunderbar.
gruß micha
Danke für das Plugin! Hab lang nach sowas gesucht, aber die Search-Funktion im wordpress.com Repository ist wirklich nicht das gelbe vom Ei. Gerade wenn man auswärts an fremden Rechnern schnell was ändern möchte, ist das Plugin wirklich perfekt.
Wow, bin begeistert. Mich hatte das schon immer genervt, dass der Theme-Editor so triste ist und man schlecht darin was ändern kann. Die Zeiten sind nun vorbei ;) Danke dir
Danke für das Plugin… Lohnt sich wirklich ! ! !
Ich möchte mich auch erst einmal für das tolle Plugin bedanken. So wie es aussieht, wird es wohl in 2.8 standardmäßig enthalten sein. Leider funktioniert es bei mir nicht im Safari Version 3.2.1 (5525.27.1) – gibt es da nen Trick oder Workaround oder Patch? Das wäre echt klasse!
@ddan, dass wie WordPress Entwickler die Idee adaptieren macht Sinn, Matt hatte mal in seinem Blog über das Plugin geschrieben, war wohl nur eine Frage der Zeit.
Ich habe kein Safari, kann dir also leider keinen Tipp geben.
Das Plugin benötigt Javascript und davon eine ganze Menge. Eventl. kommt dein Safari damit nicht klar?
Bestes Plugin ever! DANKE
Das erleichtert mir die Arbeit um einiges!
@daniel, danke für das Kompliment. Ich empfehle dir die folgende Seite: http://www.naden.de/blog/donate
Das Plugin ist genial! Ich habe mich auch seeeehr schon lange über den Theme-Editor geärgert. Jetzt ist damit endlich Schluss. Vielen Dank und Kompliment..
Gruß Dennis
@dennis, danke ist sogar so gut, dass diese Funktion in WordPress 2.8 standardmäßig integriert sein wird.
@naden: Das wurde aber auch Zeit – dann kann ich meinen Artikel über das Plugin: http://www.follow-blog.de/geniales-plugin-fur-den-theme-editor-in-wordpress
ja gleich mal ergänzen..Hihi
Danke für den Hinweis und beste Grüße
Dennis
@dennis, ja, finde ich auch gut. Allerdings hätte ich mich über eine Erwähnung gefreut, zumal Matt einmal über das Plugin berichtet hatte … Inspiration kommt selten von oben.
Ein tolles Plugin!! Vielen Dank!
sonst hab ich den Quellcode immer rauskopieren und in einem Editor betrachten müssen :-)
liebe Grüße
servus. bin ueber google heir gelandet, geiles plugin. wordpress hat naemlich ab 2.8.1 den syntax highlighter wieder deaktiviert/ausgebaut :-(
hab grad dein Plugin aktiviert, sehe aber keien Reaktion in meinem Editor :-(
p.s. wordpress ist in dem wordpress unterordner isntalliert aber die letzte version solte das ja unterstuetzen.
was fuer .js files werden/sollten denn im editor geladen werden?
wie kann ich das Problem weiter debuggen?
@ovidiu seit das in WordPress 2.8 integriert wurde habe ich das Plugin nicht mehr geupdatet. Das die Funktion wieder entfernt wurde wusste ich nicht.
Das Plugin hängt sich via Javascript an die beiden Form Id’s template und newcontent. Wenn sich deren Name geändert hat, dann funktioniert es nicht mehr.
Versuch es mal damit, ich werde dass bald auch mal updaten.
danke. newcontent heisst immer noch newcontent. klappt bei mir trotzdem nicht. waere sehr dankbar wenn du das Plugin mal fuer 2.8.4 ueberpruefst und eventuell updatest.
andere Frage, warum hast du denn keinen Feed fuer die Kommentare hier? Denn eine subscribe Funktion finde ich auch nicht :-(
@ovidiu ich habe das Plugin unter WordPress 2.8.4 getestet. Es lief ohne Probleme.
Die Kommentare kannst du wie bei jedem WordPress Blog mit aktiven Permalinks über die folgende Url bekommen: http://domain.tld/PATH_TO_WORDPRESS/comments/feed
Ich habe deine Frage aber mal zum Anlass genommen, die Kommentar-Feed Url in den Header einzubauen ;)
hatte den von dir angegebenen Pfad fuer comment feeds natuerlich ausprobiert… ging aber nicht entweder hab ich mich vertippt oder ka.
hab den Fehler mit dem Plugin auch schon gefunden: luat logfile war die Suche nach .htaccess im Plugin Ordner erfolglos. Hab eine leere erstellt und alles ist nun gut :-)
Vielen Dank für das tolle Plugin.
Leider funktioniert es bei mir im Chrome nicht, im IE8 funktioniert es wunderbar.
@alex, als ich das Plugin geschrieben hatte, gab es Chrome noch nicht ;) Ich werde bei Gelegenheit mal reinschauen.
This plugin does NOT work in Safari 4.0. I cannot edit the code when the plug-in is turned on, When I deactivate it, I can edit the code. Works fine in Firefox 3.5.
Super, so ein Plugin habe ich schon länger gesucht. Und zum Thema Chrome: Wer nutzt den schon…
Cooles Plugin, leider kommt Codepress mit dem fiesen Spaghetti-Code etlicher Themes manchmal nicht ganz so gut klar. BTW: läuft bei mir mit WP 3.0.1