In Fonts, Google Fonts en WordPress worden vier manieren beschreven waarop je Google Fonts kunt integreren in je WordPress thema. Je kunt fonts laden via HTML, CSS, JavaScript en plugins.
De HTML methode heeft over het algemeen de voorkeur, gevolgd door de CSS methode. Bezoekers kunnen JavaScript uitschakelen en plugins bieden vaak meer toeters en bellen dan je nodig hebt.
Bij de HTML methode voeg je een regel toe aan de header.php. Bijvoorbeeld:
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>Deze aanpak vereist twee stappen:
- kopieer de header.php van het ouderthema naar de folder van het kindthema
- laad het betreffende font via een link tag zoals hierboven weergegeven
Aan deze oplossing kleeft een nadeel. Zodra de header.php van het ouderthema wordt aangepast bij een upgrade, moet je deze stappen eigenlijk herhalen. Anders mis je mogelijk verbeteringen van die upgrade.
In de praktijk wordt dit vaak vergeten. Of men heeft nu even geen tijd en wil dit op een later moment doen. Een moment dat vaak niet komt.
Daar hebben we een oplossing voor. Deze weg vereist dat je een codeblok toevoegt aan de functions.php van je kindthema.
Dit heeft als voordeel dat je fonts kunt laden via HTML en bij een eventuele update van het ouderthema hoef je geen extra stappen te ondernemen.
In dit bericht laat ik zien hoe je dit kunt realiseren. Mogelijk vind je dit een te technisch verhaal. In dat geval spring je gewoon naar beneden voor kopieer- en plakinstructies.
Google Fonts via de functions.php
Fonts laden via de functions.php, hoe gaat dat?
In Fonts, Google Fonts en WordPress hebben we gezien dat Google aangeeft hoe je fonts kunt laden.
Hierboven bij punt 3 wordt de HTML methode weergegeven. Het betreft deze regel:
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>Deze regel gaan we laden via de functions.php. Dat doen we via een functie – vandaar de naam functions.php.
Dit is die functie:
/* Installeer Google Web Fonts */
function wpzaken_google_fonts() {
echo "<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>";
}De eerste regel is een commentaar regel. Het formaat van deze commentaarregel hebben we eerder gezien in de style.css van het kindthema. Je begint het commentaar met een /* en sluit af met een */.
In de tweede regel creëren we een nieuwe functie met het sleutelwoord function. We geven aan deze functie de naam wpzaken_google_fonts().
De derde regel is bijna gelijk aan de HTML regel die Google voorstelt. Alleen zetten we er echo " voor en sluiten we het af ";.
De accolade op de vierde regel dient ter afsluiting. Deze keer van de functie wpzaken_google_fonts().
Een functions.php maken
We moeten onze functie toevoegen aan de functions.php.
Heeft je kindthema nog geen functions.php, dan moeten die eerst maken.
Hoe maken we een functions.php?
- creëer een nieuw bestand met je favoriete tekst editor
- op de eerste regel zet je de PHP openingstag
<?php - sla dit bestand op en noem het functions.php
Nu heb je een blanco functions.php. Plaats dit bestand in de folder van je kindthema.
De functions.php uitbreiden
Hoe voegen we een functie toe aan de functions.php?
- open de zojuist gecreëerde of bestaande functions.php van je kindthema
- plak de bovenstaande functie onder de openingstag
Het geheel ziet er nu zo uit:
<?php
/* Installeer Google Web Fonts */
function wpzaken_google_fonts() {
echo "<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>";
}We moeten hier nog één regel aan toevoegen.
De bovenstaande functie werkt, maar we doen er nog niets mee.
Wat willen we er mee doen? We willen deze functie toevoegen aan de header.php.
Dat doen we met een action hook, hier specifiek met de wp_head() action hook.
Beschouw de wp_head maar als een functie die wordt geladen in de header.php.
We zijn de wp_head functie al eerder tegengekomen. Onder andere op regel 31 van de GoogleWebFonts2014header.php.
Hier is die nog een keer:
In de bovenstaande code hebben we de bewuste HTML regel onder de titel geplakt. Nu willen we de fonts via onze functie als het ware in de wp_head haken. Dat doen we zo:
add_action( 'wp_head', 'wpzaken_google_fonts', 5);Dit kun je lezen als: Voeg de functie wpzaken_google_fonts toe aan de wp_head.
En wat doet de functie wpzaken_google_fonts? Die laadt de Raleway fonts. Onze functions.php ziet er nu zo uit:
Kopiëren en plakken
Wat je met de bovenstaande toelichting doet mag je uiteraard helemaal zelf beslissen.
Vind je het te technisch, dan volgen hier de instructies voor kopieer- en plakwerk.
Kopieer de onderstaande code en voeg die toe aan een bestaande functions.php:
Vervolgens vervang je het gedeelte tussen de dubbele aanhalingstekens door de HTML die Google kant-en-klaar aanbiedt.
Bijvoorbeeld Droid Sans:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>Opslaan, klaar.
Waarom via de functions.php?
Als het even kan moeten we de wijzigingen en aanvullingen van het kindthema beperken tot twee bestanden: de style.css en de functions.php. Met de PHP methode voor het laden van fonts lukt ons dat.
We ons hoeven nu niet meer te bekommeren om de header.php. Een template bestand dat we anders bij updates van het ouderthema moeten bijwerken.
En toch gebruiken de optimale manier voor het laden van fonts: de HTML manier.