
Wordpress Theme Tutorial: Teil 4
Im Teil 3 meines Tutorials ging es um die WordPress-Loop. Wir haben damit bereits eine erste Ausgabe. Beim Aufruf eines Artikels wird bereits der Inhalt angezeigt. Jetzt möchte ich aber auch, dass die einzelnen Blog-Seiten und Blog-Artikel vom Design her sich etwas von der Startseite unterscheiden. Hierfür werden eine page.php und eine single.php angelegt. Wer möchte kann eine Kommentar-Funktion unterhalb der Artikel einbinden. Wie das geht, beschreibe ich hier.
Inhalt des Tutorials:
- Teil 1: WordPress-Template Dateien und Theme-Einstellungen
- Teil 2: Sidebar, Header, Footer und Index.php
- Teil 3: WordPress-Loop und Blätterfunktion
- Teil 4: Seiten, Artikel und Kommentarbereich
1. Page.php definieren
Wir fangen mit der page.php an, die für die Ausgabe einer WordPress-Seite zuständig ist. Die ist schnell erstellt. Der PHP-Inhalt kann aus der index.php kopiert und etwas angepasst werden. So sieht eine page.php aus:
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1 class="post_title entry-title"><?php the_title(); ?></h1>>
<?php edit_post_link('Bearbeiten', '<p>', '</p>');?>
<div class="entry">
<?php the_content(); ?>
</div><br>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Entfernt wurde die Blätterfunktion und der Titel ist jetzt von einem h1-HTML-Tag umschlossen. WordPress-Seiten haben nicht immer eine Kommentar-Funktion. Daher lasse ich sie hier weg.
2. Single.php mit Kommentar-Funktion einfügen
Die Single.php zeigt einen einzelnen Blog-Artikel an. So sieht sie bei mir aus.
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="post_title entry-title"><?php the_title(); ?></h1>
<div class="meta">
<p>
<span class="date"><?php the_date('d.m.Y'); ?></span> |
<?php the_author(); ?> |
<?php the_category(', '); ?> |
<a href="<?php the_permalink() ?>#comments"><?php comments_number('Schreibe einen Kommentar','1 Kommentar','% Kommentare'); ?></a>
<?php edit_post_link('Bearbeiten', ' | ');?>
</p>
</div>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
<?php comments_template(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Eigentlich wäre es möglich die Loop für den Kommentarbereich direkt in die single.php einfließen zu lassen. Ich lagere den Kommentarbereich allerdings lieber mit der Funktion „comments_template()“ in eine comments.php aus. Dadurch wird das WordPress-Theme übersichtlicher und bei Bedarf kann die Kommentar-Funktion schnell auch in die Page.php eingebunden werden.
3. Der Kommentarbereich: comments.php
Kommentare sind eine gute Möglichkeit um Feedback von deinen Lesern einzuholen und mit deinen Lesern zu kommunizieren. Bei mir ist die comments.php etwas länger. Los geht es mit einer Abfrage, die alle Besucher abfängt, die versuchen die comments.php direkt aufzurufen. Sie erhalten eine Fehlermeldung „Die Datei „comments.php“ kann nicht direkt aufgerufen werden.“.
Nun wollen wir eine Hinweis-Box mit Informationen zum Artikel (Schlagwörter, Trackback-URL, Feed-URL) erstellen. Mit folgendem PHP-Code geht es:
<div class="kom_hinweis"><div class="a">
Dieser von <?php the_author(); ?> geschriebene Beitrag hat bislang <?php comments_number('keine Reaktionen', 'eine Reaktion', '% Reaktionen' )?>. Schreibe einen <a href="#kommentarformular">Kommentar</a> oder sende einen <a href="<?php trackback_url(); ?>" rel="nofollow">Trackback</a> ab. Sollte dieser sinnvoll sein, schalte ich ihn gerne frei. Ansonsten empfehle ich den kostenlosen <a href="<?php bloginfo('rss_url'); ?>">Feed</a>. Schlagwörter:
<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
$out .= '<a href="';
$out .= get_tag_link($tag->term_id);
$out .= '">'.$tag->name.'</a>, ';
}
$out = substr($out, 0, strlen($out)-2);
echo $out;
}
?>
</div></div>
Nun wollen wir falls vorhanden die Kommentare ausgeben. Unterschieden wird auch zwischen normalem Kommentar, Trackback und Pingback. Der Quellcode sieht dafür so aus:
<a name="comments"></a>
<?php if(have_comments()) echo '<div id="respond">Bisherige Reaktionen</div>'; ?>
<div id="kommentare">
<?php
$counter = 0;
foreach ($comments as $comment) : ?>
<?php $kommentar_typ = get_comment_type(); ?>
<?php $counter++; # Für Farbwechsel ?>
<div class="comment <?php if($counter%2==1) echo 'hellgrau'; else echo 'dunkelgrau';?>" id="comment-<?php comment_ID() ?>">
<div class="a">
<?php if ($kommentar_typ == "comment"){ ?>
<?php if(function_exists('get_avatar')) {
echo get_avatar( get_comment_author_email(), $size = '96');
} ?>
<?php } ?>
<small class="commentmetadata">
<?php
switch($kommentar_typ) {
case ('trackback'): echo ' Trackback:'; break;
case ('pingback'): echo ' Pingback:'; break;
}
?>
<?php comment_author_link() ?> <strong>|</strong> am <?php comment_date('j. F Y') ?> um <?php comment_time('H:i') ?> Uhr
</small>
<?php if ($kommentar_typ == "comment"){ ?>
<?php comment_text() ?>
<?php } ?>
<?php if ($comment->comment_approved == '0') : ?>
<strong class="rot">Achtung: Dein Kommentar muss erst noch freigegeben werden.</strong><br />
<?php endif; ?>
<br class="clear">
</div>
</div>
<?php endforeach; /* end for each comment */ ?>
</div><!-- kommentare -->
Die Kommentare sollen nicht nur angezeigt, sondern auch in unserem Theme erstellt werden können. Hierfür wird ein Kommentar-Formular eingebunden.
<a name="kommentarformular"></a>
<div id="kommentar_formular">
<div id="respond">Kommentar schreiben</div>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>
Eingeloggt als <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?>
Fertig! Ich hoffe, dass euch mein Tutorial soweit gefallen hat. Bestehen noch Fragen?
Kommentare & Pingbacks