19. WordPress: Het gebruik van conditional tags.

Wat zijn nu conditional tags? Door een stukje code toe te voegen kunnen we pagina’s, artikels en categorieën zodanig aanpassen dat alleen relevante informatie wordt getoond.
Stel: Ik heb op mijn site 4 onderwerpen: Honden, Katten, Vissen, Muizen. Ik wil voor elke categorie een aparte header tonen; Hoe kan ik dat dan aanpassen? Het kan niet via de post_class dat we in het vorige hoofdstuk hebben behandelt, want dat is enkel voor gepubliceerde artikelen.

Inderdaad, conditional tags zijn de oplossing, en niet alleen voor deze probleemstelling. Zo gaan we ook onze blog optimaliseren voor zoekmachines door de <title> tag aan te passen, we gaan elke categorie of pagina een andere header geven en tot slot de sidebar aanpassen! Dat zal je allemaal kunnen nadat je dit hebt doorgenomen.

Introductie tot conditional tags: <title> tags aanpassen

Conditional tags en titel attributen, het is een goede mix op het gebied van SEO (Search Engine Optimization). De bedoeling is dat we de titel dat bovenaan wordt weergegeven in onze browser zodanig aanpassen dat het past bij de pagina dat de bezoeker bekijkt.

Zoals je misschien al hebt gelezen, is het belangrijk de meest belangrijke inhoud eerst te plaatsen, we gaan dit nu ook doen.

Open header.php en zoek het lijntje met de <title>-tag. We gaan dit nu compleet veranderen:


<title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name');
} elseif (is_single() ) { single_post_title(); } elseif (is_page() ) { bloginfo('name'); echo ': '; single_post_title();
} else { wp_title('',true); } ?>
</title>

Ok, je ziet ongetwijfeld zelf wel hoe het werkt. Stel dat iemand zich binnen een bepaalde categorie bevind, dan toont ook de naam van deze categorie bovenaan [single_cat_title();], gevolgd door de naam van je blog [ bloginfo('name'); ]

Meer dan dat is het niet, ik heb daar reeds goede resultaten mee gehad.

Conditional tags om elke categorie een aparte header te geven

Op onze test site hebben we nu enkel een titel staan in tekst tussen de <h1> tags. We zouden hier nog een afbeelding kunnen aan toevoegen. We zouden ook verschillende afbeeldingen kunnen laten zien afhankelijk van de categorie waarin je bezoeker zicht bevindt. Laat ons dit eens nader bekijken:

We hebben destijds gekozen om een wrapper te plaatsen van 1000 pixels. Om de theme een beetje mooi te houden, gaan we dus op zoek naar afbeeldingen van dezelfde breedte (of beter nog: maak ze zelf met bijvoorbeeld GIMP). Ik heb zelf drie test-afbeeldingen gemaakt, deze kan je hier downloaden:

Maak in je theme mapje een nieuw mapje aan onder de naam ‘images’. Hierin gaan we alle afbeeldingen plaatsen die we gebruiken tijdens het maken van onze theme.

Open header.php en zoek naar de volgende code:
<h2><?php bloginfo('description'); ?></h2>

We gaan nu onze conditional tags toevoegen onder de code met de <h2>-tag:

<?php
if (is_home()) {
?><img src="<?php bloginfo('template_directory'); ?>/images/header-1.png" /><?php
} elseif (is_category()) {
?><img src="<?php bloginfo('template_directory'); ?>/images/header-2.png" /><?php
} elseif (is_single()) {
?><img src="<?php bloginfo('template_directory'); ?>/images/header-3.png" /><?php
} elseif (is_page()) {
include (TEMPLATEPATH . '/banner1.php');
} else {
?><img src="<?php bloginfo('template_directory'); ?>/images/header-1.png" /><?php
}
?>

Een woordje uitleg:

  • if (is_home()) { – Als we ons op de indexpagina bevinden dan wordt de afbeelding met benaming header-1.png geladen. De php-functie bloginfo('template_directory'); bepaald de locatie van onze theme.
  • } elseif (is_category()) { – Als we ons op een pagina bevinden in een categorie (archiefpagina van de categorie) dan wordt de afbeelding met benaming header-2.png geladen.
  • } elseif (is_single()) { – Als we ons op een pagina bevatten van een artikel, dan wordt de afbeelding met benaming header-3 geladen.
  • } elseif (is_page()) { – Als we ons op een pagina bevinden (dat geen artikel is) dan wordt een bestand geladen met de naam banner1.php; Zoals je ziet is de code hier anders. Om een bestand te laden (dit kan een php of html bestand zijn) dan gebruiken we de include functie. TEMPLATEPATH verwijst ditmaal naar de locatie van onze theme.
  • } else { – Alle andere pagina’s waar we op terechtkomen zal de afbeelding met header-1.png; Voorbeelden van zulke pagina’s zijn datum-archieven, de 404-pagina, …)

Maak nu een nieuw leeg bestandje aan onder de naam banner1.php en sla dit op in je theme mapje. Doe je dat niet, dan krijg je foutmeldingen omdat het niet kan gevonden worden.
Je kan er eender wat inzetten dat je wilt. Bijvoorbeeld:
<div id="hello">Hallo, welkom op de site.</div>
Zo eenvoudig is het.

Je kan de code, de conditional tags, ook nog in een dieper niveau gebruiken. Dit begint toch vrij complex te worden en we gaan dit in het volgende deel, bij de sidebar, bespreken.

wp-serie-50_conditional-tags-resultaat

Conditional tags gebruiken om de sidebar structuur aan te passen

Ik ga voor dit deel de code delen van mijn eigen navigatie waar ik uitbundig gebruik maak van conditional tags. Mijn navigatie is afhankelijk van de categorie waarin iemand zich bevindt. Zo tracht ik de verschillende onderwerpen van mijn site toch een beetje onderscheiden te houden. Ik heb hierbij gebruik gemaakt van de php functie INCLUDE om de code overzichtelijk te houden.

Aan het werk nu. Open sidebar.php; We gaan nog niets van de code dat er staat wissen. Zoek naar de sluitingstag </ul> en typ er <hr /> onder. Dit zal een lijn toevoegen onder alles wat we al hebben. Het is tijdelijk en dient om te onderscheiden van de code die we gaan toevoegen:


<?php
if (is_home()) {
echo "<div class='sidemenu'>";
echo "<h2>Welkom</h2>";
echo "Hier vertel ik over mezelf en wat ik op de site wil doen";
echo "</div>";
} elseif (is_category()) {
if ( in_category(1) || post_is_in_descendant_category( 1 ) ) { //categorie-uncategorized
include (TEMPLATEPATH . '/lside-uncategorized-subnav.php');
}
elseif ( in_category(4) || post_is_in_descendant_category( 4 ) ) { //categorie-ondernemen
include (TEMPLATEPATH . '/lside-ondernemen-subnav.php');
include (TEMPLATEPATH . '/lside-ondernemen-linkpartners.php');
}
elseif ( in_category(3) || post_is_in_descendant_category( 3 ) ) { //categorie-3
include (TEMPLATEPATH . '/lside-3-subnav.php');
include (TEMPLATEPATH . '/lside-3-linkpartners.php');
}
} elseif (is_single()) {
if ( in_category(1) || post_is_in_descendant_category( 1 ) ) { //categorie-uncategorized
include (TEMPLATEPATH . '/lside-uncategorized-subnav.php');
include (TEMPLATEPATH . '/lside-uncategorized-latestposts.php');
}
elseif ( in_category(4) || post_is_in_descendant_category( 4 ) ) { //categorie-ondernemen
include (TEMPLATEPATH . '/lside-ondernemen-subnav.php');
include (TEMPLATEPATH . '/lside-uncategorized-subnav.php');
include (TEMPLATEPATH . '/lside-uncategorized-latestposts.php');
}
elseif ( in_category(3) || post_is_in_descendant_category( 3 ) ) { //categorie-3
include (TEMPLATEPATH . '/lside-3-subnav.php');
include (TEMPLATEPATH . '/lside-uncategorized-latestposts.php');
include (TEMPLATEPATH . '/lside-3-linkpartners.php');
}
} elseif (is_page()) {
echo "<h2>Navigatie</h2>";
wp_list_categories('orderby=name&hierarchical=0&title_li=');
echo "";
} else {
echo "<div class='sidemenu'>";
echo "<h2>Navigatie</h2>";
wp_list_categories('orderby=name&hierarchical=0&title_li=');
echo "</div>";
}
?>

Toegegeven, het is een grote brok, maar begrijp je reeds hoe het werkt? We splitsen de code even op:

Als we op de indexpagina zijn:
wp-serie-51_conditional-tags-sidebar-homeDit deel lijkt makkelijk: We gaan na of we ons op de eerste pagina bevinden en bepalen dan wat er moet worden weergegeven in de sidebar. Eerst het stukje html, waar we onze DIV plaatsen, een H-subtitel en daarna een woordje tekst en het sluiten van de DIV.
Als we ons op de eerste pagina bevinden, dan zal enkel dit stukje code van toepassing zijn, dus je wilt eventueel wel nog een navigatie aan toevoegen.

Als we op een categorie archief zijn:
wp-serie-52_conditional-tags-sidebar-categorieDit deel loopt verder op de code. Als (IF) we ons niet op de eerste pagina bevinden, dan bekijkt de site de volgende bepaling: ELSEIF. Hier gaan we na of we ons op een categorie pagina bevinden. Als dat het geval is dan gaan we na in welke categorie we ons precies bevinden. In het voorbeeld: Als we ons in categorie 1 bevinden (= de categorie die door WordPress bij de installatie wordt aangemaakt), dan laden we een bestand met de naam: lside-uncategorized-subnav.php
Als je deze methode wilt gebruiken, dan moet je ook zo’n php bestand aanmaken. Hoe dat er moet uitzien heb je eerder in de handleiding al gelezen! Als we ons niet in categorie 1 bevinden, dan kijken we verder of we ons niet in categorie 4 bevinden. Als dat het geval is, dan laden we 2 bestanden. En zo gaat het verder.
Ter info: de tekst na de streepjes ‘//’ tellen niet mee als code maar daar kan je iets vermelden als herinnering.

Als we op een artikel zijn:
wp-serie-53_conditional-tags-sidebar-singleEigenlijk is dit weer hetzelfde als hiervoor. Als aan bovenstaande voorwaarden niet zijn voldaan, dan gaan we verder in de code. Ditmaal gaan we na of we ons op de pagina van een artikel bevinden. Als dit het geval is gaan we vervolgens na in welke categorie dit artikel zich bevindt.
Je kan dus:
Enkel op pagina’s met een artikel een speciale tekst of optie geven.
EN: enkel op pagina’s met een artikel BINNEN een bepaalde categorie een speciale tekst of optie geven.
Dat is nu net wat ik zo leuk vind aan WordPress.

Extra tip: Artikels van een bepaalde categorie laten zien.
Nu we dan toch bezig zijn, is het misschien nuttig om een voorbeeld te tonen hoe je dat kan optimaliseren. Volg even mijn redenering:
We bevinden ons op een pagina met een artikel dat tot de categorie ‘uncategorized’ behoort. We willen alle berichten die zich in deze categorie bevinden weergeven. Hoe pakken we dit aan?
Als we kijken naar de code die we al hebben, dan zien we dat er een bestand geladen wordt met de naam lside-uncategorized-latestposts.php; Maak dit bestand aan. We gaan er volgende code aan toevoegen:


<?php
query_posts('showposts=5&cat=1');
while(have_posts()) : the_post();
?>
<ul>
<li><h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

<ul><li><?php the_excerpt(); ?></li>
</ul>
</li>
</ul>
<?php endwhile; ?>

een woordje uitleg:
Deze code zal de laatste 5 artikelen tonen van de categorie met ID 1 (bij ons noemt deze categorie ‘uncategorized’) met daarachter nog de excerpt (eerste stukje van het artikel). Deze excerpt kan je gerust weglaten zodat het enkel een link met de titels vertoond naar het artikel zelf.
Bij mij ziet dat er ongeveer zo uit:

wp-serie-55_conditional-tags-single-resultaat

Als we op een pagina zijn:
wp-serie-54_conditional-tags-page-&-othersIn het laatste deel van de code gaan we steeds verder kijken indien aan bovenvermelde voorwaarden niet zijn voldaan: Als we ons op een gewone pagina bevinden dan wordt enkel een overzicht van de categorieën getoond.
Als tot slot geen enkele voorwaarde voldoet dan moeten we ook iets bepalen, daarvoor dient de functie ELSE. Om hier toch iets te tonen kun je bijvoorbeeld ook hier een overzicht van de categorieën laten zien.

Verder moet je eigenlijk alleen maar uittesten en uitproberen. De code is zo kaal mogelijk gemaakt door aparte pagina’s te laden, maar je kan de code er ook gewoon tussen plaatsen in sidebar.php; Mijn favoriete werkwijze is en blijft een persoonlijke keuze en is dus ook geen regel dat je moet toepassen.

Conditional tags gebruiken om de categorie pagina’s te optimaliseren voor zoekmachines

De categorie pagina is eigenlijk maar een overzicht van bepaalde berichten binnen een categorie. We hebben in de handleiding zelfs nog geen titel toegevoegd met een <h2>-tag, en dat kan dus veel beter.

Open category.php; zoek naar de DIV met als ID container. Daaronder gaan we eerst een titel toevoegen aan onze categorie:
<h2><?php single_cat_title(); ?><?php _e('Informatie'); ?></h2><br />
Dat zal de naam van onze categorie weergeven gevolgd door het woord ‘informatie’;

Daaronder gaan we nu nog een beetje tekst toevoegen:
<p><?php _e(' In dit onderdeel van de website kan je artikelen terugvinden over '); ?><b><?php single_cat_title(); ?></b><?php _e('. Als je vragen hebt dan kan je gerust contact opnemen of een reactie nalaten onderaan een artikel. '); ?></p>
Nu hebben we een titel en een omschrijving. Dit zorgt er voor dat je categorie pagina’s ook beter geïndexeerd worden door zoekmachines op de termen van je categorie.

In het volgende hoofdstuk gaan we de shortcodes bekijken. Wie reeds met forums heeft gewerkt kent ze misschien al: [b]tekst[/b] zorgt er voor dat je tekst in het vet komt te staan, maar shortcodes kunnen in allerlei maten en gewichten voorkomen. Zo kan je bijvoorbeeld door 1 simpele shortcode adsense eender waar in je artikel plaatsen! Meer daarover volgt in het volgende hoofdstuk.

Wordpress theme maken of toch kopen?

Een Wordpress theme maken vergt veel werk, al is wat extra kennis altijd welkom. We maken zelf geen sites meer maar gebruiken nu de themes die terug te vinden zijn op: Theme Junkie. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close