jQuery en WordPress deel 1

Opgetekend uit eigen gedachten: “Stafmans, jongen, hoe kom jij in ’s hemelsnaam bij zoiets curieus als ‘jQuery’ terecht?”. Eerlijk antwoord. Ik zou willen dat het niet zo was.

Zo wilde ik ooit al niets weten van HTML, niets van CSS en zeker niets van PHP. Desondanks ben ik in een situatie verzeild geraakt waarin ik me veelvuldig bedien van HTML en CSS. En maak ik inmiddels WordPress templates, functies en widgets in PHP, zij het op absoluut het allerallerlaagste beginnersniveau. Maar het wegblijven bij jQuery en javascript was dan een soort laatste principe dat overeind bleef. Tenminste… .

Dan moet ik natuurlijk niet zo gecharmeerd raken van animaties, ‘sticky’ menu’s, ‘image hover’ effecten, het prachtige ‘masonry’ script en als klap op de vuurpijl het parallax effect. En allemaal zijn ze gebaseerd op javascript en jQuery.

Dit artikel is nog lang niet af. Het is slechts een inleiding voor één of meerdere artikelen waarin ik vooral voor mezelf het gebruik van jQuery binnen WordPress wil uitleggen.

Een aantal vragen passeren daarbij de revue:

  • Op welke manieren kan je jQuery en javascript opnemen in WordPress?
  • Wat zijn voor- en nadelen van de verschillende manieren?
  • jQuery in de header of in de footer?
  • Wat zijn manieren om scripts te laden en weer te ‘ont’-laden?
  • Wat zijn mogelijkheden om scripts te bundelen en te comprimeren?

Een aantal zaken heb ik al uitgezocht en ook al wel aan het werk gekregen. Als ik op de belangrijkste vragen een goed antwoord weet te formuleren, dan kan ik namelijk ook demonstratiepagina’s aan Stafmans Blog toevoegen, zonder dat ik alle scripts voor de volledige site moet laden en daarmee te site traag, complex en foutgevoelig maak.

Een klein voorproefje voor het ‘masonry’ effect

Op de startpagina laat ik nu 3 artikelen zien als excerpt en naast elkaar. Dat is totaal anders dan het oorspronkelijke ontwerp van dit thema. Op de blogpagina lees je de artikelen op een lange pagina onder elkaar. Ik denk erover om een blogpagina te maken waarin excerpts van artikelen als een metselwerkstructuur (‘masonry’) naast en onder elkaar worden geplaatst. Volledig ‘responsive’, zodat de verdeling zich automatisch aanpast bij het groter of kleiner maken van het browservenster. Ik ben er nog niet helemaal, maar hier heb je al een aardige ‘proof of concept’, maar met vooral op de iPad nog geen goede weergave van het effect. Gebaseerd op het bekende jQuery Masonry script van Desandro.

Oh ja, zou ik bijna nog de achtergrond afbeelding met de boom van Stafmans Blog vergeten. Die past zich ook volledig aan het browserscherm aan en is gebaseerd op het jQuery Backstretch script. Zonder dit script werkte het niet goed met iPhones en iPads.

Tags: