{"id":246,"date":"2011-07-08T18:55:35","date_gmt":"2011-07-08T16:55:35","guid":{"rendered":"https:\/\/sgaul.de\/?p=246"},"modified":"2014-03-13T21:34:55","modified_gmt":"2014-03-13T20:34:55","slug":"html-editor-in-wordpress","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2011\/07\/08\/html-editor-in-wordpress\/","title":{"rendered":"HTML-Editor in WordPress mit Zen-Coding verbessern"},"content":{"rendered":"

Eigentlich will ich gegen den WYSIWYG-Editor von WordPress<\/strong> gar nichts sagen: Auch Leute ohne Ahnung von HTML & Co. k\u00f6nnen so schnell und einfach ihre Blog-Eintr\u00e4ge schreiben. Auch ich nutze ihn gern, solange es nur ums Fettmachen und Setzen von \u00dcberschriften geht. Wenn man aber ein paar Klassen, Definitionslisten oder Tabellen unterbringen will, ist der Editor schnell an seinen Grenzen. Auch der HTML-Modus hat ein paar Helferlein, leider sind deren Funktionen aber stark begrenzt. Dank eines Plugins l\u00e4sst sich aber die Funktionalit\u00e4t von Zen-Coding direkt im Browser nutzen<\/strong>.<\/p>\n

Zen Coding<\/h2>\n

\u201eZen Coding<\/strong>\u201c ist eine einfache M\u00f6glichkeit, XML-Code zu generieren. Man gibt Abk\u00fcrzungen ein und dr\u00fcckt einen Erweiterungsknopf, der daraus HTML oder \u00e4hnliches generiert.<\/p>\n\n\n\n\n\n
Abk\u00fcrzung<\/th>\nGenerierter Code<\/th>\n<\/tr>\n
\n
ul#test>li*3<\/pre>\n<\/td>\n
\n
<ul id="test">\r\n\t<li><\/li>\r\n\t<li><\/li>\r\n\t<li><\/li>\r\n<\/ul><\/pre>\n<\/td>\n<\/tr>\n
\n
table.test>tr*3>td*2<\/pre>\n<\/td>\n
\n
<table class="test">\r\n\t<tr>\r\n\t\t<td><\/td>\r\n\t\t<td><\/td>\r\n\t<\/tr>\r\n\t<tr>\r\n\t\t<td><\/td>\r\n\t\t<td><\/td>\r\n\t<\/tr>\r\n\t<tr>\r\n\t\t<td><\/td>\r\n\t\t<td><\/td>\r\n\t<\/tr>\r\n<\/table><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Einen besseren \u00dcberblick bekommt man in folgendem Video:<\/p>\n
[vimeo clip_id=“7405114″]<\/p>\n
Das Plugin<\/h2>\n
Ganz so m\u00e4chtig wie einen vollst\u00e4ndigen Editor macht das Plugin WordPress nat\u00fcrlich nicht, aber die wesentlichen Erweiterungsfunktionen sind sehr gut umgesetzt. Zudem beinhaltet das Plugin ein paar weitere Tricks. So kann man im Text-Editor des Browsers etwa Tab aktivieren, wenn man es denn will.<\/p>\n
Das Plugin h\u00f6rt auf den kreativen Namen \u201eWP Zen Coding<\/a>\u201c und l\u00e4sst sich \u00fcber den WordPress-Plugin-Manager installieren. Anschlie\u00dfend musste ich in den Einstellungen des Plugins die \u201eExpand Abbreviation<\/strong>\u201c auf Ctrl+e<\/strong> umstellen, da die Meta-Taste von meinem Browser nicht korrekt weitergleitet wird. Au\u00dferdem funktioniert bei mir auch einfach Tab<\/strong>, um Zen-Coding-Ausdr\u00fccke auf HTML zu erweitern.<\/p>\n","protected":false},"excerpt":{"rendered":"
Eigentlich will ich gegen den WYSIWYG-Editor von WordPress gar nichts sagen: Auch Leute ohne Ahnung von HTML & Co. k\u00f6nnen so schnell und einfach ihre Blog-Eintr\u00e4ge schreiben. Auch ich nutze ihn gern, solange es nur ums Fettmachen und Setzen von \u00dcberschriften geht. Wenn man aber ein paar Klassen, Definitionslisten oder Tabellen unterbringen will, ist der… HTML-Editor in WordPress mit Zen-Coding verbessern<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":257,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[90,35,89],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/246"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":17,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"predecessor-version":[{"id":2538,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/246\/revisions\/2538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media\/257"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}