Wer auf der Suche nach einem einfachen Bloggingtool ist, das ohne Datenbank läuft und wer keine spezielleren Features wie Mehrbenutzerverwaltung benötigt, für den ist das schlanke FlatPress eine gute Wahl. Trotz der Ähnlichkeit im Namen hat FlatPress jedoch nichts mit WordPress zu tun, von daher funktioniert es etwas anders und man kann auch nicht die für WordPress entwickelten Plugins und Themes  verwenden.

Susa hat sich im Wunschbuch erkundigt, wie man das Layout (Theme) eines FlatPress-Blogs ändern kann – das erkläre ich in diesem Tutorial.
Wie fast immer hat man auch bei FlatPress die Wahl zwischen einem vorgefertigten oder aber einem komplett selber geschriebenen Theme. Mit Letzterem kann man natürlich all seine Sonderwünsche umsetzen, dies erfordert aber eine gewisse Einarbeitungszeit, um zu verstehen, wie Themes in FlatPress funktionieren. Das genau zu erklären, würde den Umfang dieses Tutorials sprengen, weswegen ich ausführlicher auf den Punkt “ein fertiges Layout installieren” eingehen werde.

ein vorgefertigtes Layout installieren

Zunächst einmal sucht ihr euch ein Theme heraus, das euch gefällt. Stöbern könnt ihr da beispielsweise in der FlatPress-Wiki.
Das heruntergeladene Archiv entpackt ihr auf eurer Festplatte und ladet es ins Verzeichnis /fp-interface/themes auf euren Webspace. Wenn ihr dann im Adminbereich eures Blogs oben in der waagerechten Navigationsleiste auf “Themes” klickt, taucht eurer eben hochgeladenes Theme dort mitsamt einer Vorschaugrafik auf. Über einen Klick könnt ihr es ganz einfach aktivieren.

ein Layout verändern

Wenn ihr einen Blick in das Verzeichnis eures Themes werft, seht ihr dort jede Menge Template-Dateien (mit der Endung *.tpl), eine PHP-Datei sowie die Verzeichnis /res und /images. Letzteres beinhaltet die im Theme verwendeten Bilder und kann auch anders heißen, etwa /imgs, oder vielleicht auch ganz fehlen. Der res-Ordner beinhaltet die Stylesheets (*.css), wobei deren Anzahl unterschiedlich ausfallen kann. Die style.css ist in der Regel für das Layout eures Blogs zuständig und die admin.css für das Aussehen des Adminbereichs. Zusätzliche Stylesheets können beispielsweise spezielle Formatierungen für die Ausgabe im Druck liefern, die interessieren hier aber erst einmal nicht.

Wir werfen jetzt einen Blick auf die Template-Dateien. Deren Namen sollten weitestgehend selbsterklärend sein; die header.tpl wird zu Beginn jeder Seite eingebunden, die footer.tpl am Ende, die index.tpl stellt die Blogeinträge dar, statische Seiten werden über die statics.tpl ausgegeben, den Adminbereich steuert die admin.tpl, und so weiter.

In den Templates selber findet ihr normales HTML bzw. XHTML – und dann eine Art Platzhalter für den eigentlichen Inhalt wie etwa den Blogeintrag. In WordPress werden diese Informationen über die Template Tags abgerufen, FlatPress verwendet Smarty. Beides sind letzlich PHP-Schnipsel, die den eigentlichen PHP-Code vereinfachen, um ihn bequemer im Theme verwenden zu können. Eine Erläuterung, wie Smarty und Themes in FlatPress funktionieren, findet ihr hier.

An dieser Stelle soll es aber lediglich darum gehen, wie ihr ein Theme ändern könnt. Und das geht eigentlich genauso wie bei WordPress-Themes oder selbstgeschriebenen Layouts: Divs und sonstiges MarkUp fügt ihr in die Template-Dateien ein, verseht es nach Herzenslust mit Klassen oder IDs, und formatiert diese anschließend über die Stylesheets. :o)

Übrigens benötigt FlatPress ebenso wie auch WordPress ein Zuhause auf eurem eigenen Webspace.

Bjo hat sich im Wunschbuch erkundigt, ob man das Kommentarformular auch direkt unterhalb eines Beitrags einbinden kann, sodass man nicht erst einem entsprechenden Link folgen muss. Klar geht das. :-)

normalerweise…

Standardmäßig ist es bei den meisten Themes so, dass man auf der Übersichtsseite der Artikel (also auf der Startseite, der Übersichtsseite einer Kategorie oder eines Tags, usw.) unterhalb des Artikels einen kleinen Hinweis sieht: “x Kommentare vorhanden” oder etwas in dieser Art.
Wenn man nun darauf klickt, gelangt man zur direkten Ansicht des Artikels, wo auch die bereits vorhandenen Kommentare angezeigt werden und man die Möglichkeit hat, selbst einen Kommentar zu verfassen.

so geht’s

Hier werden jeweils verschiedene Templates (also PHP-Dateien) verwendet. Auf der Startseite ist dies die index.php, bei den Kategorien die categories.php, … und für die eigentliche Artikelseite die single.php.
Wenn man sich nun die entsprechenden Dateien anschaut, muss man eigentlich nur die Inhalte der index.php (oder welche Seite ihr auch immer mit der direkten Kommentarfunktion versehen wollt) mit der single.php abgleichen.

Eure index.php sieht im Wesentlichen ungefähr wie folgt aus:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="artikel">
<?php the_content(); ?>
</div>

<div class="meta"><?php comments_popup_link(__('keine Kommentare'), __('1 Kommentar'), __('% Kommentare'), '', __('Kommentarfunktion deaktiviert') ); ?></div>
</div>

<?php endwhile; ?>

Unterhalb des Contents – in dem Div namens meta – wird der Link ausgegeben, über den ihr zur Kommentarfunktion gelangt. Dieser Part des Codes muss nun abgeändert bzw. ergänzt werden: mit Hilfe des Template Tags <?php comments_template(); ?> bindet ihr die Datei comments.php ein, die sowohl die bereits vorhandenen Kommentare ausgibt, als auch das Formular bereitstellt.

Also:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="artikel">
<?php the_content(); ?>
</div>

<?php comments_template(); ?>

<?php endwhile; ?>

Das war’s auch schon. :o)