Verschillende logo’s op pagina’s met Conditional Tags

Met Conditional Tags kun je bepaalde elementen in je thema zich laten aanpassen aan een “situatie”. Stel dat je een online magazine hebt en je logo een klein beetje wilt veranderen per categorie, dan zijn Conditional Tags de oplossing.

Ander logo weergeven op een specifieke pagina

In dit voorbeeld willen we de “Beginners”-pagina van WordPress Lounge een speciaal logo geven. Normaal gesproken is het logo bovenin je thema een “statisch” element; een onderdeel dat op iedere pagina hetzelfde is.

Het logo dat wij willen gebruiken voor ons Beginners-onderdeel ziet er als volgt uit.

Om te zorgen dat de Beginners-pagina dit logo toont gaan we Conditional Tags gebruiken.

Ons logo wordt nu nog als volgt opgeroepen, omdat het op iedere pagina hetzelfde is:

<a href="<?php echo home_url(); ?>"><img src="https://www.wplounge.nl/wp-content/uploads/2012/11/wordpressloungelogoPNG1.png" alt="<?php bloginfo( 'name' ); ?>" /></a>

Wij willen dit behouden, maar veranderen wanneer iemand zich op onze Beginners-pagina bevindt. Dit doen we met de volgende code:

<?php if (is_page('224')) { ?>
<a href="https://www.wplounge.nl/"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/wordpressloungelogo-beginners.png" alt="<?php bloginfo('name'); ?>" title="WordPress Lounge" /></a>
<?php } else { ?>
<a href="https://www.wplounge.nl/"><img src="https://www.wplounge.nl/wp-content/uploads/2012/11/wordpressloungelogoPNG1.png" alt="<?php bloginfo('name'); ?>" title="WordPress Lounge" /></a>
<?php } ?>

Uitleg bij de code:

• De eerste regel bepaalt of de bezoeker zich op de “Beginners”-pagina bevindt (het id-nummer van die pagina is “224“).
• De tweede regel vertelt wat er getoond moet worden als de bezoeker zich daar bevindt.
• Daarna wordt er een “else”-statement gebruikt om te vertellen wat er in alle andere scenario’s moet gebeuren, namelijk;
• Op de vierde regel laten we het “normale” logo zien, voor alle pagina’s die niet onze “Beginners”-pagina zijn.

Onderliggende pagina’s

Het is gelukt, op de Beginners-pagina wordt dankzij bovenstaande code een speciaal logo getoond. Helaas gebeurt dit niet op subpagina’s van het “Beginners”-0nderdeel. We willen natuurlijk dat het speciale Beginners-logo daar óók getoond wordt, want die pagina’s horen ook bij ons gedeelte voor beginners.

Dit kan door het volgende stukje code toe te voegen:

|| '224' == $post->post_parent

Daardoor gaat het gehele stuk code (van het eerdere voorbeeld) er als volgt uit zien:

<?php if (is_page('224') || '224' == $post->post_parent ) { ?>
<a href="https://www.wplounge.nl/"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/wordpressloungelogo-beginners.png" alt="<?php bloginfo('name'); ?>" title="WordPress Lounge" /></a>
<?php } else { ?>
<a href="https://www.wplounge.nl/"><img src="https://www.wplounge.nl/wp-content/uploads/2012/11/wordpressloungelogoPNG1.png" alt="<?php bloginfo('name'); ?>" title="WordPress Lounge" /></a>
<?php } ?>

Nu laat WordPress het speciale Beginners-logo ook zien op subpagina’s van “beginners”, zoals te zien in onderstaande afbeelding.