{"id":11085,"date":"2020-04-27T23:41:13","date_gmt":"2020-04-27T23:41:13","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/gutenberg-wordpress-tutorial\/"},"modified":"2020-04-27T23:41:13","modified_gmt":"2020-04-27T23:41:13","slug":"gutenberg-wordpress-tutorial","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/gutenberg-wordpress-tutorial\/","title":{"rendered":"Gutenberg WordPress Tutorial"},"content":{"rendered":"

Nach Jahrzehnten der Popularit\u00e4t als vielseitigstes und benutzerfreundlichstes CMS konnte WordPress seine Benutzer immer wieder mit trendigen technischen Updates faszinieren. In der neuesten Version 5.0 hat WordPress seinen neuen visuellen Editor "Gutenberg" eingef\u00fchrt. Entmystifizieren wir also Gutenberg und Blocks. Dies ist die WordPress Gutenberg-Geschichte und ein kurzes WordPress Gutenberg-Tutorial, mit dem Sie alle Vorteile des Gutenberg-Editors nutzen k\u00f6nnen.<\/p>\n

\"Gutenberg<\/figure>\n

Was ist "Gutenberg"?<\/h2>\n

Matt Mullenweg schlug einen neuen Ansatz vor, um den klassischen WordPress-Editor im WordCamp Europe 2018 mit dem Namen "Gutenberg" zu ersetzen, der w\u00e4hrend der Entwicklung als Projektname verstanden wird. Im Zusammenhang mit der Ver\u00f6ffentlichung am 6. Dezember 2018, die mit WordPress 5.0 gef\u00fcllt war, wurde das Gutenberg-Projekt nun genauer gesagt "WordPress Editor" oder "Block Editor" genannt. Der klassische Editor ist gem\u00e4\u00df den aktuellen Drag-and-Drop-Webbuilder-Trends etwas veraltet. Das Ergebnis war WordPress Gutenberg und ein brandneuer WordPress-Editor, der der Website und den Tools zur Website-Erstellung \u00e4hnelt.<\/p>\n

WordPress-Gutenberg-welcome "class =" wp-image-4751 "srcset =" https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03\/WordPress-Gutenberg-welcome-you.png 1024w, https : \/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03\/WordPress-Gutenberg-welcome-you-300x125.png 300w, https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/ 03 \/ WordPress-Gutenberg-welcome-you-768x320.png 768w, https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03\/WordPress-Gutenberg-welcome-you-850x354.png 850w, https: \/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03\/WordPress-Gutenberg-welcome-you-500x208.png 500w, https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03 \/WordPress-Gutenberg-welcome-you-600x250.png 600w "Daten-Lazy-Gr\u00f6\u00dfen =" (maximale Breite: 1024px) 100vw, 1024px "src =" https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads \/ 2019\/03 \/ WordPress-Gutenberg-welcome-you-1024x426.png "><\/figure>\n<h2>Themen, die mit Gutenberg funktionieren<\/h2>\n<p>Es gibt Tausende von Themen, obwohl viele davon alt sind. Dies sind einige der erstaunlichen neuen und aktualisierten Themengesch\u00e4fte, die Themen f\u00fcr Gutenberg herausbringen.<\/p>\n<h2>Plugins, die mit Gutenberg funktionieren<\/h2>\n<p>Es gibt eine Reihe von Plugins, die auf dem WordPress-Markt verf\u00fcgbar sind, aber nicht alle funktionieren mit dem Gutenberg-Editor. Hier sind einige, die dies tun.<\/p>\n<h2>Was sind "Bl\u00f6cke"?<\/h2>\n<p>Bl\u00f6cke sind einfach Ausschnitte von Inhalten. Es kann sich um einen Textabsatz, eine Audiodatei, ein Foto oder eine Fotogalerie handeln, m\u00f6glicherweise sogar um ein Video oder einen dynamischeren Typ wie eine Beitragsliste. Es ist die Grundlage f\u00fcr die Bearbeitung von Gutenberg WordPress. Sperren werden zum Erstellen von Ver\u00f6ffentlichungen und Webseiten verwendet. Was Benutzer normalerweise in WordPress sehen, ist der in Gutenberg integrierte Standardblock, der f\u00fcr jede WordPress-Site verf\u00fcgbar ist, die den Gutenberg-Editor verwendet. Gutenberg wurde jedoch so erstellt, dass Programmierer die verf\u00fcgbaren Bl\u00f6cke erweitern und erweitern k\u00f6nnen. Bl\u00f6cke k\u00f6nnen mithilfe von Plugins oder Designs hinzugef\u00fcgt werden. Daher haben Benutzer Zugriff auf zus\u00e4tzliche Bl\u00f6cke, anstatt sich auf Standardbl\u00f6cke zu beschr\u00e4nken.<\/p>\n<figure class=\"Was<\/figure>\n

Gutenberg als WordPress-Editor verwenden<\/h2>\n

Wenn Sie in WordPress 5.0 sind, erhalten Sie den "Block Editor" oder "GutenbergEditor" als Standardtexteditor f\u00fcr 5.0. Heute werden wir uns bem\u00fchen, Sie mit dem neuen Blockeditor vertraut zu machen. Lassen Sie uns also unverz\u00fcglich eintauchen. Das Wichtigste zuerst: Um wie immer einen neuen Beitrag zu erstellen, klicken Sie unter "Nachrichten" auf "Neu hinzuf\u00fcgen" und klicken Sie auf "Neu"! Was Sie sehen werden, ist der sehr neue Block.<\/p>\n

\"\"<\/figure>\n

Das sieht ganz anders aus, nicht wahr? Es gibt dort keine Symbolleiste und auch all diese veralteten Dinge aus dem klassischen Editor. Machen wir uns ohne weitere Verz\u00f6gerung mit den versteckten Funktionen und diesen kleinen Tasten vertraut. <\/p>\n

Oberer Abschnitt:<\/h2>\n
WordPress-Gutenberg-Top-Section "class =" wp-image-4752 "srcset =" https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03\/WordPress-Gutenberg-Top-Section.png 1024w , https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03\/WordPress-Gutenberg-Top-Section-300x25.png 300w, https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/ 2019\/03 \/ WordPress-Gutenberg-Top-Section-768x65.png 768w, https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03\/WordPress-Gutenberg-Top-Section-850x71.png 850w, https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019\/03\/WordPress-Gutenberg-Top-Section-500x42.png 500w, https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content\/uploads\/2019 \/03\/WordPress-Gutenberg-Top-Section-600x50.png 600w "Daten-Lazy-Gr\u00f6\u00dfen =" (maximale Breite: 1024px) 100vw, 1024px "src =" https:\/\/b9w4c2c6.stackpathcdn.com\/wp-content \/ Uploads \/ 2019\/03 \/ WordPress-Gutenberg-Top-Section-1024x86.png "><\/figure>\n<p>In diesem oberen Bereich k\u00f6nnen Sie neue Bl\u00f6cke hinzuf\u00fcgen und bei jedem Blockwechsel Aktionen wie R\u00fcckg\u00e4ngig und Wiederherstellen ausf\u00fchren. Sie k\u00f6nnen auch Informationen zur Inhaltsstruktur wie mehrere W\u00f6rter, \u00dcberschriften, Abs\u00e4tze und Bl\u00f6cke anzeigen und sogar mit der Schaltfl\u00e4che "i" durch Bl\u00f6cke navigieren. <\/p>\n<p>Einige der grundlegenden Funktionen zur Bearbeitung von Posts wie "In Entwurf speichern", "Vorschau von Posts" und "Post a Post" sind ebenfalls im oberen Bereich enthalten. Das Zahnradsymbol zeigt die Einstellungen an, die in der rechten Seitenleiste angezeigt werden. Hier k\u00f6nnen Sie zwischen der Konfigurationsansicht "Dokument" und "Sperren" wechseln. <\/p>\n<p>Die Dokumentschnittansicht ist dem klassischen Editor sehr \u00e4hnlich. Hier k\u00f6nnen Sie auch den Status und die Sichtbarkeit, Kategorien, Beschriftungen, Feature-Bilder, Attribute usw. ausw\u00e4hlen. In der Blockschnittansicht k\u00f6nnen Sie die Einstellungen eines Blocks nach dem Hinzuf\u00fcgen \u00e4ndern. Diese Funktion macht es sehr einfach, die vollst\u00e4ndige Konfiguration eines Blocks zu \u00e4ndern und Eigenschaften wie Schriftgr\u00f6\u00dfe, Gro\u00dfbuchstaben und vieles mehr zu \u00e4ndern. Von hier aus k\u00f6nnen Sie jedem Block individuelle Hintergrundfarben hinzuf\u00fcgen und sogar zus\u00e4tzliche CSS-Klassen f\u00fcr jeden Block einzeln aktivieren.<\/p>\n<p>Schlie\u00dflich zeigen die drei Punkte im oberen Bereich zus\u00e4tzliche Einstellungen. Von hier aus k\u00f6nnen Sie das Erscheinungsbild Ihres Blockeditors anpassen. Sie k\u00f6nnen die Blockwerkzeugansicht ausw\u00e4hlen. Sie k\u00f6nnen sogar zwischen "visuellem Editor" und "Code-Editor" w\u00e4hlen. Es gibt auch einige Tools zum Verwalten wiederverwendbarer Bl\u00f6cke, zum Erstellen von Tastaturk\u00fcrzeln sowie zum Kopieren von Inhalten und Optionen zum Ein- und Ausblenden von Bedienfeldelementen.<\/p>\n<\/p>\n<h2>Bl\u00f6cke hinzuf\u00fcgen<\/h2>\n<p>Hier kommt das Hauptspiel im neuen Editor, d. H. Bl\u00f6cke hinzuf\u00fcgen. Wie bereits oben erw\u00e4hnt, bilden Bl\u00f6cke den Kern des neuen Blockeditors. Jeder Teil der oberen linken Ecke der Editorseite. Dadurch erhalten Sie ein Dropdown-Men\u00fc, aus dem Sie den gew\u00fcnschten Blocktyp f\u00fcr bestimmte Zwecke ausw\u00e4hlen k\u00f6nnen. Mithilfe der Suchleiste k\u00f6nnen Sie die richtigen Bl\u00f6cke finden, die Ihren Anforderungen entsprechen.<\/p>\n<p>Scrollen Sie auch im Men\u00fc nach unten und Sie werden einige weitere Bl\u00f6cke sehen, die auf den Grundfunktionen basieren. Dies sind g\u00e4ngige Bl\u00f6cke, Formate, Widgets und Inlays usw. W\u00e4hlen Sie einfach mit nur einem Klick den gew\u00fcnschten Block aus.<\/p>\n<figure class=\"Hinzuf\u00fcgen<\/figure>\n

Als N\u00e4chstes wird Ihnen auch eine kleine Symbolleiste angezeigt, sobald Sie Ihrem Block Inhalte hinzuf\u00fcgen. Die Funktion dieser Symbolleiste h\u00e4ngt von der Art des ausgew\u00e4hlten Blocks ab. Diese Symbolleisten dienen zum Bearbeiten von Inhaltsstilen wie Ausrichtungen, Stilen, Verkn\u00fcpfungen und mehr. Mit der Schaltfl\u00e4che Blocktyp \u00e4ndern k\u00f6nnen Sie den aktuellen Blockstil \u00e4ndern. Sie k\u00f6nnen beispielsweise einen Absatzblock in Titel, vorformatierten Block, Liste, Zitat oder Vers \u00e4ndern. Die letzten drei Punkte bieten Ihnen weitere Optionen, z. B. das Ausblenden von Blockeinstellungen, das Duplizieren, das Bearbeiten als HTML, das Hinzuf\u00fcgen zu wiederverwendbaren Bl\u00f6cken und nat\u00fcrlich das Entfernen des Blocks. Sie k\u00f6nnen auch weitere Bl\u00f6cke mit den hier vorhandenen Optionen Einf\u00fcgen vor und Einf\u00fcgen nach einf\u00fcgen. Abh\u00e4ngig von der von Ihnen gew\u00e4hlten Option wird einfach ein Block vor oder nach dem ausgew\u00e4hlten Block hinzugef\u00fcgt.<\/p>\n

\"Gutenberg-Blockkonfiguration\"<\/figure>\n

Blockeinstellungen \u00e4ndern<\/h2>\n

Jeder Block kann an Ihre Anforderungen angepasst werden. Durch einfaches Klicken auf den Block, den Sie anpassen m\u00f6chten, erhalten Sie in der rechten Seitenleiste mehrere Bereiche, in denen Sie Ihren Block anpassen k\u00f6nnen. Denken Sie daran, dass Sie diese Option mit dem Zahnrad im oberen Bereich oder sogar mit der Symbolleiste des jeweiligen Blocks ein- oder ausblenden k\u00f6nnen. Die Blockkonfiguration h\u00e4ngt auch vom ausgew\u00e4hlten Blocktyp ab. Wenn Sie beispielsweise den Absatzblock verwenden, k\u00f6nnen Sie in den Blockeinstellungen die Schriftgr\u00f6\u00dfe, die Hintergrundfarbe des Blocks usw. ausw\u00e4hlen.<\/p>\n

Beenden des Gutenberg WordPress-Tutorials<\/h2>\n

Wir hoffen, dass dieses kurze WordPress Gutenberg-Tutorial Ihnen geholfen hat, sich mit dem brandneuen Editor mit WordPress 5.0 vertraut zu machen. Wir sind davon \u00fcberzeugt, dass Sie nach diesem Handbuch mit "Gutenberg" oder "Block Editor" kein Neuling mehr sind. Wir sind uns bewusst, dass wir haupts\u00e4chlich \u00fcber den Block und dessen Verwendung gesprochen haben. Der neue Blockeditor ist nicht nur einfach zu bedienen, sondern auch leistungsf\u00e4higer. Das Erstellen benutzerdefinierter Bl\u00f6cke und die Verwendung von Konfigurationstools zum Anpassen des Erscheinungsbilds sind die leistungsstarken Funktionen dieses Blockeditors, einschlie\u00dflich der benutzerfreundlichen Oberfl\u00e4che zum Hinzuf\u00fcgen neuer Bl\u00f6cke und zum Hinzuf\u00fcgen von Inhalten. Wenn Sie auf einen traditionellen Typ sto\u00dfen und den neuen Editor nicht m\u00f6gen, machen Sie sich keine Sorgen, Sie k\u00f6nnen jederzeit zum klassischen Editor zur\u00fcckkehren.<\/p>\n ","protected":false},"excerpt":{"rendered":"

Nach Jahrzehnten der Popularit\u00e4t als vielseitigstes und benutzerfreundlichstes CMS konnte WordPress seine Benutzer immer wieder mit trendigen technischen Updates faszinieren. In der neuesten Version 5.0 hat WordPress seinen neuen visuellen Editor "Gutenberg" eingef\u00fchrt. Entmystifizieren wir also Gutenberg und Blocks. Dies ist die WordPress Gutenberg-Geschichte und ein kurzes WordPress Gutenberg-Tutorial, mit dem Sie alle Vorteile des […]<\/p>\n","protected":false},"author":1,"featured_media":11086,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/1584218952_Tutorial-de-WordPress-Gutenberg.png","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/11085"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=11085"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/11085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/11086"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=11085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=11085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=11085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}