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. WordpressVoor 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.

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

18 reacties

  1. Gisella schreef:

    Hier was ik na opzoek,wat super en wacht geduldig op deel 4 🙂

  2. Dounra schreef:

    Wanneer is de volgende af?!

  3. TimJ schreef:

    Ik heb nu alledrie de delen gedaan en ik krijg een foutmelding:
    Warning: Unexpected character in input: ”’ (ASCII=39) state=1 in C:xampphtdocsweblogwp-contentthemesFresh Styleindex.php on line 11

    Hoort dit zo te zijn of niet?

  4. Ibo schreef:

    dit is echt fantastic!! nu deel vier nog 😀

  5. Kees schreef:

    Nice!! Maar toch probeer ik het zelf te maken :P… Ik wacht op deel 3.

    blog-site.nl staat trouwens nu bij m’n favorieten!

  6. Wiggert Kalis schreef:

    Hier ook heel erg bedankt, dit leert een stuk sneller, leuker en makkelijker!

    Er staat een typefoutje in regel 22.

    comment_approved == ‘0′) : ?>

    Moet zijn:

    comment_approved == ‘0’) : ?>

  7. Wiggert Kalis schreef:

    Ow excuses, dat komt niet over.

    Het ‘ tekentje achter de 0 verschilt van het ‘ tekentje voor de 0.

  8. marc schreef:

    http://css-tricks.com/video-screencasts/

    #25 #26 en #41 staan video’s over wordpress, deze zijn ook erg handig voor de liefhebbers!

  9. Hanny schreef:

    Dankdank voor deze uitleg…
    Wacht ook geduldig op deel 4…

  10. Sander Goorden schreef:

    nou jammer genoeg nog geen deel vier.. dus ik heb alles gedelete en begin opnieuw bij: http://tellme.jeropocs.com/2009/01/21/tutorial-een-eigen-wordpress-theme-les-1/

  11. Nadia schreef:

    Komt het volgende deel nog!?

  12. admin schreef:

    Ik ga de 3 artikelen verbeteren, aanpassen en afmaken met een vierde deel, binnenkort te verwachten!

  13. Joran schreef:

    Wanneer komt deel 4 ?
    Of is die er al ?
    Ik kan hem iig niet vinden…

  14. admin schreef:

    kijk eens hier: http://localhost:8888/wordpress-template-maken.php, alle delen ineen, dus 1 tot en met 4.

  15. Marc van Leeuwen schreef:

    er zit een fout in regel 22 van de comments (het eerste code blok) n.l
    comment_approved == ‘0′) : ?>
    moet zijn:
    comment_approved == ‘0’) : ?>

    Let op de aanhalingstekens…

  16. Marc van Leeuwen schreef:

    comment_approved == ‘0’) : ?> bedoel ik

  17. Marc van Leeuwen schreef:

    check het het volle bericht in je admin gedeelte iig zijn de aanhalingstekens niet goed ‘ ‘

  1. 2 januari 2009

    […] staan. Ik kreeg vandaag een reactie op mijn andere website, met daarin de opmerking dat iemand blog-site bij zijn favorieten had geplaatst. Kijk dat is nu zo’n stimulans om er weer wat van te gaan maken! Wat vind […]

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *