Skip to main content

Kijkje achter de schermen 3

Eerder schreef Renco al eens over de techniek achter geloofsvoer.nl. Na de recente update in de lay-out werd het tijd voor een deel 3.
| Renco Schoemaker |

Zo eens in de zoveel tijd (jaren) heb ik zin om de lay-out en functionaliteit van geloofsvoer.nl eens lekker op de schop te nemen. Half 2015 – deze site/blog is gestart in januari 2014 – schreef ik een eerste ‘kijkje achter de schermen’. Dat ging vooral over het blogproces terwijl opvolger (eind 2016) vooral ging over de techniek. Vandaag een derde deel waar de koppeling tussen de inhoud en de lay-out centraal staat. Voor de liefhebber, zeg maar.

YOOtheme Pro 2.0

Laat ik maar met de deur in huis vallen: veel (grondige) wijzigingen hier op geloofsvoer.nl zijn het directe gevolg van wat de dames en heren bij het Duitse YOOtheme weten te ontwikkelen. YOOtheme begon als bedrijf dat templates (themes) maakt voor Joomla websites en voegde daar later ook WordPress aan toe. Geloofsvoer.nl is gebouwd met de laatstgenoemde.

In 2016 kwam YOOtheme Pro als compleet nieuw framework voor website templates (themes). Ik deed er al snel ervaring mee op een trok geloofsvoer op in het nieuwe framework, gebruikmakend van het Pinewood Lake theme. In maart dit jaar kwam daar YOOtheme Pro 2.0 en dan jeukt het bij mij natuurlijk direct. Eindelijk kan je de opmaak van blogs geheel scheiden van de inhoud van blogs.

 

Kijkje achter de schermen 3

Opmaak en inhoud

In de ‘oude’ situatie tikten we onze blogs in een soort ‘online Word’. WordPress bood rudimentaire opmaak mogelijkheden voor de blog zelf en het theme zorgde voor de omlijsting, zogezegd. De Gutenberg editor bracht daar vanuit WordPress al flink verbetering in. Maar nog steeds stop je, al dan niet met behulp van deze nieuwe editor, de ‘opmaak’ in de blog zelf. Zolang je dat consistent doet, is er weinig aan de hand. Maar het kán ook anders ;)

Met YOOtheme Pro 2.0 kan je inhoud opmaken buiten de blog zelf om. Dat kon eerder al ‘statisch’ met YOOtheme Widgetkit, maar nu ook ‘dynamisch’ met YOOtheme Pro 2.0. Widgetkit is daarmee overbodig geworden. Nu maak ik eenvoudig blokken (panels), slideshows (sliders) etc. op, maar ook blog ‘templates‘ die allemaal automatisch op de juiste plaatsen de juiste inhoud laden (vandaar: ‘dynamisch’). Dus: titel hier in die opmaak, afbeelding hier in die afmeting met dat kartelrandje en dat ‘hover’ effect, de auteur in dat lettertype eronder, een ’teaser’ van de inhoud daar etc. etc.

Een voorbeeld. De twee blokken op de huidige homepage laten de meest recente blogs zien in de categorie ‘nadenken’ en ‘film & tv / muziek / verslag’. Schrijft één van ons een nieuwe blog in één van die categorieën? Dan verschijnt die daar automatisch in exact dezelfde opmaak, maar met andere inhoud. En dat alles binnen één framework. Chapeau. De grids (rasters) daaronder tonen in vooraf gedefinieerde opmaak de recente blogs in die categorieën.

Toegeven: de auteur en datum archieven worden níet afgedekt door YOOtheme en die heb ik laten ontwikkelen ‘op maat’. En op de categorie pagina’s (zoals deze) ontbreekt de paginering onderaan. Tja.

Afscheid en start

Met sommige zaken begin je enthousiast (soms ook omdat het kán) om er vervolgens achter te komen dat het ofwel dt bewerkelijk is, ofwel iets biedt waarop niemand wacht of, in het slechtste geval, beide.

Posten op social media loopt niet meer via SNAP, maar ik heb WordPress nu middels Zapier gekoppeld aan Buffer. Stuk eenvoudiger en stabieler. NGFB werd ‘WordPress Social and Search Optimization‘ en gebruiken we nog steeds, i.c.m. Yoast. De nieuwsbrief inclusief landingspagina is overleden evenals het contactformulier. Maar misschien breng ik die terug. Google Analytics moest weg i.v.m. privacy versus Google (nu Koko analytics) en (het te zware) Jetpack had ik ook wel gezien. iThemes Security draait nog steeds naar volle tevredenheid. Revive Old Post maakt eerder dit jaar een comeback op geloofsvoer.nl.

Afscheid nam ik ook van het Content Delivery Network (MaxCDN) omdat de hoster TransIP voldoende snelheid weet te bieden, zeker na het comprimeren van afbeeldingen met Smush Pro en caching via WP Rocket. Achter de schermen is Admin Columns Pro erg prettig voor overzicht, Akismet Anti-Spam evenzo tegen spam terwijl Broken Link Checker dode links blijft voorkomen. Enhanced Media Library PRO is fijn voor die vele afbeeldingen. Het mobiele menu van ShiftNav Pro werd (weer) vervangen voor het ‘native’ menu van YOOtheme. Nou, you get the picture: there is a plugin for everything.

What’s next?

Voor nu is het nog even wachten op de nieuwe templates die helemaal zijn opgetrokken in YOOtheme Pro 2.0. Mogelijk bieden die nog zoveel nieuwe opties dat ik de site nog een compleet nieuw template geef, maar ik vind het eigenlijk wel prima zo. De afgelopen twee weken heb ik vele uren in de site gestoken om mij de 2.0 eigen te maken. Ik vond ook nog een bug die hopelijk spoedig wordt opgelost zodat we van die enorme afbeeldingen bij de blogs verlost zijn.

Als ik het helemaal bont wil maken, ga ik de blogs als Custom Post Type definiëren in WordPress en op basis daarvan een front-end formulier bouwen waarin ik de structuur en elementen van een blog stel. Maar ja, de ene blog is de andere niet. Dus alhoewel het qua opmaak i.c.m. YOOtheme Pro 2.0 werkelijk het ‘walhalla’ is (YOOtheme Pro 2.0 ondersteunt ook Custom Post Types), zal die strakke structuur vooral beperkende zijn schat ik in.

Enfin, een volgende blog is weer meer inhoudelijk van aard en geenszins technisch. Over een paar jaar volgt er vast een deel 4. Hieronder nog een uitsmijter en tot een volgende keer.

Uitsmijter

Met behulp van The wayback machine kan je zien hoe sites er eerder uitzagen. Check hieronder hoe geloofsvoer.nl zich qua lay-out ontwikkelde.

2014-2015

Hard contrast door veel zwart en wit. Bleek niet erg praktisch in gebruik en optisch enorm beperkend in kleurgebruik. Veel afbeeldingen hebben nu eenmaal een witte achtergrond.

YOOtheme template Peak

2016-2018

Veel meer wit. Ruimere opzet, rondje afbeeldingen en een verticale menubalk. Goed geoptimaliseerd voor mobiel gebruik, minder voor grote beeldschermen. Nieuw, strakker logo en start gebruik van meer oranje.

YOOtheme Pro template Peak

2018-nu

Strakke lijnen, rechte hoeken. Uitgelijnde grids met rechthoekige afbeeldingen. Steeds subtiel verfijnd en geoptimaliseerd. Compactere weergave met horizontaal menu. Diverse elementen vallen weg op tablet en/of telefoon.

YOOtheme Pro (2.0) template Pinewood Lake

Iets meer over auteur Renco Schoemaker

Renco is ruim 35 jaar, man en vader van twee. Hij was eerder jeugdouderling in zijn gemeente in Zwolle. Hij mag graag fietsen, hardlopen, tv series kijken en bloggen. Luistert tot slot graag naar harde christelijke herrie.

Categorieën

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.