Wijzig the_loop met PHP

Met PHP kun je direct in de bestanden van WordPress werken. Je kunt ook met behulp van CSS de vormgeving van je thema wijzigen, bijvoorbeeld door bepaalde elementen in WordPress onzichtbaar maken. Maar dan moet de content alsnog wel geladen worden. In het tijdperk waarin snelheid voor mobiel belangrijk is, kan het de moeite waard zijn om direct items uit de PHP pagina te halen.

Niet zo lekker als de churro’s op de afbeelding maar wel zo handig om te kunnen!

Opdracht: wijzig de WordPress loop

Ik wil dat alleen de featured images zichtbaar zijn op de homepage. Nadat ik klik op deze afbeelding ga ik naar een vervolgpagina waarop wel alles te zien is. De bedoeling is, dat je met Twentyseventeen gaat werken. Maak 3 posts aan met afbeeldingen en tekst; de inhoud van deze posts is niet belangrijk. Kopieer maar even iets vanuit het nieuws of gebruik dummy tekst.
Stappenplan:

  1. Welke pagina’s heb ik nodig?
  2. Waar vind ik vervolgens de loop van de berichten?
  3. Wat moet ik dan aanpassen in mijn file?

 

post met info

Een bericht zoals deze normaal verschijnt op je homepage.

De berichten zonder ze extra informatie.

De berichten zonder ze extra informatie.

 


 

De aangepaste WordPress loop maken

Welk bestand?

Welk bestand moet ik hebben?
Eerst moet ik uitvogelen op welke pagina ik zit want anders zie ik sowieso niets gebeuren.

Bekijk de filestructuur. Is er een home.php? Of alleen een index.php? In Twentyseventeen is de index.php verantwoordelijk voor je startscherm.

Hoe kom je daar achter? Plaats in index.php direct onder de aanroep van de header een tekstje, bijvoorbeeld “dit is index.php”. Indien dit wordt getoond, dan heb je de goede pagina te pakken.

Wordt dit niet getoond? Dan kan het zijn dat je in je dashboard bij Settings > Reading de optie “homepage” hebt geselecteerd in plaats van “toon laatste 10 berichten”. In dat geval zie je font-page.php.

 

Op zoek naar the_loop()

Nu ik weet dat ik in index.php moet zoeken, ga ik op zoek naar the loop.

Deze staat zo ongeveer op regel 35 (het while-statement).

while statement met loop

while statement met loop

Op regel 45 vind je dan een link naar “template-parts/post/content”.

Aanroep naar content.php

Aanroep naar content.php

mapje template-parts

mapje template-parts

Dit betekent dat je in het mapje “template-parts > post” het bestand “content.php” moet openen.

Sla content.php even op onder een andere naam zodat je een backup hebt voor het geval het helemaal de soep in draait. Ik sla zoiets dan op onder de naam content.bak (een bak-bestand is niets dus je hebt ook niet het probleem dat het per ongeluk getoond wordt).


 

Werken in the loop

Werk in content.php. Begin stukjes code weg te halen waarvan je nu al meteen kunt zien dat je ze niet nodig hebt. Ik begin met het onderdeel content. Ik zie al een stukje code staan met het woord thumbnail, die regels code moet ik dus sowieso overhouden!

WordPress loop

In de loop vind je de link naar content.php. De extensie staat er niet achter.

Maar ik ben nog wat onzeker over het hele header onderdeel. Mag dit weg of niet?
Tip: in de php file worden al CSS-classes aangeroepen. Bekijk in een browser waar deze classes zitten. Dit kan je een clue geven over welke onderdelen je weg moet halen.

Dan zie je dat je de header ook weg kunt halen. De footer kan ook weg, in dit thema wordt deze niet gebruikt.
Sla content.php op en bekijk je bestand in de browser. Is het allemaal goed gegaan?

Vervolg pagina kloppend maken

Klik nu op een van de featured images. Je gaat nu naar de pagina waar je het hele bericht leest. Je ziet dat je hier alleen maar de afbeelding ziet. De tekst is weg. Dat is niet de bedoeling!

Om dit probleem op te lossen maak je gebruik van je backup bestandje (in mijn geval “content.bak”). Ik open deze en sla ‘m op als content-single.php. Single posts worden weergegeven in single.php. Hierin kun je op regel 23 de aanroep naar jouw zelfgemaakte include doen.

Aanroep naar content-single.php

Aanroep naar content-single.php

Sla single.php en content-single.php op en upload deze. Je site zou nu moeten werken.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.