5. WordPress: Details van artikels toevoegen aan index-template: postmetadata en navigatie
Postmetadata
Om dit te doen gaan we een nieuw stukje code toevoegen aan de index.php
Kopieer de tekst uit: DIT bestand
en plaats dit onder <?php the_content(); ?>.
We gaan even kijken wat er is bijgekomen. Sla het bestand op en vernieuw (druk F5) je internet browser. Als alles goed is gegaan zie je enkele nieuwe toevoegingen onder elk bericht:
Uitleg:
<p class="postmetadata"> en </p> – Alle postmetadata hebben we in een paragraaf geplaatst omdat we een onderscheid willen maken van de overige informatie die uit het artikel komen. Later kunnen we via de het css-bestand een andere opmaak geven aan dit specifiek stukje (bijvoorbeeld een andere kleur geven).
<?php _e('Geplaatst onder :'); ?> – : is de code voor een dubbele punt. De php code <?php _e(' '); ?> is geen noodzaak. Je kan het simpelweg ook gewoon uittypen zoals ‘geplaatst onder’.
<?php the_category(', '); ?> – the_category() is de php functie dat de categorie oproept waartoe het artikel behoort. De komma die je ziet staan duidt aan dat je verschillende categorieën met komma’s kunt onderscheiden als ze getoond worden.
<?php _e(‘door’); ?> – Zelfde uitleg als hierboven. Je kan ‘door’ ook gewoon uittypen. Het rond een php code plaatsen is echter algemeen aanvaard en zal wellicht zijn nut hebben, al weet ik eerlijk gezegd niet welk (misschien voor het vertalen van themes?)
<?php the_author(); ?> – Deze functie roept de auteur van het bericht op.
<br /> – Dit is een html tag dat zichzelf sluit, vandaar het tekentje ‘/’ op het einde. Het zorgt ervoor dat je een nieuwe regel begint. Je kan dit ook doen met de paragraaf <p> maar soms is dat niet mogelijk omdat deze tag meer ruimte tussen de lijnen toevoegt.
<?php comments_popup_link('Geen Reacties »', '1 Reactie »', '% Reacties »'); ?> – comments_popup_link() verwijst naar de geplaatste reacties op een bericht. Als er geen commentaren kunnen geplaatst worden (je kan dit uitzetten per bericht of voor je volledige website) dan zal dit ook getoond worden. Wanneer iemand daarop klikt zal hij onmiddellijk naar de reacties worden gebracht (die meestal onderaan het bericht gaan staan). We gaan dit later nog zelf gaan aanmaken en er een opmaak aan toevoegen. De tekst tussen de haakjes is vrij eenvoudig:
Geen Reacties » – wordt getoond als er geen reacties zijn.
1 Reactie » – wordt getoond als er 1 reactie is.
% Reacties » – wordt getoond als er meer dan 1 reacties zijn (toont ook het aantal reacties door het percentage teken).
<?php edit_post_link('Edit', ' | ', "); ?> –Dit zien je bezoekers niet. Alleen jijzelf zal dit zien als je ingelogged bent als administrator. Het is eenvoudig want je kan dit aanklikken en direct naar het bericht verwezen worden in het adminpaneel waar je het onmiddellijk kan aanpassen. Zo kan je heel snel een kleine aanpassing doorvoeren nadat je bijvoorbeeld nog een typfoutje hebt ontdekt na het publiceren van het bericht.
‘edit’ is de tekst die wordt getoond waarp je kan klikken. ‘|’ is de tekst of het teken dat erna komt te staan. Tussen de laatste quotes kan je nog een eigen tekst invullen die dan wordt getoond, in dit geval staat er niets tussen de quotes en wordt er niets getoond.
Extra toevoegingen: ELSE
Omdat je nooit weet hoe groot een blog wordt, of waarvoor je theme later gebruikt gaat worden, kan je de theme nog voorzien van deze drie optionele functies.
Typ onderstaande code ONDER de code <?php endwhile; ?> :
<?php else : ?>
Zo moet het er uit zien:
Als je het in je browser gaat bekijken zal je geen verschil zien. Wat hebben we nu gedaan? Ten eerste hebben we nog een stukje code toegevoegd aan de LOOP.
Deze LOOP zonder bijkomende instructies ziet er als volgt uit:
Deze LOOP werkt als volgt:
1. IF: als er berichten zijn dan willen we de berichten laten zien, WHILE haalt deze berichten op
2. We sluiten de WHILE (met endwhile) en dan zitten we nog steeds in de IF (als er berichten zijn).
3. Door er ELSE aan toe te voegen kunnen we instructies geven als er geen berichten zijn. Als er dus geen berichten zijn wordt de tekst ‘not found’ weergegeven.
Extra toevoegingen: POST-ID
Voeg onderstaande code toe aan <div class="post">
id="post-"
In totaliteit ziet het er dan als volgt uit:
In een eerder hoofdstuk hebben we reeds uitgelegd dat deze DIV dient om de verschillende berichten te onderscheiden van elkaar. We hebben ook reeds geleerd dan een ID dient om een unieke DIV aan te duiden. Wat er nu gebeurd is het volgende: de php code the_ID() zal aan elk bericht een nummer meegeven. Dit nummer wordt hier getoond. Je ziet het niet maar als je de broncode bekijkt dan zal je het wel zien.
Het nut hiervan is dat je bepaalde berichten een unieke opmaak kunt meegeven (bijvoorbeeld alle berichten in een blauwe achtergrond, maar door iets in het style.css bestand te vermelden kan je een specifiek bericht een gele achtergrond meegeven). Dit is echter maar een voorbeeld, de opmaak van de css zal je later nog wel leren doen!
Extra toevoegingen: POST-TITLE
Voeg title="<?php the_title(); ?>" aan de post link. Zo moet het er uitzien:
Wat we nu hebben gedaan is eenvoudig: we hebben elke titel voorzien van een omschrijving. Dit is handig voor zoekmachine-optimalisatie. Je afbeeldingen geef je tenslotte toch ook een omschrijving mee nietwaar?
Je ziet het als je met je muis over de titel beweegt.
Bekijk de afbeelding maar eens voor het resultaat:
Navigatie op de indexpagina.
Nu zijn we toch al ver gevorderd met de indexpagina. Een laatste belangrijke toevoeging is de navigatie. Na een paar maanden zul je wellicht al veel artikels hebben gepubliceerd, en wordpress toont maar een beperkt aantal berichten (altijd de laatste die je hebt gepubliceerd); Alhoewel je wel kan instellen dat WordPress bijvoorbeeld 100 berichten kan laten zien, het gaat onoverzichtelijk worden en de pagina zal te lang worden. De oplossing? Navigatie toevoegen:
Voeg onderstaande code tussen <?php endwhile; ?> en <?php else : ?>
Een hele brok alweer, laat ons eerst eens kijken wat dit met onze layout doet:
Als er teveel berichten zijn zal er dus een link tevoorschijn komen om te navigeren naar een pagina met ouderen berichten. Zeer handig en zeer goed voor zoekmachines. Een interne linkstructuur is heel belangrijk voor goede zoekresultaten.
<div class="navigation"> – We hebben onze navigatie in een aparte DIV geplaatst en een class meegegeven zodat we dit later een aparte opmaak kunnen meegeven.
Daarnaast kennen we twee soorten links:
1- je bevindt je op de indexpagina met de meest recente artikels:
<div class="alignleft"> – verwijst naar een pagina met oudere artikels: we zullen dit aan de linkerkant van de pagina laten zien.
2- je bevindt je op de indexpagina met oudere artikels:
<div class="alignright"> – verwijst naar een pagina met recentere artikels: we zullen dit aan de rechterkant van de pagina laten zien.
<?php next_posts_link() ?> – verwijst naar de oudere berichten. De tekst tussen de haakjes kan je ook zelf aanpassen en ← zal een pijltje naar links laten zien.
<?php previous_posts_link() ?> – verwijst naar de recentere berichten. De tekst tussen de haakjes kan je ook zelf aanpassen en → zal een pijltje naar rechts laten zien.
En we zijn klaar met dit hoofdstuk. Je zult ongetwijfeld veel hebben bijgeleerd, maar we zijn er nog niet. In volgende hoofdstukken zullen we leren hoe we een ‘sidebar’ zullen toevoegen aan de layout.
Als je niet meer weet wat dit is, dan verwijs ik naar onderstaande afbeelding dat reeds in het tweede hoofdstuk werd getoond:
De sidebar (die we ook de navigatie zullen noemen soms) is alweer een interessant onderwerp voor het volgende hoofdstuk. We zullen leren hoe we een zoekbutton toevoegen, hoe we een navigatie maken van categorieën, pagina’s en archieven. We zullen de sidebar ook klaarmaken om ‘widgets’ aan toe te voegen zodat je bepaalde zaken niet zelf hoeft toe te voegen aan je theme maar de functies van WordPress automatisch kan gebruiken. Stay tuned.
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.
Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!
