Jaarlijks brengt Automattic, het bedrijf achter WordPress, een nieuw thema uit. Voor 2017 is dat het thema met de naam Twenty Seventeen. Dit thema is vanaf WordPress 4.7 standaard aanwezig en actief in nieuwe WordPress installaties (en wordt dus behandeld in de WordPress Cursus). In onderstaande post duik ik in de details van het thema.

Op het eerste gezicht

Direct vallen een aantal zaken op in de demo versie: er wordt video als achtergrond gebruikt en het thema doet aan parallax scrolling. Niet verkeerd. Wat mij verder opviel, was dat blogberichten gelijktijdig met andere secties op de homepage kunnen worden getoond. Eerder moest je kiezen tussen blogberichten óf een statische pagina op je startpagina. Je kon ze niet combineren. Met dit nieuwe thema kun je dus eenvoudig een single page website bouwen.

Customizer

De meeste instellingen voor het thema vind je terug in de Customizer van WordPress. De Customizer is te openen via Weergave > Customizer of direct vanuit je admin bar. Hieronder nemen we de verschillende onderdelen stap voor stap door.

Site Identiteit

Eigenlijk is hier niets veranderd. Je kunt nog steeds afbeeldingen uploaden voor je logo en favicon en ook kun je hier, net als op de pagina Instellingen: algemeen, de titel en subtitel van je website aanpassen.

Wel nieuw is dat je de verschillende instellingen snel vanuit het preview venster kunt benaderen via de potlood icoontjes. Dat is een nieuwe feature van WordPress 4.7, dus deze icoontjes zul je ook bij andere thema’s terug zien. In de toekomst zullen dit soort zaken waarschijnlijk direct in de pagina kunnen aanpassen zoals sommige thema’s nu al bieden.

Kleuren

Anders dan bij Twenty Sixteen heb je in Twenty Seventeen minder grip op de kleuren van je thema. Je kunt kiezen voor licht, donker of aangepast. De eerste twee hebben invloed op de achtergrond van je thema. Gebruik je ‘donker’, dan word de achtergrond van je website zwart. Ideaal bijvoorbeeld voor fotografie websites.

De optie aangepast heeft geen invloed op de achtergrondkleur. Deze instelling veranderd de kleur van bepaalde typen teksten (zoals de publicatie datum en quotes) en onderdelen van bepaalde Widgets. Via de schuifbalk kun je deze kleurinstelling aanpassen.

Met de Headertekstkleur instelling verander je de kleur van de website titel en subtitel.

Header media

De mogelijkheid om een video header in te stellen vind je hier terug. Je kunt videobestanden uploaden, maar het is ook mogelijk om YouTube video´s te gebruiken. Omdat de teksteditor voor Pagina’s en Berichten naast YouTube- ook Vimeo links begrijpt, is het logisch om dat ook hier te verwachten. Vimeo werkt echter niet in de header. Je kunt alleen YouTube linkjes gebruiken.

In plaats van video kun je ook gewoon header afbeeldingen gebruiken. Leuk is dat je meerdere afbeeldingen kunt uploaden zodat deze willekeurig in je header worden getoond. Het alternatief is om gebruik te maken van de meegeleverde, aangeraden header.

Menu’s

Vergelijkbaar met Weergave > Menu’s kun je jouw hoofdmenu en de bijbehorende menu items hier instellen. De nieuwe Preview editor werkt echter wat fijner voor beginners.

WordPress Menu Live Preview

Als je een menu hebt ingesteld voor de locatie Bovenste Menu zie je het menu in je website in eerste instantie onderaan je scherm (of viewport). Zodra je naar beneden scrolt verplaatst het menu zich naar de bovenkant van je scherm waar het vervolgens gefixeerd in beeld blijft staan.

De verschillende menu items kun je herschikken door ze naar de juiste positie te slepen. Zie je geen menu in je website? Selecteer dan onder Locatie tonen de optie Bovenste menu.

Net als in Twenty Sixteen is de locatie Socialelinksmenu weer beschikbaar. Als je je menu aan deze locatie toewijst probeert het thema de afzonderlijke menu items te linken aan één van de sociale netwerken (Instagram, Facebook, Twitter, etc.) en toont het de bijbehorende iconen in plaats van tekst links.

Widgets

Je hebt in Twenty Seventeen drie locaties beschikbaar waar je widgets kunt tonen: Sidebar, Footer 1 en Footer 2. Zoals je mag verwachten komen de widgets die je in de footers plaatst helemaal onderaan je website te staan. Respectievelijk links en rechts.

De Sidebar locatie is – in tegenstelling tot voorgaande thema’s niet – beschikbaar voor Pagina’s en verschijnt alleen bij (blog) Berichten. Persoonlijk vind ik dit jammer, liever had ik de optie gezien om de sidebar voor deze posttypen afzonderlijk te (de)activeren. De footer locaties zijn wel overal in je site beschikbaar.

Widgets en menu’s niet helemaal niet duidelijk? Kijk eens naar de WordPress Cursus

Statische startpagina

Met de komst van WordPress 4.7 hoef je niet langer handmatig een statische pagina als startpagina in te stellen. Deze staat standaard al ingesteld op Home. Ook de placeholder voor je berichtenpagina (of blog pagina) is al aangemaakt (Blog) en je kunt onder dit kopje kiezen om je Berichtenpagina als startpagina in te stellen.

Onder dit kopje heb je ook de mogelijkheid om nieuwe pagina´s toe te voegen, als je liever een andere pagina als start- of berichtenpagina gebruikt. Als je op de ingestelde pagina een uitgelichte afbeelding instelt, dan wordt deze afbeelding met het parallax effect in de achtergrond van de eerste ´sectie´ van je startpagina getoond.

Persoonlijk vind ik het mooier om in deze eerste sectie geen gebruik te maken van de achtergrond afbeelding omdat het er onrustig uit ziet in combinatie met de afbeelding/video in de header (het bovenste deel van je voorpagina). In de andere secties (zie hieronder) ziet dit er beter uit.

Thema Opties

Let op: deze optie is alleen beschikbaar als je een statische startpagina hebt ingesteld.

Je parallax pagina is ingedeeld in secties die bestaan uit een afbeelding (optioneel) en tekst. Onder Thema Opties kun je instellen wat er in de verschillende secties moet worden getoond. Dat kunnen zowel pagina’s als berichten zijn. Je bent niet verplicht alle secties te vullen.

WordPress Twenty Seventeen Parallax

De eerste sectie heb je onder Statische startpagina al ingesteld. Verwarrend onder dit kopje is dat Voorpagina sectie 1 inhoud door de Statische startpagina instelling eigenlijk verwijst naar de tweede sectie. En de tweede naar de derde, etc.

Wel consequent is dat je ook hier voor iedere sectie vanuit de Customizer nieuwe pagina´s kunt aanmaken en instellen. Wederom geldt dat de Uitgelichte afbeelding van een pagina als parallax achtergrond wordt gebruikt als je de pagina in een sectie gebruikt.

De Pagina layout instelling geeft je de optie om iedere sectie in twee kolommen in te delen. De positie van de tekst en de titel wordt gesplitst als je twee kolommen gebruikt. Afhankelijk van het type (Bericht of Pagina) wordt de tekst links of rechts geplaatst.

Extra CSS

Onder Extra CSS kun website specifieke CSS code opgeven om het uiterlijk van je pagina aan te passen.

Conclusie

Het parallax effect werkt erg goed. De nummering van de secties is door de startpagina instelling wel verwarrend . Het was handig geweest als de uitgelichte afbeelding ook vanuit de Customizer ingesteld kon worden. Nu is het nodig om voor elke sectie de bijbehorende pagina op te snorren om daar de uitgelichte afbeelding in te stellen.

De mogelijkheid voor videoheaders is een geweldige toevoeging. Kleine kanttekening is dat Vimeo video’s hier niet kunnen worden gebruikt, terwijl Vimeo in Berichten en Pagina’s wel wordt ondersteund. Er wordt ook nergens beweerd dat dit kan. WordPress bevat echter meer van dit soort inconsequente eigenschappen en ik zou graag zien dat het er minder werden in plaats van meer.

Jammer is dat de widget sidebar niet op Pagina’s getoond kan worden en alleen op Berichtpagina’s zichtbaar is. Ook de mogelijkheden voor kleurgebruik zijn erg beperkt.

Al met al verwacht ik dat Twenty Seventeen in de behoeften van veel WordPress starters kan voorzien. Tegelijk vind ik dat het thema veel verwarrende en verstopte instellingen heeft. Daarom denk ik dat dit thema de drempel voor de startende WordPress’er onnodig verhoogd. Ik loop daar ook tegenaan in de WordPress Cursus en ik hoop met dit bericht wat helderheid te scheppen.

 

Auteur

Louis Wolf
Louis Wolf
Louis is trainer voor de WordPress Cursus in Arnhem en Nijmegen. Ter ondersteuning van zijn cursussen schrijft Louis blog berichten. Naast zijn werk als trainer is Louis software ontwikkelaar en leert hij kinderen programmeren.