WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5
index.php - Der Content / Inhalt wird erstellt
Jetzt kommt wohl der wichtigste Teil des Templates, die Ausgabe der Beiträge.
Dazu brauchen wir etwas PHP und natürlich, wie immer, (x)HTML.
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Link zu <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<?php the_content('Kompletten Beitrag lesen'); ?>
</div>
<div class="infos">Geschrieben am <?php the_time('d.m.Y') ?> von <?php the_author() ?> in <?php the_category(', ') ?>. <?php comments_popup_link('0 Kommentare', '1 Kommentar', '% Kommentare'); ?>. <?php edit_post_link('editieren','','·'); ?></div>
<?php endwhile; ?>
<?php next_posts_link('« vorherige Seite') ?> - <?php previous_posts_link('nächste Seite »') ?>
<?php else : ?>
<div class="post">
<h1>Fehler!</h1>
Die gewünschte Seite ist nicht verfügbar.
</div>
<?php endif; ?>
<div id="sitemap">
<?php get_sidebar(); ?></div>
<?php get_footer(); ?>
Mit get_header(); wird der Header (den wir in der header.php erstellt haben) eingebunden.
Falls es Beiträge gibt (if (have_posts()) :), werden diese jetzt ausgegeben (while (have_posts()) : the_post();).
Dazu wird die Beitragsausgabe formatiert:
- the_permalink(): Hiermit wird der direkte Link zum Beitrag ausgegeben.
- the_title() gibt den Titel des Beitrags aus.
- the_content(’Kompletten Beitrag lesen’) gibt den Inhalt des Beitrags aus (Falls dieser nur gekürzt angezeigt wird, erscheint ein Link “Kompletten Beitrag lesen” mit dem man den Rest des Beitrags lesen kann).
- the_time(’d.m.Y’) gibt das Datum an dem der Beitrag geschrieben wurde aus; Die Ausgabe kann wie die PHP-Funktion date() formatiert werden.
- the_author() ist der Autor des Beitrags
- the_category(’, ‘) gibt die Kategorien, getrennt durch ein Komma aus.
- comments_popup_link(’0 Kommentare’, ‘1 Kommentar’, ‘% Kommentare’) Zeigt an, wie viele Kommentare schon geschrieben wurden. Außerdem wird diese Ausgabe zu den Kommentaren des Beitrags verlinkt.
- edit_post_link(’editieren’,”,’·’) fügt einen Link für den Admin ein, damit dieser direkt zum Bearbeiten des Beitrags ins Admin Panel kommt.
- mit next_posts_link(’« vorherige Seite’) bzw. previous_posts_link(’nächste Seite »’) wird ein Link zur vorherigen, bzw nächsten Seite ausgegeben.
Nach der Beitragsformatierung wird mit endwhile die Formatierung der Beiträge beendet.
Mit else : wird nun ein Fehler ausgegeben, wenn kein Beitrag vorhanden ist. Diese Fehlermeldung wird dann von endif; beendet.
Am Ende der index.php wird nun mit get_sidebar(); die Sidebar ausgegeben.
Mit get_footer(); wird der Footer, aus der Datei footer.php ausgegeben.
WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5
Ähnliche Beiträe
#1 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo#4 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo#5 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5
header.php - Der Kopf des Themes
In diese Datei kommt nun der “Kopf” () des Templates. Dazu gehören vorallem die Meta- und Link- Daten. Außerdem wollen wir einen suchmaschinenfreundlichen Titel haben.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title><?php bloginfo('name'); ?><?php if ( is_single() ) { ?> » <?php } ?><?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="author" content="Dein Name” />
<meta name=”description” content=”<?php bloginfo(’description’); ?>” />
<meta name=”robots” content=”follow” />
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(’rss2_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 1.0″ href=”<?php bloginfo(’atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” />
</head>
<body>
An diesem fertigen Kopf müssen wir eigentlich nichts ändern. Man sollte nur “Dein Name” durch den eigenen Namen ersetzen. Die Meta-Daten erklären sich wohl von selbst. Diese werden mittels PHP selbstständig mit Daten befüllt. Die Link-Daten werden ebenfalls automatisch durch WordPress mit den entsprechenden Url befüllt.
Der Titel besteht bei der Startseite aus dem Blognamen. Bei der Einzelansicht eines Beitrags kommt hinter dem Blognamen noch der Name des Beitrags. Dies ist vorallem für Suchmaschinen, aber auch für den Leser, ganz nützlich.
Weiterhin können wir nun noch die erstens DIVs in die header.php schreiben. Dies könnte in etwa so aussehen:
<div id="page">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
Hierbei wird der Blogname (<h1>) und die Blogbeschreibung (<h2>) im DIV header ausgegeben. Davor wird noch ein DIV page geöffnet, aber nicht mehr geschlossen.
style.css - Die Cascading Style Sheets
In die Datei style.css kommen nun die notwendigen Styleinformationen hinein, die wir für unser Theme brauchen.
Die Datei haben wir schon am Anfang angelegt und dort die Theme-Informationen abgelegt.
Unterhalb dieser Informationen kann jetzt mit dem CSS begonnen werden.
body {
color: #ffffff;
font-size: 10pt;
background:#ffffff;
}
...
Hierbei muss eigentlich nichts besonderes beachtet werden.
footer.php - Und nun das Ende
Kommen wir nun zum Footer, dem Ende des Templates (nicht jedoch zum Ende des Tutorials ;)). Hier können alle noch nicht geschlossenen Tags (DIV, BODY und HTML) geschlossen werden. Außerdem kommt hier der sog. Footer mit ein paar Informationen zum Template und Templateersteller hinein.
</div>
<div id="footer"><?php bloginfo('name'); ?> läuft mit WordPress <?php bloginfo('version'); ?> <a href="http://webworkblog.net/" >Mein erstes Template</a> nach einem Tutorial von <a href="http://webworkblog.net">webworkblog.net</a></div></div>
</body>
</html>
Wir haben hier am Anfang ein DIV geschlossen, dann ein paar Infos zur verwendeten Blogsoftware und zum verwendeten Theme. Am Ende werden noch der Body und der HTML-Tag geschlossen.
WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5
Ähnliche Beiträe
#1 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo#4 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo#3 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
Dieses Tutorial soll eine Hilfe sein, wenn man ein eigenes WordPress Template (auch Theme oder Style genannt) erstellen will. Dazu ist natürlich das Weblogsystem WordPress nötig. Außerdem sind (x)HTML, CSS und wenn möglich einige PHP Grundkenntnisse vorteilhaft.
Dateien
Folgende Dateien werden in diesem HowTo erstellt und bearbeitet:
- 404.php
- comments.php
- footer.php
- header.php
- index.php
- screenshot.png
- searchform.php
- sidebar.php
- single.php
- style.css
- *images/
- *images/logo.png
* Diese Dateien/Ordner werden nicht umbedingt benötigt.
Theme Informationen
Die ersten Informationen die im Adminpanel nebendem Screenshot angezeigt werden, sind Bestandteil der style.css.
/*
Theme Name: Mein erstes Template
Theme URI: http://webworkblog.net
Description: "Mein erstes Template" is a two column theme for WordPress 2.x.
Version: 1.0
Author: Sebastian Hobert
Author URI: http://webworkblog.net
License: GPL
*/
Die Option “License” ist optional und wird im ACP nicht angezeigt. Sie ist jedoch für den User ganz nützlich, ob und in welchem Umfang er das Template weiter “verbreiten” und weiter “verarbeiten” darf.
WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5
Ähnliche Beiträe
#4 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo#3 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo#5 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
Letzte Kommentare