In het vorige deel hebben we een start gemaakt met de index.php file.
Als het goed is ben je toen geeindigd met een wit scherm.
In deze les gaan we hier mee verder, en maken we de header template.
#stap 1
Open de map tutorials. Als het goed is zie je hier nu 2 bestanden, style.css en index.php.
#stap 2
open de index.php file. tussen de body tags (<body></body>) is het nog leeg. zet hier de volgende regel in :
Sla je index file op. Ga naar je browser en refresh.
Wat heb je nu gedaan?
Je hebt net een php functie ingevoegd die bloginfo ophaald. In dit geval de naam. Deze kun je als het goed is terugvinden bij de opties in wordpress. Omdat je deze functie in de body hebt gezet, is hij ook zichtbaar op je webpagina.
#stap 4
we gaan nu van de naam een link maken. Een link maar je met de volgende code:
Wanneer je deze code in de body zet, waar net de code van de vorige stap stond, dan zie je dat de tekst een link is geworden. Ook merk je dat hij linkt naar #.
Als je een link wilt maken gebruik je dus de volgende code :
gebruik de <a></a> tags voor een link, en de href=”" mce_href=”" voor de link gegevens, alles tussen de quotes wordt de link.
Nu willen wij niet naar # linken, maar naar de startpagina (frontpage).
De link haal je op met de code:
Je ziet dat hier wederom de functie bloginfo gebruikt wordt.
De definitieve code wordt dan:
Om meteen door te gaan met deze code, plaatsen we <h1> </h1> eromheen.
de h1 tag staat voor een kop (kop 1). je kan ook doorgaan, zo heb je h1,h2,h3,h4,h5,h6.
Standaard is h1 de grootste en h6 de kleinste, dit formaat is aan te passen in de css, en dat gaan we verderop in deze tutorial dan ook doen.
maar om je weer even bij de les te halen, de code zou nou moeten zijn:
#stap 5
we gaan de blogomschrijving toevoegen. De blogomschrijving is een omschrijving die in de opties van wordpress veranderd kan worden.
We maken net zoals hierboven weer gebruik van bloginfo().
Deze code mag je plaatsen onder de code van de blog naam, je krijgt dan:
<?php bloginfo(’description’); ?>
#stap 6
Voor stap 6 gaan we weer gebruik maken van een nieuwe tag, de <div></div> tag.
een div kun je het beste zien als een ontzichtbare box. Deze hebben we straks nodig als we met de opmaak gaan werken (de stylesheet).
oke, plaats de div tags om de code die je in stap 5 gemaakt hebt, je krijgt dan:
<h1>
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
</h1>
<?php bloginfo(’description’); ?>
</div>
Als het goed is zie je geen enkel verschil op de site.
Als laatste geven we de div nog een uniek id mee. (in dit geval header) Dit doen we zodat we straks meerdere div’s van elkaar kunnen onderscheiden.
Een id meegeven aan een div doe je als volgt: <div id=”"> </div>
onze code wordt dus:
<h1>
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
</h1>
<?php bloginfo(’description’); ?>
</div>
3 responses so far ↓
1 Sander // Feb 19, 2009 at 6:26 pm
Goeie tutorial hoor! Ik moest alleen de link wat aanpassen:
”>
naar
>
(”" verwijderen, omdat deze anders dubbel in de url kwamen te staan) kan dit kloppen?
verder gaat t goed, op naar deel 5!
2 M Scherpenisse // Aug 30, 2009 at 5:52 pm
Ik kan mijn PHP code in de bron terugvinden (en voert dus niet uit). Terwijl PHP wel werkt (WordPress werkt immers) en het bestand heet gewoon .php heet. Iemand een idee?
3 K Waltené // Oct 1, 2009 at 3:49 pm
Beste M Scherpenisse,
Ik ben geen Wordpress wonder, maar ik denk dat het misschien te maken heeft met het feit dat je opent met
Leave a Comment