4. WordPress: Inhoud toevoegen aan de index-template.

Dit is een van de belangrijkste (en moeilijkste) hoofdstukken van de serie: we gaan er voor zorgen dat de website automatisch alle berichten die je plaatst laat zien op de beginpagina. In dit hoofdstuk zullen belangrijke begrippen aan bod komen zoals ‘the loop’, ‘the content’, ‘the excerpt’ en ‘the postmetadata’. Let’s go:

The loop:

Simpel uitgelegd is dit een ingebouwde php-functie in WordPress dat al je berichten zal oproepen zodat we ze op onze pagina’s kunnen plaatsen.

In het vorige hoofdstuk hebben we een header en footer aan onze index-template gevoegd. Nu gaan we de code schrijven tussenin de lijnen die we in het vorige hoofdstuk hebben geschreven.

Toevoegen van DIV
Deze DIV gaan we gebruiken om onderscheid te maken tussen de header, onze tekst en footer:

<div id="container">
</div>

Toevoegen van de loop
We gaan nu de zogenaamde loop van WordPress op onze website plaatsen aan de hand van onderstaande code (kopieer dit binnenin de div die we hierboven hebben geplaatst:

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>

Uitleg over de loop:
if(have_posts()) – We gaan na of er berichten zijn om op te halen.
while(have_posts()) – Dit is een voorwaarde: als er berichten zijn gaan we the_post() uitvoeren.
the_post() – Dit roept de berichten op.
endwhile; – Dit dient om de actie while() te stoppen, we hebben namelijk onze berichten opgeroepen.
endif; – We sluiten de allereerste voorwaarde: if().

De berichten op onze pagina weergeven
Tot nu toe hebben we nog niets gedaan dat een verandering teweegbrengt op onze layout. Daar gaan we nu verandering in brengen:
Typ <?php the_title(); ?> achter the_post(); ?> en voor <?php endwhile; ?>

Sla dit nu op en ververs je browser. Je zal nu de titel(s) van je blogberichten zien staan.
Nota: een verse installatie zal standaard 1 bericht hebben met de titel “hello world”;
Als het om een reeds bestaande site met verschillende berichten gaat dan zullen de titels van meerdere berichten getoond worden.

De titel aanpassen op onze pagina
Deze titels kunnen klikbaar worden gemaakt en we zullen dit tegelijkertijd ook wat vriendlijker maken voor de zoekmachines en er een titel-tag aan geven.
Vervang <?php the_title(); ?>
Door: <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

Uitleg:
<h2> – eerder gaven we de titel van onze blog een <h1>-tag mee, nu doen we dit ook voor onze titels van de berichten met een h2-tag. De H2 tag kan je dus zien als een subtitel van je blog;
a href – Zoals eerder reeds geleerd is dit een hyperlink in html om een link te maken;
<?php the_permalink(); ?> – Dit is nieuw: Het roept de hyperlink van het bericht op met een php code.
the_title(); – kennen we al: het toont de title van het bericht.
</a> – Sluiten van de hyperlink;
</h2> – Sluiten van de subtitel.

Tip:
Test alles regelmatig uit. Nu kan je bijvoorbeeld nog enkele blogberichten aanmaken met een titel en een beetje tekst. De titels zullen nu op het scherm moeten verschijnen.

The content en the excerpt

Nu wordt het stilaan tijd om de tekst zichtbaar te maken op onze pagina. Een klein stukje code zorgt hiervoor:
Typ <?php the_content(); ?> onder de code van de titel.
Sla de indexpagina opnieuw op en ververs je browser. Je zal nu veel meer inhoud op de site zien staan.

Nu dat achter de rug is gaan we kijken wat er gebeurd achter de schermen. In je favoriete browser ga je nu rechterklik doen op onze pagina en we zoeken dan naar ‘broncode bekijken’.
wp-serie-6-content-vb

Je zal dan zien dat er heel veel code door WordPress automatisch werd toegevoegd. Dit moeten we goed bestuderen om nadien de layout te gaan designen in het style.css bestandje dat we eerder hebben aangemaakt (maar voorlopig nog leeg is).
wp-serie-7-broncode

Zoals je zal zien plaatst WordPress automatisch een <p> tag vooraan en achteraan het bericht. Dit is een paragraaf. Verder zie je ook dat je artikels worden opgeroepen en in de broncode terechtkomen.

Nota: the_excerpt() vs. the_content()
Bij WordPress kan je kiezen tussen de excerpt enerzijds en content anderszijds. Ik wil even de verschillen aanduiden:
The_excerpt zal het einde van een bericht op je beginpagina aantonen als […]. Het is dus met andere woorden geen aanklikbare link dat je naar het volledige artikel brengt. Je kan een excerpt ingeven onder het bericht als je deze ingeeft in je adminpaneel. Doe je dat niet, dan zal WordPress automatisch 55 tekens laten zien op de beginpagina.
The_content zal op het einde van een bericht een ‘read more’ link tonen dat aanklikbaar is zodat je bezoekers op de link kunnen klikken om het volledige artikel te lezen. Als je het volledige artikel onmiddellijk op de beginpagina wil laten zien, dan hoef je niets te doen. Wil je slechts een inleiding laten zien, dan moet je in het bericht dat je typt volgende code gebruiken: <!--more-->. Alles boven die code wordt als inleiding getoond op je beginpagina, alles daaronder wordt enkel in het volledige artikel getoond. Het nadeel is dat je hier geen aparte tekst kan schrijven als inleiding. Bij een excerpt kan dat wel omdat je de gegevens apart kunt ingeven.

De volgende stappen:
We gaan verder in het index.php bestand: We gaan rond the_content() een onzichtbare div toevoegen als volgt:
<div class="entry"> <?php the_content(); ?> </div>

Je ziet dat we een class hebben toegevoegd aan de DIV. Zo kunnen we een onderscheid maken tussen de titels en de eigenlijke inhoud van een bericht.
Waarom gebruiken we geen ID zoals we eerder hebben geleerd? Een ID is een uniek kenmerk en kan in principe maar 1 keer gebruikt worden. Je header is uniek en ID=”header” gebruiken is dus perfect mogelijk.
MAAR WordPress gaat nu elk bericht dezelfde stijl meegeven (want we zitten in de LOOP) en dat zou betekenen dat elk bericht dezelfde ID meekrijgt en dan is deze niet meer uniek. Classes hoeven niet uniek te zijn en zijn dus ideaal om hier te gebruiken.

Nu we dit weten gaan we ook een onzichtbare DIV toevoegen rondom de gehele post, als volgt:

<div class="post">

</div>

Je code moet er nu dus als volgt uitzien:
wp-serie-8-index-post-entry

Kort samengevat:
Dit hebben we zonet gedaan:

  • De inhoud van de berichten opgeroepen;
  • Het gehele bericht onderscheiden door een onzichtbare div (post);
  • De inhoud van het bericht onderscheiden door een onzichtbare div (entry);

In het volgende deel van de serie gaan we enkele details toevoegen aan de berichten op de indexpagina, alsook enkele opties indien er iets fout gaat (bijvoorbeeld als er geen berichten zijn om te tonen) om dit op te vangen zodat de bezoeker correct geïnformeerd wordt. Op een bepaald moment zullen er veel berichten zijn, dus we zullen de indexpagina ook van een navigatie voorzien zodat je pagina niet te groot wordt, want te veel naar beneden scrollen is ook niet altijd leuk. De grotere hoeveelheid aan tekst op een pagina zal er ook voor zorgen dat deze trager laadt.

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