Workshop: Eigenes WordPress Theme entwickeln

Die Beiträge der Serie im Überblick:

• Webentwicklung Teil 1 – HTML Grundlagen – Deine erste eigene Website
• Webentwicklung Teil 2 – CSS – Styling für Websites
• Webentwicklung Teil 3 – JavaScript – Interaktion im Internet
• Webentwicklung Teil 4 – WordPress als Content Management System
• Webentwicklung Teil 5 – Eigene Themes für WordPress entwickeln
• Webentwicklung Teil 6 – Eigenes Plugin für WordPress – Custom PostType (noch ausstehend)

Wie schon im letzten Beitrag erklärt, handelt es sich bei WordPress um ein Content Management System. Das bedeutet, dass wie uns nicht mehr mit Software auseinander setzen müssen sondern uns vor allem auf den Content konzentrieren müssen.

Allerdings können wir WordPress natürlich trotzdem anpassen. Das können wir natürlich im Backend indem wir neue Themes installieren. Diese Themes können entweder fertige Themes aus dem Internet sein oder aber von uns selbst entwickelte Designs.

Eine wichtige Information noch vorab. Bei der beschriebenen Methode handelt es sich um eine von unzähligen. Was wir hier machen soll einen Einstieg in ein sehr komplexes Thema geben. Ich beschreibe hier einen möglichen Einstieg. Dabei ging es mir vor allem darum, dass es möglichst einfach gehalten ist. Sicher gibt es an vielen Stellen Potential für Verbesserung.

WordPress debugging aktivieren

Bevor wir anfangen zu programmieren sollten wir in WordPress die Debug-Ausgaben aktivieren. Als Debugging wird der Prozess bezeichnet, einen Fehler in einer Software oder einem System zu finden. WordPress liefert standardmäßig keine Fehlermeldungen. Das ist vor allem eine Einstellung um WordPress gegen Angreifer abzusichern, die sonst an wertvolle Informationen über unsere Installation kommen können. Zum entwickeln müssen wir die Debug-Ausgaben in unserer lokalen Entwicklungsinstanz allerdings einschalten.

Dazu müssen wir die Datei wp-config.php ändern. Wenn eure lokale Instanz genau wie im letzten Blogpost eingerichtet wurde, solltet ihr diese Datei unter C:\xampp\htdocs finden.

// C:\xampp\htdocs\wp-config.php

define( 'WP_DEBUG', false ); // false ersetzten durch true

Das Statement define wird in dieser Zeile verwendet um eine Konstante zu definieren. Die Konstante WP_DEBUG wird innerhalb von WordPress verwendet um Debug-Outputs zu steuern. Sie muss auf true gesetzt werden um die Ausgaben zu erzeugen. Dazu ersetzen wir den zweiten Parameter false durch true. Damit sollten wir mitbekommen, wenn etwas schief geht und sehen wo der Fehler liegt.

Dateistruktur

Die wichtigste Datei in einem WordPress Plugin ist die style.css Datei. Hier werden alle wichtigen Metadaten für das Theme bereitgestellt. Außerdem gibt es noch eine function.php in der bestimmte Features freigeschaltet und definiert werden. Ich liste erstmal die wichtigsten Dateien auf, Dabei steht ein * für einen Platzhalter. Um keine Fehlermeldung zu bekommen werden mindestens die ersten beiden Dateien benötigt.

- wp-content
  |- themes
  |  |- MeinTheme
  |     |- style.css // benötigt
  |     |- index.php // benötigt
  |     |- function.php
  |     |- header.php
  |     |- footer.php
  |     |- page-*.php
  |     |- archive-*.php
  |     |- single-*.php
  |
  |- plugins

style.css

Dieser Datei kommt in WordPress eine besondere Bedeutung zu. Am Anfang der style.css stehen die Informationen zu diesem Theme. Diese sind in einem Kommentar zeilenweise eingetragen und werden im Backend von WordPress angezeigt.

/*
Theme Name: Mein erstes Theme
Theme URI: /2020/04/19/workshop-eigenes-wordpress-theme-entwickeln/
Author: joni
Author URI: https://makerspace.experimenta.science
Description: Das Theme wurde beim Online Workshop des Maker Space entwickelt.
Version: 1.0
License: CC0
License URI: https://creativecommons.org/publicdomain/zero/1.0/deed.de
Text Domain: mse-workshop
Tags: simple

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

index.php

Die index.php ist quasi das ultimative Fallback. Wenn WordPress sonst keine passende Datei findet wird diese als Template verwendet. Daher gehört die index.php genau so wie die style.css zu den beiden Pflichtdateien.

In der Index.php muss nicht zwingend etwas stehen. Allerdings sieht unsere Website dann sehr leer aus. Daher schreiben wir einige Dinge hinein.

<?php get_header(); ?>


<?php while (have_posts()) : the_post(); ?>

    <h1><?php the_title() ?></h1>
    <p>
        <?php the_content(); ?>
    </p>

<?php endwhile; ?>

<?php get_footer(); ?>

Dieser Code liefert uns alle Inhalte der Startseite. Im WordPress kann konfiguriert werden, ob die Startseite eine statische Seite oder die letzten Beiträge enthalten soll. Standardmäßig werden hier die letzten Beiträge angezeigt. In diesem Fall erhalten wir jetzt eine Reihe an Überschriften mit dem Inhalt der jeweiligen Beiträge darunter.

Damit es nicht so leer aussieht habe ich ein paar Beispieleinträge angelegt. Ihr könnt das entweder genau so tun oder meine Beiträge importieren. Zum importieren müsst ihr unter Werkzeuge -> Daten importieren meine Datei auswählen und hochloaden. Die Datei findet ihr hier:

https://raw.githubusercontent.com/maker-space-experimenta/workshop-wordpress-theme/master/exports/posts-export.xml

Die beiden Aufrufe get_header() und get_footer() laden zwei weitere Dateien. Diese Dateien heisen jeweils header.php bzw footer.php

header.php

In dieser Datei sind der HTML-Header und mögliche Navigationsleisten, die auf allen Seiten sichtbar sein sollen, untergebracht. Allerdings wird in WordPress der Header nicht von Hand zusammen gebaut. Alle Styles sollten über die WordPress API eingebunden werden. Das passiert in der functions.php um die wir uns gleich noch kümmern. Hier im Header kommen vor allem die META-Tags und der Aufruf der wp_head() Funktion. Dieser Aufruf erstellt den kompletten Header indem er Hooks (dazu mehr weiter unten) aus WordPress einbindet.

Für unsere Navigation verwenden wir die Funktion wp_nav_menu() um den HTML Code zu generieren. Sie erstellt ein Menü aus der Konfiguration im Customizer von WordPress. Dieses Menü wird mit Hilfe der Klasse wp_bootstrap_navwalker() erstellt. Diese Klasse müssen wir allerdings erst anlegen und den Inhalt von Github kopieren. Auch diese Klasse wird in der functions.php eingebunden.

<!doctype html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <?php wp_head(); ?>
</head>

<body>

    <?php
    wp_nav_menu(array(
        'theme_location'    => 'header-menu', // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
        'menu_id'        => 'navigation',
        'depth'          => 3,
        'container'      => false,
        'menu_class'     => 'nav',
        //Process nav menu using our custom nav walker
        'walker'         => new wp_bootstrap_navwalker()
    ));
    ?>

functions.php

In dieser Datei werden verschiedene Features des Themes aktiviert und Callbacks gesetzt. Unter anderem werden hier die CSS und JavaScript Dateien registriert, die im Theme verwendet werden sollen. Das passiert vor allem indem Hooks verwendet werden.

<?php

/**
 * create the menus for this theme to be configured in customizer in backend
 */
function register_my_menus()
{
  register_nav_menus(
    array(
      'header-menu' => __('Header Menu')
    )
  );
}
add_action('init', 'register_my_menus');


/**
 * Enqueue scripts and styles for the theme
 */
function wpdocs_theme_name_scripts()
{
  wp_enqueue_style('bootstrap', get_template_directory_uri() . '/vendors/bootstrap/css/bootstrap.min.css');
  wp_enqueue_script('bootstrap', get_template_directory_uri() . '/vendors/bootstrap/js/bootstrap.min.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'wpdocs_theme_name_scripts');


/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
	require_once get_template_directory() . '/classes/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

Andere Dateien

Alle anderen Dateien sind vergleichsweise unspektakulär. Ihr findet alles auch nochmal im oben verlinkten Github Repository.

In der Footer.php sind noch die abschließenden Informationen sowie ein möglicherweise vorhandener Footer enthalten.

Interessant sind noch die Datein für die Einzelansichten. Da gibt es z.B. die page.php die dazu dient einzelne Seiten anzuzeigen. Seiten können separat von Beiträgen angelegt und verwaltet werden.

Die Datei single.php wird genutzt um einzelne Beiträge anzuzeigen.

Hooks in WordPress

WordPress arbeitet an sehr vielen Stellen mit Hooks. Das sind bestimmte Stellen, an denen sich Plugins, Themes und anderer Code von uns einhängen kann und das Verhalten von WordPress beeinflussen kann. Eine Liste mit allen Hooks findet ihr hier

https://codex.wordpress.org/Plugin_API/Action_Reference

An dieser Stelle wollen wir die Hooks durchgehen, die in unserem Theme verwendet werden. Im Theme werden diese Aufrufe im normalfall in der functions.php gemacht. Und genau diese Aufrufe wollen wir uns ansehen.

Die erste Hook ist hier die init – Hook. Diese Hook wird augerufen bevor die ersten Header gesendet werden. Also irgendwo zwischen dem Prüfen der Zugriffsrechte und dem eigentlichen generieren des HTML. In unserem Theme wird sie hier verwendet um das Menü definiert. Dabei wird WordPress mitgeteilt, dass es ein Menü geben soll und welchen Name es tragen soll.

Die zweite Hook ist bei uns die wp_enqueue_scripts – Hook. Sie dient dazu unsere Styles und Scripte einzubinden. Sie wird aufgerufen, wenn WordPress den HTML-Header erstellt.

Die dritte Hook ist after_setup_theme und wird geladen, sobald das Theme geladen ist. Sie dient üblicherweise dazu die Konfiguration des Themes zu manipulieren und allgemeine Features des Themes zu registrieren. Hier wird genutzt um eine Klasse zu laden, die später an anderer Stelle verwendet wird.