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• kristian@reptilo.se• 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 Erendikristian@reptilo.se@kaptenkrillo