Hallo zusammen. Hier stelle ich euch ein kleines Tutorial vor, wie ihr eigene Themes für Anchor erstellen könnt.
Was braucht ihr dafür?
- Eine Ordnerstruktur für euer Theme mit sprechenden Unterordnern für z.B. CSS-Ressourcen
- Folgende Dateien: about.txt, header.php, footer.php, posts.php, page.php, article.php
- Grundlegende Kenntnisse in HTML, PHP und CSS
Wie funktioniert es?
Zunächst müsst ihr eure about.txt folgendermaßen füllen:
Theme name: MeinErstesAnchorTheme
Description: Beschreibung
Author name: MeinName
Author site: http://www.meinehomepage.de
Jetzt müssen die .php-Dateien richtig befüllt werden. Dazu gibt Anchor uns ein paar praktische Funktionen so kann man über simplen PHP-Befehle den Header und den Footer in jede andere Datei importieren. Weiterhin lässt Anchor uns über einfache PHP-Befehle alle relevanten Inhalte einfach einbinden, später mehr dazu. Fangen wir erstmal mit der header.php an:
Header
Der Aufbau der Header-Datei ist simpel. Ich werde hier ein Beispiel zeigen und es etwas erläutern, aber es Spricht denke ich auch für sich.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="<?php echo theme_url('/style/style.css'); ?>">
<link rel="shortcut icon" href="<?php echo theme_url('/img/favicon.png'); ?>">
</head>
<?php if(has_menu_items()): ?>
<nav id="mainnav">
<ul></code>
<code><?php while(menu_items()): ?>
<li><a href="<?php echo menu_url(); ?>" title="<?php echo menu_title(); ?>">
<?php echo menu_name(); ?></a></li>
<?php endwhile; ?>
</ul>
</nav>
<?php endif; ?>
<body id="mainbody">
<header>
<div id="logo">
<a href=""><img src="<?php echo theme_url('/img/Logo.png'); ?>" /></a>
</div>
</header>
Wichtig ist eigentlich nur, den Aufbau offen zu lassen, sprich den zwar zu eröffnen, ihn aber erst im Footer wieder zu beenden. So könnt ihr ganz leicht Inhalte dazwischen einbinden. Man sieht hier auch schon einige nützliche Funktionen:
<?php echo theme_url(); ?>
liefert euch den Pfad eures Themes,
<?php echo base_url(); ?>
liefert euch die Hauptadresse eures Blogs und
<?php if(has_menu_items()): ?>
<?php while(menu_items()): ?>
<?php endwhile; ?>
<?php endif; ?>
ist eine Schleife, um euch ein Menü zu erstellen.
Footer
Auch der Footer ist ziemlich simpel, ich werde auch hier wieder exemplarisch den Footer von meinem Blog vorstellen:
<footer>
<div id="credits">
<small>Theme GeckoPi created for <a href="http://anchorcms.com">Anchor-CMS</a> by Stefan
Burkhardt.</small>
</div>
</footer>
</body>
</html>
Hier ist eigentlich nur wichtig zu beachten, dass im Footer das body-Tag geschlossen wird.
Ich werde euch nun noch exemplarisch, an der posts.php zeigen wie ihr die anderen Seiten aufbaut, da das Prinzip immer das gleiche ist. Am Ende werde ich euch noch eine Auflistung der wichtigsten Befehle geben.
Posts
Auch hier wieder die Posts von meinem Blog:
<?php theme_include('header'); ?>
<?php if(has_posts()): ?>
<?php $i = 0; while(posts()): ?>
<div class="posttype">
<?php if(strpos(article_title(),'Raspberry')===0): ?>
<h2 class="rpi">RPi</h2>
...
</div>
<div class="postcontent">
<article class="content">
<a class="posttitle" href="<?php echo article_url(); ?>"><?php echo article_title(); ?></a>
<small><?php echo article_date(); ?></small>
<div>
<p><?php echo article_description(); ?></p>
</div>
</article>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
<?php endwhile; ?>
<?php if(has_pagination()): ?>
<nav class="pagination">
<?php echo posts_prev(); ?>
<?php echo posts_next(); ?>
</nav>
<?php endif; ?>
<?php else: ?>
<p>Looks like you have some writing to do!</p>
<?php endif; ?>
<?php theme_include('footer'); ?>
Nehmen wir das ganze einmal auseinander.
Folgende Befehle binden euren Header und euren Footer ein:
<?php theme_include('header'); ?>
<?php theme_include('footer'); ?>
Danach baut ihr euch wie beim Menü eine Schleife, die eure Posts durchläuft, die ihr dann individuell formatieren könnt.
<?php if(has_posts()): ?>
<?php $i = 0; while(posts()): ?>
<?php endwhile; ?>
<?php endif; ?>
Der folgende Befehl dient dazu einen Link zur Einzelpost-Ansicht herzustellen:
<?php echo article_url(); ?>
Und mit diesen drei Befehlen, bekommt ihr den Titel, das Datum und die Beschreibung eures Posts:
<?php echo article_title(); ?>
<?php echo article_date(); ?>
<?php echo article_description(); ?>
Zum Schluss noch wie ihr die Pagination einbindet:
<?php if(has_pagination()): ?>
<nav class="pagination">
<?php echo posts_prev(); ?>
<?php echo posts_next(); ?>
</nav>
<?php endif; ?>
Das war dann auch schon die Posts-Seite. Am Anfang mag das recht viel wirken, doch man hat den dreh schnell raus.
Abschluss
Zum Abschluss noch ein paar Befehle mit denen ihr dann die restlichen Seiten aufbauen könnt.
article.php
<?php echo article_markdown(); ?>
, liefert den Inhalt des Posts.
page.php
<?php echo page_title(); ?>
, liefert den Titel der Seite.
<?php echo page_content(); ?>
, liefert den Inhalt der Seite.
Weiterführende Links
Am Ende gibts noch ein paar wichtige Links, die mir geholfen haben:
http://anchorcms.com/docs - besonders die "Function References" für oben aufgeführte php-Funktionen
http://webdesign.tutsplus.com/tutorials/creating-a-theme-for-anchor-cms/ ein englisches Tutorial zur Theme-Erstellung
Bei Fragen oder Anregungen schreibt mir einfach eine E-Mail!
Viel Spaß
Stefan
