Themes entwickeln

Es gibt verschiedene Möglichkeiten eine Theme selbst zu entwickeln – auf der Basis einer HTML-Vorlage oder eines Starter-Themes mit der Einbindung von Bootstrap.

Grundsätzlich bildet eine Struktur von mehreren Dateien welche das Grundgerüst (header.php, sidebar.php, footer.php und style.css), die Blog-Funktion (index.php, archive.php, attachment.php, author.php, category.php, single.php. tag.php) andre Inhalte (page.php, 404.php, search.php) und sonstige funktionelle Dateien (comments.php, fuctions.php) umfasst die Basis eines Themes.

Installation Starter-Theme Nach der Einrichtung von WordPress kann das Starter-Theme in die Installation hochgeladen werden. Ein simples Basis-Theme ist Underscores von Automatic. Nach der Eingabe des gewünschten Theme-Namens wird eine .zip-Datei generiert die ins Dashboard hochgeladen und aktiviert werden kann.

Bootstrap Bootstrap ist ein Open-Source-Framework für Webdesigner mit fertigen Buttons, Navigationsleisten, Grid-Systemen, Tabellen und vielem mehr. Die Basis bilden bereits formatierte CSS-Komponenten, typografische Elemente und JavaScript. Bootstrap Dateien und Code-Blöcke werden auf GitHub veröffentlicht.

Einbindung Bootstrap

Nach dem Downloaden und Entpacken der neuesten Compiled Bootstrap CSS und JS Version wird die Bootrsap-Datei in das Verzeichnis /wp-content/themes/themename geladen. Die Verzeichnisstruktur sieht dann wie folgt aus: /wp-content/themes/themename/boostrap. Um WordPress mit Bootstrap zu verknüpfen muss die functions.php Datei angepasst werden. Etwa bei Zeile 122 der Datei findet sich der Code function meintheme_scripts() hier muss der eigene Theme-Name eingesetzt werden. Abschließend muss vor der geschweiften Klammer folgender Code eingefügt werden:

// Bootstrap wp_register_script( ‚bootstrap-js‘, get_template_directory_uri() . ‚/bootstrap/js/ bootstrap.min.js‘, array( ‚jquery‘ ), ‚4.1.1‘, true ); wp_register_style( ‚bootstrap-css‘, get_template_directory_uri() . ‚/bootstrap/ css/bootstrap.min.css‘, array(), ‚4.1.1‘, ‚all‘ ); wp_enqueue_script( ‚bootstrap-js‘ ); wp_enqueue_style( ‚bootstrap-css‘ );

Nach dem Upload der aktualisierten functions.php können fertige Code-Blöcke von getbootstrap.com über den WordPress-Editorin innerhalb des Text-Tabs abgespeichert werden. Nach dem Veröffentlichen sind die Elemente im Frontend sichtbar.

Im nächsten Schritt muss die Navigationsbar mit Dropdown-Menu integriert werden. Dafür wird die class-wp-bootstrap-navwalker.php von der GitHub Respository herunter geladen und im Hauptverzeichnis des Themes integriert. Die functions.php wird am Ende um folgenden Code ergänzt:

// Register Custom Navigation Walker require_once get_template_directory() . ‚/class-wp-bootstrap-navwalker.php‘;

//Register Menu register_nav_menus( array(

‚primary‘ => __( ‚Primary Menu‘, ‚meintheme‘ ), ) );

Aus der header.php muss folgender Code entfernt <header id=“masthead“ class=“site-header“> und <!– #site-navigation -> und durch:

Nun kann das Dorpdown-Menü verwendet werden. Das Theme ist grundsätzlich einsatzfähig und kann beliebig erweitert und angepasst werden.