De WordPress website www.kaaienloop.nl maakt gebruik van een pagina waarop een overzicht van fotoalbums wordt getoond.
Ieder fotoalbum bestaat uit:
- Een afbeelding
- Met rode horizontale balk, die weer bestaat uit
- Een titel
- Een knop met hyperlink
- Hover effect als je met de muis over de balk gaat, wordt transparant
Visueel ziet het er zo uit:
In eerste instantie denk je upload een plaatje en maak dat aanklikbaar en klaar. Helaas dat was niet mogelijk. Alleen het rode gedeelte mocht aanklikbaar zijn. Wanneer de muis over het rode gedeelte ging moest dit ook transparant worden. Je komt dus al gauw uit op een combinatie van afbeelding en CSS. Daarnaast moest het ook nog gemakkelijk te beheren zijn.
Dit was een stukje maatwerk wat dus niet met WordPress zelf, een thema of plugin opgelost zou kunnen worden. Ik heb daarom gebruik gemaakt van de shortcode functionaliteit van WordPress.
Voor ieder album heb ik de volgende shortcode toegevoegd:
[album_image title="titel" image="link_naar_plaatje" url="link_naar_fotos"]
Vervolgens heb ik in het functions.php bestand van het thema de volgende functie toegevoegd:
function childtheme_album_image( $params ) {
$params = shortcode_atts( array(
'title' => 'image that must be showed',
'image' => 'image that must be showed',
'url' => 'url that must be showed'
), $params, 'album_image' );
// Render a img tag, when available.
if (isset($params['image'])) {
$image = '<img src="' . $params['image'] . '">';
} else {
$image = '';
}
// Render a link tag, when available.
if (isset($params['url'])) {
$link = '<a href="' . $params['url'] . '">' . $params['title'] . '<span></span></a>';
} else {
$link = '';
}
// Render a album.
$html = '
<div class="small-12 medium-6 columns album">' . PHP_EOL
. ' ' . $image . PHP_EOL
. ' ' . $link . PHP_EOL
. ' </div>
' . PHP_EOL;
return $html;
}
add_shortcode( 'album_image', 'childtheme_album_image' );
Bovenstaande functie wordt uitgevoerd voor iedere shortcode die WordPress tegenkomt en begint met “album_image”. De shortcode parameters worden gecontroleerd en vervolgens omgezet naar HTML code bestaande uit div, a en img elementen. De CSS van het thema zorgt vervolgens voor de juiste afmetingen, posities en kleuren.