So bindest du Bootstrap in dein WordPress Theme ein

Du willst ein WordPress Bootstrap Theme erstellen? Klingt super! Bootstrap ist ein beliebtes Framework, WordPress eines beliebtes Content Management System. Ich zeige dir kurz und knapp, wie du dein WordPress Theme um Bootstrap erweiterst.

Achtung:
In diesem Beitrag siehst du die beispielhafte Einbindung von Bootstrap anhand der Version 3.3.7. Stelle sicher, dass du die aktuelle Version in deinem Snippet verwendest.

Bootstrap im WordPress Theme einbinden

Lade Bootstrap herunter und entpacke die Zip-Datei. Lege die bootstrap.min.css und die bootstrap.min.js Datei in das /css/, bzw. /js/ Verzeichnis deines WordPress Themes.

Als nächstes suchst du in deiner functions.php Datei nach dem PHP Funktionsaufruf wp_enqueue_style(). Er sorgt dafür, dass Stylesheets sicher auf deiner Seite eingebunden werden und sollte in etwa so aussehen:

wp_enqueue_style( 'wps-style', get_stylesheet_uri() );

Diesen Code musst du jetzt um zwei Funktionsaufrufe erweitern:

/* 1. Bootstrap CSS */
wp_enqueue_style( 
    'bootstrap',
    get_template_directory_uri() . '/css/bootstrap.min.css',
    array(),
    '3.3.7'
);

/* 2. Bootstrap JS */
wp_enqueue_script(
    'bootstrap',
    get_template_directory_uri() . '/js/bootstrap.min.js',
    array( 'jquery' ),
    '3.3.7', 
    true
);
  1. Einbindung der minimierte Bootstrap CSS Datei.
    Sie hat keine Abhängigkeiten und wird im HTML Code mitsamt Versionsnummer ausgegeben.
  2. Einbindung der minimierte Bootstrap JavaScript Datei.
    Sie ist Abhängig vom JavaScript Framework jQuery, wird mitsamt Versionsnummer ausgegeben und kurz vor dem schließenden body Tag (4. Parameter) eingefügt.

Das fertige WordPress Bootstrap Snippet

Damit du dir keine Gedanken um die Ladereihenfolge der Stylesheets machen musst, habe ich die Theme CSS im Snippet um die Abhängigkeit „bootstrap“ erweitert. So wird zuerst die Bootstrap CSS Datei und erst danach dein eigenes Stylesheet geladen.

function wps_scripts() {
    /* Theme CSS */
    wp_enqueue_style(
        'wps-style',
        get_stylesheet_uri(),
        array( 'bootstrap' ),
        '1.0.0'
    );
    
    /* Bootstrap CSS */
    wp_enqueue_style( 
        'bootstrap',
        get_template_directory_uri() . '/css/bootstrap.min.css',
        array(),
        '3.3.7'
    );

    /* Bootstrap JS */
    wp_enqueue_script(
        'bootstrap',
        get_template_directory_uri() . '/js/bootstrap.min.js',
        array( 'jquery' ),
        '3.3.7', 
        true
    );
}

add_action( 'wp_enqueue_scripts', 'wps_scripts' );

Kopiere dieses Snippet einfach in deine functions.php Datei und erstelle dein eigenes Bootstrap WordPress Theme.

Teile diesen Beitrag