State of the art Web Design & Internet Marketing

Προσθέσετε javascript στο wordpress plugin σας

Η javascript μπορεί να σας λύσει τα χέρια, από το να ανασβήνετε δυναμικά ένα απλό html μπλόκο (μην το κάνετε) μέχρι να χρησιμοποιήσετε Ajax! Όσοι από εσάς πειράξατε ένα wordpress plugin ή φτιάξατε ένα δικό σας σίγουρα θα χρησιμοποιήσατε με κάποιο τρόπο javascript. Ελπίζω να ενσωματώνετε το script σας όπως φαίνεται στον κώδικα παρακάτω

      
//Φορτώνουμε την βιβλιοθήκη webfont.js
wp_enqueue_script( 'webfont','http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js');
//Φορτώνουμε τo δικό μας main.js
wp_enqueue_script( 'webfont',get_template_directory_uri() .'/js/main.js');

Τέλεια τώρα εχουμε το webfont.js(της Google) και μπορούμε να το χρησιμοποιήσουμε στο main.js. Ενα βασικό πρόβλημα που προκύπτει είναι πως να περάσουμε μεταβλητές και δεδομένα από το plugin μας στον javascript κώδικα!
H μέθοδος που θα ακολουθήσουμε βασίζετε στην  συνάρτηση wp_localize_script() του wordpress! Η συνάρτηση αυτή στην πραγματικότητα έχει φτιαχτεί για να σας επιτρέπει να μεταφράζετε τα αλφαριθμιτικά στα js αρχεία(localization API in PHP) , βέβαια αυτό δεν περιορίζει την χρήση της.

$font={};//πχ κάποιο Metadata που όρισε ο χρήστης
$settings_fonts = array('myFont_' => $font );
wp_enqueue_script( 'webfont','http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js');
wp_register_script('main', plugins_url('/js/main.js', __FILE__));
wp_localize_script('main','font_settings',$settings_fonts);
wp_enqueue_script('main');

Τώρα μπορούμε να καλέσουμε την μεταβλητή μας στο main.js

var myUserFont=font_settings.myFont_;
console.log(myUserFont);

Καλή διασκέδαση 🙂