WordPress

Wordpress-Theme erstellen

Veröffentlicht am 30.05.2017 von Anna Philipp

Wordpress-Themes gibt es Unzählige. Aber was, wenn keins genau so ist, wie man es möchte? Nun, ganz einfach: Dann baut man sich eben selber eins. Zugegeben, ganz so einfach ist das nicht. Aber mit ein wenig HTML-, CSS- und PHP-Kenntnissen ist das Grundgerüst recht schnell erstellt. Wie das geht, möchten wir in diesem Beitrag beschreiben.

Voraussetzungen

Vorausgesetzt wird dafür eine fertige Wordpress-Installation. Wie Wordpress installiert werden kann, haben wir hier beschrieben: WordPress: Die Bestellung und Installation und in unserem eBook zur Planung und Gestaltung einer WordPress-Seite für Unternehmen.

In dem Verzeichnis

wordpress/wp-content/themes

muss ein neues Verzeichnis angelegt werden, in dem das Theme erstellt wird. Idealerweise trägt es den Namen des Themes. Wir verwenden in unserem Beispiel den Theme-Namen dFwp-theme, die Verzeichnissstruktur sieht also wie folgt aus:

wordpress/wp-content/themes/dFwp-theme

Ziel

Es wird ein Wordpress-Theme von Grund auf selbst erstellt.

Dabei handelt es sich um ein Grundgerüst, das beliebig verändert und designed werden kann.

Containern haben wir unterschiedliche Farben (Grautöne) zugeordnet, damit diese gut voneinander zu unterschieden sind.

Das Gerüst wird folgende Struktur haben:

  • Header über die komplette Bildschirmbreite
  • Zentriert nebeneinander links die Beiträge, rechts eine Seitenleiste
  • Footer über die komplette Bildschirmbreite

Dazu werden diese Dateien angelegt und mit Inhalt gefüllt:

  • index.php
  • style.css
  • header.php
  • sidebar.php
  • comments.php
  • single.php
  • footer.php
  • page.php

Die Grundstruktur

Die index.php ist die erste und auch die zunächst wichtigste Datei. Sie ist dafür zuständig, dass die Startseite beim Aufruf der Blog-Domain angezeigt wird. Wir werden sie nach und nach mit Inhalt füllen.

Aber zunächst wird darin die Struktur festgelegt. Wir erstellen also eine Datei mit dem Namen "index.php" im Ordner des Themes und speichern darin den folgenden Inhalt:

 

<?php get_header(); ?> <!-- Hier wird der Header (header.php) eingebunden -->
 
<div id="wrap">
   <div id="content-area">
      <!-- Hier werden die Blogbeiträge angezeigt -->
   </div>
 
   <?php get_sidebar(); ?> <!-- Hier wird die Sidebar (sidebar.php) eingebunden -->
</div>
 
<?php get_footer(); ?> <!-- Hier wird der Footer (footer.php) eingebunden -->

 

Anschließend kann die Datei zunächst gespeichert und geschlossen werden.

Der Header

Wir beginnen mit dem Header der Seite, der über die Funktion <?php get_header(); ?> eingebunden wird.

Im Header wird der Seitentitel definiert, die Stylesheets eingebunden und nach Wunsch auch Meta-Angaben eingefügt. Wir beschränken uns in unserem Grundgerüst auf das Mindeste:

Wir wählen den Seitentitel und geben an, wo das Stylesheet zu finden ist. Dafür stellt Wordpress die Funktion bloginfo() zur Verfügung:

bloginfo('name'): Zeigt den Titel des Blogs an.

bloginfo('stylesheet_url'): Verlinkt auf das Stylesheet.

Wir legen also eine Datei mit dem Namen "header.php" an und speichern darin den folgenden Inhalt:

 

<!DOCTYPE html>
<html>
<head>
   <title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
</head>
 
<body>
   <div id="header">
      <!-- Hier werden die Daten für den Header stehen -->
   </div>

 

In dem Bereich, in dem aktuell "<!-- Hier werden die Daten für den Header stehen -->" steht, definieren wir den Seitenheader.

In unserem Beispiel geben wir die Überschrift des Blogs (als Link auf die Startseite) und die Beschreibung des Blogs aus.

Hierfür verwenden wir wieder die Funktion bloginfo():

bloginfo('name'): Zeigt den Titel des Blogs an.

bloginfo('description'): Zeigt die Beschreibung des Blogs an.

Folgender Inhalt wird also nun statt  "<!-- Hier werden die Daten für den Header stehen -->" eingetragen:

 

<div id="header">
   <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <div class="description"><?php bloginfo('description'); ?></div>
</div>

 

Beiträge auf der Startseite ausgeben

Noch kann man das Theme im Wordpress-Backend noch nicht aktivieren, da noch kein Stylesheet existiert. Dazu kommen wir gleich. Zunächst aber geben wir der Startseite noch an, dass sie vorhandene Blogartikel laden soll.

Dazu befüllen wir den Bereich "content-area" der index.php mit Inhalt.

The Loop

Die Schleife, die den Inhalt der Blogbeiträge ausgibt, wird ganz einfach als "The Loop" (="die Schleife") bezeichnet:

 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <!-- Hier wird angegeben, welche Daten ausgegeben werden sollen -->
<?php endwhile; endif; ?>

 

In unserem Grundgerüst geben wir pro Beitrag jeweils folgende Daten aus:

  • Überschrift
  • Name des Autors
  • Erstelldatum des Artikels
  • Inhalt des Artikels

Dazu benötigen wir die folgenden Funktionien:

the_title(): Zeigt die Überschrift des Artikels an.

the_permalink(): Damit wird die Überschrift auf die Artikelseite des Artikels gelinkt.

the_author(): Zeigt den Namen des Autors an

the_date(): Zeigt das Erstelldatum des Artikels an

the_content(): Zeigt den Inhalt des Artikels an

Mit diesen Daten sieht der <content-area>-Bereich in der index.php dann so aus:

 

<div id="content-area">
 
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
      <div class="entry">
 
         <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <div class="author">Erstellt von: <?php the_author(); ?></div>
         <div class="date">Erstellt am: <?php the_date(); ?></div>
         <div class="content">
            <?php the_content(); ?>
         </div>
 
      </div>
 
   <?php endwhile; endif; ?>
 
</div>

 

Damit das Template aktiviert werden kann, erstellen wir nun das Stylesheet.

Das Stylesheet

Für das Stylesheet legen wir eine Datei mit dem Namen "style.css" an. Dieses erhät nun erst einmal Informationen zu dem Theme. Das sind die Informationen, die später in der Vorschau unter "Design" im Wordpress-Backend angezeigt werden:

Wordpress-Theme - Theme-Vorschau

(Einen Screenshot haben wir natürlich noch nicht - der kann zum Schluss hochgeladen werden, wenn das gewünschte Design fertig ist.)

Damit diese Informationen angezeigt werden, beginnt die style.css wie folgt:

 

/*
Theme Name: dFwp-theme
Description: Theme zur Veranschaulichung für den dF-Blog
Author: domainFACTORY
Version: 1.0
*/

 

Ab dem Moment, in dem die style.css auf dem Server abgespeichert ist, kann das Theme im wp-admin aktiviert werden.

Nun definieren wir die bislang festgelegten IDs und Klassen. Diese sind natürlich nur Beispiele zur Veranschaulichung und können nach Belieben geändert werden.

 

body {
background: #464646;
margin: 0;
}
h1 {
margin-top:0;
text-align:center;
padding-top:30px;
}
h2 {
}
h3 {
}
#wrap {
max-width:960px;
margin: 0 auto;
overflow:hidden;
}
#header {
height: 210px;
background:#777;
color:#fff;
}
.description {
text-align:center;
}
#content-area {
width: 660px;
background:#e0e0e0;
padding:20px;
float:left;
}
.entry{
padding: 30px;
margin-bottom:10px;
background:#fff;
}
.author{
font-weight:bold;
}
.date{
font-style:italic;
}
.content{
}

 

 

Die Seitenleiste

Um eine Seitenleiste zu erstellen, legen wir die Datei "sidebar.php" an.

Mit <?php get_sidebar(); ?> haben wir sie bereits in die index.php eingebunden.

In unserem Beispiel geben wir in der Sidebar folgende Inhalte aus:

  • Die statischen Seiten des Blogs
  • Die Kategorien
  • Das Archiv des Blogs
  • Manuelle Links z.B. für Social Media

Dazu wird in der sidebar.php folgender Inhalt gespeichert:

 

<div id="sidebar">
   
   <div class="widget-title">Seiten</div>
   <div class="widget"><ul><?php wp_list_pages('title_li='); ?></ul></div>
  
   <div class="widget-title">Kategorien</div>
   <div class="widget"><ul><?php wp_list_categories('orderby=name&order=ASC&title_li='); ?></ul></div>
   
   <div class="widget-title">Archiv</div>
   <div class="widget"><ul><?php wp_get_archives('type=monthly'); ?></ul></div>
  
   <div class="widget-title">Social</div>
   <div class="widget">
      <a href="http://meinefacebookseite">Facebook</a>
      <a href="http://meinetwitterseite">Twitter</a>
   </div>
  
</div>

 

Zusätzlich ergänzen wir die CSS-Datei wie folgt:

 

#sidebar {
width: 200px;
padding: 30px;
background:#bdbdbd;
float:right;
}
.widget-title {
}
.widget {
margin-left:20px;
}

 

Die single.php

Die Datei single.php zeigt einen Beitrag in der Einzelansicht an. Klickt man z.B. auf der Startseite auf die Überschrift eines Beitrags, wird man auf die single.php geleitet.

Die Datei wird nicht zwingend benötigt: Existiert sie nicht, wird das Template der index.php geladen.

Wir erstellen sie, damit wir dort eine spezielle Funktion - das Kommentieren - einbauen können.

Zunächst sieht sie aber genauso aus wie die Datei index.php.

Wir kopieren die index.php also nach single.php.

Dort fügen wir das Kommentar-Template mit der Funktion  <?php comments_template(); ?> in den Bereich "content-area" ein:

 

<div id="content-area">
 
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
      <div class="entry">
 
         <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <div class="author">Erstellt von: <?php the_author(); ?></div>
         <div class="date">Erstellt am: <?php the_date(); ?></div>
         <div class="content">
            <?php the_content(); ?>
         </div>
 
      </div>
 
   <?php endwhile; endif; ?>
   <?php comments_template(); ?>
</div>

 

Für das Kommentar-Template legen wir dann die Datei "comments.php" an.

Zunächst geben wir existierende Kommentare aus:

 

<div id="comments">
   <div class="comments_title">Kommentare</div>
 
      <?php if ( have_comments() ) : ?>
         <?php foreach ($comments as $comment) : ?>
 
            <div class="comment" id="comment-<?php comment_ID() ?>">
               <div class="commentavatar"> <?php echo get_avatar( $comment, 56); ?></div>
               <div class="commentmeta">Geschrieben von <b><?php comment_author_link() ?></b> am <b><?php comment_date('j. F Y') ?></b> um <b><?php comment_time('H:i') ?> Uhr</b></div>
               <div class="commenttext"><?php comment_text() ?></div>
            </div>
 
         <?php endforeach; ?>
      <?php endif; ?>
 
</div>

 

Damit prüfen wir, ob Kommentare existieren.

Wenn ja, wird der Autor mit seinem Avatar, Erstelldatum und -uhrzeit sowie natürlich der Kommentar an sich ausgegeben.

Allerdings fehlt noch etwas Wichtiges:

Wir müssen noch eine Information darüber ausgeben, wenn keine Kommentare existieren.

Außerdem sollten wir prüfen, ob die Kommentar-Funktion für den Beitrag überhaupt freigeschaltet ist. Wenn nicht, blenden wir eine Information darüber ein. Anderenfalls ein Kontaktformular. Aber dazu kommen wir noch.

Für die beiden Informationen erweitern wir den Code wie folgt (ganz unten einfügen):

 

<div id="comments">
   <div class="comments_title">Kommentare</div>
 
      <?php if ( have_comments() ) : ?>
         <?php foreach ($comments as $comment) : ?>
 
            <div class="comment" id="comment-<?php comment_ID() ?>">
               <div class="commentavatar"> <?php echo get_avatar( $comment, 56); ?></div> 
               <div class="commentmeta">Geschrieben von <b><?php comment_author_link() ?></b> am <b><?php comment_date('j. F Y') ?></b> um <b><?php comment_time('H:i') ?> Uhr</b></div> 
              <div class="commenttext"><?php comment_text() ?></div> 
 
            </div> 
         <?php endforeach; ?> 
      <?php endif; ?>   
 
         <?php if ( get_comment_pages_count() == "0"  ) : ?>               
            <p>Noch keine Kommentare.</p>         
         <?php endif; ?>     
     
         <?php if ( ! comments_open() ) : ?>              
            <p>Die Kommentarfunktion f&uuml;r diesen Beitrag ist geschlossen.</p>         
         <?php endif; ?> 
 
</div>

 

Nun benötigen wir noch ein Kontaktformular, in das man Kommentare eintragen kann, sofern die Kommentarfunktion geöffnet ist.

Über das letzte </div> in der Datei tragen wir dafür folgenden Code ein:

 

   <?php if ( comments_open() ) : ?>
 
      <div class="comments_title">Kommentar schreiben</div>
 
      <div class="comments_form">
         <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
 
            <p>
            Name:<br />
            <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="32" tabindex="1"/>
            </p>
 
            <p>
            E-Mail-Adresse:<br />
            <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="32" tabindex="2" />
            </p>
 
            <p>
            Webseite:<br />
            <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="32" tabindex="3" />
            </p>
 
            <p id="comment_textarea">
            Kommentar:<br />
            <textarea name="comment" id="comment" style="width: 50%;" rows="10" tabindex="4"></textarea>
            </p>
 
            <p>
            <input type="submit" name="submit" id="submit" tabindex="5" value="Kommentar abschicken" />
            <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
            </p>
 
            <?php do_action('comment_form', $post->ID); ?>
 
         </form>
      </div>
   <?php endif; ?>  

 

Nun fehlt noch eine Kleinigkeit. Muss ein Kommentar auf Freischaltung warten, sollte der Verfasser eine Information darüber erhalten. Daher tragen wir ebenfalls über dem letzten <div> folgendes ein:

 

<?php if ($comment->comment_approved == '0') : ?>
   <div class="comment_awaiting_moderation">Achtung: Der Kommentar muss erst noch freigegeben werden.</div>
<?php endif; ?>

 

Das CSS erweitern wir nun um die neu erstellten Klassen:

 

#comments {
}
.comments_title {
font-size:20px;
font-weight:bold;
margin: 40px 0 20px 0;
}
.comment {
background: #f1f1f1;
padding:20px;
}
.comment_avatar {
}
.comment_meta {
font-style:italic;
}
.comment_text {
margin: 10px 0 0 0;
background-color:#fff;
padding:10px;
}
.comments_form {
margin: 10px 0 0 0;
background: #f1f1f1;
padding:20px;
}
.comment_textarea {
}
.comment_awaiting_moderation {
color:red;
font-weight:bold;
}

 

Die footer.php

Nun fehlt nur noch der Footer. Dafür erstellen wir eine Datei mit dem Namen "footer.php", die auf jeden Fall folgende Tags beinhalten muss:

 

</body>
</html>

 

Was er sonst noch beinhalten soll, bleibt jedem selbst überlassen:

 

<div id="footer">
Text im Footer
</div>
</body>
</html>

 

Und hier noch das CSS dazu:

 

#footer {
height: 100px;
background:#1b1b1b;
color:#fff;
text-align:center;
padding: 30px 0 0 0;
}

 

Die page.php

Die page.php ist zuständig für alle statischen Seiten. Existiert sie nicht, wird das Standardtemplate der index.php geladen.

Da eine statische Seite jedoch meist ein bisschen anders aussieht als ein gewöhnlicher Blogbeitrag, legen wir eine page.php an, um diese dann zu editieren.

Dafür kopieren wir die index.php nach page.php und öffnen die page.php.

Nun entfernen wir die Angaben von Autor und Erstelldatum auf der Seite, da dies bei statischen Seiten meist nicht benötigt wird.

 

<?php get_header(); ?> <!-- Hier wird der Header (header.php) eingebunden -->
 
<div id="wrap">
   <div id="content-area">
 
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
      <div class="entry">
 
         <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <div class="content">
            <?php the_content(); ?>
         </div>
 
      </div>
 
      <?php endwhile; endif; ?>
   </div>
 
   <?php get_sidebar(); ?> <!-- Hier wird die Sidebar (sidebar.php) eingebunden -->
</div>
 
<?php get_footer(); ?> <!-- Hier wird der Footer (footer.php) eingebunden -->

 

Fertig!

Die Startseite des Blogs wird nun in etwa so aussehen:

Wordpress-Theme - Fertiges Template

Das Grundgerüst steht also. Nun kann das Template beliebig erweitert und umgestaltet werden.

Noch ein kleiner Tipp dazu: Die Hierarchie der Dateien ist beim Erstellen oder Bearbeiten eines Themes sehr nützlich. Eine schöne Übersicht darüber ist hier zu finden: http://wphierarchy.com/

 

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Der Autor:

Anna Philipp

Weitere Artikel von diesem Autor

TYPO3 oder WordPress für Ihr Projekt: Vor- und Nachteile im Vergleich

Weiterlesen

Malware entfernen: Wie Sie eine gehackte WordPress-Site reparieren

Weiterlesen

Anleitung: WordPress Multisite Netzwerk aktivieren & konfigurieren

Weiterlesen