WordPress Theme erstellen (Teil 1)

Home / Knowledge / WordPress Theme erstellen (Teil 1)

Erste Schritte

Hier wird der erste Schritt zum eigenen WordPress-Template beschrieben. Welche Dateien und welcher Code wird benötigt, um Inhalte aus dem WordPress-Backend im Frontend wiederzugeben?

Bildschirmfoto 2014-10-27 um 15.53.06

Das ist unser erstes Ziel: Eine Startseite mit allen Beiträgen, dem Seitentitel und den Header-Informationen. Ausserdem soll der Seitentitel und die Beitrags-Titel verlinkt sein.

Erstellen der wichtigsten Dateien

Als erstes muss WordPress installiert werden. Danach kann im WordPress Ordner unter wp-content/themes ein neuer Themes-Ordner erstellt. In diesem sollten als erstes folgende Dateien erstellt werden:

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

index.php – Erste Einträge

<?php

get_header();

if (have_posts()) :
    while (have_posts()) : the_post(); ?>
    
        <article class="post">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
            <?php the_content(); ?>
        </article>
    
    <?php endwhile;

    else :
        echo '<p>Kein Inhalt gefunden.</p>';
    endif;

get_footer();

?>

Am Anfang wird mit get_header(); der Header von WordPress geholt. Danach wird über eine if-Abfrage geschaut, ob Beiträge vorhanden sind und diese dann per while-Schleife ausgegeben. Dabei wird der Titel des Beitrags verlinkt und der Inhalt unten aufgeführt. Falls kein Inhalt gefunden wird, tritt die else-Anweisung in Kraft. Am Ende wird noch der Footer von WordPress abgefragt.

header.php – Den Kopfbereich definieren

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>   
</head>
    
<body <?php body_class(); ?>>
    <div class="container">
        <!-- site-header -->
        <header class="site-header">
            <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name') ?></a></h1>
            <h5><?php bloginfo('description'); ?></h5>
        </header>

Mit dem Befehl get_header(); oder get_footer(); wird automatisch, sofern vorhanden, das header.php bzw. footer.php integriert. Im Header werden nebst dem Doctype auch verschiedene Angaben wie meta-Tags und der ganze WordPress-Header eingefügt. Hier ist es wichtig, möglichst viele WordPress-Klassen zu benützen und so wenig wie möglich fix zu definieren.

Im body-Bereich kann nun der Seitentitel sowie die Beschreibung ausgegeben und verlinkt werden.

footer.php – Den Fussbereich der Webseite

    <footer class="site-footer">

        <p><?php bloginfo('name') ?> - &copy; <?php echo date('Y'); ?></p>

    </footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

Im Footer-Teil der Webseite ist es wichtig, alle geöffneten HTML-Tags aus dem Header wieder zu schliessen. Ausserdem können bereits einige Angaben wie Copyright gemacht werden. Ganz wichtig auch im Fussbereich, den WordPress-Footer mit get_footer(); zu laden.

functions.php – Funktionen definieren

<?php

function learningWordPress_resources() {
     wp_enqueue_style('style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'learningWordPress_resources');

?>

Hier definieren wir nun unsere erste function. Diese dient dazu, unser Stylesheet style.css im Theme zu integrieren. Mit add_action(...) wird die Funktion dann auch ausgelöst.

style.css – Layout festlegen

/* 
Theme Name: Learning WordPress
Author: Joel Weiss
Autor URI: http://www.devign.ch
Version: 1.0
*/


body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #d7efe8;
}

a:link,
a:visited {
    color: #00936b;
}

p {
    line-height: 17px;
}

/* General Layout */
div.container {
    max-width: 920px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;    
}

article.post {
    border-bottom: 2px dotted #bbb;
}

article.post:last-of-type {
    border-bottom: none;
}

/* Header */
.site-header {
    border-bottom: 2px solid #999;
}

/* Footer */
.site-footer {
    margin-top: 30px;
    border-top: 2px solid #999;
}

Da style.css nun über functions.php ins Theme integriert wurde, kann diese nun mit CSS-Eigenschaften gefüllt werden. Hier können wir nun unser Design aber auch Informationen über das Theme bestimmen. Diese müssen mit definierten Tags wie Theme Name: betitelt werden.

Seiten und Navigation

Im Moment werden nur Beiträge wiedergegeben, Seiten werden hingegen nicht angezeigt und auch nicht in einer Navigation zugänglich gemacht. Dies möchten wir nun ändern, indem wir eine Navigation erstellen und für die angezeigten Seiten ein eigenes Layout erstellen.

Verschiedene Menü’s für das Theme erstellen

            <nav class="site-nav">
                <?php 
                    $args = array(
                        'theme_location' => 'primary'
                    );
                ?>
                
                <?php wp_nav_menu( $args ); ?>
            </nav>

Um die Navigation anzuzeigen, wird in der header.php und in der footer.php Datei eine Funktion aufgerufen (primary oder footer).

// Navigation Menüs
register_nav_menus(array(
    'primary' => __( 'Hauptmenu'),
    'footer' => __( 'Footer Menu')
));

In der functions.php Datei werden nun mit obigem Code die beiden Menü’s ausgelesen und benannt. Jetzt müssen diese nur noch im WordPress-Backend unter Design/Menüs definiert und zugeordnet werden.

Das Seitenlayout erstellen

Um für eine Seite ein anderes Layout oder ein anderer Aufbau zu verwenden, als z.B. für einen Beitrag, wird eine Datei namens page.php erstellt. In diese kann nun z.B. der Inhalt von index.php hineinkopiert und verändert werden.

Das CSS kann nun wie folgt angepasst werden, um die Navigation und weitere Teile der Webseite zu definieren:

/* 
Theme Name: Learning WordPress
Author: Joel Weiss
Autor URI: http://www.devign.ch
Version: 1.0
*/


body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #d7efe8;
}

a:link,
a:visited {
    color: #00936b;
    text-decoration: none;
}

p {
    line-height: 19px;
}

h1, h2, h3, h4, h5 {
    font-weight: 300;
}

/* General Layout */
div.container {
    max-width: 920px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;    
}

article.post {
    border-bottom: 1px dotted #b7ddd0;
}

article.post:last-of-type {
    border-bottom: none;
}

/* Header */
.site-header {
    border-bottom: 1px solid #b7ddd0;
}

.site-header h5 {
    margin: -15px 0 40px 0;
    font-size: 14px;
}

/* Footer */
.site-footer {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #b7ddd0;
}

/* Navigation Menu */
.site-nav ul {
    margin: 0;
    padding: 0;
}

.site-nav ul:before, .site-nav ul:after {
    content: ""; 
    display: table;
}

.site-nav ul:after {
    clear: both;
}

.site-nav ul {
    *zoom: 1;
}

.site-nav ul li {
    list-style: none;
    float: left;
}

/* Site Header Menu */
.site-header nav ul li a:link,
.site-header nav ul li a:visited {
    border: 1px solid #b7ddd0;
    padding: 10px 18px;
    margin-right: 5px;
    display: block;
    border-bottom: none;
    text-decoration: none;
}

.site-header nav ul li a:hover {
    background: #b7ddd0;
}

.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited {
    background: #00936b;
    color: #fff;
}

/* Footer Menu */
.site-footer nav ul li {
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px dotted #b7ddd0;
}

.site-footer p {
    font-size: 12px;
}

/* Page Layout */
article.page h2 {
    font-size: 300%;
}

 

Bildschirmfoto 2014-10-27 um 18.08.45

Joel Weiss
Joel Weiss
Webdesigner bei der Webagentur WeLoveYou und leidenschaftlicher Fotograf und Filmemacher.
Empfohlene Beiträge

Ein Kommentar hinterlassen

Fragen?

Falls Du Fragen, Anregungen oder ein Feedback hast, schreibe uns und wir antworten gerne.