Zo bewerk je de header van je WordPress zonder plugins

Ze zeggen dat het belangrijk is om een goede eerste indruk te maken. Wanneer bezoekers op je website komen, begint de eerste indruk helemaal bovenaan – bij de header van de pagina.

Developers van WordPress thema’s zijn niet verplicht om een header template toe te voegen, maar het komt zelden voor dat een site er geen heeft. Sinds het begin van het web is “header” de gebruikelijke term voor een blok HTML dat essentiële elementen bevat die bezoekers boven aan pagina’s verwachten te vinden. Deze bevat vaak:

• Branding: Dit kan de sitenaam zijn en vaak ook een logo. Het gebruik van kleur, afbeeldingen of video in de header kan die branding versterken.
• Primaire navigatie: Als je website meer dan één pagina heeft, zullen bezoekers waarschijnlijk op zoek gaan naar een navigatiemenu bovenaan elke pagina.
• Secundaire navigatie: Secundaire navigatie kunnen alle links zijn die onafhankelijk zijn van de huidige locatie van een gebruiker in de primaire menuhiërarchie. Denk aan een “login” knop en icoontjes die linken naar social media accounts of een winkelwagentje.
• Zoeken: Als je website zoeken ondersteunt, hoeft het invoervak voor zoeken niet in de header te staan, maar bezoekers zullen er zeker niet naar zoeken in de footer.

Het WordPress CMS kan dynamisch componenten zoals headeren genereren door de opmaak in thematemplates te combineren met inhoud uit een database – zoals links naar een logo en menu-items – en deze in elke pagina te injecteren.

Het WordPress thema-ecosysteem biedt een rijke keuze aan ontwerpen voor bijna elke website. Met tienduizenden thema’s om uit te kiezen op verschillende marktplaatsen, kan het kiezen van de beste voor jouw doel al snel een hele klus blijken.

Maar als je uiteindelijk een thema kiest en installeert, wordt er van je verwacht dat je op zijn minst een aantal onderdelen aanpast – zoals de header – om je eigen stempel op de site te drukken.

Laten we eens kijken hoe je dat kunt doen.

Blok vs klassiek: Een strijd tussen twee soorten thema’s

Hoe je de header van je WordPress site aanpast, wordt bepaald door hoe het thema is opgebouwd (en soms hoeveel je wilt aanpassen). Er zijn drie manieren om de header van een site aan te passen, die eigen zijn aan WordPress:

• De Site Editor gebruiken: WordPress 5.0 introduceerde een Block Editor voor website-content die bekend staat als Gutenberg. Met de release van WordPress 5.9 werd het blokconcept uitgebreid naar thematisering en werd het een robuuste optie voor volledige sitebewerking, Full Site Editing. De Site Editor en de mogelijkheid om de verschillende onderdelen van een websitethema op te bouwen met HTML-gebaseerde componenten brachten ongekende flexibiliteit naar native WordPress maatwerk.
• De WordPress Customizer gebruiken: We willen je niet het gevoel geven dat je oud wordt, maar thema’s die alleen kunnen worden aangepast met behulp van de ooit baanbrekende Customizer en bijbehorende widgets worden inmiddels “klassieke” thema’s genoemd. Ondanks de retro-achtige naam worden er nog steeds nieuwe thema’s in klassieke stijl uitgebracht, naast de duizenden die al op de markt zijn. Vergeleken met de Site Editor en Block thema’s, bieden de Customizer en Classic thema’s minder opties om je header aan te passen.
• Themabestanden direct bewerken: Jij (of iemand die je om hulp vraagt) hebt enige basiskennis van PHP nodig om de code in klassieke WordPress themabestanden te bewerken, maar het is een oplossing als de Customizer niet kan leveren wat je nodig hebt voor de header van je site.

Wat we hier niet behandelen is het aanpassen van headeren in externe WordPress paginabouwers zoals Divi of een aantal plugins die speciaal zijn ontworpen om website headeren (en footeren) aan te pakken. Deze plugins kunnen de moeite waard zijn als je voor je enige optie de themabestanden direct moet bewerken en je PHP-programmering wilt vermijden.

Hoe bewerk je een header van een blokthema?

Als je Gutenberg hebt gebruikt om content te creëren, dan weet je dat WordPress wordt geleverd met een grote verzameling blokken die je op pagina’s kunt plaatsen om van alles samen te stellen, van koppen, alinea’s en lijsten tot media, navigatie en formulieren. Er is een klasse blokken die de taken uitvoeren die je voorheen widgets liet oplossen binnen klassieke thema’s, waaronder het genereren van links naar de nieuwste berichten en reacties, het weergeven van een tag cloud of het invoegen van een kalender.

Meerdere blokken kunnen worden gecombineerd, gestyled en opgeslagen als patterns. Je kunt deze componenten ook toevoegen aan de onderdelen van een WordPress thema die helpen bij het definiëren van de layout van een pagina, zoals headers.

Net als individuele blokken kunnen template parts worden gedefinieerd in HTML bestanden. Blokkenthema’s zijn eenvoudig aan te passen omdat de informatie die deze aanpassingen beschrijft, wordt opgeslagen in de WordPress database en wordt toegepast op de verschillende onderdelen wanneer een pagina wordt gegenereerd.

Dus als we het hebben over het “bewerken” van een header in een blokthema, dan hebben we het zelden over het bewerken van een bestand dat is opgeslagen in een WordPress themamap.

Onder de motorkap: Een header van een blokthema

Het inspecteren van de HTML achter een template part zoals een header helpt verklaren wat er gebeurt als je een thema aanpast.

We gebruiken het Seedlet thema voor deze tutorial omdat het beschikbaar is als Seedlet (Blocks) en het oudere Seedlet (Classic). Seedlet (Blocks) gebruikt het Blockbase thema als ouder, en dit is de volledige content van het header.html bestand in de Seedlet themadirectory’s:

<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

De meeste magie achter WordPress blokken gebeurt in de HTML comments. Comments kan stylinginformatie en andere richtlijnen doorgeven tijdens het bouwen van de pagina. De bovenstaande HTML voegt wat verticale ruimte toe aan onze standaard header, maar de belangrijkste actie is het verzoek om een pattern op te nemen in het Blockbase thema dat (nadat .html is toegevoegd) wordt gevonden in het bestand header-centered.html.

De map voor template parts binnen het Blockbase thema bevat deze bestanden met betrekking tot een header:

header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.html

Het bestand header-rounded-logo.html bevat bijvoorbeeld een HTML comment dat een CSS-klasse toevoegt voor het circulair uitknippen van de logo-afbeelding. Als we die aanpak graag zouden willen, zouden we ons Seedlet header.html bestand kunnen bewerken om header-rounded-logo.html op te nemen in plaats van header-centered.html. Maar dat hoeven we niet te doen, want we kunnen die template part toepassen in de WordPress Site Editor en de themabestanden op de harde schijf ongemoeid laten.

De Site Editor gebruiken om een header aan te passen

Met een blokthema actief op onze website, hebben we toegang tot de Site Editor in het WordPress admin panel door Appearance > Editor te selecteren:

De eerste weergave in de Site Editor is een paginavullende layout met de header, footer en andere template parts die al zijn toegevoegd door de ontwikkelaar van het thema. We kunnen op de header klikken om meteen te beginnen met bewerken.

Hieronder bevat onze header een placeholder voor een logo en worden de sitenaam en hoofdnavigatie (die nu alleen bestaat uit “About Us” en “Example Page”) al weergegeven. Als we een tagline toevoegen aan onze basis site-informatie, zal die hier ook verschijnen.

Deze elementen van de site-identiteit verschijnen al in onze header omdat het hierboven genoemde deel van het sjabloon header-centered.html deze comment bevat:

<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->

De hoofdnavigatie wordt gegenereerd door deze comment:

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->

Laten we ons logo toevoegen:

1. Selecteer de placeholder voor het logo.
2. Klik op de knop Add media.
3. Kies je logo in de WordPress Mediabibliotheek of upload het vanaf schijf.

Het aanpassen van de header van een website door een logo toe te voegen is zo’n veelvoorkomende taak dat zelfs de meeste klassieke WordPress thema’s de klus eenvoudig klaren in de Customizer. Laten we dus een blok toevoegen dat nog niet is voorzien in de template: een secundair menu bovenaan de pagina met de vermelding: Shop.

Eerst schakelen we de weergave van de Block Inserter in door op het schakelpictogram linksboven in de Site Editor te klikken:

Met de Block Inserter actief:

1. Zoek het navigatieblok (je kunt ernaar zoeken).
2. Sleep het blok naar de bovenmarge van de header.

Nu bewerken we het navigatieblok door een custom link te maken (los van de hoofdnavigatie) die de tekst Shop weergeeft en de URL van ons e-commerce subdomein heeft:

Standaard staat alles in deze header template part gecentreerd op de pagina. We willen de Shop link naar rechts laten zweven. Om dat te doen:

1. Klik op het nieuwe navigatieblok.
2. Klik op het pictogram Edit justify items in de werkbalk.
3. Selecteer Justify items right.

Hier is de voltooide header:

Hoe je een klassieke themaheader kunt aanpassen met de Customizer

Toen de eerste versie van de thema Customizer in 2012 werd uitgebracht, samen met WordPress 3.4, was het een sprong voorwaarts om beheerders te helpen het uiterlijk en de sfeer van hun websites aan te passen zonder te coderen.

De Customizer is sindsdien aanzienlijk verbeterd, maar één ding blijft waar: de ontwikkelaar van een thema bepaalt wat wel en niet kan worden aangepast met de tool. Dat is een contrast met de vrije hand die site-eigenaren hebben met de blokgebaseerde Site Editor.

De WordPress thema Customizer gebruiken

Wanneer een klassiek thema dat de Customizer ondersteunt actief is op een site, kun je deze openen in het beheerpaneel van WordPress door te kiezen voor Appearance > Customize.

In het hoofdmenu Customizer selecteren we Site Identity om de aanpasbare onderdelen in de header te bereiken:

In het onderdeel Site identity van dit thema kunnen we een logo toevoegen of wijzigen en de sitetitel en eventuele tagline bewerken. (De sitetitel en tagline worden in eerste instantie ingevuld door items op de pagina General Settings van het beheerderspaneel).

Dit thema plaatst ook de primaire navigatie van de site in de header. Er is ook een locatie voor navigatie in de footer en voor een menu met links naar sociale media. Met de Customizer kun je kiezen welk – of welk – menu je aan elk van deze locaties wilt toewijzen, maar de locaties zelf liggen in wezen vast.

Nadat we op de hierboven gemarkeerde knop Select logo hebben geklikt, kunnen we een logo kiezen uit de WordPress Mediabibliotheek of een nieuw logo uploaden vanaf je harde schijf.

Hieronder, met een logo op zijn plaats, kunnen we in de Customizer de afbeelding verwijderen of vervangen door een andere:

Onder de motorkap: Wat kan de Customizer aanpassen?

Dus, hoe bepaalt de Customizer of we een logo kunnen uploaden en waar het moet worden geplaatst als we dat doen?

Het begint met deze invoer in het script functions.php van het thema:

/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
    'custom-logo',
    array(
        'height' => 240,
        'width'           => 240,
        'flex-width'  => false,
        'flex-height' => false,
     )
);

Dat blok code schakelt de knop Select logo in op het tabblad Site identity van de Customizer, samen met de link naar de features van de Mediabibliotheek.

Vervolgens wordt in de PHP code die wordt gebruikt om de header van de site te bouwen, dit korte stukje code toegevoegd op de plaats waar het logo moet verschijnen:

<div class="site-logo"><?php the_custom_logo(); ?></div>

Het resultaat:

Een WordPress header wijzigen door themabestanden te bewerken

Hierboven, toen we de header in een blokthema aanpasten met behulp van de Site Editor, voegden we een secundair menu toe met een Shop link. We waren vrij om dat navigatieblok te plaatsen waar we maar wilden in onze header. Onze klassieke versie van het thema heeft geen locatie gereserveerd voor zo’n menu, dus we moeten PHP code met betrekking tot de header bewerken om de wijziging door te voeren.

We zouden gewoon het juiste themabestand kunnen openen en handmatig de HTML voor ons secundaire menu kunnen toevoegen, maar dat zou kortzichtig zijn. Later willen we misschien de tekst van onze winkellink bijwerken (Nu winkelen?), de URL wijzigen of een ander item aan dat menu toevoegen (Inloggen?).

We willen nieuwe navigatie toevoegen aan de header die is geregistreerd in de Customizer, zodat de inhoud van het secundaire menu kan worden gewijzigd in de WordPress menu-editor zonder dat we terug hoeven te gaan naar de themacode.

Voordat je begint: Maak er een backup van

Graven in de PHP code van je klassieke WordPress thema om de header van je site aan te passen wordt vaak omschreven als het bewerken van het header.php bestand. Dat is bij veel thema’s het geval, maar andere kunnen meerdere bestanden combineren om een enkele header te bouwen.

Maak backups voordat je wijzigingen aanbrengt in themabestanden. Hier lees je hoe je backups maakt en hoe je backups terugzet.

Zelfs met backups kun je in de problemen komen wanneer een update van een extern thema je wijzigingen overschrijft. Je wijzigingen kunnen dan van de site verdwijnen totdat je de gewijzigde themabestanden kunt herstellen vanaf een back-up. Daarom raden we je sterk aan om een child thema te maken voor je gewijzigde bestanden en updates te testen op een WordPress testsite.

Een WordPress header bewerken in een klassiek thema

Ons voorbeeld klassieke thema heeft een locatie gereserveerd in de header voor primaire navigatie. In de Customizer kunnen we het WordPress menu selecteren dat we aan die locatie willen toewijzen. In ons geval heeft dat menu de handige naam “Primary Menu”.

Er zijn ook locaties in het thema voor footer- en sociale linknavigatie, maar je kunt hieronder zien dat deze momenteel niet zijn ingeschakeld:

Als we kijken naar het script functions.php van het thema, zien we waar eerst naar die menulocaties wordt verwezen:

// This theme uses wp_nav_menu() 
register_nav_menus(
    array(
        'primary' => __( 'Primary Navigation', 'seedlet' ),
        'footer'  => __( 'Footer Navigation', 'seedlet' ),
        'social'  => __( 'Social Links Navigation', 'seedlet' ),
    )
);

Hieronder voegen we aan dat blok een item toe voor ons nieuwe menu “Secondary Navigation”:

// This theme uses wp_nav_menu() 
register_nav_menus(
    array(
        'primary' => __( 'Primary Navigation', 'seedlet' ),
        'secondary' => __( 'Secondary Navigation', 'seedlet' ),
        'footer'  => __( 'Footer Navigation', 'seedlet' ),
        'social'  => __( 'Social Links Navigation', 'seedlet' ),
    )
);

Als we terugkeren naar de Customizer, verschijnt de nieuwe optie voor Secondary Navigation in het gebied Menu Locations:

We kunnen ons menu een naam geven (Secondary Menu) en beginnen er links aan toe te voegen. Net zoals we hebben gedaan met de Site Editor in het thema op basis van blokken, maken we één item voor Shop.

Terug in het themabestand voor de header hebben we wat code toegevoegd die bevestigt dat het secundaire navigatiemenu bestaat en dat het ten minste één item heeft in de lijst met links. Daarna analyseren we de inhoud van het menu en geven die weer:

<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations         = get_nav_menu_locations();
$menu_id           = $locations[ $location_name ];
$menu_obj          = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
    array(
        'theme_location'  => 'secondary',
        'menu_class'          => 'menu-wrapper',
        'container_class' => 'secondary-menu-container',
        'items_wrap'          => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    )
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>        
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
    <button id="secondary-open-menu" class="button open">
        <span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
        <span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
    </button>
<?php endif; ?>
</div>

Nu bevat onze header onze Shop link (hieronder rood gemarkeerd) op de door ons gewenste locatie voor de secundaire navigatie.

Met deze aanpak kunnen we de anchortekst die wordt gebruikt voor onze Shop link wijzigen – of zelfs extra menu-items toevoegen aan de secundaire navigatie – door gewoon ons secundaire navigatiemenu in het WordPress admin dashboard te bewerken.

Samenvatting

Als je de header van je WordPress site wilt aanpassen zonder gebruik te maken van externe plugins of page builders, dan bieden thema’s op basis van blokken bijna onbeperkte flexibiliteit in combinatie met de Site Editor. Met de Site Editor kun je een verscheidenheid aan blokken vrijwel overal op een paginalayout plaatsen. Wijzigingen die je aanbrengt in blokdefinities en styling worden opgeslagen in de WordPress database, waardoor het niet nodig is om themabestanden op schijf aan te passen.

De Customizer, die we al meer dan tien jaar gebruiken om klassieke thema’s te beheren, staat wijzigingen toe aan elementen die de ontwikkelaar van een thema heeft geïdentificeerd en geregistreerd als “aanpasbaar”. Veranderingen die je wilt aanbrengen en die buiten dat bereik vallen, vereisen mogelijk het bewerken van themabestanden en – bijna zeker – een basiskennis van de PHP scripttaal.

Op zoek naar een betere manier om WordPress sites te bouwen? Kijk dan eens naar het op Docker gebaseerde DevKinsta, een gratis lokale ontwikkelsuite die wordt gebruikt door 60,000+ ontwikkelaars, webdesigners en freelancers.

Steve Bonisteel Kinsta

Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.