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:
[codesyntax lang=“php“]
<?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(); ?>
[/codesyntax]
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.
[codesyntax lang=“php“]
<?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(); ?>
[/codesyntax]
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.“.
[codesyntax lang=“php“]
<?php if(!empty($_SERVER[‚SCRIPT_FILENAME‘]) && ‚comments.php‘ == basename($_SERVER[‚SCRIPT_FILENAME‘])) : ?>
<?php die(‚Die Datei „comments.php“ kann nicht direkt aufgerufen werden.‘); ?>
<?php endif; ?>
[/codesyntax]
Nun wollen wir eine Hinweis-Box mit Informationen zum Artikel (Schlagwörter, Trackback-URL, Feed-URL) erstellen. Mit folgendem PHP-Code geht es:
[codesyntax lang=“php“]
<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>
[/codesyntax]
Nun wollen wir falls vorhanden die Kommentare ausgeben. Unterschieden wird auch zwischen normalem Kommentar, Trackback und Pingback. Der Quellcode sieht dafür so aus:
[codesyntax lang=“php“]
<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 –>
[/codesyntax]
Die Kommentare sollen nicht nur angezeigt, sondern auch in unserem Theme erstellt werden können. Hierfür wird ein Kommentar-Formular eingebunden.
[codesyntax lang=“php“]
<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; ?>404.php erstellen, um eine individuelle Fehlerseite zu haben. In der functions.php können individuelle Funktionen, wie eine Breadcrumb (Brotkrümel-Navigation), definiert werden. In einer search.php kann im Theme eine individuelle Ausgabe für Suchergebnisse festgelegt werden. Zuletzt fehlt natürlich noch etwas wichtiges: Die style.css muss noch mit Inhalt gefüllt werden. Da hierfür Kreativität wichtig ist, überlasse ich es euch. Damit ihr nicht völlig ohne ein Grundgerüst startet, möchte ich euch die wichtigen Klassen und IDs vorgeben:
[codesyntax lang=“css“]
a img {border:0}
.a {padding:5px}
.alignleft {float:left; margin:0 15px 5px 0}
.alignright {float:right; margin:0 0 5px 15px}
html {height:100%;margin:0;padding:0}
body {background: url(“); background-repeat:repeat-x; background-color:#e9e9e9;font-family: arial, sans-serif; font-size:12px;margin:0;padding:0;display:block;height:100%;}
#content .blauetab th a{color:#FFFFFF}
blockquote {}
.clear {clear:both}
.comment {margin:0 0 20px 0}
.comment .avatar {float:right}
#content {float:left; width:590px; line-height:1.5em; padding:20px; color:#3D3D3D; font-size:1.2em;}
#content a{color:#1f4e7d}
#content a:hover{color:#4d7fb2; text-decoration:none}
#content p {margin:0 0 20px 0}
.entry {border-bottom:1px solid #e7e7e7;padding:0 0 20px 0}
.entry ul {margin:10px 0 20px 0;padding:0;list-style-position:inside;font-size:1em}
.entry ul li{list-style-image:url(“); padding:0}
.entry li ul{margin:0 0 0 40px; font-size:0.8em}
.entry li ul li{list-style-type:none; list-style-image:none}
#footer {color:#FFF; font-size:0.9em;border-top:3px solid #1f4e7d;background-color:#4d7fb2; background-image:url(“); background-repeat:repeat-x;}
#footer #footer_content {width:1000px; margin:0 auto 0 auto; padding:20px; clear:both; }
#footer a {color:#FFF;}
#footer a:hover {text-decoration: none}
ul#footer_sidebar {list-style-type: none;margin:0;padding: 0;}
ul#footer_sidebar .ueb {font-size:1.3em;text-transform:uppercase;font-weight:bold}
ul#footer_sidebar li.drittel {float: left;width:310px; margin:0 20px 0 0}
ul#footer_sidebar li ul {list-style-type: none; margin:5px 0 0 0; padding: 0}
ul#footer_sidebar li ul li{margin-bottom:5px}
ul#footer_sidebar li ul.archiv li{float:left; margin:0 8px 5px 0}
.gelb {color:#e9bb04}
.grau {color:#848484}
.gruen,.green {color:#0fce2f}
h1 {color:#3D3D3D; font-size:1.7em;font-weight:normal;margin:0 0 20px 0;padding:0;font-weight:normal}
h2 {color:#3D3D3D;font-size:1.4em;margin:0 0 10px 0;padding:0;font-weight:500}
h3 {color:#3D3D3D;font-size:1.2em;margin:0 0 10px 0;padding:0;font-weight:500}
#header_wrap {width:1000px; margin:10px auto 0 auto}
.km, .avatar {border:8px solid #FFF}
.kom_hinweis {background-color:#f3f3f3; border-bottom:1px solid #e7e7e7;margin:0 0 10px 0}
#kommentare .dunkelgrau{background-color:#f3f3f3; border:1px solid #e7e7e7}
#kommentare .hellgrau{background-color:#f7f7f7; border:1px solid #f3f3f3}
.logo {width:250px; margin:0 5px 0 0; border:0}
.m_o {margin-top:10px}
.menu_ueb {font-size:1.5em;text-transform:uppercase}
#navi{float:left; width:200px;}
#navi_r{float:right; width:340px; padding:10px 10px 0 10px;}
#respond, #responds {font-size:1.3em;margin:0 0 10px 0}
.rot {color:red}
.sidebar_widget {background-color:#f3f3f3; border:1px solid #e7e7e7; margin:0 0 10px 0}
.sidebar_widget ul { list-style-position:outside; margin:0; padding:0 0 0 20px; font-size:1em}
.sidebar_widget ul li{padding:0 0 3px 0;list-style-image:url(“);}
.sidebar_widget a{color:#1f4e7d; text-decoration:none}
.sidebar_widget a:hover{color:#4d7fb2}
.wp-caption {margin-bottom:10px}
#content .wp-caption {background-color:#f3f3f3; border:1px solid #e7e7e7}
#content .wp-caption img {margin:5px}
#content .wp-caption-text {font-size:0.8em; color:#848484; font-style:italic;margin:0;padding:5px}
.wrap {width:1000px; margin:0 auto 0 auto; background-color:#FFF; min-height:80%}
[/codesyntax]
Fertig! Ich hoffe, dass euch mein Tutorial soweit gefallen hat. Bestehen noch Fragen?