{"id":291,"date":"2023-05-07T10:56:36","date_gmt":"2023-05-07T09:56:36","guid":{"rendered":"https:\/\/crispycode.net\/?p=291"},"modified":"2023-05-18T13:45:11","modified_gmt":"2023-05-18T12:45:11","slug":"blazor-in-wordpress","status":"publish","type":"post","link":"https:\/\/crispycode.net\/de\/blazor-in-wordpress\/","title":{"rendered":"Blazor in WordPress: Mehr Power f\u00fcr Deinen Blog!"},"content":{"rendered":"\n<p>Willkommen, .NET-Entwickler! In diesem Artikel zeigen wir Dir Schritt f\u00fcr Schritt, wie Du die Vorteile von Blazor in WordPress nutzen kannst, indem Du leistungsstarke Blazor-Komponenten in Deinen WordPress-Blog integrierst. Du wei\u00dft bereits, wie effizient und angenehm die Webentwicklung in .NET ist, aber jetzt stehst Du vor der Herausforderung, Blazor in ein WordPress-System zu integrieren. Keine Sorge, dieser Artikel zeigt wie einfach das geht!<\/p>\n\n\n\n<p>Mit Blazor-Komponenten kannst Du die Benutzererfahrung Deiner WordPress-Website durch ansprechende und interaktive Funktionen bereichern \u2013 alles in der vertrauten .NET-Umgebung, die Du liebst. Wenn Du nicht die komplette Website in Blazor entwickeln m\u00f6chtest oder kannst, bist du hier genau richtig.<\/p>\n\n\n<div class=\"bd-thopjeou9a6ovpkt4kwjkh8uwfh10f wp-block-bd--- wp-block-bd-block-44\"><img decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/alexander-bartz.90x90.jpg\" alt=\"Profilbild Alexander Bartz\" class=\"bd-20hqmwgfd45ft6le7o9jodfn5s4wdr\"><div class=\"bd-h521mx4v22cf4pnhdltwg5jsfoh993\"><span class=\"bd-q4ar1wk0pskc0416tjc7mqgzja7qdd\">Alexander Bartz<\/span><span class=\"bd-ykmon322dena208dhdzhgf1giiesgg\">soft-evolution GmbH &amp; CO KG<\/span><a title=\"LinkedIn Profil Alexander Bartz\" href=\"https:\/\/www.linkedin.com\/in\/alexander-bartz-soft-evolution\/\" class=\"bd-a4t6wfzl4e6eqgll7rkjmpmu1ii5k0\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/linkedin.png\" alt=\"LinkedIn Logo\" class=\"bd-defoi8wzogf1iq3dwx1b54vft4y5fp\"><\/a><\/div><\/div>\n\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-1024x546.webp\" alt=\"Blazor in WordPress\" class=\"wp-image-216\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-1024x546.webp 1024w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-300x160.webp 300w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-768x410.webp 768w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-1536x820.webp 1536w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration.webp 1814w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\"><h2>Inhalt<\/h2><nav><ul><li class=\"\"><a href=\"#die-kurzfassung-so-gehts\">Die Kurzfassung: So geht&#8217;s<\/a><ul><li class=\"\"><a href=\"#die-voraussetzung-eine-blazor-komponente-in-wasm\">Die Voraussetzung: Eine Blazor Komponente in WASM<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#1-verweis-auf-custom-elements\">1. Verweis auf CustomElements<\/a><ul><li class=\"\"><a href=\"#2-registrierung-als-custom-component\">2. Registrierung als Custom Component<\/a><\/li><li class=\"\"><a href=\"#3-app-veroffentlichen\">3. App ver\u00f6ffentlichen<\/a><\/li><li class=\"\"><a href=\"#4-testen\">4. Testen<\/a><\/li><li class=\"\"><a href=\"#5-blazor-in-word-press\">5. Blazor in WordPress<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#das-ergebnis\">Das Ergebnis<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"die-kurzfassung-so-gehts\">Die Kurzfassung: So geht&#8217;s<\/h2>\n\n\n\n<p>Als Programmierer willst du schnell zum Ziel kommen, deshalb zuerst die Schritt-f\u00fcr-Schritt Anleitung bevor es weiter unten um Aspekte geht, die vielleicht auch interessant sein k\u00f6nnten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"die-voraussetzung-eine-blazor-komponente-in-wasm\">Die Voraussetzung: Eine Blazor Komponente in WASM<\/h3>\n\n\n\n<p>Es versteht sich von selbst, dass wir zuerst eine Blazor-Komponente ben\u00f6tigen, die wir in eine \u201enormale\u201c (nicht Blazor) WebSite integrieren wollen. In diesem Artikel nehme ich meine <a href=\"https:\/\/crispycode.net\/de\/blazor-sankey-diagramm\/\" data-type=\"post\" data-id=\"279\">Blazor Sankey Komponente<\/a> als Beispiel.<\/p>\n\n\n\n<p>Wichtig ist der &#8222;WASM&#8220; Teil: Zwar ist es problemlos m\u00f6glich auch Blazor Server Hosting Modell zu verwenden, aber meiner Meinung nach in den meisten f\u00e4llen komplett sinnlos. Wenn ich meine Blazor Komponente in einer ansonsten Blazor-freien Umgebung nutzen will, will ich sicher nicht auf einen ASP.NET Server angewiesen sein, der den Status f\u00fcr die Komponente pflegt.<\/p>\n\n\n\n<p>Hier geht es also ausschlie\u00dflich darum, wie man eine Blazor-Komponente, die in einer Blazor WebAssembly Umgebung entwickelt wurde, als Stand-Alone-L\u00f6sung in WordPress hosten kann. Der WordPress-Teil ist dabei fast nebens\u00e4chlich. Die gleiche Technik kann verwendet werden, um Blazor Komponenten in jede erdenkliche Umgebung zu integrieren.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/project-structure.png\" alt=\"Projekt Struktur\" class=\"wp-image-313\" width=\"234\" height=\"320\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/project-structure.png 355w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/project-structure-219x300.png 219w\" sizes=\"auto, (max-width: 234px) 100vw, 234px\" \/><\/figure>\n\n\n\n<p>In meinem Beispiel ist die eigentliche Komponente in dem separaten Projekt <code>CrispyCode.BlazorSankey<\/code> untergebracht. Das vollst\u00e4ndige Beispiel findest du auch auf <a href=\"https:\/\/github.com\/crispycode-net\/BlazorSankey\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>.<\/p>\n\n\n\n<p>Dort wird die Komponente auf der Index.razor Seite verwendet, was aber f\u00fcr den geplanten Export als Custom Element nicht wichtig ist:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-c#\">\n      C#    <\/div>\n    <div class=\"prettycode-file\">\n          <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-1388569568\"\n    id=\"codemirror-1388569568\"\n  >@page &quot;\/&quot;\n@using CrispyCode.BlazorSankey\n@using CrispyCode.BlazorSankey.Model;\n\n&lt;SankeyDiagram \n    NoDataHint=&quot;No data&quot;\n    Width=&quot;100%&quot; \n    Height=&quot;402px&quot; \n    Nodes=&quot;@nodes&quot; \n    Links=&quot;@links&quot; \n    OnNodeClicked=&quot;NodeClicked&quot; \n    OnLinkClicked=&quot;LinkClicked&quot; \/&gt;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1388569568'), {\n      mode: 'clike',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-verweis-auf-custom-elements\">1. Verweis auf CustomElements<\/h2>\n\n\n\n<p>Das Ganze funktioniert erst seitdem Microsoft in .NET 7 Support f\u00fcr CustomElemenst eingef\u00fchrt hat. In dem Projekt, das die Komponente beheimatet muss ein Verweis auf das nuget Paket Microsoft.AspNetCore.Components.CustomElements hinzugef\u00fcgt werden:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-shell\">\n      Shell    <\/div>\n    <div class=\"prettycode-file\">\n          <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-1367796230\"\n    id=\"codemirror-1367796230\"\n  >dotnet add package Microsoft.AspNetCore.Components.CustomElements<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1367796230'), {\n      mode: 'shell',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-registrierung-als-custom-component\">2. Registrierung als Custom Component<\/h3>\n\n\n\n<p>Nachdem das Paket installiert wurde, m\u00fcssen zwei wichtige \u00c4nderungen in der <code>Program.cs<\/code> Datei vorgenommen werden:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-c#\">\n      C#    <\/div>\n    <div class=\"prettycode-file\">\n          <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-1441543641\"\n    id=\"codemirror-1441543641\"\n  >public static async Task Main(string[] args)\n{\n    var builder = WebAssemblyHostBuilder.CreateDefault(args);\n\n    \/\/ Comment out the following lines because they are not needed for this example.\n    \/\/builder.RootComponents.Add&lt;App&gt;(&quot;#app&quot;);\n    \/\/builder.RootComponents.Add&lt;HeadOutlet&gt;(&quot;head::after&quot;);\n\n    builder.Services.AddScoped(sp =&gt; new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });\n\n    \/\/ register the Greeting component as a custom element\n    builder.RootComponents.RegisterCustomElement&lt;SankeyDiagram&gt;(&quot;sankey-diagram&quot;);\n\n    await builder.Build().RunAsync();\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1441543641'), {\n      mode: 'clike',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<p>In Zeile 12 erfolgt die Registrierung der Komponente \u00fcber Ihren Typ und einen, nur fast frei w\u00e4hlbaren, Namen. F\u00fcr den Namen gelten n\u00e4mlich zwei wichtige Regeln:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Der Name muss einen Bindestrich enthalten. Html Elemente ohne Bindestrich sind dem Standard Html vorbehalten.<\/li>\n\n\n\n<li>Der Name muss in Kebab Case Notation erfolgen. <code>Sankey-Diagram<\/code> w\u00fcrde nicht funktionieren.<\/li>\n<\/ol>\n\n\n\n<p>Die Zeilen 6 und 7 m\u00fcssen auskommentiert werden. Andernfalls wird zumindest eine Fehlermeldung wie diese im Console Log ausgegeben:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Could not find any element matching selector '#app'<\/code><\/pre>\n\n\n\n<p>Im schlimmeren Fall wird sogar die Funktionalit\u00e4t der Komponente eingeschr\u00e4nkt. Also: Weg mit den Zeilen! Sie werden nicht ben\u00f6tigt, weil nach dem Export keine vollst\u00e4ndige Blazor App mit Routing und allem Drum und Dran laufen wird, sondern nur die einzelne bzw. alle exportieren Custom Elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-app-veroffentlichen\">3. App ver\u00f6ffentlichen<\/h3>\n\n\n\n<p>Als n\u00e4chstes steht die Ver\u00f6ffentlichung des Projekts an. Hier ist jetzt in jedem Fall das Blazor WebAssembly Projekt gemeint, auch wenn die Komponente in einem anderen Projekt liegt.<\/p>\n\n\n\n<p>Zur Ver\u00f6ffentlichung im Visual Studio klickt man mit rechts auf das Projekt im Projektmappen Explorer und w\u00e4hlt dort den Men\u00fcpunkt Ver\u00f6ffentlichen<\/p>\n\n\n\n<p>Wenn man das zum ersten Mal f\u00fcr das Projekt macht, muss dabei ein Ver\u00f6ffentlichungsprofil erstellt werden. Als Typ sollte daf\u00fcr &#8222;Ordner&#8220; gew\u00e4hlt werden. Wir brauchen die Dateien auf unserer Festplatte.<\/p>\n\n\n\n<p>Nach dem Export sieht das Ergebnis in etwa so aus:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/folder-after-export.webp\" alt=\"Ordner und Dateien nach dem Export\" class=\"wp-image-321\" width=\"384\" height=\"385\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/folder-after-export.webp 549w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/folder-after-export-300x300.webp 300w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/folder-after-export-150x150.webp 150w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/figure>\n\n\n\n<p>Wenn man nur die Komponente und evtl. damit geb\u00fcndeltes CSS und JavaScript ben\u00f6tigt, k\u00f6nnen wir uns im Folgenden auf die beider Ordner <code>_content <\/code>und <code>_framework <\/code>konzentrieren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-testen\">4. Testen<\/h3>\n\n\n\n<p>An dieser Stelle k\u00f6nnte man die beiden Ordner in einen Ordner kopieren, in dem eine statische Website gehostet wird. Wenn man dann dort noch eine <code>index.html<\/code> Datei \u00e4hnlich der Folgenden erstellt, kann man das Ergebnis schon testen:<\/p>\n\n\n<div class=\"wp-block-prettycode-code  \">\n  <header class=\"prettycode-header\">\n    <div class=\"prettycode-lang is-lang-html\">\n      HTML    <\/div>\n    <div class=\"prettycode-file\">\n          <\/div>\n  <\/header>\n  <textarea\n    class=\"prettycode-source\"\n    name=\"codemirror-1326698844\"\n    id=\"codemirror-1326698844\"\n  >&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot; \/&gt;\n    &lt;title&gt;Blazor on static html&lt;\/title&gt;\n    &lt;base href=&quot;\/&quot; \/&gt;\n    &lt;script src=&quot;_framework\/blazor.webassembly.js&quot;&gt;&lt;\/script&gt;\n    &lt;link href=&quot;_content\/CrispyCode.BlazorSankey\/CrispyCode.BlazorSankey.bundle.scp.css&quot; rel=&quot;stylesheet&quot; \/&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;h1&gt;Blazor custom element&lt;\/h1&gt;\n    &lt;sankey-diagram no-data-hint=&quot;Nothing to see&quot;\n                    height=&quot;600px&quot;&gt;\n    &lt;\/sankey-diagram&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1326698844'), {\n      mode: 'xml',\n      readOnly: true,\n      theme: 'darcula',\n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } );\n  <\/script>\n<\/div>\n\n\n\n<p>Ein Paar Punkte sind hier auf jeden Fall beachtenswert:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die Website muss von einem WebServer bereitgestellt werden. Man kann die index.html nicht einfach aus dem Dateisystem heraus starten. Ich nutze dazu eine praktische Erweiterung <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer\" target=\"_blank\" rel=\"noreferrer noopener\">Live Server<\/a> f\u00fcr Visual Studio Code. Damit kann man auf Knopfdruck ein Verzeichnis in einem Webserver hosten lassen.<\/li>\n\n\n\n<li>Das base Tag im Head Bereich muss gesetzt werden. Hier wird der Pfad zu Basisverzeichnis der Anwendung festgelegt. In diesem Fall einfach &#8222;\/&#8220; weil wir das Ergebnis direkt im Stammverzeichnis bereitsellen werden.<\/li>\n\n\n\n<li>Das script Tag wird ben\u00f6tigt, damit die Blazor Laufzeitumgebung gestartet wird. Ohne die bleibt die eigenen Komponente ohne Bedeutung.<\/li>\n\n\n\n<li>Das link Tag wird nur ben\u00f6tigt, wenn die exportierte Komponente \u00fcber geb\u00fcndelte Styles verf\u00fcgt. Der Dateiname muss nat\u00fcrlich an den Namen deiner Komponente angepasst werden.<\/li>\n\n\n\n<li>Die Html Attribute <code>no-data-hint<\/code> und <code>height <\/code>in diesen Beispiel. Auch hier gilt die Kebab Case Regel. Die zugeh\u00f6rigen Parameter in der Blazor Komponente sind eigentlich als <code>NoDataHint <\/code>und <code>Height <\/code>definiert. Verwendet man die Komponente als Custom Element, erfolgt automatisch die Umwandlung in die oben gezeigte Schreibweise.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-blazor-in-word-press\">5. Blazor in WordPress<\/h3>\n\n\n\n<p>Wenn das alles funktioniert ist es nur noch ein Klacks um die eigene Komponente auch in einer WordPress Umgebung zu nutzen. <\/p>\n\n\n\n<p>Als erstes muss dazu irgendwie das base Tag gesetzt werden und die JavaScript und CSS Dateien eingebunden werden. Daf\u00fcr gibt es im WordPress viele M\u00f6glichkeiten. Die einfachste M\u00f6glichkeit d\u00fcrfte die Nutzung eines Plugins sein. Ich habe es einmal mit dem kostenlosen <code>WPCode Lite - Insert Headers and Footers<\/code> versucht. <\/p>\n\n\n\n<p>Das Plugin erm\u00f6glicht es im Men\u00fc unter &#8222;Code Snippets&#8220; \/ &#8222;Headers and Footers&#8220; die ben\u00f6tigten Dateien zu verlinken:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/header-code-1024x134.png\" alt=\"base tag und css link im header\" class=\"wp-image-331\" width=\"862\" height=\"113\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/header-code-1024x134.png 1024w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/header-code-300x39.png 300w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/header-code-768x101.png 768w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/header-code.png 1471w\" sizes=\"auto, (max-width: 862px) 100vw, 862px\" \/><\/figure>\n\n\n\n<p>Das <code>base <\/code>Tag und die CSS Datei habe ich im Head Bereich eingebunden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/footer-code.png\" alt=\"Script einbinden im Footer\" class=\"wp-image-333\" width=\"625\" height=\"109\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/footer-code.png 957w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/footer-code-300x52.png 300w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/footer-code-768x134.png 768w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/figure>\n\n\n\n<p>Das Blazor WebAssembly Script musste ich jedoch im Footer einbinden. Dadurch wird die Komponente zuerst ohne Inhalt gerendert und dann, wenn die Seite geladen ist, vom Script ins Leben gerufen.<\/p>\n\n\n\n<p>Bei dem Versuch das Script auch im Header zu laden, kam es immer zu dieser Fehlermeldung:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Failed to construct 'CustomElement': The result must not have children<\/code><\/pre>\n\n\n\n<p>Sicherlich ist dieser Ansatz noch verbesserungsw\u00fcrdig. Der gr\u00f6\u00dfte Nachteil d\u00fcrfte darin bestehen, dass das JavaScript so auf jeder WordPress Seite geladen wird, auch wenn dort keine Blazor Komponente existieren sollte.<\/p>\n\n\n\n<p>Nachdem alles registriert ist, l\u00e4sst sie die Komponente \u00fcber Ihren Namen als normales Html Snippet einbinden. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress-html.png\" alt=\"Html Einbinden in WordPress\" class=\"wp-image-337\" width=\"632\" height=\"157\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress-html.png 1012w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress-html-300x75.png 300w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress-html-768x191.png 768w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/figure>\n\n\n\n<p>Im WordPress Block Editor w\u00e4hlt man dazu einfach als Typ <code>Custom Html<\/code> aus und kann dann die Komponente an der gew\u00fcnschten Stelle im Artikel platzieren.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"das-ergebnis\">Das Ergebnis<\/h2>\n\n\n\n<p>Das gew\u00fcnschte Ergebnis ist erreicht: Wir sehen eine WordPress Artikel\u00fcberschrift und darunter eine Blazor Komponente:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress-1024x483.png\" alt=\"Ein Blazor Diagramm in einem WordPress Beitrag\" class=\"wp-image-335\" width=\"737\" height=\"348\" srcset=\"https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress-1024x483.png 1024w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress-300x142.png 300w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress-768x363.png 768w, https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/blazor-in-wordpress.png 1468w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/figure>\n\n\n\n<p>Wenn du Fragen oder Anregungen zu dem Thema hast, freue ich mich \u00fcber <a href=\"https:\/\/crispycode.net\/de\/kontakt\/\" data-type=\"page\" data-id=\"245\">eine Nachricht <\/a>oder einen Kommentar unter diesem Beitrag.<\/p>\n\n\n\n<p>Bis dahin &#8211; Happy Coding!<\/p>\n<div class=\"shariff\"><ul class=\"shariff-buttons theme-default orientation-horizontal buttonsize-medium\"><li class=\"shariff-button facebook shariff-nocustomcolor\" style=\"background-color:#4273c8\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fcrispycode.net%2Fde%2Fblazor-in-wordpress%2F\" title=\"Bei Facebook teilen\" aria-label=\"Bei Facebook teilen\" role=\"button\" rel=\"nofollow\" class=\"shariff-link\" style=\"; background-color:#3b5998; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 18 32\"><path fill=\"#3b5998\" d=\"M17.1 0.2v4.7h-2.8q-1.5 0-2.1 0.6t-0.5 1.9v3.4h5.2l-0.7 5.3h-4.5v13.6h-5.5v-13.6h-4.5v-5.3h4.5v-3.9q0-3.3 1.9-5.2t5-1.8q2.6 0 4.1 0.2z\"\/><\/svg><\/span><span class=\"shariff-text\">teilen<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button linkedin shariff-nocustomcolor\" style=\"background-color:#1488bf\"><a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fcrispycode.net%2Fde%2Fblazor-in-wordpress%2F\" title=\"Bei LinkedIn teilen\" aria-label=\"Bei LinkedIn teilen\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#0077b5; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#0077b5\" d=\"M6.2 11.2v17.7h-5.9v-17.7h5.9zM6.6 5.7q0 1.3-0.9 2.2t-2.4 0.9h0q-1.5 0-2.4-0.9t-0.9-2.2 0.9-2.2 2.4-0.9 2.4 0.9 0.9 2.2zM27.4 18.7v10.1h-5.9v-9.5q0-1.9-0.7-2.9t-2.3-1.1q-1.1 0-1.9 0.6t-1.2 1.5q-0.2 0.5-0.2 1.4v9.9h-5.9q0-7.1 0-11.6t0-5.3l0-0.9h5.9v2.6h0q0.4-0.6 0.7-1t1-0.9 1.6-0.8 2-0.3q3 0 4.9 2t1.9 6z\"\/><\/svg><\/span><span class=\"shariff-text\">teilen<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button mastodon shariff-nocustomcolor\" style=\"background-color:#563ACC\"><a href=\"https:\/\/s2f.kytta.dev\/?text=Blazor%20in%20WordPress%3A%20Mehr%20Power%20f%C3%BCr%20Deinen%20Blog%21 https%3A%2F%2Fcrispycode.net%2Fde%2Fblazor-in-wordpress%2F\" title=\"Bei Mastodon teilen\" aria-label=\"Bei Mastodon teilen\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#6364FF; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"75\" height=\"79\" viewBox=\"0 0 75 79\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M37.813-.025C32.462-.058 27.114.13 21.79.598c-8.544.621-17.214 5.58-20.203 13.931C-1.12 23.318.408 32.622.465 41.65c.375 7.316.943 14.78 3.392 21.73 4.365 9.465 14.781 14.537 24.782 15.385 7.64.698 15.761-.213 22.517-4.026a54.1 54.1 0 0 0 .01-6.232c-6.855 1.316-14.101 2.609-21.049 1.074-3.883-.88-6.876-4.237-7.25-8.215-1.53-3.988 3.78-.43 5.584-.883 9.048 1.224 18.282.776 27.303-.462 7.044-.837 14.26-4.788 16.65-11.833 2.263-6.135 1.215-12.79 1.698-19.177.06-3.84.09-7.692-.262-11.52C72.596 7.844 63.223.981 53.834.684a219.453 219.453 0 0 0-16.022-.71zm11.294 12.882c5.5-.067 10.801 4.143 11.67 9.653.338 1.48.471 3 .471 4.515v21.088h-8.357c-.07-7.588.153-15.182-.131-22.765-.587-4.368-7.04-5.747-9.672-2.397-2.422 3.04-1.47 7.155-1.67 10.735v6.392h-8.307c-.146-4.996.359-10.045-.404-15.002-1.108-4.218-7.809-5.565-10.094-1.666-1.685 3.046-.712 6.634-.976 9.936v14.767h-8.354c.109-8.165-.238-16.344.215-24.5.674-5.346 5.095-10.389 10.676-10.627 4.902-.739 10.103 2.038 12.053 6.631.375 1.435 1.76 1.932 1.994.084 1.844-3.704 5.501-6.739 9.785-6.771.367-.044.735-.068 1.101-.073z\"\/><defs><linearGradient id=\"paint0_linear_549_34\" x1=\"37.0692\" y1=\"0\" x2=\"37.0692\" y2=\"79\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#6364FF\"\/><stop offset=\"1\" stop-color=\"#563ACC\"\/><\/linearGradient><\/defs><\/svg><\/span><span class=\"shariff-text\">teilen<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button pinterest shariff-nocustomcolor\" style=\"background-color:#e70f18\"><a href=\"https:\/\/www.pinterest.com\/pin\/create\/link\/?url=https%3A%2F%2Fcrispycode.net%2Fde%2Fblazor-in-wordpress%2F&media=https%3A%2F%2Fcrispycode.net%2Fwp-content%2Fuploads%2F2023%2F05%2FBlazor-WordPress-Integration.webp&description=Blazor%20in%20WordPress%3A%20Mehr%20Power%20f%C3%BCr%20Deinen%20Blog%21\" title=\"Bei Pinterest pinnen\" aria-label=\"Bei Pinterest pinnen\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#cb2027; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#cb2027\" d=\"M27.4 16q0 3.7-1.8 6.9t-5 5-6.9 1.9q-2 0-3.9-0.6 1.1-1.7 1.4-2.9 0.2-0.6 1-3.8 0.4 0.7 1.3 1.2t2 0.5q2.1 0 3.8-1.2t2.7-3.4 0.9-4.8q0-2-1.1-3.8t-3.1-2.9-4.5-1.2q-1.9 0-3.5 0.5t-2.8 1.4-2 2-1.2 2.3-0.4 2.4q0 1.9 0.7 3.3t2.1 2q0.5 0.2 0.7-0.4 0-0.1 0.1-0.5t0.2-0.5q0.1-0.4-0.2-0.8-0.9-1.1-0.9-2.7 0-2.7 1.9-4.6t4.9-2q2.7 0 4.2 1.5t1.5 3.8q0 3-1.2 5.2t-3.1 2.1q-1.1 0-1.7-0.8t-0.4-1.9q0.1-0.6 0.5-1.7t0.5-1.8 0.2-1.4q0-0.9-0.5-1.5t-1.4-0.6q-1.1 0-1.9 1t-0.8 2.6q0 1.3 0.4 2.2l-1.8 7.5q-0.3 1.2-0.2 3.2-3.7-1.6-6-5t-2.3-7.6q0-3.7 1.9-6.9t5-5 6.9-1.9 6.9 1.9 5 5 1.8 6.9z\"\/><\/svg><\/span><span class=\"shariff-text\">merken<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button twitter shariff-nocustomcolor\" style=\"background-color:#595959\"><a href=\"https:\/\/twitter.com\/share?url=https%3A%2F%2Fcrispycode.net%2Fde%2Fblazor-in-wordpress%2F&text=Blazor%20in%20WordPress%3A%20Mehr%20Power%20f%C3%BCr%20Deinen%20Blog%21\" title=\"Bei X teilen\" aria-label=\"Bei X teilen\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#000; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"#000\" d=\"M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0\"\/><\/svg><\/span><span class=\"shariff-text\">teilen<\/span>&nbsp;<\/a><\/li><\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>Entdecken Sie, wie Sie Blazor in WordPress integrieren k\u00f6nnen, um interaktive Funktionen und eine verbesserte Benutzererfahrung zu bieten. Schritt-f\u00fcr-Schritt-Anleitung inklusive!<\/p>\n","protected":false},"author":1,"featured_media":216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[22],"tags":[],"class_list":["post-291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programmierung"],"uagb_featured_image_src":{"full":["https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration.webp",1814,968,false],"thumbnail":["https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-150x150.webp",150,150,true],"medium":["https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-300x160.webp",300,160,true],"medium_large":["https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-768x410.webp",768,410,true],"large":["https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-1024x546.webp",1024,546,true],"1536x1536":["https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration-1536x820.webp",1536,820,true],"2048x2048":["https:\/\/crispycode.net\/wp-content\/uploads\/2023\/05\/Blazor-WordPress-Integration.webp",1814,968,false]},"uagb_author_info":{"display_name":"Alexander Bartz","author_link":"https:\/\/crispycode.net\/de\/author\/abartz\/"},"uagb_comment_info":2,"uagb_excerpt":"Entdecken Sie, wie Sie Blazor in WordPress integrieren k\u00f6nnen, um interaktive Funktionen und eine verbesserte Benutzererfahrung zu bieten. Schritt-f\u00fcr-Schritt-Anleitung inklusive!","_links":{"self":[{"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/posts\/291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/comments?post=291"}],"version-history":[{"count":14,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/posts\/291\/revisions"}],"predecessor-version":[{"id":344,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/posts\/291\/revisions\/344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/media\/216"}],"wp:attachment":[{"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/media?parent=291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/categories?post=291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crispycode.net\/de\/wp-json\/wp\/v2\/tags?post=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}