WordPress-Theme erstellen

Veröffentlicht von Marcel - 1. November 2017

Ein einfaches WP-Theme lässt sich mit wenig Programmieraufwand schnell und einfach realisieren. Hier gibt's einen Überblick.

Basiert auf html, js, css & php
Auch „neuere“ Methoden nutzbar: OOP, REST API
Unterteilung in Core, Theme & Plugins
- Core: Grundgerüst, Backend, Standarfunktionen (Upload, Nutzer…)
- Theme: Layout & Aussehen der Website
- Plugin: Funktionserweiterungen (Shop, Cache, Kontaktformular…)
Themes müssen eine gewisse Struktur vorweisen und einige Dateien beinhalten
Template Hierarchie
- oindex.php -> archive.php -> category.php -> category-id-php…
WP biete viele vorgefertigte Funktionen

Vorbereitung

Ein Theme benötigt standarfmäßig nur wenige Dateien:

index.php
style.css
functions.php
header.php
footer.php

Die index.php ist der Startpunkt jedes eingehenden Requests. Gibt es keine näher spezifiezierten PHP-Dateien wir hier der Code generiert und zurückgeliefert. In dieser Datei wird dann ebenfalls header.php und footer.php eingebunden. Die style.css beinhaltet alle benötigten Stylings. Die functions.php enthält wichtige PHP-Funktionen, die im Theme benötigt werden.

Die Dateien im Überblick

In der functions.php stehen selbst geschriebene Funktionen und es können gewissen WP-Funktionalitäten genutzt werden. Standarfmäßig kann folgender Inhalt übernommen werden:

<?php
//post thumbnails
add_theme_support( 'post-thumbnails' );

//jquery
function codesession_theme_scripts() {
  wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'codesession_theme_scripts');

//nav
function codesession_menus() {
    register_nav_menus( array(
        'header-menu' => 'Header Menu'
    ) );
}
add_action( 'init', 'codesession_menus' );

//sidebar
function codesession_sidebars() {
    register_sidebar( array(
        'name' => 'Sidebar',
        'id' => 'sidebar-1',
        'description' => '',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'
    ) );
}
add_action( 'widgets_init', 'codesession_sidebars' );

Es wird zuerst eingestellt, dass das Tempalte Post Thumbnails unterstützt. Dann wird das von WP mitgelieferte jQuery eingebunden. Daraufhin werden ein Menü und eine Sidebar registriert, die dann im WP-Backend genutzt werden können. In der style.css werden logischerweise alle benötigten Stylings eingefügt. Zusätzlich werden hier Meta-Informationen zum Theme abgelgt, bspw.: Beschreibung, Lizenz, Version etc.

/*
Theme Name: Codesession-Theme
Author: Marcel
*/

img {
    max-width:100%;
}

body{
    background-color:#eee;
}

header,footer{
    background-color:#fff;
    padding-top:15px;
    padding-bottom:15px;
}

.entry-content {
    background-color:#fff;
    margin-bottom:50px;
    margin-top:50px;
    padding-top:35px;
    padding-bottom:35px;
}

a {
    color:#D34344;
}

a:hover,a:focus{
    color:#F7A811;
}

In der header.php wird, wie der Name vermuten lässt, die entsprechenden Head-Informationen angegeben:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head();?>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="<?php echo get_template_directory_uri() ?>/style.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>


<body <?php body_class(); ?>>
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 ">
                    <a href="<?php echo get_home_url(); ?>">
                        <img src="<?php echo get_template_directory_uri() ?>/images/logo.png" alt="Logo">
                    </a>
                </div>
                <div class="col-sm-6">
                    <?php wp_nav_menu(array(
                                    'theme_location' => 'header-menu',
                                    'menu_class' => 'nav navbar-nav'
                                )); ?>
                </div>
            </div>
        </div>
    </header>

Zuerst die üblichen HTML-Doc-Elemente. Wichtig ist der Aufruf der Funktion wp_head() – diese wird von vielen Plugins genutzt, um eigenen Code in die Seite zu setzen. Zusätzlich zu den Angeben, folgt hier der Anfang der Seite. Es wird der Body-Tag geöffnet und eine Struktur aufgebaut. Hier wird da u.a. das zuvor in der functions.php definierte Menü ausgespielt. In der index.php wird der Seiteninhalt ausgespielt und das Haupt-Layout definiert:

<?php get_header(); ?>
<main>
    <?php
    while ( have_posts() ) {
    the_post(); ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div class="container">
            <div class="entry-content row">
                <div class="col-sm-8">
                    <div class="codesession_thumbnail">
                        <?php the_post_thumbnail('full'); ?>
                    </div>
                    <h1><?php the_title(); ?></h1>
                    <?php the_content(); ?>
                </div>
                <div class="col-sm-4">
                    <?php get_sidebar(); ?>
                </div>
            </div>
        </div>
    </article>
    <?php } ?>
</main>
<?php get_footer();

Es werden viele WP-internen Funktionen aufgerufen. Zuerst wird der Header eingebunden. Danach folgt der sog. Default-Loop. Es wird geschaut, ob es passende Inhalte zum Aufruf gibt (Bsp.: Seite „/kontakt“ wird aufgerufen -> gibt es eine Seite in WP die /kontakt heißt). Daraufhin wird der Inhalt der entsprechenden Seite mithilfe von WP-Funktionen ausgespielt und letztlich der Footer eingebunden. In footer.php werden schließlich die zuvor geöffneten Tags im Header wieder geschlossen und wichtige Footer-Links eingefügt.

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <a href="/">
                        Kontakt
                    </a>
                     - 
                    <a href="/">
                        Impressum
                    </a>
                     -
                    <a href="/">
                        Datenschutz
                    </a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

Fertig

Mit diesen wenigen einfachen Schritten lässt sich einfach, wenn auch nicht schönes WP-Theme erstellen.

Weiterführende Links

https://developer.wordpress.org/themes/getting-started/ https://codex.wordpress.org/ https://developer.wordpress.org/reference/ https://codex.wordpress.org/Theme_Development