Alle Artikel mit Tag “Anleitung”
Themes für Dummies – Teil 1
Vom 02.09.2008
Vorwort
Mit diesem Tutorial richte ich mich an Menschen, die zumindest ein rudimentäres Verständnis von HTML, CSS und im optimalen Fall auch von PHP haben. Notwendig ist es nicht zwingend, wird aber im Verlauf der Arbeit mit Themes die Sache sehr vereinfachen.
Das in diesem Tutorial erstellte Theme wird sehr einfach sein und soll nur als Einstieg in die Verwendung der WordPress Template Tags und die Funktionsweise eines Themes dienen. Die Erweiterung in viele viele Richtungen ist möglich.
Im Normalfall beinhalten Themes, die zum Download erhältlich sind eine Reihe verschiedener Dateien zu verschiedenen Zwecken. In diesem Tutorial werden wir ein Theme aus nur zwei Dateien erstellen (es heisst ja nicht umsonst “Themes für DUMMIES” 
) . Das funktioniert und ist auch für viele Zwecke schon ausreichend. Die Erweiterung des Themes lernen wir im zweiten Teil!
Erstelle/downloade/kaufe ein Design, wie es Dir gefällt!
Zuerst brauchen wir natürlich ein fertiges Design im normalen HTML-Format, das Dir gefällt. Für dieses Tutorial habe ich auf der Seite http://www.freecsstemplates.org/ ein Design heruntergeladen. (belowthehorizon) Diese Vorgehensweise kannst Du aber natürlich auch für ein vorher von Dir selbst erstelltes Design verwenden.
belowthehorizon
Es gilt zu beachten, dass alle Themes von freecsstemplates.org unter der Creative commons License veröffentlicht wurden. Das heisst, man darf sie herunterladen, verändern, bearbeiten, zum Download anbieten, muss aber den Link zur Seite freecsstemplates.org (am Besten im Fussbereich) erhalten. Das ist doch sehr nett, oder?
Dieses Design ist für unsere Zwecke (für den Anfang) gut geeignet. Es hat nur zwei Spalten und kein horizontales Menü. Wir wollen ja klein anfangen
Entpackt sieht das Design dann so aus :
- Design entpackt
Unsere erste Amtshandlung hier wird sein, die CSS-Datei in den WordPress-Standard “style.css” umzubenennen.
Gleich danach öffnen wir die index.html und speichern sie gleich wieder ab. Diesmal aber mit der Endung .php. Wir haben also jetzt schon die zwei Dateien, die für ein lauffähiges Theme nötig sind zusammen. Die index.php und die style.css.
Weiter geht’s …
Füge die Theme-Informationen zur style.css hinzu
Wir öffnen die style.css und fügen gleich an den Anfang der Datei folgenden Text ein:
/*
Theme Name: Hier kommt der Name des Themes hin
Theme URI: http://www.die-seite-des-themes-falls-vorhanden.de
Description: eine kurze Beschreibung
Author: Dein Name
Author URI: http://www.deine-seite.de
Version: Eine Versionsnummer (optional)
*/
Den Ändern wir natürlich dann noch so, dass er zu unserem neuen Projekt passt. Also geben wir dem Kind einen Namen und fügen auch noch unsere Links hinzu.
Damit ist die css-datei vorbereitet.
Jetzt geht’s an’s Eingemachte. Wir legen los.
Füge die Head-Informationen ein
Tipp: Bei Bueltge.de gibt es schöne Cheatsheets für die Erstellung von WP-Themes. Es lohnt sich sehr, diese auszudrucken.
Tipp: In der WordPress-Doku sind alle Template-Tags mit ihren erweiterten Möglichkeiten aufgeführt.
Damit unsere Vorlage auch die dynamischen Elemente von WordPress anzeigt, müssen wir natürlich noch etwas tun. Wir fangen im Kopfbereich an und ersetzen den kompletten Kopfbereich bis zum </head>-Tag mit folgendem Code: (Dieser Code ist nur ein Beispiel. Auch hier sind viele Varianten denkbar und möglich.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats -->
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml"
title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
Der Code enthält den Titel unseres Weblogs, den Link zum Stylesheet und die RSS- und Pingback Informationen. Besonders wichtig ist auch der Tag <?php wp_head(); ?> . Das ist praktisch ein Platzhalter für HEAD-Funktionen, die von Plugins benötigt werden. Wenn z.B. ein Plugin eine eigenes Stylesheet oder JAVASCRIPT verwendet, kann es an dieser Stelle seine eigenen Style-Informationen dynamisch einfügen.
Weiter geht es mit folgenden Zeilen, die noch in unserer Vorlage zu finden sind:
<h1><a href="#">Below the Horizon</a></h1>
<h2><a href="http://freecsstemplates.org/">by Free Css Templates </a></h2>
Hier wäre es ja schön, wenn später der Titel und die Beschreibung UNSERES WordPress-Blogs erscheinen würden. Also fügen wir noch die Template Tags <?php bloginfo(‘name’); ?> (für den Blog-Titel) und <?php bloginfo(‘description’); ?> (für die Beschreibung) an Stelle der alten Inhalte ein. (Diese Werte kannst Du in der WordPress Verwaltung jederzeit ändern. ) Das sieht dann so aus:
<div id="header">
<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
Wenn wir erreichen wollen, dass der Titel ein Link auf unsere Startseite wird, können wir das tun, indem wir auf <?php bloginfo('url'); ?> verlinken. (Du siehst, es lohnt sich, die WordPress-Doku mit den Template-Tags immer nebenbei geöffnet zu haben )
Füge den Code für das dynamische Menü ein
Weiter im Text. Als nächstes sehen wir den Code für die linke Menüleiste.
Der WordPress-Menü-Code wird dieses statische Menü unserer Vorlage ersetzen. Hier gibt es eine schier unerschöpfliche Anzahl an Möglichkeiten der Menügestaltung. Wir können uns entscheiden, Alle Seiten, alle Kategorien und alle Links hier anzuzeigen. Oder wir verlinken nur die Kategorien und die Login-Buttons. Hier muss der Designer sich entscheiden. In unserem Beispiel nehmen wir die Seiten, Kategorien und die Anmeldung.
Tipp: In einem späteren Teil von “WordPress-Themes für Dummies” werden wir lernen, wie wir unser Theme widget-fähig machen können, dann sind diese Informationen sowieso hinfällig, da dann ja die Auswahl der anzuzeigenden Menüelemente ganz einfach mit Widgets erledigt wird.
Aber kein Haus ohne Fundament, fangen wir also mit der alten Schule an!
Bisher steht im Menü statischer Text. Den wollen wir durch dynamische Elemente ersetzen. Wer ängstlich ist, kann den “alten” code auskommentieren, bis alles funktioniert. Aber weg muss er so oder so . Wir löschen oder kommentieren alles zwischen <div id=”menu”> und dem abschliessenden </div>.
Und wieder mit Hilfe der WordPress-Doku können wir uns das gewünschte Menü zusammensuchen. Wie gesagt wollten wir in diesem Beispiel die Seiten, die Kategorien und die Anmelde-Links anzeigen lassen.
Legen wir also los… Fangen wir mit den Seiten an. Um Links zu allen in WordPress angelegten Seiten anzuzeigen verwenden wir den Template-Tag <?php wp_list_pages( ); ?> . Wir verwenden hier erstmal eine einfache Version, nämlich:
<h2>Seiten</h2>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
Wir lassen also alle unsere Seiten als Link anzeigen und wollen, dass diese Liste kein Titel-Listenelement hat.
Dann wollen wir uns alle Kategorien unseres Blogs als Links anzeigen lassen. Nichts leichter als das:
<h2>Kategorien</h2>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
Und zuletzt fügen wir noch den Block mit den Links zum Registrieren, Anmelden etc. ein:
<h2>Admin</h2>
<ul>
<li>
<?php wp_loginout(); ?>
</li>
<?php wp_register(); ?>
Wie sich die verschiedenen Tags auf das Layout auswirken muss man gegebenenfalls ausprobieren. In diesem Beispiel (wie auch aus der Doku ersichtlich), erzeugt der Tag <?php wp_loginout(); ?> einfach nur einen Link zum Login. Der Tag <?php wp_register(); ?> hingegen erzeugt, wenn man es ihm nicht anders sagt eine Listenform. Aus diesem Grund habe ich, damit es im Design gut aussieht die <li> Tags bei loginout() noch hinzugefügt.
Soooo… damit wir nicht völlig im Blindflug arbeiten, empfiehlt es sich, unser Theme schon einmal zu testen. Dazu laden wir es in den Ordner wp-content/themes/meintheme hoch und aktivieren es unter Darstellung-Themes.
Da wir noch keinen Screenshot hinzugefügt haben, wird das Theme vorerst nur als Text-Link dargestellt. Muss ich erwähnen, dass wir natürlich neben der index.php und der style.css auch noch den Ordner mit den Bildern hochladen???
Unser Theme sollte schon jetzt unseren individuellen Blog-Header oben im Bild zeigen und in der Menüleiste links drei Abschnitte Namens “Seiten”, “Kategorien” und “Admin” mit den entsprechenden Menüpunkten.
Jetzt kommen wir zum Herzstück der ganzen Sache. DEM LOOP (ehrfürchtiges Raunen). Auch hier gibt es unzählige Varianten und Template-Tags, die man ein- oder ausbauen kann. Man kann durch Anpassung des Loops bestimmen, ob und wie die Post-Überschrifen aussehen, ob es zu jedem Post die Kommentarmöglichkeit gibt oder die Uhrzeit angezeigt wird. Alle Informationen zum Loop gibt es wie immer in der WordPress-Doku oder über Google.
Der Loop hat eigentlich nur die Funktion, dass er alle vorhandenen Posts bzw. Seiten einer bestimmten Kategorie abruft und der Reihe nach als Loop (SCHLEIFE) ausgibt.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">
<?php the_title('<h3>', '</h3>'); ?>
<?php the_content('weiter lesen...'); ?>
</div><
<?php endwhile; ?>
<?php else : ?>
<p><?php _e('Leider wurde nichts gefunden.'); ?></p>
<?php endif; ?>
Hier ist wohl eine kurze Erklärung von Nöten. Die erste Zeile startet also die Schleife “Solange es Beiträge gibt….“
Danach folgen die Anweisungen, mit denen wir festlegen, WIE die von der Schleife gefundenen Beiträge auf unserer Seite angezeigt werden sollen. In unserem Beispiel haben wir mit the_title den Titel des Beitrags als H3-Überschrift angezeigt und mit the_content haben wir den eigentlichen Inhalt des Beitrags angezeigt.
Der Loop endet mit <?php endwhile; ?> (wenn alle Beiträge durchlaufen wurden).
Das <?php else : ?> fängt den Fall ab, dass aus unerfindlichen Gründen keine Beiträge gefunden werden konnten.
Wer hier noch weitere Informationen anzeigen lassen möchte, findet in der Doku (ja, langsam wird es nervig ) noch viele weitere Tags, mit denen man den Loop nach Belieben erweitern kann.
Wir sollten zumindest noch die Navigationslinks für den nächsten und vorigen Beitrag einfügen:
<div style="text-align:center;">
<?php posts_nav_link(' · ', 'Vorherige Seite', 'Naechste Seite'); ?>
</div>
Diese Navigation muss natürlich nach dem Loop stehen (also zwischen <?php endwhile; ?> und <?php else : ?> ) weil sie sonst ja durch die Schleifenfunktion unter jedem einzelnen Beitrag auftaucht.
FAST FERTIG!!
Wie wir ja beim Testen schon gesehen haben, läuft damit unser Theme schon. Alle wichtigen Funktionen sind eingebunden, sowohl die Seiten als auch die Beiträge funktionieren, unser Titel wird angezeigt.
Jetzt könnten wir noch den Fussbereich ein wenig anpassen und können uns dann zurücklehnen, weil wir unser erstes Theme für Dummies erstellt haben
STOOOOOOOP!
Eins haben wir noch vergessen. Wir sollten noch einen schönen Screenshot unseres Themes machen und ihn unter dem Namen “screenshot.png” im Theme-Verzeichnis ablegen.