3. WordPress: Starten met de header en footer template.

In het vorige hoofdstuk hebben we het index.php bestand aangemaakt. We gaan daarin verder werken om zo onze header en footer toe te voegen. Nadien gaan we het bestand in verschillende delen opsplitsen, maar dat is voor de toekomst. De volgende stappen:

De header template:

Voeg onderstaande code toe tussen de <body> en </body> tags:
<?php bloginfo('name'); ?>
Dit gaat de titel weergeven op onze site.
Als je wilt dat dit een klikbare link wordt, dan dien je volgende code te gebruiken:
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

Wat gebeurd er nu concreet?
A href – is een html-code dat een link aanmaakt
Bloginfo(‘url’); – is de php code waarmee je het website adres opvraagt.
Bloginfo(‘name’); – roept de naam van de site op. Deze naam kan je instellen in je adminpaneel onder “settings >> General”

Optimaliseer alvast voor zoekmachines en voeg nog eens de <h1> tag er aan toe:
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Mooi, nu hebben we een titel, maar in het adminpaneel kunnen we ook een omschrijving van de website toevoegen. We zouden dit ook op de website kunnen laten zien zodat bezoekers weten waarover de website gaat:
<?php bloginfo('description'); ?>

bloginfo('description'); haalt deze omschrijving op en plaatst ze vervolgens als tekst op je site / blog. Ook hier kunnen we alweer gaan optimaliseren:

<h2><?php bloginfo('description'); ?></h2>

Er zijn 6 H-tags die je kan gebruiken, waarvan 1 de grootste is en 6 de kleinste. Dit is ook heel nuttig voor zoekmachines, maar ook voor jezelf om een onderscheid te maken binnenin een pagina.

En we gaan verder, nu introduceren we de <div> tag:

<div>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>

Een div-tag is een onzichtbare box die je omheen bepaalde elementen plaatst. Hier onderscheiden we de website gegevens van de rest van de pagina. We kunnen dit ook wat specifieker gaan definiëren en dit is belangrijk voor de design van de website.
Voeg id=”header” aan de DIV tag, dan krijg je het volgende:
<div id="header">

Sla alles op en ververs (druk F5) je browser. Je zal zien dat het toevoegen van de DIV tags geen verandering teweegbrengt op de website. Het veranderen van de look van onze site gaan we nog doen via het style.css bestand dat we in het vorige hoofdstuk hebben aangemaakt.

De footer template:

We gaan nu de pagina onderaan gaan klaarmaken. We slaan dus een stukje over (het middendeel) maar dan gaan we later doen. Alles dient te worden geplaatst boven de </BODY> sluittag:

Net zoals bij de header gaan we romdom de inhoud een DIV element gebruiken:

<div id="footer">
<p>
Copyright &#169; 2010 <?php bloginfo('name'); ?>
</p>
</div>

Concreet hebben we een copyright vermelding geplaatst met daarna de naam van onze website.

Volgende code zou nu in je bestand moeten staan:
wp-serie-4-header-&-footer

Op ons scherm ziet de pagina er nu als volgt uit:
wp-serie-5-header-&-footer

Tot nu toe hebben we nog niet veel om te tonen, maar in de volgende hoofdstukken gaan we onvermoeibaar verder. De belangrijkste zaken zullen nu aan bod komen: het ophalen van alle berichten en deze op de pagina laten zien. Als dit gebeurd is zal het zeer snel gaan. Wat we concreet gaan doen zijn volgende zaken:
• index.php (we werken hiermee verder en voegen er onze artikels aan toe);
• sidebar: (Het laatste onderdeel aan de eerste pagina is de sidebar waarin we de navigatie gaan verwerken).

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