Diese Anleitung behandelt den Block-Editor, den klassischen Editor, Widgets und jede dieser drei Fallen.
Minesweeper mit dem Block „Individuelles HTML“ einbetten
Den kompletten Einbettungscode kopieren
Öffne den Generator, wähl Spielfeldgröße und Design und kopier den ganzen Code. Er besteht aus zwei Teilen: dem iframe, in dem das Spiel läuft, und einem kurzen Absatz mit der Quellenangabe darunter, der zu play-minesweeper.games verlinkt. WordPress nimmt beides, also füg beides ein.
Einen Block „Individuelles HTML“ hinzufügen
Setz im Block-Editor den Cursor in einen leeren Absatz, tipp /html und drück Enter. Alternativ klickst du oben links auf den blauen Block-Inserter (+) und suchst nach „Individuelles HTML“ (Custom HTML). Der Block erscheint mit einer Schaltfläche „HTML bearbeiten“.
Den Code in den Block einfügen
Klick auf „HTML bearbeiten“, füg den kompletten Code in das Codefeld ein – iframe und Quellenzeile zusammen – und prüf die Live-Vorschau daneben. Klick auf „Aktualisieren“, sobald das Spielfeld richtig aussieht. In älteren WordPress-Versionen hat die Block-Werkzeugleiste stattdessen einen Umschalter HTML / Vorschau, mit dem du dein Ergebnis kontrollierst.
Oder den Tab „Text“ im klassischen Editor nutzen
Läuft deine Website noch mit dem klassischen Editor, wechsle oben rechts im Bearbeitungsfeld vom Tab „Visuell“ zum Tab „Text“, füg den Code dort ein und speichere, ohne zurück zu „Visuell“ zu wechseln – der visuelle Editor schreibt unbekanntes Markup um und kann das iframe entfernen.
Auf Desktop und Handy prüfen, dann veröffentlichen
Öffne den Beitrag über die Vorschau in einem neuen Tab auf einem echten Gerät. Prüf, dass das Spielfeld nicht von der Inhaltsbreite deines Themes abgeschnitten wird, und klick dann auf „Veröffentlichen“ oder „Aktualisieren“.
Warum WordPress dein iframe immer wieder löscht
Das ist der häufigste Grund, warum eine Spiel-Einbettung in WordPress scheitert, und er hat drei verschiedene Ursachen, die im Editor gleich aussehen.
1. Deine Benutzerrolle. WordPress bereinigt gespeicherte Inhalte mit wp_kses(), sofern der Autor nicht die Berechtigung unfiltered_html hat. Administratoren und Redakteure haben sie in einer normalen Einzelinstallation. Autoren und Mitarbeiter haben sie nicht, ihr <iframe> wird beim Speichern des Beitrags stillschweigend entfernt. In einem Multisite-Netzwerk behalten nur Super-Admins die Berechtigung – ein Administrator einer einzelnen Website im Netzwerk verliert das Tag trotzdem.
2. Tarifbeschränkungen bei WordPress.com. Gehostete WordPress.com-Websites behandeln iframe, script, style, form, embed und object als Premium-Markup; dafür brauchst du einen kostenpflichtigen Tarif mit aktivierten Hosting-Funktionen. Im kostenlosen Tarif nimmt der Block für individuelles HTML den Code an und entfernt ihn dann beim Speichern. Hast du einen kostenlosen WordPress.com-Blog, verlinke das Spiel, statt es einzubetten – ein Link funktioniert im Beitrag einwandfrei.
3. Der Tab „Visuell“ im klassischen Editor. Fügst du den Code im Tab Text ein und klickst vor dem Speichern zurück auf Visuell, formatiert TinyMCE das Markup um und zerstört oder entfernt dabei oft iframes. Füg den Code zuletzt ein und speichere aus dem Tab „Text“.
Das Spielfeld an dein Theme anpassen
Block-Themes begrenzen Beitragsinhalte auf eine feste Inhaltsbreite – meist 650 bis 840 Pixel. Das erzeugte iframe hat feste Pixelmaße, ein Spielfeld, das breiter ist als diese Spalte, ragt also heraus oder wird auf Handys abgeschnitten. Pack es in einen Container, damit es scrollt, statt das Layout zu sprengen:
<div style="max-width:100%;overflow-x:auto;text-align:center">
<iframe src="https://play-minesweeper.games/embed/?size=intermediate"
width="536" height="664" frameborder="0"
title="Minesweeper Game" loading="lazy"></iframe>
<p style="font:12px/1.5 sans-serif;margin:6px auto 0;max-width:540px">
<a href="https://play-minesweeper.games/">play-minesweeper.games</a> — free Minesweeper, no download
</p>
</div>Als grobe Richtschnur nach Platzierung: Anfänger 9×9 (344×472) für Seitenleisten und schmale Mobile-first-Themes, Fortgeschritten 16×16 (536×664) für eine normale Beitragsspalte, Experte 30×16 (956×664) nur in einer Gruppe mit voller oder weiter Breite.
Im Block-Editor kannst du außerdem den übergeordneten Gruppen-Block des HTML-Blocks auswählen und seine Ausrichtung auf Weite Breite oder Volle Breite stellen, sofern dein Theme das unterstützt. So hat ein Experten-Spielfeld genug Platz.
Seitenleisten, Footer und Page-Builder
Widget-Bereiche. Unter Design > Widgets ein Widget Individuelles HTML hinzufügen und denselben Code einfügen. Ein Spiel in der Seitenleiste verlängert bei einem Rätsel- oder Gaming-Blog spürbar die Verweildauer.
Elementor. Zieh das HTML-Widget hinein und füg beide Teile ein. Nimm nicht das Texteditor-Widget; es filtert Tags genauso wie der klassische Editor.
Divi. Nimm ein Code-Modul statt eines Text-Moduls.
AMP. Das offizielle AMP-Plugin wandelt <iframe> in <amp-iframe> um. AMP verlangt, dass eingebettete Inhalte über HTTPS ausgeliefert werden – was hier der Fall ist – und zeigt ein iframe weit oben im ersten Sichtbereich nur an, wenn es mindestens 600 Pixel hoch ist. Setz das Spielfeld unter deine einleitenden Absätze, dann ist es gültig.
Statisches Caching und CDNs. An der Einbettung muss nichts neu erzeugt werden, Full-Page-Caching, Cloudflare und Ähnliches sind also unproblematisch. Ärger macht nur das Umschreiben für Lazy Loading, und auch nur, wenn es iframes betrifft.