Een nieuwe layout!

Hoera, mijn blog heeft een nieuwe layout! Was er dan iets mis met die oude? Nou ja, niet écht. Maar het was de meerdere malen verbouwde Twenty Fourteen, of nou ja, een child theme daarvoor, en bepaalde dingen irriteerden me al een tijd. Zo was de stylesheet een amper te lezen verzameling van vijfhonderdmiljoen classes die nergens voor gebruikt werden, met vier verschillende viewport-sizes en dan op zo’n manier dat als je voor de iPad iets veranderde, je layout op iPhone of desktop ongewild alle kanten op ging.

Ook ergerde ik me dood aan vierhonderd keer mijn eigen hoofd, vooral onderaan bij related posts in de categorie “persoonlijk” of “asperger”. Die blauwe, die roze waar ik eigenlijk niet meer op lijk, of die okergele, die dan weer niet bij de rest past. Sowieso, de noodzaak om altijd maar weer een plaatje te moeten gebruiken, ook al heeft het stuk tekst helemaal geen plaatje nodig… Natuurlijk, voor social media moet je een featured image hebben, maar wil je die overal dan ook zíen? Nee dus.

De nieuwe layout. Maar dat is logisch, want hier ben je al.

Ik werk al enige tijd aan een website voor een vriendin (even voor het gemak Project A genoemd), en nog daarvoor bouwde ik Aafkes nieuwe thema. From scratch. Of nou ja, met wat copy-pastewerk, natuurlijk, want mijn code-talent bestaat voornamelijk uit het kijken wat anderen hebben geschreven, en hoe ik dat kan gebruiken danwel verbeteren. Maar eindelijk eens geen child theme, waar je meer tijd kwijt bent aan het achterhalen waar die lelijke lijntjes, schaduwtjes of kleurtjes nú weer vandaan komen, dan aan het bouwen. Ik knutselde een kaal thema, bouwde daar vervolgens voor Project A masonry in (dat zijn die twee kolommen, die dan netjes om en om een postje krijgen) en ging helemaal los met Advanced Custom Fields Pro. Oh mensen, dát is toch een geweldige plugin! Je hebt eigenlijk bijna geen andere plugins nodig.

De layout van Aafkes blog. We wilden iets heel simpels, met een knipoog naar the early days of webdesign (vandaar de blauwe en paarse linkjes) en met een aantal handgetekende elementen. Zo kan Aafke voor elke blogpost een ander plaatje in de titel zetten, en sluiten de posts af met een random monogram.

Very Advanced, Much Wow

Met Advanced Custom Fields kun je aan de achterkant van WordPress zelf velden toevoegen. Je kan beslissen waar, wanneer, en hoe. De informatie uit die velden kun je vervolgens weer gebruiken in je php. Zo bouwde ik voor Project A een slider (met Slick Slider) waarbij de gebruiker zelf foto’s, tekstjes en links kan invoegen. Voor mezelf maakte ik een video-posttype, waarbij video’s direct als featured image worden getoond, en een quote-posttype, waarbij ik zelf de tekst- en achtergrondkleur kan uitkiezen. Hoe leuk! (En nutteloos. Maar leuk!)

Natuurlijk had ik die # ook gewoon kunnen meecoderen. Misschien nog eens aanpassen.

Voor Project A gebruikte ik een stukje JavaScript voor een sticky menubalk die uit beeld verdwijnt als je naar beneden scrollt (zodat je meer van de pagina kunt zien) en weer tevoorschijn komt als je omhoog scrollt (zodat je snel kunt navigeren). Op mobiele apparaten verandert de balk in een uitklapmenu. Voor Aafkes thema vond ik spacende discolinks (in pure css!), die van kleur veranderen als je er met je muis overheen gaat. Die vind ik nog steeds zo leuk, dat ik ze nu zelf ook heb.

En kleur! Ik wilde kleur op mijn site! Hoewel het lastig is met beeld, merkte ik dat mijn foto’s prima uitkomen op een lichtroze of lichtpaars. En mocht er ooit een post zijn waarbij het écht niet staat…? Dan bouw ik een Advanced Custom Field en geef ik die enkele post zó een ander kleurtje. Hoppa.

Kortom: Ik ben er blij mee! Ik hoop jullie ook. Heb je nog tips, bugs of suggesties voor meer leuke maar nutteloze toevoegingen? Let me know in de comments hier beneden!

6 reacties op “Een nieuwe layout!”

  1. Jaap schreef:

    Herkenbaar met twenty fourteen en childthemes. Lang geleden gebruikte ik ook voor mijn ter ziele gegane website (geen tijd meer voor)

    Maar grid – themes zijn Idd mijn favorieten, zo zen.

    1. Toeps schreef:

      Ik was even bang dat het te druk zou worden met twee kolommen, maar ik heb heel veel overbodige info (datum, auteur enz) weggehaald van de hoofdpagina, dus dat compenseert weer.

  2. Nicole schreef:

    O, wow, die discolinks! :)

  3. Frida schreef:

    Ik mis de zoekfunctie en de scrollbar aan de rechterkant!

    1. Toeps schreef:

      De scrollbar is opzettelijk weg, want lelijk en layout-verneukend.

      Ik twijfel nog of ik een zoekfunctie wil zo openbaar. Maar hij is er nog wel: als je een niet-bestaande url intikt kom je op de 404 en daar kun je zoeken. Stiekeme truc!

  4. Sarah schreef:

    Ik mis de scrollbar ook wel eigenlijk… Hoewel ik zonder inderdaad wel mooier vind!

Geef een reactie

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