Samuel Brynolf

Skapar ett wordpress-tema som använder ajax, admin-ajax.php + history.js för att filtrera portfolio

Jag har en lucka när det kommer till javascript: ladda innehåll med Ajax. Ganska jobbig lucka. Fyll den.

Pinsamt men sant ändå—jag har inte riktigt kläm på att ladda innehåll med Ajax och att koppla upp detta mot HTML5-history (eller history.js). I de mer avancerade gränssnitten som jag varit inbland i har vi utvecklat i par. Min expertis hamnar i layout/rwd och css3-styling i sådana konstellationer. Och den andra personen kör javascripten. RWD sätter press på möjligheten att ladda in både scripts och innehåll per skärmstorlek. Självklart gör jag det redan nu, men via plugins som andra skrivit. Jag vill fatta det här själv.

Det här är en av flera uppgifter som jag gör för att fortbilda mig själv.

1. Fräscha upp grunderna för att ladda in innehåll med Ajax på enklast möjliga sätt

Det här kommer jag att känna igen eftersom jag gjort det förut. Moment:

  • Uppdatera grunt-filen för Hammer & Chisel:
    + Optimering av javascripten är för klen.
    ++ Aktivera livereload Check!
  • Sätt upp utvecklingsmiljö i Mamp Check!
  • Skapa prototyp i html där innehåll hämtas och animeras in. Check!

Edit 2014.03.04: api.jquery.com/load/ är ju egentligen bara vad som behövs. Till och med effekten sker ju i callbackfunktionen… Jag byggde också in getScript() som ju är precis vad jag letat länge efter!

Edit 2014.06.10 Nu finns demo att titta på här: HTML5 History och Flickan med svavelstickorna

2. WordPress och Ajax—filtrera portfolio

WordPress är det CMS som jag kan. Det finns tydligen snyggare och fulare sätt att använda Ajax och Wp tillsammans. Rimligt att ha pejl på? Vi får se.

Uppgift: Använd the terms från en custom taxonomy (som är bunden till en custom post type) som filter på archive-customPostType.php -template. Ladda asynkront.

  • Sätt upp wp lokalt  Check!
  • Bygg ett enkelt tema för att dema filtren. Check!
  • Lägg till ett script som aktiveras med scroll och använder wordpress egna ajax-fil Check!

Resurser:

how-to-use-ajax-in-wordpress Smashing Magazine
load-page-html-content-through-ajax wordpress.stackexchange.com
using-ajax-with-wordpress-for-conditional-loading nostrongbeliefs.com
loading-wordpress-posts-with-ajax-and-jquery emanueleferonato.com
getting-started-with-ajax-wordpress-pagination–wp-23099 Tutsplus.com
Edit: 2014.03.07: difference-between-ajaxcachefalse-and-ajaxsetupcachefalse-in-jqu

 3. Addera history för portfoliofilter via html5 och/eller javascriptplugin

Lägg på history.js till uppgift två ovan. Check!

Resurser:

getting-started-with-the-history-api Teamtreehouse.com
history.js Github
history.js/demo balupton.github.io
http://www.alexpcoleman.com/new-year-of-coding/lesson-6-page-states-html5-history-api/

Avslutningsvis

Jag ska kolla in Ajaxify (javscript plugin). Känner på mig att det är ruggigt bra och just därför är det fint att avsluta med det. Facit kollar man ju efteråt—annars lär man sig ju inget. Eller?