wordpress.org Website

WordPress Theme erstellen 1: Grundgerüst aufbauen

Im ersten Teil werden wir die Grundstruktur für ein WordPress Template schaffen.

Video

Grundvoraussetzungen

Bevor Du mit diesem Tutorial erfolgreich anfangen kannst, solltest du einige Grundvoraussetzungen erfüllen.

  • Grundkenntnisse in WordPress
    • Artikel und Seiten erstellt haben
    • Ein Menü eingerichtet haben
    • Tages und Kategorien erstellt und verwendet haben
  • Fundierte HTML und CSS sind zwingend notwendig
  • Optional: PHP Grundkenntnisse

Theme-Ordner erstellen

Zu aller erst muss ein „Themeordner“ unter /wp-content/themes/ erstellen werden, indem die Template Dateien abgespeichert werden können. Logischerweise trägt der Ordner den Namen deines Themes. Innerhalb des Ordners sollte der Pfad /wp-content/themes/meintemplate lauten.

index.php

Das wichtigste an einem WordPress Design ist die index.php, die auf jeden Fall enthalten sein muss. Diese erstellen wir mit typischem HTML Grundgerüst in unserem Ordner und fügen schon einige WordPress Funktionen hinzu, die im Video näher erläutert werden.

<!DOCTYPE html>

<html lang="de">
  <head> 
    <meta charset="utf-8" /> 
    <title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title>
 
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> 
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 
 
    <?php wp_head(); ?>
  </head>
	
  <body <?php body_class(); ?>>
    <div id="wrapper">
      <div class="inner">
        <div id="header">
          <!-- hier machen wir im nächsten Teil weiter -->
        </div><!-- #header -->

        <div id="main">
	  <div id="content">
            <!-- hier machen wir im nächsten Teil weiter -->
          </div><!-- #content -->
 
	  <div id="sidebar">
	    <!-- hier machen wir in einem der nächsten Teile weiter -->
	  </div><!-- #sidebar -->
					
	  <div class="clear"></div>
	</div><!-- #main -->

       <div id="footer">
         <!-- hier machen wir in einem der nächsten Teile weiter -->
       </div><!-- #footer -->

     </div><!-- .inner -->
   </div><!-- #wrapper -->
 
   <?php wp_footer(); ?>

  </body>
</html>

style.css

Damit wir den Überblick in unserem Theme bei Ausgaben behalten, fügen wir ein minimalistisches Stylesheet hinzu.

/*
Theme Name: Tutorial
Theme URI: http://sourceblogging.de
Description: Blog Theme für meinen WordPress Blog
Author: Fabian Geier
Author URI: http://fabiangeier.de
*/

* {
	margin: 0;
	padding: 0;
}

.clear {
	clear: both;
}

.inner {
	width: 1000px;
	margin: 0 auto;
}

body {
	background: #f5f5f5;
}

#header {
	padding: 1% 2% 0 2%;
	width: 96%;
	background: #fff;
}

#menu {
	margin: 1% -2% 0;
	background: #ccc;
	padding: 0.5%;
}

#menu li {
	display: inline;
}

#main {
	margin: 2% 0 0 0;
}

#content {
	width: 69%;
	margin: 0 2% 0 0;
	background: #fff;
	padding: 1% 2%;
}

#sidebar {
	width: 21%;
	padding: 1% 2%;
	background: #fff;
}

#sidebar, #content {
	float: left;
}

#meta {
	background: #ccc;
	padding: 0.5% 1%;
	margin: 1% 0;
}

#category_description,
#tag_description {
	margin: 0 0 2%;
}

.search-title {
	margin: 0 0 2% 0;
}

#comments_container {
	padding: 2%;
	margin: 2% 0 0 0;
	border-top: 1px solid #ccc;
}

Dieses Stylesheet erzeugt ein 2 Spaltenlayout mit einem Hauptteil und einer Sidebar. Wichtig hier ist die Konfiguration am Anfang, die im Video näher erläutert wird.

Über den Autor:

Mein Name ist Fabian Geier, Gründer von SourceBlogging, Läufer und WordPress-Enthusiast. Du findest mich vor allen Dingen auf meiner Webseite.