lär dig ajaxifiera dina tillägg med jquery
DESCRIPTION
Kristian Erendis session om ajaxifiering av tillägg, som hölls på WordCamp Stockholm den 22 oktober 2012.TRANSCRIPT
Lär dig ajaxifiera dina tillägg med jQueryBygg ett säkert röstningstillägg med jQuery
Kristian ErendiReptilo.se
Reptilo WordPressbyrå
• Kristian Erendi• @kaptenkrillo• [email protected]• http://www.linkedin.com/in/kristianerendi• http://reptilo.se
Syftet med denna presentation
• Grundläggande förståelse för plugin och jQuery• Hooks• Shortcodes• Gettext – Internationalization eller i18n• Ajaxapi - webbsida• Nonce – WP rekommenderade säkerhet• jQuery
reptilo-vote
• En liten ajax-baserad plugin• jQuery - javascript bibliotek• Prova den live på:
http://reptilo.se/reptilo-vote-plugin/
Hook – add_action
• Lägger till script i HTLM-headern med wp_enqueue_scripts
6
Shortcode
Sidan är laddad hos klienten
• Med aktuell statistik från databasen
Ajax-API
• Ajaxanrop gör man till en publik webbsida• http://reptilo.se/wp-content/plugins/reptilo-vote/api/vote.php• Läser wp-config – så att allt i WP är tillgängligt• Returnerar data i json
OBS webbsidan manipulerar databasen, detta kräver säkerhet!
1. Stoppa sql-injection, filtrera parametrarna2. Kontrollera varifrån anropet kommer, referer3. WP-nonce
9
WP-Nonce
Nonce:• klockslag • unik sträng • saltet i wp-config.php • giltig i 24h• 837d46052a
Skapa nonce på webbsidan innan man skickar posten wp_create_nonce(’reptilo-vote’. $post->ID);
Ta emot nonce på servern och validera den check_ajax_referer('reptilo-vote’ . $_REQUEST['postid'],
api/vote.php - Ajax api
Ajaxsvaret som en array i json
jQuery-koden
Vad jQuery-koden gör
1. Fångar klick på Ja eller Nej2. Postparametrar (Ja/nej, post_id, WP_nonce)3. Ajaxanropet4. Uppdaterar HTML (siffrorna, klickmöjlighet) 5. Byter färg med CSS
14
Kort om klassen
• wp_postmeta tabellen för att spara data get_post_meta($this->postId,… update_post_meta($this->postId,…
• Räkna ut statistiken när den skapas! Inte när den behövs vid sidladdningen
• spara färdig statistik och data i db get_option("reptiloVoteStats"); update_option('reptiloVoteStats’…
Internationalization – i18n
• Alla texter ska vara översättningsbara• WP använder gettext• CodeStyling Localization – plugin för överättn
• Presentationen:http://reptilo.se/reptilo-vote-plugin/
• Plugin-koden:https://github.com/reptilo/reptilo-vote
Frågor?Kristian [email protected]@kaptenkrillo