WordPress theme maken deel 2

We vervolgen ons artikel over het maken van een wordpress theme met een tweede deel. In dit deel gaan we in op ’the loop’, ‘The loop’ is de motor achter wordpress. Hiermee wordt iedere post getoond. Elke code die in de loop geplaatst wordt zal in iedere post terugkomen. In het vorige artikel hebben we stap 1 en 2 behandeld over de stylesheet en de header. In dit tweede artikel gaan we verder met stap 3.

Stap 3 ‘The Loop’ in WordPress

Open het bestand index.php. Deze is nu leeg, hier vul je het volgende in:

    <?php get_header(); ?>
    <div id="main"> 

De eerste regel zorgt ervoor dat de kop, header, wordt aangeroepen in de index. Een header-template is erg gemakkelijk omdat je, wanneer je iets in de kop wilt veranderen, je dat alleen hoeft te doen in de header en niet in ieder apart document.
Als tweede wordt de basis ‘div’ geopend. Deze wordt ‘main’ genoemd. Deze div omsluit alle andere code. We gebruiken trouwens steeds de engels benaming, deze zul je namelijk vaker, op andere plaatsen ook tegenkomen.

Nu dan de wordpress loop. Deze start als volgt:

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

De loop gaat verder met de titel van de post en de metadata voor de post. Deze hele post is geplaatst in een div met de id “post”. Daarnaast wordt de inhoud van de post ook weer voorzien van een div, nu met de naam “entry”. Hierdoor kun je gemakkelijk het uiterlijk van een afzonderlijke post en de inhoud van die post veranderen. In de voorbeeld CSS is er bijvoorbeeld een stippellijn geplaatst boven en onder de titel. Hiermee worden de artikelen visueel in stukken verdeeld. De code:

    <div class="post" id="post-<?php the_ID(); ?>">
    <div style="border-bottom:1px dotted #000;"></div>
    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <div class="entry">
    <div style="padding-bottom:5px;border-bottom:1px dotted #000;">
    <p class="postmetadata">
    <?php the_time('l, F jS, Y') ?> | <?php _e('Geplaatst in:'); ?> <?php the_category(', ') ?> <?php _e('door'); ?> <?php the_author(); ?> |
   <?php comments_popup_link('Geen reacties »', '1 Reactie »', '% Reacties »'); ?> <?php edit_post_link('Bewerk, ' | ', ' '); ?>
    </p>
    </div>
    <br /> 

Functie ’the_content()’ laat de inhoud van de post zin. Als je alleen de korte voorbeelden van een artikel wilt hebben zet je voor ’the_content()’ in de plaats, de functie ’the_excerpt()’.
Dus zo:

    <?php the_content(); ?> 

Vergeet niet de divs weer af te sluiten en daarbij aan te geven wat deze div afsluit.

    </div><!– sluit entry –>
    </div><!– sluit post –>

De loop eindigt met ‘endwhile;’

    <?php endwhile; ?>

Het eerste onderdeel na de loop is de navigatie div. Op het einde van de pagina komt er ‘Volgende pagina’ of ‘vorige pagina’ te staan. Hiermee kunnen bezoekers eerdere of latere berichten van je bezoeken.

    <div class="navigation">
    <?php posts_nav_link(); ?>
    </div><!– sluit navigation –>

Vervolgens geven we aan wat er komt te staan als de loop faalt in het tonen van posts of artikelen. In dit voorbeeld verschijnt de ‘Not Found’ melding.

    <?php else : ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    Not Found
    </div><!– sluit post –>
    <?php endif; ?>

Tenslotte sluiten we de main div en includen we de sidebar en de footer templates.

    </div><!– close main –>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

Stap 4 – Andere Loops in WordPress

Je kunt bovenstaande code ook in andere onderdelen van je site inpassen. Zo kun je dezelfde code gebruiken, of functie the-content() aanpassen naar the_excerpt(), als je korte beschrijvingen van een post wilt.

Nu openen we page.php. De code is min of meer dezelfde:

<?php get_header(); ?>
    <div id="main">
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    <div style="border-bottom:1px dotted #000;"></div>
    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <div class="entry">
    <div style="padding-bottom:5px;border-bottom:1px dotted #000;">
    <?php the_time('l, F jS, Y') ?> | <?php edit_post_link('Edit', ", "); ?>
    </div>
    <br />
    <?php the_content(); ?><br />
    <?php link_pages('<p><strong>Pagina's:</strong> ', '</p>', 'number'); ?>
    </div><!– sluit entry –>
    </div><!– sluit post –>
    <?php endwhile; ?>
    <?php else : ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    Not Found
    </div><!– sluit post –>
    <?php endif; ?>
    </div><!– sluit main –>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

De metadata is verwijderd (categorie en reactie informatie is nu niet nodig), na de functie the_content() komt er nog wat code bij:

    <?php link_pages('<p><strong>Pagina's:</strong> ', '</p>', 'number'); ?>

Voor het geval de inhoud over meerdere pagina’s verdeeld wordt.

Dat is het voor nu. In het volgende artikel gaan we in op de single post template, single.php. Ook gaan we aan de slag met het reactiegedeelte.