Download - Lär dig ajaxifiera dina tillägg med jQuery
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