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 [...]