💡 So fügen Sie ein Popup-Fenster in WordPress hinzu

• Wählen Sie Ihren Ansatz: das Plugin Popup Maker für einen schnellen Start oder eigenen Code für volle Kontrolle
• Installieren Sie Popup Maker über „Plugins → Installieren" und aktivieren Sie es
• Erstellen Sie ein neues Popup, legen Sie den Beitrags- oder Seiteninhalt fest und konfigurieren Sie einen Auslöser (Klick, Timer oder Scrollen)
• Für eine individuelle Lösung fügen Sie CSS-Stile für das modale Fenster in Ihre Theme-Datei oder den Customizer ein
• Binden Sie die JavaScript-Datei per wp_enqueue_script() mit jQuery-Abhängigkeit ein und prüfen Sie die Ladereihenfolge
• Öffnen Sie die Seite und testen Sie das Popup in Ihrem Browser, während Sie die Konsole auf Fehler überwachen

Was modale Fenster sind und warum Ihre WordPress-Seite sie braucht

Ein modales Fenster ist ein Popup-Inhaltsblock, der sich über die Seite legt und den Hintergrund abdunkelt. Der Nutzer verlässt die aktuelle URL nie, sieht aber zusätzliche Informationen: Beitragstext, ein Formular, ein Video oder eine Galerie.

Für eine WordPress-Seite lösen modale Fenster drei konkrete Probleme. Erstens ein Benutzer-Dashboard: Statt einer separaten Profilseite zeigen Sie Einstellungen, Bestellungen oder Nachrichten in einem Popup-Block an. Zweitens die schnelle Inhaltsvorschau: Ein Besucher klickt auf eine Produktkarte oder einen Artikel-Teaser und sieht den vollständigen Inhalt ohne Neuladen. Drittens Lead-Erfassungsformulare: Anmelde-, Registrierungs- und Kontaktformulare erscheinen genau dann, wenn der Besucher handlungsbereit ist.

Der entscheidende Vorteil eines modalen Fensters gegenüber einer separaten Seite ist die Geschwindigkeit. Es gibt kein Warten auf einen vollständigen Seitenaufbau mit Header, Sidebar und Footer. Sie laden nur the_content(), reinen Inhalt. Das spart sowohl Nutzerzeit als auch Serverressourcen.

WP Post Popup: Warum das Veteran-Plugin von der Bühne abtrat

Bis 2023 war eine der beliebtesten Lösungen für modale Fenster in WordPress das Plugin WP Post Popup (wp-post-modal). Es konnte jeden Beitrag, jede Seite oder jeden benutzerdefinierten Beitragstyp in ein Popup verwandeln; man musste lediglich eine URL mit einem Parameter angeben. Das Plugin funktionierte mit Shortcodes, Contact Form 7 und BuddyPress; es konnte externe Seiten laden und sogar gezielt einen bestimmten div von einer anderen Seite anzeigen.

Im Oktober 2023 wurde das Plugin geschlossen. Der Grund war eine Sicherheitslücke. Die WordPress.org-Seite zeigt nun den Status „Dieses Plugin wurde geschlossen… Grund: Sicherheitsproblem." Seitdem ist es nicht mehr zum Download verfügbar und die aktiven Installationen sind auf null gesunken.

Aber die Ideen hinter WP Post Popup sind nicht verschwunden. Die Aufgabe, Inhalte ohne Neuladen in einem Popup anzuzeigen, ist auch heute noch lösbar, und zwar auf zwei Wegen: moderne Plugins und reiner Code.

3 Moderne Wege, ein modales Fenster in WordPress hinzuzufügen

Hier sind die aktuellen Optionen für 2026, von fertigen Plugins bis zur vollständig individuellen Lösung.

Popup Maker ist das beliebteste kostenlose Plugin für Popups: über 700.000 aktive Installationen und eine Bewertung von 4,9 auf WordPress.org. Es erstellt jede Art von Popup, von modalen Fenstern mit Inhalt bis zu Slide-in-Panels und Bannern. Zu den Auslösern gehören Klick, Timer, Scrollen oder Exit-Intent. Wenn Sie eine schnelle No-Code-Lösung benötigen, ist dies der beste Ausgangspunkt.

Bootstrap 5 ist in viele moderne Themes integriert. Seine native Modal-Komponente funktioniert sofort: Responsivität, Animation, Schließen per Escape-Taste und Klick außerhalb des Fensters. Binden Sie Bootstrap einfach in Ihr Theme ein und verwenden Sie das fertige Markup mit Datenattributen.

Reiner Code ist der Weg für alle, die volle Kontrolle über jedes Pixel und jedes Verhalten des Fensters benötigen. Keine zusätzlichen Skripte, Abhängigkeiten oder Konflikte mit anderen Plugins. Diese Methode gehen wir Schritt für Schritt durch.

Das Video oben ist ein praktisches Tutorial zum Erstellen eines benutzerdefinierten modalen Fensters in WordPress von Grund auf: 12 Minuten reiner Code mit einem fertigen Ergebnis am Ende.

Schritt-für-Schritt-Anleitung: Ein modales Fenster von Grund auf erstellen

Diese Methode funktioniert auf jeder WordPress-Seite, unabhängig vom Theme. Wir schreiben ein CSS-Grundgerüst für das Styling des Popup-Blocks, beheben einen typischen JavaScript-Fehler und fügen einen intelligenten Preloader hinzu, damit Inhalte flüssig und ohne Flackern erscheinen.

Schritt 1: CSS-Grundgerüst für das modale Fenster

Das grundlegende Styling erreicht drei Dinge: Es zentriert das Fenster auf dem Bildschirm, dunkelt den Hintergrund ab und passt Tabellen innerhalb des modalen Blocks an. Hier ist der funktionierende Code für die style.css-Datei Ihres Themes oder den Tab „Zusätzliches CSS" im Customizer:

1
/* Modal window — basic styles */
2
.modal.show {
3
    max-width: 650px;
4
}
5
 
6
.modal.show .kk-star-ratings.bottom-right.rgt {
7
    display: none;
8
}
9
 
10
/* Tables inside the modal window */
11
.modal.show table {
12
    border-collapse: separate;
13
    max-width: 100%;
14
    overflow: auto;
15
    table-layout: fixed;
16
    border: none;
17
    width: auto;
18
}
19
 
20
.modal.show table th {
21
    background: #F8F0F8;
22
    padding: 17px 10px;
23
    vertical-align: middle;
24
    color: #7F617E;
25
    font-size: 12px;
26
    text-align: left;
27
}
28
 
29
.modal.show table th:first-child {
30
    border-radius: 5px 0 0 5px;
31
}
32
 
33
.modal.show table th:last-child {
34
    border-radius: 0 5px 5px 0;
35
}
36
 
37
.modal.show table th.th-border {
38
    border-left: 1px solid #ECE1EC;
39
}
40
 
41
.modal.show table td {
42
    color: #424242;
43
    font-size: 13px;
44
    border-bottom: 1px dashed #E5E5E5;
45
    padding: 10px 5px 5px 4px;
46
    text-align: left;
47
}
48
 
49
.modal.show table tr:last-child td {
50
    border-bottom: none;
51
    padding-bottom: 20px;
52
}
53
 
54
.modal.show table td {
55
    border-right: 1px solid #F7F7F7;
56
}
57
 
58
.modal.show table td:last-child {
59
    border-right: none;
60
}
61
 
62
.modal.show table tr:first-child td {
63
    padding-top: 20px;
64
}

Der entscheidende Punkt: Der Selektor .modal.show stellt sicher, dass die Stile nur angewendet werden, wenn das modale Fenster aktiv ist. Im eingeklappten Zustand beeinflusst der Block das Seitenlayout nicht. Tabellen innerhalb des modalen Blocks werden gesondert behandelt: abgerundete Ecken an Kopfzeilen, gestrichelte Zeilentrenner und responsives Scrollen.

Schritt 2: JavaScript-Fehler und wie man sie behebt

Das häufigste Problem bei der Arbeit mit modalen Fenstern in WordPress ist der Fehler Uncaught ReferenceError: wp is not defined. Er tritt auf, wenn ein Plugin oder ein eigenes Skript versucht, das wp-Objekt (die WordPress JavaScript-API) zu verwenden, bevor der Kern es geladen hat.

Im Fall von WP Post Popup lag das Problem in der Funktion modalCustomizer(), die Einstellungen aus dem Admin-Bereich über wp.customize abrief. So sah es im Plugin-Code aus:

1
// Window load
2
$(window).on('load', function () {
3
    modalCustomizer();
4
});

Die Lösung ist einfach: Kommentieren Sie den Aufruf aus, wenn Sie das Fenster über Ihr eigenes CSS gestalten:

1
// Window load
2
$(window).on('load', function () {
3
    // modalCustomizer();
4
});

Eine allgemeine Regel für alle modalen Skripte in WordPress: Überprüfen Sie immer die Ladereihenfolge der Abhängigkeiten. Binden Sie Ihre Skripte per wp_enqueue_script() mit expliziten Abhängigkeiten von jquery und wp-util ein. Und fügen Sie niemals <script> direkt in den Body eines Beitrags ein; das ist ein sicherer Weg zu Fehlern wie $ is not defined und wp is not defined.

Schritt 3: Intelligenter Preloader mit jQuery

Die Aufgabe des Preloaders ist es, eine Ladeanzeige zu zeigen, während der Beitragsinhalt per AJAX geladen wird. Sobald die Daten ankommen, blendet der Preloader sanft aus. Um DOM-Änderungen zu verfolgen, verwenden wir die Mikrobibliothek jquery-watch (25 Codezeilen, die Attribut- und Eigenschaftsänderungen an einem Element überwachen).

CSS für den Preloader: eine Hintergrund-Gif-Anzeige, zentriert im modalen Block:

1
/* Modal window preloader */
2
.modal-wrapper.styled .modal {
3
    min-height: 385px;
4
    background-color: white;
5
    background-size: inherit;
6
}
7
 
8
div#modal-content {
9
    background-color: white;
10
}
11
 
12
.modal-wrapper.styled .modal {
13
    background: white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll;
14
}
15
 
16
#single-post-meta-manager {
17
    opacity: 0;
18
}
19
 
20
div.modal-content-post-wrapped.load {
21
    opacity: 1;
22
}

So funktioniert es: Zunächst ist der Inhalt ausgeblendet (opacity: 0) und der Hintergrund-Preloader sichtbar. Wenn die Daten geladen sind, fügt jQuery die Klasse .load hinzu, der Inhalt blendet ein und der Preloader verschwindet. Hier ist der JS-Code:

1
jQuery(document).ready(function($) {
2
 
3
    // Smooth appearance of content in the modal window
4
    $("div#single-post-meta-manager").animate({ 'opacity': '1' }).fadeIn('slow');
5
 
6
    // Add class-informer "content loaded"
7
    $("div.modal-content-post-wrapped").addClass("load");
8
 
9
    // Track modal window changes via jquery-watch
10
    $(".modal-wrapper").watch({
11
        properties: "top,left,opacity,display,attr_class",
12
        watchChildren: true,
13
        callback: function (data, i) {
14
            // Set preloader as background image
15
            $('.modal-wrapper.styled .modal').css(
16
                'background',
17
                'white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll'
18
            );
19
            // If content is loaded — remove preloader
20
            if ($('.modal-content-post-wrapped').is('.load')) {
21
                $('.modal.show').css('background', 'white');
22
            }
23
        }
24
    });
25
 
26
});

Wichtiger Hinweis. Der obige Code verwendet jQuery und das jquery-watch-Plugin. Bevor Sie ihn einfügen, stellen Sie sicher, dass jQuery eingebunden ist und vor Ihrem Skript lädt. Auf modernen WordPress-Seiten wird jQuery mit dem Kern ausgeliefert, sodass keine zusätzlichen Includes nötig sind. Fügen Sie das Skript per wp_enqueue_script() in functions.php hinzu, nicht direkt im Beitrags-Body.

Was zu tun ist, wenn das modale Fenster nicht lädt

In über 6 Jahren Arbeit mit WordPress-Modalen habe ich eine Liste typischer Ursachen zusammengestellt, von offensichtlich bis obskur. Hier ist eine Checkliste zur Diagnose:

• jQuery ist nicht geladen oder verursacht Konflikte. Prüfen Sie die Browser-Konsole (F12 → Konsole). Der Fehler $ is not defined bedeutet, dass jQuery entweder nicht eingebunden ist oder Ihr Skript zu früh ausgeführt wurde. Lösung: wp_enqueue_script('my-modal', ..., array('jquery')).
• Das Seiten-Template gibt the_content() nicht aus. Einige benutzerdefinierte Templates wie page-modal.php verwenden get_the_content() anstelle von the_content(). Ersteres wendet keine Filter an, sodass Shortcodes und Formatierung fehlschlagen.
• Konflikt mit Caching-Plugins. Wenn Sie AJAX-Inhalte laden und die Seite WP Rocket oder LiteSpeed Cache verwendet, deaktivieren Sie das Caching für die URLs, die das modale Fenster abruft.
• CORS-Fehler beim Laden einer externen Seite. Der Browser blockiert Anfragen an eine andere Domain. Dies wird durch Proxying über die WordPress REST API oder die Konfiguration von CORS-Headern auf dem Zielserver gelöst.
• Breakpoint. Auf mobilen Geräten wird das modale Fenster oft durch einen direkten Link ersetzt, sodass der Nutzer einfach zur Seite navigiert. Prüfen Sie die @media-Regeln in Ihrem CSS: Unter 768px erscheint das Fenster möglicherweise absichtlich nicht.

⁉️🤔 Häufig gestellte Fragen

Plugin oder eigener Code: Was soll ich für ein modales Fenster wählen?

Wenn Sie eine fertige Lösung in 5 Minuten benötigen, installieren Sie Popup Maker. Es deckt die meisten typischen Szenarien ab: Anmeldeformulare, schnelle Vorschauen, Benachrichtigungen. Wenn Sie ein nicht standardmäßiges Design, komplexe AJAX-Logik oder Performance-Anforderungen haben (kein einziges zusätzliches Kilobyte), schreiben Sie es selbst. Eigener Code gibt volle Kontrolle, kostet aber mehrere Stunden Entwicklungszeit. Popup Maker fügt einer Seite etwa 40-60 KB an Skripten und Stilen hinzu. Eine individuelle Lösung passt in 2-5 KB, ein Unterschied um den Faktor 10-30. Für eine stark frequentierte Seite ist das spürbar.

Kann ich eine externe Seite in einem Popup-Fenster öffnen?

Ja, aber mit Einschränkungen. WordPress proxyfiziert standardmäßig keine Drittanbieter-Inhalte. Wenn die Zielseite den CORS-Header Access-Control-Allow-Origin: * nicht sendet, blockiert der Browser die AJAX-Anfrage. Die Lösung besteht darin, einen eigenen serverseitigen Proxy mit wp_remote_get() zu schreiben oder einen REST-API-Endpunkt einzurichten, der den Inhalt abruft und an Ihr Frontend liefert. Für öffentliche APIs und vertrauenswürdige Quellen ist CORS in der Regel bereits konfiguriert. Die GitHub-API und die WordPress.org-API sind für das Lesen von jeder Domain aus offen.

Wie wirkt sich die Verwendung modaler Fenster auf SEO aus?

Inhalte innerhalb eines per AJAX geladenen modalen Fensters sind für Suchmaschinen weniger sichtbar als statisches HTML auf einer eigenen Seite. Die Regel ist einfach: Wenn der Inhalt für das Ranking wichtig ist, sollte er eine eigene kanonische Seite mit einer direkten URL haben. Nutzen Sie das modale Fenster als zusätzlichen Einstiegspunkt, nicht als Ersatz für eine Seite. Googlebot führt seit 2019 JavaScript aus, aber die Indexierung dynamisch geladener Inhalte ist immer noch instabil. Gehen Sie besser auf Nummer sicher und haben Sie eine statische Version.

Warum wurde WP Post Popup geschlossen und was kann es ersetzen?

Das Plugin wp-post-modal wurde im Oktober 2023 aufgrund einer nicht behobenen Sicherheitslücke geschlossen. Falls es noch auf Ihrer Seite installiert ist, entfernen Sie es sofort. Ziehen Sie als Ersatz Popup Maker (kostenlos, universell) oder die in diesem Artikel beschriebene individuelle Lösung in Betracht. Beide Optionen sind sicher und werden 2026 unterstützt.

Ist jQuery für ein modales Fenster in WordPress erforderlich?

Nein, es ist nicht erforderlich. Modernes natives JavaScript (ES6+) deckt alle notwendigen Operationen ab: fetch() für AJAX, classList zum Umschalten von CSS-Klassen und addEventListener zur Behandlung von Klicks. Allerdings ist jQuery immer noch tief in den WordPress-Kern und die meisten Themes integriert, sodass es einfacher ist, das zu verwenden, was bereits geladen ist, als ein weiteres Framework einzubinden.

Modale Fenster im Jahr 2026: Was installieren und wie bauen

Wenn Sie diesen Abschnitt erreicht haben, haben Sie drei fertige Wege. Popup Maker ist für diejenigen, die eine „Einrichten und Vergessen"-Lösung benötigen. 700.000 aktive Installationen lügen nicht: Das Plugin ist stabil, flexibel und in der Basisversion kostenlos. Bootstrap 5 Modal: Wenn Ihr Theme bereits auf Bootstrap läuft, nutzen Sie die native Komponente und schaffen Sie keine zusätzlichen Abhängigkeiten. Reiner Code ist für Perfektionisten und alle, die jede Zeile kontrollieren wollen.

Persönlich wähle ich 2026 den zweiten oder dritten Weg. Plugins für modale Fenster lösen das Problem hier und jetzt, aber eigener Code löst es für immer, ohne Updates, Sicherheitslücken oder Konflikte. Und 2-5 KB statt 40-60 KB pro Seite sind ein Argument, das schwer zu ignorieren ist.

Probieren Sie beide Ansätze auf einer Test-Subdomain aus und vergleichen Sie. WordPress hat 20 Jahre überlebt, gerade weil es Wahlfreiheit bietet, von null Code bis zum fertigen Plugin in einer Minute.