Cheffism Episode IV: Een nieuwe look

Ondanks dat niets doen misschien leuk lijkt, en dat was het ook de eerste maand of twee, de hele dag TV kijken gaat ook snel vervelen. Zeker als HBO meerdere keren per dag en week The Green Lantern uitzend. Kortom, ik moest iets anders doen. Niet alleen om mezelf meer te vermaken, maar ook om m’n kennis wat op peil te houden en ervoor te zorgen dat ik niet te roestig wordt.

Ik ben sowieso meer gaan lezen(Op dit moment ben ik Designing for the Digital Age: How to Create Human-Centered Products and Services van Kim Goodwin aan het lezen. Erg inzichtelijk boek!) en ik heb m’n eigen WordPress thema gebouwd(Dat gevonden kan worden op Github, grijp gerust je kans om het te “stelen” of om feedback te geven :)). Ik heb gekozen voor een minimalistische benadering voor dit nieuwe thema, omdat ik dat het mooist vind en omdat het makkelijker leest en navigeert.

Als startpunt heb ik het Handcrafted thema gebruikt, wat een erg naakte HTML5 thema is. Dit thema gebruikt dus HTML5 en de HTML5shiv voor support in oudere, minder-capabele browsers en leek me een goed punt om te beginnen. Met het bouwen van het thema heb ik meer geleerd van hoe WordPress werkt(en niet werkt, wat dat betreft) en hoe je een aantal van de nieuwe tags in HTML5 moet gebruiken(Met name article en section tags).

Features van de nieuwe look zijn onder andere:

Een nieuwe homepage met de meest recente post en de content van een specifiek pagina object

Het proces voor het bouwen van deze nieuwe homepage maakt mijn mate van ervaring met WordPress heel duidelijk. Het gaat er sowieso van uit dat je de “static page” instelling aan hebt staan en twee pagina objecten hebt ingesteld(Een voor Home en een voor de Blog). Ik wilde wel meer doen dan alleen de content van een pagina laten zien, Ik heb hiervoor dan ook een apart pagina-template gemaakt met de naam home.php. Toen bleek dat dit een slecht idee was. Op dat moment wist ik niet dat WordPress een Template hierarchie gebruikt dat ongeveer als volgt werkt:

Als een bezoeker naar je homepage gaat op http://voorbeeld.nl/blog, gebeurt het volgende:

  1. WordPress bepaalt of het een “static front page” heeft.
  2. Als deze niet ingesteld staat dan gaat WordPress op zoek naar een template bestand genaamd home.php en gebruikt dat om de pagina te genereren.
  3. Als home.php niet bestaat, dan gaat WordPress op zoek naar een bestand met de naam index.php en gebruikt deze.

Dit betekent in principe dat mijn front en blog pagina’s allebei met hetzelfde template geladen werden. Beetje een RTFM probleempje en ik heb er totaal geen problemen mee om dat toe te geven.

Het template zelf is vrij simpel. Het gebruikt WP_Query('showposts=1'); om de meest recente post op te halen en een simpel stukje code om de pagina content van de pagina ingesteld als ‘front page’ te tonen(Dank aan David van Limoen voor setup_postdata!)[sourcecode language=”php” light=”true”]$frontpage_id = get_option(‘page_on_front’); setup_postdata(get_page($frontpage_id)); the_content();[/sourcecode]

Een aparte blog pagina

De blog pagina toont nu alle blog posts tot het begin der tijden. Ik gebruik de WordPress plugin “Infinite Scroll” om automatisch de volgende pagina met posts te laden als je het einde van de pagina bereikt hebt. Ik heb ook gebruik gemaakt van Chris Spooner’s tutorial om een kalender icoon puur met CSS te maken. Het gebruikt CSS3 technieken als gradients, box shadows, en border radius. Ik moet nog wel iets doen met de commentaar formuliertjes, maar dat komt vanzelf wel goed.

Een archief pagina

Omdat ik de sidebar volledig had verwijdert(Nooit echt nodig gehad, zelfs met het oude thema), moest ik er in ieder geval voor zorgen dat mensen minimaal nog wel konden zoeken. Een simpele regel get_search_form(); en het was gebeurt. Ik heb de pagina ook wat verder gepersonaliseerd en vertalingen toegevoegd.

Een ding wat me wel is opgevallen terwijl ik met deze pagina bezig was is hoe inconsistent verschillende WordPress functies kunnen zijn. Bijvoorbeeld, om het aantal posts te tonen bij wp_get_archives();(Voor de maanden), moet je show_post_count op true zetten. Dus wp_get_archives( 'show_post_count=true' );.

Maar, dit is niet hetzelfde als bij wp_list_categories();, waar je show_count=1 moet gebruiken. Het is maar een klein dingetje, maar ik vraag me wel af waarom dat is. Er is, voor zover ik weet, geen reden voor dit verschil.

Beter bruikbaar op mobiele apparaten

Dit bleek wat lastig. Dit is de eerste keer dat ik media queries gebruik en terwijl het concept niet heel lastig is, heb ik er wel meer tijd aan moeten besteden dan ik had verwacht. Dit kwam vooral omdat de browsers op mijn Android telefoon(Chrome, Firefox en de standaard Web) dingen anders lieten zien dan de Agent/Device metrics instellingen in de Chrome developer toolbar.

De toolbar stelt de resolutie in op 720×1280, en daar is niks mis mee, maar dat is niet de breedte een element(zeg, html of body) krijgt als je de breedte op 100% zet met CSS. In plaats daarvan wordt de breedte 320. Als je dan ook overflow niet op hidden zet, dan zorgt dat ervoor dat als de gebruiker uitzoomt door dubbel te tappen het element wat de hele breedte in zou moeten nemen uiteindelijk maar net onder de helft pakt. Niet echt mooi dus.

Ik had hier nooit achter gekomen zonder de mogelijkheid van remote debugging van de Android SDK. En dat gezegd te hebben, ik heb geen idee hoe de site er nu uit ziet op iPhones of tablets. Ik ga ervan uit dat het hetzelfde werkt op iPhones, omdat daar de viewport ook op 320 breed wordt gezet als je van de volgende meta tag gebruik maakt:

[sourcecode language=”html” light=”true”]<meta name="viewport" content="width=device-width, initial-scale=1.0">[/sourcecode]

Tablets daarentegen…geen idee.

Dus, dat zijn de hoogtepunten van mijn nieuwe thema en een aantal van de problemen die ik tegen ben gekomen bij het ontwikkelen ervan. Het is uiteindelijk een goede leerervaring geweest en heeft voor wat vermaak gezorgd. Mocht je nog inconsistentie, bugs, of raarheden tegenkomen op de site(of in de code op github) of als je denkt dat ik dingen makkelijker had kunnen doen(voornamelijk in de code), laat me dat dan weten. 🙂

De volgende stap zal waarschijnlijk zijn om Python te leren met een combinatie van Learn Python the Hard WayPython from Scratch, en The Django Book of dieper in PHP duiken en wat tijd spenderen met Zend. Gewoon, omdat het kan.

Het gaat vermoedelijk over Web en ook , , .