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.

wp-1050x700
  • 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  

Das könnte Dich auch interessieren

Betriebssysteme – Ein Überblick

Das passende Betriebssystem für den User, eine Anwendung, ein Anwendungsgebiet und und und zu finden ist nicht gerade einfach. Aus diesem Grund möchte ich heu...

Ein Ausflug in die digitale Welt der Media Favoriten

Als Mediengestalter wird man eigentlich immer in zwei Bereiche eingeteilt - Digital und Print. Doch was sind eigentlich die genauen Unterschiede? Kann ich als "...

HTML5 Canvas – Eine kleine Einführung

Der HTML Canvas beschreibt eine Fläche in unserem HTML-Dokument, in welcher Pixel frei manipuliert werden können. Das bedeutet wir können auf dieser Fläche ...