{"id":52846,"date":"2023-08-10T07:00:06","date_gmt":"2023-08-10T14:00:06","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52846"},"modified":"2025-01-16T11:27:32","modified_gmt":"2025-01-16T19:27:32","slug":"wie-man-wordpress-blocke-verwendet","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/","title":{"rendered":"Wie man WordPress-Bl\u00f6cke verwendet (+ Wie man seine eigenen erstellt!)"},"content":{"rendered":"\n<p>W\u00e4re dies ein seltsamer Ort, um zu erw\u00e4hnen, wie meine Frau ein unber\u00fchrtes, unge\u00f6ffnetes, limitiertes Lego Star Wars BB-8 Set in perfektem Zustand h\u00e4lt?<\/p>\n\n\n\n<p>Die Dinge gehen f\u00fcr etwa 500 $!<\/p>\n\n\n\n<p>Okay. Das w\u00e4re seltsam. Verstanden, laut und klar&#8230; Aber das wird gleich ein wenig mehr Sinn ergeben.<\/p>\n\n\n\n<p>In diesem Beitrag werden wir alles behandeln, was Sie \u00fcber WordPress-Bl\u00f6cke wissen m\u00fcssen. Wenn Sie ein altmodischer WP-Benutzer wie ich sind, denken Sie wahrscheinlich immer noch, dass Bl\u00f6cke \u201eneu\u201c <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/was-ist-wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> sind, weil Sie mit dem klassischen Editor begonnen haben.<\/p>\n\n\n\n<p>Es sind mehr als f\u00fcnf Jahre vergangen, seit WordPress Bl\u00f6cke eingef\u00fchrt hat, aber sie sind immer noch eines der am meisten missverstandenen und am wenigsten genutzten CMS-Merkmale.<\/p>\n\n\n\n<p>WordPress-Bl\u00f6cke sind so etwas wie Legos \u2013 siehst du, ich <i>habe es dir gesagt<\/i>, es w\u00fcrde sich wieder einbinden \u2013 sie erm\u00f6glichen es dir, deine Webseite auf eine Weise zu bauen und anzupassen, die noch vor wenigen Jahren die Beauftragung eines professionellen Webdesigners und Entwicklers erfordert h\u00e4tte.<\/p>\n\n\n\n<p>Und das ist einer der Gr\u00fcnde, warum die Menschen sie so sehr lieben. Sobald sie sie verstehen, ist das so.<\/p>\n\n\n\n<p>Nachdem ich erkl\u00e4re, wie sie funktionieren, besteht kein Zweifel, dass Sie sie auch lieben werden.<\/p>\n\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">Was sind WordPress-Bl\u00f6cke?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1052\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks.jpg\" alt=\"Wordpress Blocks\" class=\"wp-image-41445 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1024x673.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-768x505.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1536x1010.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-600x395.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1200x789.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-730x480.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1460x960.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1568x1031.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-877x577.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1052;\" \/><\/figure>\n\n\n\n<p>WordPress-Bl\u00f6cke sind, wie der Name schon sagt, wie stapelbare <i>Bausteine<\/i>, die Sie zu Seiten und Beitr\u00e4gen auf Ihrer WordPress-Website hinzuf\u00fcgen k\u00f6nnen.<\/p>\n\n\n\n<p>Sie wurden zusammen mit der Einf\u00fchrung des Gutenberg-Editors, mit dem die meisten von uns jetzt vertraut sind, zu WordPress 5.0 hinzugef\u00fcgt. Bl\u00f6cke sind jetzt der Standardweg, um Ihre WordPress-Site anzupassen \u2013 und Sie k\u00f6nnen Bl\u00f6cke auf Ihrer gesamten Website verwenden, nicht nur in Beitr\u00e4gen.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Gutenberg<\/h3>\n    <p>Gutenberg ist der Name f\u00fcr das Block-Editor-Projekt in WordPress. Viele WordPress-Entwickler und -Enthusiasten verwenden die Begriffe Gutenberg-Editor und Block-Editor austauschbar.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Denken Sie daran, es ist wie ein Website- oder Seiten-Builder. Sie k\u00f6nnen auf den \u201e+\u201c Button klicken, um einen Block zu einer Seite oder einem Beitrag hinzuzuf\u00fcgen und dann aus verschiedenen Blockoptionen w\u00e4hlen. Die aktuelle Version von WordPress bietet von Haus aus \u00fcber 90 Optionen.<\/p>\n\n\n\n<p>Jeder Block ist im Grunde genommen ein Widget. Sie k\u00f6nnen verschiedene Dinge tun, wie Inhalte von einer anderen Website oder einem anderen Dienst einbetten, neue Funktionen wie Kalender oder Kontaktformulare zur Seite hinzuf\u00fcgen oder sogar spezifische Inhalte mit vordefinierter Formatierung hinzuf\u00fcgen.<\/p>\n\n\n\n<p>Zudem haben die meisten Bl\u00f6cke Anpassungsoptionen, die es Ihnen erm\u00f6glichen, deren Anzeige oder Funktion auf Ihrer Website zu ver\u00e4ndern.<\/p>\n\n\n\n<p>Der WordPress-Blockeditor ist eine enorme Verbesserung gegen\u00fcber dem klassischen Editor. In der Zeit vor Gutenberg konnten WordPress-Benutzer nur Text und Bilder zu einem Beitrag hinzuf\u00fcgen, bevor sie sich in benutzerdefinierten Code vertiefen mussten.<\/p>\n\n\n\n<p><b>Nerd-Hinweis:<\/b> Wenn Sie aus irgendeinem Grund keinen Zugriff auf Bl\u00f6cke aus dem WordPress-Editor haben, k\u00f6nnte dies aus einem von zwei Gr\u00fcnden der Fall sein: Einer ist, dass Ihre <a href=\"https:\/\/www.dreamhost.com\/de\/wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress-Installation<\/a> m\u00f6glicherweise schrecklich veraltet ist (wie Jahre und Jahre alt). Zweitens ist es m\u00f6glich, dass der Block-Editor durch das Classic Editor-Plugin deaktiviert wurde. Wenn dieses Plugin auf einer WordPress-Site aktiv ist, werden Sie zur\u00fcck zur klassischen Editor-Erfahrung gebracht. \u00dcberpr\u00fcfen Sie Ihre Plugins-Seite von wp-admin, um herauszufinden, ob das bei Ihnen der Fall ist.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"blocks\" class=\"wp-block-heading\">Welche Bl\u00f6cke hat WordPress bereits?<\/h2>\n\n\n\n<p>Standardm\u00e4\u00dfig bietet der Block-Editor eine <i>riesige <\/i>Anzahl von <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noopener\">verf\u00fcgbaren Bl\u00f6cken<\/a>. Sie k\u00f6nnen diese Bl\u00f6cke verwenden, um Ihr WordPress-Theme anzupassen, Autoren und Bloggern das Hinzuf\u00fcgen von reichhaltigem Inhalt zu ihren Beitr\u00e4gen zu erm\u00f6glichen, Inhalte aus sozialen Medien einzubinden und vieles mehr.<\/p>\n\n\n\n<p>Lassen Sie uns einige der beliebtesten und n\u00fctzlichsten Standard-Gutenberg-Bl\u00f6cke betrachten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">H\u00e4ufigste Bl\u00f6cke<\/h3>\n\n\n\n<p>Das Hinzuf\u00fcgen von jeglichem Text oder Bild erfolgt mit einem Block. Das bedeutet, dass die h\u00e4ufigsten Bl\u00f6cke im Allgemeinen die verschiedenen Stile und Arten von Text- oder Bildelementen sind, die Sie einer Seite hinzuf\u00fcgen k\u00f6nnten.<\/p>\n\n\n\n<p>Dinge wie:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Textblock \u2014 Jeder Absatz, den Sie im Block-Editor schreiben, befindet sich in einem eigenen Textblock, aber Textbl\u00f6cke sind nicht auf Abs\u00e4tze beschr\u00e4nkt. Schreiben Sie ein wenig oder schreiben Sie viel.<\/li>\n\n\n\n<li>Bildblock \u2014 Wenn Sie zeigen sowie erz\u00e4hlen m\u00f6chten, f\u00fcgen Sie ein Bild hinzu, um etwas mehr Flair zu verleihen.<\/li>\n\n\n\n<li>Listblock \u2014 M\u00fcssen Sie ein Outline schreiben? Was ist mit einer geordneten Liste? Das alles k\u00f6nnen Sie mit dem Listblock machen!<\/li>\n\n\n\n<li>Bildergalerieblock \u2014 Urlaubsfotos oder Produktbilder zu teilen sah nie so gut aus. ?<\/li>\n\n\n\n<li>Tabellenblock \u2014 Erstellen Sie eine Preistabelle oder teilen Sie Daten aus einer Tabelle ganz einfach.<\/li>\n\n\n\n<li>Zitatblock \u2014 M\u00f6chten Sie auf eine besondere Beobachtung aufmerksam machen? Inspiriert von einem Zitat, das relevant f\u00fcr den Beitrag ist, den Sie schreiben? Heben Sie es mit dem Zitatblock hervor!<\/li>\n\n\n<\/ul>\n\n\n\n<p>Jedes dieser Elemente k\u00f6nnen Sie mit dem Block-Editor zu Ihrer Website hinzuf\u00fcgen. Anschlie\u00dfend k\u00f6nnen Sie diese innerhalb des Inhaltsbereichs der Seite positionieren und gestalten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Eingebettete Inhaltsbl\u00f6cke<\/h3>\n\n\n\n<p>Bl\u00f6cke machen es extrem einfach, externe Inhalte und Widgets in Ihre WordPress-Website einzubetten, ohne ein neues Plugin oder Zusatz von Drittanbietern hinzuf\u00fcgen zu m\u00fcssen.<\/p>\n\n\n\n<p>Einige der beliebtesten Einbettungsblocktypen zum Einbinden externer Inhalte:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Calendly-Block<\/li>\n\n\n\n<li>Benutzerdefinierter HTML-Block<\/li>\n\n\n\n<li>Twitter-Block<\/li>\n\n\n\n<li>YouTube-Block<\/li>\n\n\n\n<li>Referenzen<\/li>\n\n\n\n<li>WooCommerce<\/li>\n\n\n\n<li>Kontaktformulare<\/li>\n\n\n\n<li>H\u00e4ufig gestellte Fragen<\/li>\n\n\n<\/ul>\n\n\n\n<p>Mit diesen Blocktypen k\u00f6nnen Sie \u00fcber den grundlegenden Texteditor hinausgehen und interaktive Inhalte erstellen, die alle Arten von Funktionalit\u00e4ten und Merkmalen bieten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Spezialbl\u00f6cke<\/h3>\n\n\n\n<p>Hier wird es wirklich spannend.<\/p>\n\n\n\n<p>Jenseits der Grundlagen und eingebetteten Inhalte gibt es auch eine gro\u00dfe Anzahl an fortgeschrittenen Bl\u00f6cken, die Sie f\u00fcr spezielle F\u00e4lle verwenden k\u00f6nnen. Vielleicht m\u00f6chten Sie die Navigation und das Benutzererlebnis Ihrer Website verbessern oder WordPress als vollwertigen Website-Builder verwenden.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Navigation<\/h3>\n    <p>Im Web bezeichnet der Begriff u2018Navigationu2019 das Wechseln von einer Website oder Seite zu einer anderen. Navigation ist auch ein g\u00e4ngiger Begriff in der Webentwicklung und im Design. Es wird besonderer Wert darauf gelegt, dass es f\u00fcr die Nutzer einfach ist, die Seiten zu finden, die sie ben\u00f6tigen.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/navigation\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Hier sind einige, die Sie sich ansehen sollten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Schaltfl\u00e4chen-Block<\/li>\n\n\n\n<li>Spalten-Block<\/li>\n\n\n\n<li>Gruppen-Block<\/li>\n\n\n\n<li>Beitragskarussell-Block<\/li>\n\n\n\n<li>Beitragsinhalt-Block<\/li>\n\n\n\n<li>Abfrage-Schleifen-Block<\/li>\n\n\n\n<li>Wiederverwendbarer Block<\/li>\n\n\n\n<li>Shortcode-Block<\/li>\n\n\n\n<li>Inhaltsverzeichnis-Block<\/li>\n\n\n<\/ul>\n\n\n\n<p>Mit diesen Bl\u00f6cken k\u00f6nnen Sie benutzerdefinierte Inhalte direkt aus der WordPress-Datenbank abrufen oder das Layout, den Abstand und den Fluss jeder Seite oder jedes Beitrags auf Ihrer Website vollst\u00e4ndig anpassen.<\/p>\n\n\n\n<p>Das ist alles prima und dandy.<\/p>\n\n\n\n<p><i>Aber was ist, wenn Sie einen Block ben\u00f6tigen, der nicht standardm\u00e4\u00dfig mit WordPress geliefert wird?&nbsp;<\/i><\/p>\n\n\n\n<p>Zum Gl\u00fcck sind Bl\u00f6cke ebenfalls anpassbar. Genau wie bei Widgets k\u00f6nnen Sie neue Bl\u00f6cke hinzuf\u00fcgen und sogar Ihre eigenen erstellen, um den Anforderungen Ihres Website-Designs und Ihrer Vorlage gerecht zu werden.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Widget<\/h3>\n    <p>WordPress-Widgets k\u00f6nnen Funktionen zu den Seitenleisten, Fu\u00dfzeilen oder anderen Bereichen Ihrer Website hinzuf\u00fcgen. Einige standardm\u00e4\u00dfige WordPress-Widgets sind Kategorien, Tag-Cloud, Suche, Navigationsmen\u00fc, Kalender und Aktuelle Beitr\u00e4ge.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">Wie man benutzerdefinierte Bl\u00f6cke mit einem WordPress Plugin erstellt<\/h2>\n\n\n\n<p>Mit Abstand ist der einfachste Weg, einen benutzerdefinierten Block zu erstellen, die Verwendung eines Plugins.<\/p>\n\n\n\n<p>Das <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Genesis Custom Blocks Plugin<\/a> macht das Erstellen und Starten Ihrer eigenen benutzerdefinierten Bl\u00f6cke ziemlich einfach. Sie ben\u00f6tigen ein grundlegendes Verst\u00e4ndnis von <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/html-lernen\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> und <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-lernen\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a>, um den Block zu erstellen und zu gestalten, sodass er Ihren Anforderungen entspricht.<\/p>\n\n\n\n<p>Mit diesen grundlegenden F\u00e4higkeiten k\u00fcmmert sich das Plugin um die gesamte schwierige Einrichtung und Konfiguration, um einen neuen Block zu implementieren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 1: Genesis Block Plugin installieren<\/h3>\n\n\n\n<p>Zuerst einmal: Besuche das WordPress Plugin-Verzeichnis und installiere das <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Genesis Custom Block Plugin<\/a>.<\/p>\n\n\n\n<p>(Vergessen Sie nicht, zum Plugins-Tab zu gehen und es zu aktivieren.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 2: Einen neuen Block hinzuf\u00fcgen<\/h3>\n\n\n\n<p>Nach der Installation und Aktivierung sollten Sie eine neue Option im WP-Admin-Panel in der linken Navigation sehen.<\/p>\n\n\n\n<p>Klicken Sie auf Benutzerdefinierte Bl\u00f6cke &gt; Neu hinzuf\u00fcgen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 3: Die Editorfelder anpassen<\/h3>\n\n\n\n<p>Jetzt sind wir bereit, den benutzerdefinierten Block zu erstellen.<\/p>\n\n\n\n<p>Der erste Schritt besteht darin, die Felder und Anpassungsoptionen einzurichten, die erscheinen, wenn Sie den Block auf Ihrer Website verwenden.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg\" alt=\"Screenshot, der den Einrichtungsbildschirm des Genesis Custom Blocks Plugin zeigt\" class=\"wp-image-41446 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n\n<p>Sie k\u00f6nnen dies als eine Art Mini-Version des Block-Editors selbst betrachten. Sie f\u00fcgen benutzerdefinierte Felder und Daten hinzu, die entweder vom Block selbst vorausgef\u00fcllt oder vom Editor oder Benutzer gesammelt werden, der den Block zu einer Seite oder einem Beitrag hinzuf\u00fcgt.<\/p>\n\n\n\n<p>Zum Beispiel, wenn Sie einen benutzerdefinierten Call-to-Action (CTA) Block erstellen, k\u00f6nnten Sie Felder wie folgt hinzuf\u00fcgen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u00dcberschrifttext<\/li>\n\n\n\n<li>Unter\u00fcberschrifttext<\/li>\n\n\n\n<li>Knopftext<\/li>\n\n\n\n<li>CTA-Knopf-URL<\/li>\n\n\n<\/ul>\n\n\n\n<p>Jedes Feld erh\u00e4lt eine Bezeichnung, einen Namen und einen Typ. Sie k\u00f6nnen sogar die Breite anpassen oder Hilfetext hinzuf\u00fcgen, um es zus\u00e4tzlichen Redakteuren oder Autoren leichter zu machen, es zu verwenden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 4: Das Markup und CSS anpassen<\/h3>\n\n\n\n<p>Jetzt, da wir das Backend des Blocks eingerichtet haben, m\u00fcssen wir WordPress mitteilen, wie der hinzugef\u00fcgte Inhalt tats\u00e4chlich angezeigt werden soll.<\/p>\n\n\n\n<p>Hier wird jedes vorhandene Wissen \u00fcber HTML oder CSS, das Sie m\u00f6glicherweise haben, n\u00fctzlich sein.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS.jpg\" alt=\"Das Markup und CSS anpassen\" class=\"wp-image-41447 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n\n<p>In diesem n\u00e4chsten Schritt werden Sie im Wesentlichen den Block von Code schreiben, der dynamisch aus den f\u00fcr den Blockeditor konfigurierten Eingaben generiert wird.<\/p>\n\n\n\n<p>Sie k\u00f6nnen dies in reinem HTML und CSS schreiben.<\/p>\n\n\n\n<p>Sie k\u00f6nnen auch die Variablen aus dem Block-Editor mithilfe von doppelten Klammern und dem Feldnamen (Slug) aus dem Editor einziehen. (Z.B.,\u201d{{button-text}}\u201d)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 5: Den Block hinzuf\u00fcgen<\/h3>\n\n\n\n<p>Nachdem Sie den Block mit dem Genesis-Plugin eingerichtet haben, sollte er in der Liste der verf\u00fcgbaren Bl\u00f6cke im WordPress Gutenberg-Editor erscheinen.<\/p>\n\n\n\n<p>Klicken Sie einfach auf das \u201e+\u201c und dann finden Sie den neuen Block nach seinem Namen.<\/p>\n\n\n\n<p>Nach dem Hinzuf\u00fcgen sollten Sie den Gutenberg-Block-Editor-Bildschirm mit den von Ihnen konfigurierten Feldern und Optionen sehen.<\/p>\n\n\n\n<p>Das ist es!<\/p>\n\n\n\n<p>Sie k\u00f6nnen jetzt Ihren benutzerdefinierten Block verwenden, indem Sie ihn zu Seiten, Beitr\u00e4gen, Seitenleisten oder \u00fcberall dort hinzuf\u00fcgen, wo Sie ihn ben\u00f6tigen.<\/p>\n\n\n\n<h2 id=\"custom\" class=\"wp-block-heading\">Wie man benutzerdefinierte WordPress-Bl\u00f6cke ohne ein Plugin erstellt<\/h2>\n\n\n\n<p>Wenn Sie tiefer eintauchen und wirklich lernen m\u00f6chten, wie man neue Bl\u00f6cke von Grund auf erstellt, ben\u00f6tigen Sie etwas fortgeschrittenere Kenntnisse.<\/p>\n\n\n\n<p>In diesem Tutorial werden wir die grundlegenden Schritte zum Verwenden des <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener\">create-block Tool<\/a> durchgehen, das es Ihnen erm\u00f6glicht, vollst\u00e4ndig benutzerdefinierte Bl\u00f6cke zu erstellen, ohne ein Plugin verwenden zu m\u00fcssen.<\/p>\n\n\n\n<p>Faire Warnung: Dies ist ein fortgeschrittener Arbeitsablauf. Sie m\u00fcssen sich in die Befehlszeile einarbeiten.<\/p>\n\n\n\n<p>Sie m\u00fcssen PHP, JavaScript, HTML und CSS verstehen.<\/p>\n\n\n\n<p>Sagen Sie nicht, wir h\u00e4tten Sie nicht gewarnt!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt #1: Einrichtung von Node.js, NPM und lokaler WordPress-Installation<\/h3>\n\n\n\n<p>Bevor wir create-block verwenden k\u00f6nnen, m\u00fcssen wir die richtige Einrichtung und Zugang haben.<\/p>\n\n\n\n<p>Hier sind die Voraussetzungen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.wordpress.org\/tutorial\/local-wordpress-installations-for-beginners\/\" target=\"_blank\" rel=\"noopener\">Eine lokale WordPress-Installation<\/a><\/li>\n\n\n\n<li>Terminal- oder Befehlszeileneinrichtung<\/li>\n\n\n\n<li><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">Node.js und npm<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<p>Sie m\u00f6chten vielleicht auch <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noopener\">nvm<\/a> (Node-Version-Manager) verwenden, um eine kompatible Version von Node.js zu installieren oder zu aktualisieren<\/p>\n\n\n\n<p>Mit diesem Setup werden wir den NPM-Befehl \u201enpx\u201c verwenden, um das Paket create-block direkt aus seinem gehosteten Verzeichnis in der Cloud auszuf\u00fchren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt #2: Das create-block Paket ausf\u00fchren<\/h3>\n\n\n\n<p>Jetzt der einfache Schritt.<\/p>\n\n\n\n<p>Vom Terminal navigieren Sie zum Verzeichnis \/wp-content\/plugins Ihrer Website auf Ihrem lokalen Rechner.<\/p>\n\n\n\n<p>F\u00fchren Sie dann das create-block-Paket mit NPX aus:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"693\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package.jpg\" alt=\"Das create-block Paket ausf\u00fchren\" class=\"wp-image-41448 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-300x130.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1024x444.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-768x333.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1536x665.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-600x260.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1200x520.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-730x316.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1460x632.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-784x340.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1568x679.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-877x380.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/693;\" \/><\/figure>\n\n\n\n<p><code>npx @wordpress\/create-block {{block-name}}<\/code><\/p>\n\n\n\n<p>Dieses Paket f\u00fchrt Sie durch den Prozess der Einrichtung dessen, was als \u201eBlockger\u00fcst\u201c bekannt ist. Es registriert alle relevanten Elemente, richtet die korrekte Datei- und Verzeichnisstruktur ein und generiert Standardcode f\u00fcr den gesamten Block, damit dieser sowohl bearbeitbar als auch nutzbar ist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt #3: Das Plugin aktivieren<\/h3>\n\n\n\n<p>Der neue Block selbst wird die Form eines Plugins annehmen.<\/p>\n\n\n\n<p>Sobald das create-block Paket abgeschlossen ist, m\u00fcssen Sie zum WP-Admin wechseln.<\/p>\n\n\n\n<p>Gehen Sie zur Plugins-Seite und aktivieren Sie das neue Plugin, das erstellt wurde und den Namen des Blocks haben sollte, den Sie in Ihrem npx-Befehl verwendet haben.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt #4: Den Block-Code anpassen<\/h3>\n\n\n\n<p>Sie passen den Inhalt und die Funktionalit\u00e4t des Blocks innerhalb des <b>\/src\/<\/b> Ordners im Plugin-Verzeichnis an.<\/p>\n\n\n\n<p><b>Index.js<\/b> ist der Ort, an dem Sie den Block registrieren und die Hauptausgabe programmieren:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"871\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code.jpg\" alt=\"Den Block-Code anpassen\" class=\"wp-image-41449 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-300x163.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1024x557.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-768x418.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1536x836.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-600x327.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1200x653.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-730x397.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1460x795.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-784x427.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1568x854.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-877x477.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/871;\" \/><\/figure>\n\n\n\n<p>Beachten Sie, dass die Funktion registerBlockType sowohl f\u00fcr die Eingaben des Blockeditors (\u201eedit\u201c) als auch f\u00fcr die Anzeige im Frontend (\u201esave\u201c) eingerichtet ist.<\/p>\n\n\n\n<p>Dies ist nur der Anfang beim Erstellen eines funktionalen Blocks.<\/p>\n\n\n\n<p>Sie werden wahrscheinlich in die komplette Dokumentation f\u00fcr das Schreiben funktionaler Bl\u00f6cke unter Verwendung der <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener\">WordPress Block API<\/a> einsteigen wollen.<\/p>\n\n\n\n<p>Sobald Sie die Grundlagen beherrschen, k\u00f6nnen Sie zus\u00e4tzliche Abh\u00e4ngigkeiten einbinden, auf externe Datenquellen zugreifen und fast alles andere tun, was Ihr Herz begehrt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt #5: Den Block aus dem Gutenberg-Editor hinzuf\u00fcgen<\/h3>\n\n\n\n<p>Mit dem aktivierten Plugin k\u00f6nnen Sie Ihren Block von jedem Gutenberg-Editor zu jeder Seite oder jedem Beitrag hinzuf\u00fcgen.<\/p>\n\n\n\n<p>Zugriff darauf \u00fcber den \u201e+\u201c-Button oder den \u201e\/\u201c-Befehl, genau wie bei jedem anderen Block.<\/p>\n\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">Der Himmel ist die Grenze<\/h2>\n\n\n\n<p>Okay, wir sind von den Grundlagen zu fortgeschrittenen Themen \u00fcbergegangen, aber die gute Nachricht ist, dass Sie jetzt unaufhaltsam sind.<\/p>\n\n\n\n<p>Zwischen den Standardblockoptionen, dem Genesis-Plugin und der M\u00f6glichkeit, Ihre eigenen Bl\u00f6cke von Grund auf zu erstellen \u2014 gibt es nichts, was Sie nicht tun k\u00f6nnen!<\/p>\n\n\n\n<p>Und weil Bl\u00f6cke so unglaublich leistungsf\u00e4hig und flexibel sind, gibt es fast nichts, was Sie nicht bauen k\u00f6nnen. Ihre WordPress-Seite verf\u00fcgt jetzt \u00fcber nahezu unendliche Funktionalit\u00e4t, und Sie k\u00f6nnen die Seite, App oder das Projekt Ihrer Tr\u00e4ume erstellen.<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      WordPress + DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Unsere automatischen Updates und starken Sicherheitsverteidigungen nehmen Ihnen das Servermanagement ab, sodass Sie sich auf das Erstellen einer gro\u00dfartigen Website konzentrieren k\u00f6nnen.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/de\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Tarife ansehen                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>W\u00e4re dies ein komischer Ort, um zu erw\u00e4hnen, wie meine Frau ein makelloses, unge\u00f6ffnetes, limitiertes Lego Star Wars BB-8 Set festh\u00e4lt? Diese Dinge gehen f\u00fcr ungef\u00e4hr 500 Dollar! Okay. Es w\u00e4re komisch. Verstanden, laut und deutlich\u2026 Aber das wird alles in einer Sekunde etwas mehr Sinn machen. In diesem Beitrag, [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":41439,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"Was sind WordPress-Bl\u00f6cke?\"],[\"blocks\",\"Welche Bl\u00f6cke hat WordPress bereits?\"],[\"create\",\"Wie man benutzerdefinierte Bl\u00f6cke mit einem WordPress Plugin erstellt\"],[\"custom\",\"Wie man benutzerdefinierte WordPress-Bl\u00f6cke ohne ein Plugin erstellt\"],[\"summary\",\"Der Himmel ist die Grenze\"]]","hide_toc":false,"footnotes":""},"categories":[14519,14509,14511],"tags":[],"class_list":["post-52846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-erste-schritte-de","category-webdesign-de","category-wordpress-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Wie man WordPress-Bl\u00f6cke verwendet (+ Wie man seine eigenen erstellt!) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man WordPress-Bl\u00f6cke verwendet (+ Wie man seine eigenen erstellt!)\" \/>\n<meta property=\"og:description\" content=\"W\u00e4re dies ein komischer Ort, um zu erw\u00e4hnen, wie meine Frau ein makelloses, unge\u00f6ffnetes, limitiertes Lego Star Wars BB-8 Set festh\u00e4lt? Diese Dinge gehen f\u00fcr ungef\u00e4hr 500 Dollar! Okay. Es w\u00e4re komisch. Verstanden, laut und deutlich\u2026 Aber das wird alles in einer Sekunde etwas mehr Sinn machen. In diesem Beitrag, [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-10T14:00:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T19:27:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man WordPress-Bl\u00f6cke verwendet (+ Wie man seine eigenen erstellt!) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/","og_locale":"en_US","og_type":"article","og_title":"Wie man WordPress-Bl\u00f6cke verwendet (+ Wie man seine eigenen erstellt!)","og_description":"W\u00e4re dies ein komischer Ort, um zu erw\u00e4hnen, wie meine Frau ein makelloses, unge\u00f6ffnetes, limitiertes Lego Star Wars BB-8 Set festh\u00e4lt? Diese Dinge gehen f\u00fcr ungef\u00e4hr 500 Dollar! Okay. Es w\u00e4re komisch. Verstanden, laut und deutlich\u2026 Aber das wird alles in einer Sekunde etwas mehr Sinn machen. In diesem Beitrag, [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-08-10T14:00:06+00:00","article_modified_time":"2025-01-16T19:27:32+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Wie man WordPress-Bl\u00f6cke verwendet (+ Wie man seine eigenen erstellt!)","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-01-16T19:27:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/"},"wordCount":2094,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","articleSection":["Erste Schritte","Webdesign","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/","name":"Wie man WordPress-Bl\u00f6cke verwendet (+ Wie man seine eigenen erstellt!) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-01-16T19:27:32+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","width":1460,"height":1095,"caption":"How To Use WordPress Blocks Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-wordpress-blocke-verwendet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Wie man WordPress-Bl\u00f6cke verwendet (+ Wie man seine eigenen erstellt!)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"de","translations":{"de":52846,"es":41465,"en":41438,"pt":54873,"pl":54880,"ru":54916,"uk":54919,"it":68363,"fr":70312,"nl":70333},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52846"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52846\/revisions"}],"predecessor-version":[{"id":62769,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52846\/revisions\/62769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/41439"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}