{"id":34873,"date":"2018-01-10T10:04:04","date_gmt":"2018-01-10T08:04:04","guid":{"rendered":"http:\/\/www.dragosoft.info\/?p=34873"},"modified":"2022-02-14T09:07:22","modified_gmt":"2022-02-14T09:07:22","slug":"codemirror-und-coding-sandbox-in-wordpress-4-9","status":"publish","type":"post","link":"https:\/\/dragosoft.info\/de\/codemirror-und-coding-sandbox-in-wordpress-4-9\/","title":{"rendered":"CodeMirror und Coding Sandbox eingef\u00fchrt in WordPress 4.9"},"content":{"rendered":"<p>Von allen Aktualisierungen, die in WordPress 4.9 eingef\u00fchrt wurden, hat die in den Kern integrierte CodeMirror-Bibliothek m\u00f6glicherweise die weitreichendsten Auswirkungen.<\/p>\n<p>In erster Linie handelt es sich um eine JavaScript-Bibliothek, die in den Editor integriert ist und Zeichenfehler, Syntaxhervorhebung und kontextbezogene Vorschl\u00e4ge f\u00fcr Codeschnipsel im WordPress-Dashboard selbst anzeigt. Im Wesentlichen macht sie es f\u00fcr Entwickler \/und Menschen ohne Programmierkenntnisse\/ viel sicherer, in WordPress einzusteigen und es zu erlernen, ohne Dinge durcheinander zu bringen und ihre Websites zu besch\u00e4digen.<\/p>\n<p>Noch wichtiger ist jedoch die neue Integration mit\u00a0<a href=\"https:\/\/codemirror.net\/\" target=\"_blank\" rel=\"noopener nofollow\">Die Bibliothek<\/a>\u00a0CodeMirror und die WordPress-API, damit Plugin- und Theme-Entwickler sie nutzen k\u00f6nnen.<\/p>\n<p>Das Beste daran ist, dass es sich um eine bew\u00e4hrte Bibliothek handelt, die auf der ganzen Welt verwendet wird. Von Bitbucket und Github bis zu Firefox und Chrome Developer Tools. Es ist keine halbherzige L\u00f6sung. Die Hauptakteure haben die beste Bibliothek gefunden. Dann haben sie die WordPress-Links erstellt, die f\u00fcr ihre Verwendung erforderlich sind.<\/p>\n<h2>WordPress 4.9 und CodeMirror<\/h2>\n<p>Derzeit gibt es zwei M\u00f6glichkeiten, mit Editoren in Ihren Plugins und Themes zu arbeiten. Sie k\u00f6nnen eine dieser beiden Funktionen nutzen.<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_code_editor\/\" target=\"_blank\" rel=\"noopener nofollow\">wp_enqueue_code_editor()<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_editor\/\" target=\"_blank\" rel=\"noopener nofollow\">wp_enqueue_editor()<\/a><\/li>\n<\/ul>\n<p>Sie funktionieren ziemlich gleich, und die Unterschiede k\u00f6nnen Sie im Code nachlesen. Im Wesentlichen k\u00f6nnen Sie ein Argument \u00fcbergeben\u00a0<strong>codemirror<\/strong>\u00a0damit dieses Feld den Standardtext in den neuen speziellen WP-Code-Editor umwandeln kann, indem ein spezielles Skript aufgerufen wird\u00a0<strong><a href=\"https:\/\/github.com\/WordPress\/wordpress-develop\/blob\/master\/src\/wp-admin\/js\/code-editor.js\" target=\"_blank\" rel=\"noopener nofollow\">code-editor.js<\/a><\/strong>\u00a0.<\/p>\n<p>Die Codex-Dokumentation macht es so:<\/p>\n<blockquote><p>Wenn Sie z. B. CSS bearbeiten, k\u00f6nnen Sie damit drucken, und wenn Sie HTML bearbeiten, k\u00f6nnen Sie damit automatisch Tags schlie\u00dfen<\/p><\/blockquote>\n<p>Und es geht nicht nur um CSS und HTML.<\/p>\n<blockquote><p>Datei-Editoren bieten jetzt CodeMirror-codierte Warnungen, automatische Vervollst\u00e4ndigung und Fehlerpr\u00fcfung. Erlaubte Dateierweiterungen in Datei-Editoren k\u00f6nnen bearbeitet werden, um Formate einzuschlie\u00dfen, die CodeMirror hat f\u00fcr: conf, css, diff, patch, html, htm, http, js, json, php3, php4, php5, php7, phps, scss, sass, sh, bash, sql, svg, xml, yml, yaml, txt.<\/p><\/blockquote>\n<p>Dieser Zusatz er\u00f6ffnet Entwicklern und Designern viele neue M\u00f6glichkeiten. Entwickler und Autoren k\u00f6nnen endlich die Art der Kontrolle erweitern, die sie den Benutzern anbieten k\u00f6nnen. Dies ist die gleiche Art von Kontrolle, die der neue Editor und der Customizer haben.<\/p>\n<p>Eine wirklich tolle \u00c4nderung ist, dass Editoren jetzt tiefer in das Dateisystem eindringen k\u00f6nnen. Das bedeutet f\u00fcr die meisten Redakteure nichts, aber? WP-Benutzer. Das ist eine Freiheit, die Sie sich zunutze machen k\u00f6nnen.<\/p>\n<p>CodeMirror \u00f6ffnet eine vollst\u00e4ndige Codierungsumgebung im WordPress-Dashboard. Jetzt k\u00f6nnen Sie tiefer in das Dateisystem der Website eindringen. Seien Sie sich dabei jedoch \u00fcber viele Gefahren im Klaren. Die Benutzer k\u00f6nnen nicht nur CSS- und HTML-Dateien bearbeiten (innerhalb der gesch\u00fctzten Grenzen des Linkers), sondern haben auch Zugriff auf die heikleren PHP-Dateien, die daf\u00fcr sorgen, dass die gesamte Installation reibungslos l\u00e4uft!!!<\/p>\n<p>Und wir alle wissen, dass das Letzte, was wir wollen, kaputter oder fehlerhafter Code ist, der aus PHP ein Gebr\u00e4u macht.<\/p>\n<h3>Anmelden bei der Developer Box<\/h3>\n<p>Die WordPress-Entwickler (kurz Devs) haben auch die Art und Weise ge\u00e4ndert, wie PHP-Dateien gespeichert werden, wenn man den integrierten Editor verwendet. Im Wesentlichen das, was Sie erhalten, wenn Sie eine PHP-Datei jetzt \u00f6ffnen:<\/p>\n<ol>\n<li>Nachdem Sie eine PHP-Datei ge\u00f6ffnet haben, bearbeiten Sie eine neue separate Kopie dieser Datei. Ihr Inhalt wird mit Hilfe von Cookies in einer Variablen gespeichert.<\/li>\n<li>Wenn Sie die Datei so ver\u00e4ndert haben, dass ein schwerwiegender Fehler auftritt und der Editor nicht mehr verf\u00fcgbar ist, werden die \u00c4nderungen r\u00fcckg\u00e4ngig gemacht und die urspr\u00fcngliche PHP-Datei, die Sie bearbeiten m\u00f6chten, bleibt unver\u00e4ndert.<\/li>\n<li>Liegt zu diesem Zeitpunkt kein schwerwiegender Fehler vor, wird weiter gepr\u00fcft, ob die Website selbst aufgrund eines schwerwiegenden PHP-Fehlers unzug\u00e4nglich ist. Auch hier wird im Falle eines Fehlers die urspr\u00fcngliche Datei wiederhergestellt und eine Fehlermeldung angezeigt, die Ihnen mitteilt, was passiert ist und warum.<\/li>\n<li>Wenn kein Fehler vorliegt, der den Betrieb der Website auf der Verwaltungsseite oder im Frontend verhindert, werden Ihre \u00c4nderungen sofort angezeigt.<\/li>\n<\/ol>\n<p>Und als letzten Fehler erkennt der Editor schlechtes PHP-Mojo. Wenn es genug gibt, um PHP in einem Loopback zu halten, der nicht behoben werden kann, ist der neue Code-Editor intelligent genug, um ihn zu stoppen und dem Benutzer eine Nachricht zu schicken, dass es wahrscheinlich am besten w\u00e4re, diese \u00c4nderungen per FTP vorzunehmen. Wahnsinn! Super, oder?<\/p>\n<p>Seien wir ehrlich - in einem anderen CMS sind solche M\u00f6glichkeiten noch nicht vorhanden. Mit dieser Funktionalit\u00e4t ersparen wir uns eine Menge manueller Arbeit bei der Fehlerbehebung im Code via FTP. Dies ist eine weitere super WordPress-Sicherheitsfunktion, die in Version 4.9 eingebaut wurde.<\/p>\n<h2>Ber\u00fccksichtigen Sie die M\u00f6glichkeiten<\/h2>\n<p>Die Beliebtheit von Online-Coding-Kursen und Bootcamps macht dieses Plug-in ideal f\u00fcr E-Plugins. Mit den bestehenden React-Bibliotheken, die f\u00fcr Plugins und Themes wie Gutenberg, Calypso und Divi verwendet werden, ist die Bearbeitung im IDE-Stil auf dem Vormarsch. (\u00dcbrigens,\u00a0<a href=\"https:\/\/www.codepen.io\/\" target=\"_blank\" rel=\"noopener nofollow\">CodePen<\/a>\u00a0verwendet bereits CodeMirror f\u00fcr diese Aufgabe).<\/p>\n<p>Die direkte Verbindung mit dem WordPress-Kern bedeutet, dass selbst kleine \u00c4nderungen und Anpassungen viel sicherer werden. Zum Beispiel k\u00f6nnen Sie den Nutzern jetzt eine direktere Kontrolle \u00fcber CSS und Design im Plugin erm\u00f6glichen. Und das, ohne dass Sie bef\u00fcrchten m\u00fcssen, etwas komplett zu ruinieren.<\/p>\n<p>Wenn Sie in der Lage sind, diese Anpassung in das Plugin selbst zu integrieren, anstatt nur die Klassen und IDs zu dokumentieren, die es steuern, k\u00f6nnen Sie besseren Support und eine bessere Benutzerfreundlichkeit f\u00fcr das Produkt bieten. Selbst dann k\u00f6nnen Sie die Umgebung kontrollieren, in der Benutzer die Benutzeroberfl\u00e4che anpassen k\u00f6nnen, und somit die beste Erfahrung bieten, so dass nichts anderes auf ihrer Website (theoretisch) von den \u00c4nderungen, die sie vornehmen, betroffen sein kann.<\/p>\n<p>Obwohl eine solche Variante vor Version 4.9 technisch durchaus m\u00f6glich war. Jetzt jedoch, mit einer eingebetteten IDE (ish), erhalten Sie (und k\u00f6nnen) viel bessere Kontrolle bieten.<\/p>\n<h2>Viel Spa\u00df!<\/h2>\n<p>Mit den M\u00f6glichkeiten, die WordPress 4.9 mit der Integration von CodeMirror bietet, gab es in der Geschichte von WordPress keinen besseren Zeitpunkt f\u00fcr Entwickler und Benutzer, um tief in den Code einzutauchen. Es ist Zeit zu lernen, wie die Dinge wirklich funktionieren.<\/p>\n<p>Denn was kann schon passieren? Selbst wenn man die ganze Installation vermasselt, kann man neu anfangen \ud83d\ude09 .<\/p>\n<p>Quelle: <a href=\"https:\/\/www.elegantthemes.com\/blog\/resources\/codemirror-and-the-coding-sandbox-introduced-in-wordpress-4-9\" rel=\"nofollow noopener\" target=\"_blank\">CUC<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>\u041e\u0442 \u0432\u0441\u0438\u0447\u043a\u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0432\u044a\u0432\u0435\u0434\u0435\u043d\u0438 \u0432 WordPress 4.9, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0442\u0430 CodeMirror, \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0430\u043d\u0430 \u0432 \u044f\u0434\u0440\u043e\u0442\u043e, \u043c\u043e\u0436\u0435 \u0434\u0430 \u0438\u043c\u0430 \u043d\u0430\u0439-\u0448\u0438\u0440\u043e\u043a\u043e\u043e\u0431\u0445\u0432\u0430\u0442\u043d\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0438\u0446\u0438. \u041d\u0430 \u043f\u044a\u0440\u0432\u043e \u043c\u044f\u0441\u0442\u043e, \u0442\u043e\u0432\u0430 \u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 JavaScript, \u043a\u043e\u044f\u0442\u043e \u0441\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0430 \u0441 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u0437\u0430 \u0434\u0430 \u043f\u043e\u043a\u0430\u0437\u0432\u0430 \u0433\u0440\u0435\u0448\u043a\u0438 \u043f\u0440\u0438 \u0447\u0435\u0440\u0442\u0430\u043d\u0435, \u043f\u043e\u0434\u0447\u0435\u0440\u0442\u0430\u0432\u0430\u043d\u0435 \u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443\u0430\u043b\u043d\u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430 \u043a\u043e\u0434\u043e\u0432\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0438 \u0432 \u0441\u0430\u043c\u043e\u0442\u043e \u0442\u0430\u0431\u043b\u043e \u043d\u0430 WordPress.\u00a0\u041f\u043e \u0441\u044a\u0449\u0435\u0441\u0442\u0432\u043e \u0442\u044f \u043f\u0440\u0430\u0432\u0438 \u043c\u043d\u043e\u0433\u043e \u043f\u043e-\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":37193,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,74],"tags":[21,22],"class_list":["post-34873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publikacii","category-wordpress-novini-i-funkcii","tag-wordpress-novini","tag-wordpress-novovavedenija"],"_links":{"self":[{"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/posts\/34873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/comments?post=34873"}],"version-history":[{"count":0,"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/posts\/34873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/media\/37193"}],"wp:attachment":[{"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/media?parent=34873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/categories?post=34873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dragosoft.info\/de\/wp-json\/wp\/v2\/tags?post=34873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}