So verwenden Sie Bootstrap in WordPress (2026): 4 Methoden, Schritt für Schritt - DEUTSCH

In den meisten Bootstrap-in-WordPress-Tutorials werden Sie immer noch aufgefordert, einen Stylesheet-Link in header.php einzufügen und daneben jQuery zu laden. Beide Bewegungen sind falsch 2026. Bootstrap 5 jQuery als Abhängigkeit gelöscht, und die Bearbeitung von header.php wird direkt gelöscht, wenn Ihr Theme das nächste Mal aktualisiert wird. Diese Anleitung zeigt die aktuelle Vorgehensweise, mit Code, der auch nach einem Update noch funktioniert.

Schnelle Antwort: Für die meisten Websites, in die Warteschlange stellen Bootstrap 5.3.8 über ein CDN in der Functions.php Ihres Themes (etwa zehn Zeilen, kein jQuery). Erstellen eines vollständig benutzerdefinierten Themes? Beginnen Sie stattdessen mit einem Bootstrap-basierten Starter wie Understrap. Ich möchte nur Bootstrap-Komponenten im Blockeditor? Installieren Sie ein Bootstrap-Blocks-Plugin und überspringen Sie den Code vollständig.

Zuletzt überprüft: Juni 2026. Bootstrap-Version (5.3.8) und Codebeispiele, die anhand der offiziellen Dokumente überprüft wurden.

Was Bootstrap tatsächlich macht (und was WordPress bereits beherrscht)

Bootstrap ist kostenlos, Open Source Front-End-CSS-Framework. Es liefert ein reaktionsfähiges Raster, fertige Komponenten (Navigationsleisten, Karten, Modalitäten, Tasten), und Dienstprogrammklassen für Abstand und Layout. All das erhalten Sie, ohne viel CSS von Hand schreiben zu müssen. Es ist Design und Layout, nichts mehr.

WordPress ist das Content-Management-System: Beiträge, Seiten, Benutzer, die Datenbank, das Admin-Dashboard. Es entscheidet, welche Inhalte vorhanden sind und wo sie leben. Bootstrap entscheidet, wie dieser Inhalt auf dem Bildschirm aussieht. Sie überschneiden sich nicht, Genau deshalb passen sie gut zusammen, und auch, warum WordPress Bootstrap niemals für Sie bündelt. Man muss es selbst einbringen.

Das ist es, was die Leute vermissen: Dies ist eine Entscheidung des Entwicklers oder Designers, keine Click-a-Button-Funktion. Wenn Sie ein Thema von Hand programmieren, Mit Bootstrap sparen Sie Wochen. Wenn Sie lieber Blöcke herumziehen möchten, Möglicherweise benötigen Sie überhaupt kein Framework. Unser Leitfaden für WordPress vs. Website-Builder ist in diesem Fall der bessere Ausgangspunkt.

Noch eine Tatsache, die es wert ist, sofort behoben zu werden. Bootstrap 5 jQuery entfernt. Das JavaScript ist jetzt einfach (Vanille) JS. Wenn Sie in einem Tutorial aufgefordert werden, jQuery zu laden, damit Bootstrap funktioniert, In diesem Tutorial wird Bootstrap beschrieben 4 oder älter. Überspringen Sie es.

Methode 1: Fügen Sie Bootstrap über CDN in „functions.php“ hinzu (Empfohlen)

Dies ist die richtige Standardeinstellung für fast jeden. Ein CDN (Netzwerk für die Bereitstellung von Inhalten, eine Reihe von Servern, die Dateien in der Nähe Ihrer Besucher hosten) dient Bootstrap, Sie lagern also selbst nichts ein. Und Sie laden es auf die WordPress-Art, durch in die Warteschlange stellen. Das bedeutet, eine Datei zu registrieren, damit WordPress sie an der richtigen Stelle druckt, ohne jegliche Änderungen an header.php.

Fügen Sie dies zu Ihrem hinzu Funktionen.php des untergeordneten Themas. Ein Kinderthema ist wichtig: Bearbeiten Sie das übergeordnete Element und Ihre Änderungen verschwinden beim nächsten Update.

Funktion htg_enqueue_bootstrap() {
    wp_enqueue_style(
        'Bootstrap',
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
        Array(),
        '5.3.8'
    );
    wp_enqueue_script(
        'Bootstrap',
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
        Array(),
        '5.3.8',
        wahr
    );
}
add_action( 'wp_enqueue_scripts', 'htg_enqueue_bootstrap' );

Fünf Dinge in diesem Ausschnitt verdienen ihren Platz:

• Array(), kein Array(„jquery“). Bootstrap 5 hat keine jQuery-Abhängigkeit. Wenn Sie einen hinzufügen, wird Code geladen, den Sie nicht benötigen.
• Das .bundle.min.js Datei enthält Popper, die kleine Bibliothek, die Dropdowns positioniert, Tooltips, und Popovers. Verwenden Sie die Nicht-Bundle-Datei nur, wenn Sie diese Komponenten überspringen.
• wahr lädt am Ende das Skript in die Fußzeile, Es blockiert also nicht das Rendern Ihrer Seite.
• Das „5.3.8’ Versionszeichenfolge Weist WordPress an, den Cache korrekt zu löschen, wenn Sie später ein Upgrade durchführen.
• wp_enqueue_scripts ist der vordere Haken. Es wird Ihren Admin-Bereich nicht berühren.

Speicher die Datei, Laden Sie Ihre Website neu, und Quelle ansehen. Das Bootstrap-Stylesheet und das Skript sollten automatisch gedruckt werden. Zur Bestätigung, dass JavaScript ausgeführt wird, Legen Sie ein Bootstrap-Akkordeon oder -Modal auf einer Seite ab und klicken Sie darauf. Wenn es animiert, Du bist fertig.

Die CDN-Route bedeutet auch, dass Bootstrap von Servern in der Nähe Ihres Besuchers ankommt und häufig bereits von einer anderen Website in dessen Browser zwischengespeichert wird. Wenn die Seitengeschwindigkeit Ihre Priorität ist, Dieser Vorteil ist es wert, verstanden zu werden, und unsere Aufschlüsselung, wie CDN-Hosting wirkt sich auf die Ladezeiten aus erklärt die Kompromisse in einfachen Worten.

Methode 2: Bootstrap lokal hosten (Für Kontrolle und Privatsphäre)

CDNs sind praktisch, Sie geben jedoch eine Aufzeichnung Ihrer Besucher an Dritte weiter’ IP-Adressen. Für DSGVO-sensible Websites in der EU, oder jeder, der keine externen Anfragen haben möchte, Das Hosten der Dateien selbst ist sauberer. Sie sind auch nicht mehr von der Betriebszeit anderer abhängig.

Die Schritte:

• Laden Sie die herunter Bootstrap kompiliert 5.3.8 Paket von getbootstrap.com (das “kompiliertes CSS und JS” herunterladen, nicht die Quelldateien).
• Fügen Sie bootstrap.min.css in Ihr Theme ein unter /Vermögenswerte/css/ und bootstrap.bundle.min.js hinein /Vermögenswerte/js/.
• Ändern Sie die beiden CDN-URLs im obigen Snippet mit get_template_directory_uri in lokale Pfade(), zum Beispiel get_template_directory_uri() . „/assets/css/bootstrap.min.css“. Verwenden Sie get_stylesheet_directory_uri() stattdessen, wenn die Dateien in einem untergeordneten Thema leben.

Alles andere bleibt identisch. Das Einzige, was Sie verlieren, ist der Shared-Cache-Vorteil. Das, was Sie gewinnen, ist das volle Eigentum: Kein kaputtes Layout, wenn ein CDN einen schlechten Tag hat, und nichts, was Besucherdaten außerhalb der Website preisgibt.

Methode 3: Beginnen Sie mit einem Bootstrap-Starter-Theme

Methoden 1 und 2 Schrauben Sie Bootstrap an ein vorhandenes Thema an. Wenn Sie ein Thema von Grund auf erstellen, nichts verschrauben. Beginnen Sie mit einer Basis, die Bootstrap bereits für Sie in die Vorlagenstruktur von WordPress integriert.

Untergurt ist die langfristige Wahl. Es schweißt den klassischen Underscores-Starter (das schlichte Theme, das WordPress-Entwickler seit Jahren verwenden) zu Bootstrap, mit bereits konfiguriertem Sass, sodass Sie einen benutzerdefinierten Build neu kompilieren können. WP Bootstrap Starter ist das leichtere, freundlichere Option für ein erstes benutzerdefiniertes Theme. Salbei von Roots liegt am fortgeschrittenen Ende: Es verwendet Blade-Templates und eine moderne Build-Pipeline, und es ist Framework-agnostisch, sodass Sie Bootstrap ausführen oder austauschen können.

Die Auszahlung ist real. Ein Starter-Theme gibt Ihnen eine funktionierende Navigationsleiste, eine Kommentarvorlage, Pagination, und WooCommerce-Hooks, die bereits das Markup von Bootstrap sprechen. Sie überspringen das mühsame Klempnern und schreiben nur die Teile, die Ihr Design zu Ihrem eigenen machen. Die Kosten sind eine Lernkurve: Sie müssen mit Sass vertraut sein, ein Terminal, und Neuzusammenstellung von Vermögenswerten.

Eine ehrliche Einschränkung. Bevor Sie sich auf einen Starter festlegen, Überprüfen Sie das Datum der letzten Aktualisierung auf GitHub. Ein Starter, der seit zwei Jahren keine Veröffentlichung mehr herausgebracht hat, könnte immer noch Bootstrap ins Visier nehmen 4 und seine jQuery-Gewohnheiten. Das führt Sie direkt zurück in das veraltete Lager, aus dem Sie dieser Leitfaden herauszuholen versucht.

Methode 4: Verwenden Sie ein Bootstrap-Blocks-Plugin (Kein Code)

Kein Entwickler? Sie können das Raster und die Komponenten von Bootstrap weiterhin im Standard-WordPress-Blockeditor abrufen. Plugins wie Blockeditor Bootstrap-Blöcke Fügen Sie Bootstrap-basierte Zeilen hinzu, Säulen, Tasten, und Container als native Blöcke. Sie erstellen reaktionsfähige Layouts, indem Sie Blöcke ziehen, und das Plugin stellt Bootstrap hinter den Kulissen in die Warteschlange.

Dies ist der Weg für Inhaltsredakteure und Kleinunternehmer, denen das Aussehen von Bootstrap gefällt, sie aber niemals „functions.php“ öffnen möchten. Es ist auch die einzige Methode, die natürlich mit dem Blockeditor funktioniert, da die anderen drei davon ausgehen, dass Sie die Vorlagen manuell gestalten.

Seien Sie realistisch, was die Decke angeht, obwohl. Ein Blocks-Plugin stellt Ihnen die Komponenten von Bootstrap zur Verfügung, nicht die volle Framework-Freiheit, die ein Entwickler durch Methoden erhält 1 durch 3. Wenn Ihr Ziel ein pixelgenaues individuelles Design ist, Du wirst daraus herauswachsen. Wenn Sie einfach nur sauber wollen, Responsive Abschnitte ohne Code, es erfüllt seinen Zweck. Und wenn “kein Code” ist wirklich das, wonach Sie suchen, wiegen Sie es gegen ein KI-WordPress-Builder. Dieser Weg führt möglicherweise schneller zu einem fertigen Layout als das Erlernen von Bootstrap-Klassen überhaupt.

Schreiben Sie nun Bootstrap-Markup: Das Raster in der Praxis

Das Laden von Bootstrap ist die halbe Arbeit. Die andere Hälfte schreibt ihre Klassen in Ihre Seiten, und die meisten Tutorials hören auf, bevor sie es Ihnen zeigen. Wenn Sie Methoden verwendet haben 1 durch 3, Sie fügen Markup in den Vorlagendateien Ihres Themes oder in einem benutzerdefinierten HTML-Block auf einer beliebigen Seite oder einem beliebigen Beitrag hinzu. (Das Plugin von Methode 4 erstellt das Markup für Sie, Sie können diesen Teil also überspringen.)

Bootstrap basiert auf a 12-Säulenraster. Drei verschachtelte Klassen steuern es: ein .Container für die äußere Hülle, eine Zeile darin, und .col-Elemente für jede Spalte. Hier ist ein Layout, das auf Telefonen gestapelt und aufgeteilt werden kann 8 und 4 Spalten auf Tablets und höher:

<div class ="Container">
  <div class ="Reihe">
    <div class ="col-md-8">Hauptinhalt</div>
    <div class ="col-md-4">Seitenleiste</div>
  </div>
</div>

Das col-md- Präfix ist der reagierende Auslöser. Unterhalb des mittleren Haltepunkts (768px), Beide Spalten gehen über die volle Breite und stapeln sich. Bei 768px und breiter, sie sitzen nebeneinander. Tauschen Sie md gegen sm aus, lg, oder xl, um dorthin zu gelangen, wo dieser Schalter stattfindet. Eine Zeile mit Klassennamen ersetzt die Medienabfragen, die Sie sonst von Hand schreiben würden.

Komponenten funktionieren auf die gleiche Weise. Kopieren Sie das Markup für eine Karte, Navigationsleiste, oder modal direkt aus den Dokumenten von Bootstrap, Fügen Sie es in Ihre Vorlage ein, und die Stile, die Sie in die Warteschlange gestellt haben, gelten sofort. Keine zusätzliche Einrichtung pro Komponente.

Der Konflikt, vor dem dich niemand warnt

Hier gehen die meisten Bootstrap-in-WordPress-Projekte schief. Ihr aktives Theme verfügt bereits über ein eigenes CSS. Wenn Bootstrap oben geladen wird, Die beiden streiten sich um dieselben Klassennamen und Basisstile. Knöpfe sehen aus. Abstandspausen. Ein Layout, das gestern noch in Ordnung war, bricht zusammen.

Fast alles ist auf drei Kollisionen zurückzuführen:

• Die .container-Klasse. Viele Themes definieren ihren eigenen .container mit einer anderen maximalen Breite. Bootstrap definiert es neu, und wer zuletzt lädt, gewinnt. Dadurch springen die Layouts hin und her.
• Basis wird zurückgesetzt. Der Neustart von Bootstrap gestaltet rohe Elemente wie den Körper neu, Überschriften, und Listen. Dadurch kann die Typografie Ihres Themas stillschweigend außer Kraft gesetzt werden.
• Doppelte Gitter. Wenn Ihr Theme bereits ein Raster verwendet (Flexbox oder CSS Grid), Das Raster von Bootstrap wird oben gestapelt, und Elemente werden schließlich in zwei konkurrierenden Systemen verschachtelt.

Sie haben zwei saubere Korrekturen. Das erste ist Umfang Bootstrap: Wickeln Sie die Abschnitte, die Sie formatieren möchten, in eine übergeordnete Klasse ein (Ein gängiges Muster nennt es Bootstrap-ISO). Kompilieren Sie dann Bootstrap, sodass seine Regeln nur innerhalb dieses Wrappers gelten. Der Rest Ihres Themas wird nicht mehr berührt. Der zweite Fix, oft der klügere, ist zu Erstellen Sie ein benutzerdefiniertes Bootstrap-Bundle. Es importiert nur die Teile, die Sie verwenden, das Gitter und ein paar Komponenten, und lässt Reboot aus. Weniger CSS, weniger Kollisionen, schnellere Seiten. Aus diesem Grund auch ein Einstiegsthema (Methode 3) vermeidet das Problem von Anfang an: Es basiert auf Bootstrap, damit nichts kollidiert.

Welche Methode sollten Sie wählen??

Passen Sie die Methode an das an, was Sie tatsächlich bauen. Drei häufige Fälle:

• Sie betreiben eine fertige Site mit einem Drittanbieter-Theme und benötigen ein paar Bootstrap-Komponenten. Verwenden Sie die Methode 1 (CDN-Warteschlange) innerhalb eines untergeordneten Themas. Greifen Sie nicht nach einem Einstiegsthema; Es ist übertrieben, die gesamte Website neu zu erstellen, um ein Modal hinzuzufügen. Wenn Konflikte auftreten, Scope Bootstrap wie oben beschrieben.
• Sie sind ein Entwickler, der ein benutzerdefiniertes Theme von Grund auf erstellt. Verwenden Sie die Methode 3 (Untergurt oder Salbei). Durch das manuelle Einreihen von Bootstrap in ein leeres _s-Theme wird nur das neu erstellt, was Understrap Ihnen bereits bietet, abzüglich der getesteten WooCommerce- und Navbar-Vorlagen.
• Sie sind Content-Editor oder Shop-Inhaber und möchten responsive Layouts ohne Code. Verwenden Sie die Methode 4 (ein Block-Plugin). Das Bearbeiten von Functions.php ist für Ihren Anwendungsfall das Risiko nicht wert. Wenn Sie ein Geschäft betreiben, Kombinieren Sie es mit einem auf den Job abgestimmten Hosting. Unsere Hinweise zu WordPress-E-Commerce-Hosting Erläutern Sie, warum ein Bootstrap-Frontend immer noch ein schnelles Backend benötigt.

Eine Datenschutz- oder Compliance-Anforderung hat Vorrang vor allen dreien. Wenn Sie Besucherdaten nicht an ein externes CDN senden können, Wechseln Sie die von Ihnen gewählte Methode zum lokalen Hosting von Methode 2.

Häufig gestellte Fragen

Benötige ich noch jQuery, um Bootstrap zu verwenden? 5 in WordPress?

Nein. Bootstrap 5 jQuery wurde gelöscht und läuft auf Vanilla-JavaScript. Wenn Sie das Skript in die Warteschlange stellen, Lassen Sie das Abhängigkeitsarray leer (Array()), kein Array(„jquery“). Durch das Hinzufügen von jQuery wird zusätzlicher Code geladen, den Ihre Bootstrap-Komponenten niemals aufrufen. Nur Bootstrap 4 und früher brauchte es.

Ist Bootstrap gut für WordPress? 2026?

Ja, wenn Sie ein Theme programmieren oder konsistente responsive Komponenten wünschen. Das Grid und die Dienstprogramme von Bootstrap verkürzen die Entwicklungszeit und funktionieren in jedem modernen Browser ohne zusätzliche Korrekturen. Es ist weniger nützlich, wenn Sie mit dem Blockeditor oder einem Seitenersteller erstellen, da diese Tools bereits responsive Layouts verarbeiten. Passen Sie es an Ihre tatsächliche Arbeitsweise an.

Verlangsamt das Hinzufügen von Bootstrap eine WordPress-Site??

Es kann, wenn Sie das gesamte Framework für zwei Komponenten laden. Das vollständig minimierte CSS und JS sorgen für echtes Gewicht. Laden Sie sie von einem CDN, Verschieben des Skripts in die Fußzeile, Und wenn Sie ein benutzerdefiniertes Paket erstellen, das nur die Teile enthält, die Sie verwenden, bleibt der Erfolg gering. Sie können Bootstrap auch nur dort laden, wo es benötigt wird: Schließen Sie die Warteschlange in eine Bedingung wie is_page ein() Daher wird es nicht auf jeder URL ausgeliefert. Ein aufgeblähtes Thema, das über dem vollständigen Bootstrap gestapelt ist, ist das eigentliche Geschwindigkeitsproblem, nicht Bootstrap allein.

Kann ich Bootstrap mit dem WordPress-Blockeditor verwenden??

Ja, über ein Plugin wie Block Editor Bootstrap Blocks, wodurch Bootstrap-Zeilen hinzugefügt werden, Säulen, und Schaltflächen als native Blöcke. Bootstrap manuell in die Warteschlange stellen (Methode 1) stellt seine Komponenten nicht im Editor bereit, Sie würden also Klassennamen manuell in benutzerdefinierten HTML-Blöcken schreiben. Für Editor-First-Workflows, Die Plugin-Route ist die praktische.

Soll ich ein Bootstrap-CDN verwenden oder die Dateien lokal hosten??

Nutzen Sie das CDN für mehr Komfort und eine Chance auf gemeinsames Browser-Caching. Hosten Sie lokal, wenn Sie DSGVO- oder Datenschutzanforderungen haben, Ich möchte keine externen Anfragen, oder Sie möchten nicht auf die Betriebszeit eines anderen Netzwerks angewiesen sein. Der Code ist nahezu identisch; Sie tauschen einfach die CDN-URLs gegen get_template_directory_uri aus() Pfade zu Dateien in Ihrem Theme.

Holen Sie sich die richtige Methode, Nicht nur der Kodex

Bootstrap und WordPress passen perfekt zusammen, wenn Sie nicht mehr den Tutorials aus dem Jahr 2018 folgen. Enqueue-Version 5.3.8 in einem Kinderthema, Löschen Sie die jQuery-Abhängigkeit, und gestalten Sie Ihre Stile so, dass sie Ihrem Thema nicht widersprechen. Das deckt die überwiegende Mehrheit der realen Projekte ab. Wählen Sie ein Einstiegsthema nur aus, wenn Sie von Grund auf neu erstellen, und ein Block-Plugin nur, wenn Sie keinen Code verwenden.

Wenn dies Teil eines größeren Builds ist, Einige verwandte Leitfäden gehen tiefer. Vergleichen Sie verwaltetes WordPress-Hosting in den USA erfahren Sie, wo Sie ein benutzerdefiniertes Design ausführen können. Und prüfen Sie noch einmal, ob Sie überhaupt programmieren müssen, in unserem Vergleich von Website-Buildern im Vergleich zu WordPress. Ein Framework zahlt sich erst dann aus, wenn der Rest des Stacks, Hosting inklusive, kann damit mithalten.