In dit artikel gaan we het header.php bestand aanmaken. In de header komt de html <head> tag, zodat we onze styles kunnen laden.
Header.php aanmaken
Het laden van stylesheets gebeurt in de <head> sectie van een pagina. WordPress gebruikt de functie wp_head om de stylesheets te laden. Deze twee zaken kunnen we combineren door een header aan te maken.
Een header is de “bovenkant” van een webpagina. Hier worden onder andere stylesheets ingeladen. Op deze website vind je in de header een logo, navigatiemenu’s en een zoekveld.
Open je teksteditor en maak in je thema map het bestand header.php aan. In de WordPress Developer documentatie wordt aangegeven wat er in een header.php bestand moet komen te staan. Open nu het header.php bestand en voer de volgende code in:
header.php
<?php
/**
* De header voor het wpgoeroe thema
*
* In dit template vind je de <head> sectie
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package wpgoeroe
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
We beginnen met het aangeven van de !DOCTYPE. Aangezien we html 5 gebruiken is dit gewoon <!DOCTYPE html>. Daarna openen we met een <html> tag. We voegen daar de language_attributes(); functie aan toe. Deze functie voegt taal attributen toe voor de <html> tag.
Head
We openen de head sectie met een <head> tag. De eerste <meta> tag is voor WordPress. Met de functie bloginfo('charset '); geven we aan welke karakterset WordPress gebruikt.
De tweede <meta> tag is een Bootstrap vereiste als we een responsive website willen maken. Je kunt er meer over lezen in de Bootstrap documentatie.
We zetten de functie wp_head(); vlak voor de sluitende </head> tag. Met deze functie geven we plugins de mogelijkheid om in te haken in de head sectie.
Tenslotte beginnen we de body sectie met de <body> tag. Hier zetten we de functie body_class(); ook in. Deze functie gebruikt WordPress om de <body> tag verschillende class attributen mee te geven. Ook hier kunnen plugins classes meegeven aan de <body> tag.
Index.php
Om te controleren of alles goed is gegaan kunnen we de header laden op onze pagina. De header laadt dan de <head> sectie op de pagina. We kunnen het index.php bestand gebruiken om dit te controleren.
WordPress gebruikt voor het laden van de header de functie get_header();. Open het index.php bestand en typ daarin het volgende:
index.php <?php get_header();
Open je webbrowser en typ in de adresbalk localhost/naam-van-je-thema. In mijn geval localhost/wpgoeroe. Nu wordt het index.php bestand geopend. Je ziet nu een lege pagina. Dat komt omdat we alleen nog maar de <head> sectie hebben aangemaakt waarin WordPress onze styles laadt.
Chrome Developer tools
Maar hoe kun je nu controleren of WordPress je style heeft ingeladen op de website? Ik zie alleen maar een lege pagina!
Daar hebben Google en Mozilla Firefox over nagedacht. Ik maak gebruik van Google Chrome. Als je nu met de rechtermuisknop op de lege pagina klikt, krijg je een pop-up scherm. Kies in dit scherm voor Inspecteren.
Onderaan de pagina wordt nu het Chrome DevTools scherm geopend. In dit scherm kun je de code van de webpagina bekijken.
Klik nu op het pijltje links naast <head>, om de <head> sectie uit te klappen. Je ziet dat WordPress een heleboel gegevens laadt in de <head> sectie.
In de video hieronder laat ik je zien waar onze stylesheet ingeladen is. WordPress heeft onze style dus succesvol toegevoegd. Zie je de handle wg_bootstrap terug die we de stylesheet hebben gegeven?
Dat is het! Goed gedaan. We hebben nu een header aangemaakt om er voor te zorgen dat we de stylesheets in de head sectie van de website kunnen laden.
Bootstrap maakt echter ook gebruik van scripts. Die moeten we in de footer van de website laden. Nieuwsgierig hoe je dat doet? Lees dan WP Themedevelopment (6): Footer
