Met WordPress is het mogelijk om een overzicht van verkorte berichten weer te geven. Dat kan bijvoorbeeld door de opdracht ‘the_excerpt()’ te gebruiken in plaats van ‘the_content()’ om de eerste paar woorden van een bericht te laden in plaats van het hele bericht.
Een andere manier is om van een bericht alleen een (door de schrijver geselecteerde) afbeelding te laden. Bij het schrijven van een bericht kan aangegeven worden welke afbeelding gebruikt moet worden als ‘thumbnail’. Standaard is deze optie niet aanwezig in WordPress. Om deze optie te activeren hebben we een extra php-bestand nodig: ‘functions.php’.
In ‘functions.php’ worden alle aanvullende functies beschreven die niet standaard bij een thema horen. We maken een nieuw (leeg) php bestand en slaan dat op als ‘functions.php’.
In ‘functions.php’ schrijven we de opdracht om thumbnails te ondersteunen:
<?php add_theme_support( ‘post-thumbnails’ ); ?>
Nu kunnen we in onze homepage (index.php) de thumbnails gebruiken. Eerst hebben we de standaard post-loop nodig om alle bericht informatie te laden. In onderstaand voorbeeld worden de berichten geladen een div met id-naam ‘berichten’.
<body>
<div id=”berichten”>
<?php while(have_posts()):
the_post();
endwhile; ?>
</div>
</body>
Als het bericht geladen wordt willen we alleen de titel van het bericht en de door de schrijver geselecteerde thumbnail zien. Omdat de gebruiker de mogelijkheid moet hebben om door te kunnen klikken naar het volledige bericht, plaatsen we de titel en de thumbnail samen in een a-tag met de class-naam ‘bericht_thumbnail’. We gebruiken de WordPress opdracht ‘the_permalink()’ om te linken naar het bijbehorende bericht.
Let op! We gebruiken nu html en php door elkaar. Vergeet dus niet de php-tags op de juiste plaats te openen en te sluiten. Eerst maken we de knop (a-tag).
<body>
<div id=”berichten”>
<?php while(have_posts()):
the_post(); ?>
<a class=”bericht_thumbnail” href=”<?php the_permalink(); ?>”>
</a>
<?php endwhile; ?>
</div>
</body>
Vervolgens plaatsen we in de knop een h4-tag met daarin de titel van het bericht en een thumbnail (die automatisch in een img-tag geplaatst zal worden).
<body>
<div id=”berichten”>
<?php while(have_posts()):
the_post(); ?>
<a class=”bericht_thumbnail” href=”<?php the_permalink(); ?>>
<h4><?php the_title(); ?></h4>
<?php the_post_thumbnail() ?>
</a>
<?php endwhile; ?>
</div>
</body>
We hebben nu een aanklikbare thumbnail. Als de thumbnail aangeklikt wordt, wordt de gebruiker doorverwezen naar het volledige bericht. Standaard gebruikt WordPress het bestand ‘index.php’ om het bericht te tonen. Om het bericht een eigen opmaak te geven is het bestand ‘single.php’ nodig.