Een wordpress template maken deel 3

In maak je eigen wordpress theme deel 1 en deel twee hebben we een start gemaakt met het zelf ontwerpen van een WordPress template. Deze keer gaan we aan de slag met de gedeeltes voor de individuele pagina, in WordPress ‘single’ genoemd en de reacties. Voor veel van deze onderdelen geldt dat je een hele hoop kunt aanpassen met behulp van CSS. Het is niet de bedoeling dat je alles klakkeloos overneemt, experimenteer zelf met aanpassingen, dan wordt het echt je eigen template!

Individuele of ‘single’ post

Dit is de pagina waar de uiteindelijke post komt te staan. Wanneer je single.php opent dan is dit bestand als het goed is leeg. De volgende code plaats je hierin.

<?php the_content(); ?><br />
<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
</div><!– close entry –>
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div><!– close post –>
<?php endwhile; ?>
<?php else : ?>
<div class="post" id="post-<?php the_ID(); ?>">
Not Found
</div><!– close post –>
<?php endif; ?>
</div><!– close main –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

De meeste van de code lijkt op datgene wat we eerder gemaakt hebben. Je zult nu dus al wat bekender zijn met een aantal zaken. Ook zijn er een paar nieuwe regels, de volgende:
In postmetadata is de informatie over reacties weggelaten. Deze zullen namelijk verderop verschijnen en zijn dus hier niet meer nodig.
Net na het einde van de ‘entry’ wordt de functie om de reacties aan te roepen ingeschakeld. In het engels ‘comments’ genoemd. Omdat deze ‘comments’ in een specifieke div geplaatst zijn met een klassenaam, zijn reacties straks makkelijker te verwerken in een stylesheet.

<div class="comments-template">
<?php comments_template(); ?>
</div>
De rest van de code is dezelfde als in de andere templates die in deel 1 en 2 zijn gemaakt.

Reacties of ‘comments’

Nu openen we comments.php, de volgende code kun je hierin weer plaatsen:

<?php // Deze regels niet verwijderen
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>
<h2><?php _e('Password Protected'); ?></h2>
<p><?php _e('Enter the password to view comments.'); ?></p>
<?php return;
}
}
/* Deze variable is om de comment achtergrond 'alt' aan te passen */
$oddcomment = 'alt';
?>
<!– Hier kun je aanpassen. –>
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>"</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>" style="padding:0;">
<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?> <?php comment_time() ?></a> <?php edit_comment_link('Edit Comment',' ',' '); ?> <?php _e('Said:'); ?>
<?php if ($comment->comment_approved == '0′) : ?>
<em><?php _e('Your comment is awaiting moderation.'); ?></em>
<?php endif; ?>
</div><div style="border-bottom:1px solid #fff;"></div>
<div style="padding:10px;"><?php comment_text() ?></div>
</li>
<?php /* Verandert iedere oneven reactie in een verschillende class */
if ('alt' == $oddcomment) $oddcomment = ' ';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<?php else : // geen reacties geeft dit weer ?>
<?php if ('open' == $post->comment_status) : ?>
<!– Als er geen berichten zijn maar wel kunnen gegeven worden. –>
<?php else : // comments are closed ?>
<!– Als reacties geven gesloten is. –>
<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3><br />
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="40″ tabindex="1″ style="font-family:tahoma,sans-serif;" />
<label for="author"><small>Name <?php if ($req) echo “(required)"; ?></small></label></p><br />
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="40″ tabindex="2″ style="font-family:tahoma,sans-serif;" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo “(required)"; ?></small></label></p><br />
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="40″ tabindex="3″ style="font-family:tahoma,sans-serif;" />
<label for="url"><small>Website</small></label></p><br />
<?php endif; ?>
<!–<p><small><strong>XHTML:</strong> <?php _e('You can use these tags:'); ?> <?php echo allowed_tags(); ?></small></p>–>
<p><textarea name="comment" id="comment" cols="60″ rows="10″ tabindex="4″ style="font-family:tahoma,sans-serif;"></textarea></p><br />
<p><input name="submit" type="submit" id="submit" tabindex="5″ value="Submit Comment" style="font-family:tahoma,sans-serif;" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p><br />
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // Als registreren verplicht is ?>
<?php endif; // Niet verwijderen!! ?>

In dit stuk staat veel PHP code waar we nu niet teveel op ingaan. Dit bestand wordt toch niet te vaak veranderd. Toch een paar aandachtspunten.

Ten eerste, de code vanaf regel 47 tot en met regel 64, is het formulier om de reacties te posten. Hierin kun je lettertypes, kleuren enz. aanpassen.

De regel $oddcomment = 'alt'; is erg handig. hiermee kun je de even en oneven berichten een verschillend uiterlijk geven. De eerste bijvoorbeeld wat donkerder dan de tweede en zo om en om. Verderop in de code veranderen we de class van de oneven reacties en op die manier kun je ze in CSS opmaken.

&tl;?php /* Verandert iedere oneven reactie in een verschillende class */
if ('alt' == $oddcomment) $oddcomment = ”;
else $oddcomment = ‘alt’;
?>

In het voorbeeld is een witte lijn geplaatst tussen de reactie en de metadata van de reactie om deze visueel te scheiden. Deze regel kun je natuurlijk zonder probleem weghalen als je dat wenst.
<div style="border-bottom:1px solid #fff;"></div>

Als je wat beter naar de code kijkt zie je dat ieder deel van de ‘comments’ een eigen class heeft. Hiermee kun je in style.css elk onderdeel aanpassen. Bijvoorbeeld met de volgende code (plakken in style.css dus!):

/* Comments */
.comments-template {text-align:left;}
.comments-template ol {margin:0;padding:0 0 15px;list-style:none;}
.comments-template ol li {margin:10px 0 0 0;padding:0;color:#111;background:#e8e8e8;font-size:10pt;}
.commentlist li.alt {background:#c7c7c7;}
.comments-template h2, .comments-template h3 {font-family:tahoma,sans-serif;}
.commentmetadata {padding:5px 10px 5px 10px;font-size:8pt;}
.comments-template p.nocomments {padding:0;}
.comments-template textarea {font-family:tahoma,sans-serif;font-size:10pt;}
/* End of comments */

Voor de even reacties gebruik je deze regel:
.comments-template ol li {margin:10px 0 0 0;padding:0;color:#111;background:#e8e8e8;font-size:10pt;}
Voor de oneven reacties:
.commentlist li.alt {background:#c7c7c7;}
De oneven reacties erven de attributen van de even reactie class, je hoeft dus alleen wat anders is te veranderen, in dit voorbeeld hebben we alleen de achtergrond aangepast de rest is hetzelfde als bij de even reacties.

De eerste regel gebruik je om het hele reactiegedeelte van stijlen te voorzien. De tweede is voor de lijst.
.comments-template {text-align:left;}
.comments-template ol {margin:0;padding:0 0 15px;list-style:none;}

De headers verander je met:
.comments-template h2, .comments-template h3 {font-family:tahoma,sans-serif;}
Comments’ metadata wordt aangepast met:
.commentmetadata {padding:5px 10px 5px 10px;font-size:8pt;}
Stijl als er nog geen reacties zijn:
.comments-template p.nocomments {padding:0;}
En tenslotte de textarea aanpassen met
.comments-template textarea {font-family:tahoma,sans-serif;font-size:10pt;}
Dat is het voor deze keer. De volgende keer gaan we aan de slag met de sidebar en het menu.