Créer un plugin WordPress pour le compte à rebours Ajax

Construire un plugin WordPress n'est pas si difficile, surtout quand vous savez ce que vous faites. Cela peut parfois s'avérer difficile lorsque vous utilisez plusieurs scripts, styles et nouvelles fonctionnalités qui nécessitent parfois un peu d'imagination..

Dans ce tutoriel, nous allons examiner un moyen de créer un plug-in simple pour compte à rebours. Nous verrons comment l’intégrer à l’installation de WordPress sous forme de widget et de shortcode dans le contenu à l’aide des paramètres d’une méta-boîte de l’éditeur d’administrateur de WordPress..

Voici un aperçu du résultat final de ce tutoriel:

Le shortcode du widget et du contenu:

Widget et interface d'administration Meta-Box:

Voici un petit exemple de capture d'écran de l'administrateur et du meta box du widget dans l'interface d'édition de page / message à la fin du didacticiel:

Étape 1: en-têtes de fichier de plug-in

Chaque plugin WordPress doit avoir un code compatible et à jour dans ses en-têtes, afin de pouvoir fonctionner et être reconnu par WordPress. Cela lui permet d'être installé, activé et supprimé. Le type d'informations disponibles dans les informations d'en-tête est crucial pour le plug-in, mais contient également des informations à ce sujet, telles que le titre, la version, la description, les balises, les informations sur l'auteur, la licence, etc..

Tout d'abord, le plugin est un fichier placé dans un répertoire. Nous allons nommer notre plugin Plugin Minuterie et placez-le dans notre wp-content / plugins dossier sous le répertoire timer_plugin. Puis à l'intérieur, le fichier timer_plugin.php sera notre fichier de plugin principal où nous insérons le code source en-tête.

Nous allons simplement utiliser les variables de base nécessaires pour que le plugin soit opérationnel. L'une des variables est le nom du plugin, qui est très important pour identifier le plugin dans la page d'installation du plugin. Pour les besoins de ce tutoriel, nous allons simplement le nommer Plugin Minuterie. Ensuite, le La description c'est une courte ligne de texte décrivant le plugin. Cela sera également visible sous la page d’installation du plugin, juste à côté du plugin, avec les variables suivantes, le Auteur et Version.

"Toutes les variables d'en-tête d'en-tête sont des chaînes de texte écrites après le: précédant les noms de variables d'en-tête."

Étape 2 Ajout d'actions

Dans WordPress, les actions sont liées à des fonctions spécifiques que vous pouvez utiliser dans vos fonctionnalités. Dans ce tutoriel, nous allons utiliser plusieurs crochets pour obtenir le résultat souhaité..

Tout d'abord, les actions vont être ajoutées en utilisant le add_action fonction pour chaque action, et nous allons les ajouter à la fin du fichier PHP comme exemple suivant:

 add_action ('widgets_init', 'TP_widgets_init'); add_action ('admin_print_scripts', 'TP_admin_register_scripts'); add_action ('admin_print_styles', 'TP_admin_register_styles'); add_action ('wp_print_scripts', 'TP_register_scripts'); add_action ('wp_print_styles', 'TP_register_styles');

Ensuite, dans l'exemple ci-dessus, le wp_print_scripts et wp_print_styles les points d'ancrage ajoutent des actions aux fonctions utilisées pour enregistrer et inclure les styles et les scripts nécessaires au front-end de WordPress. Plus précisément dans le thème du site Web, pour la fonctionnalité du minuteur du widget de la barre latérale et du shortcode de contenu. le admin_print_scripts et styles_impression_admin les hooks sont utilisés pour enregistrer le script du panneau d'administration WordPress et les fichiers de style CSS utilisés plus tard dans le tutoriel.

 add_action ('admin_init', 'TP_admin_init'); add_action ('save_post', 'TP_save_postdata');

Finalement, le admin_init hook pointant vers la fonction qui s'exécute avant que les en-têtes ne soient générés et exécutés. Un crochet que nous allons couvrir à la fin du tutoriel est save_post. Ce raccord est nécessaire pour utiliser les informations de publication ou de page soumises dans l'administrateur WordPress..

"Pour plus d’informations sur l’utilisation du logiciel add_action fonction voir Add_Action dans le codex WordPress ".

Étape 3 Enregistrer et inclure des scripts et des styles

Pour ce didacticiel, nous allons avoir besoin d’un certain nombre de fichiers de script et de style indispensables au bon fonctionnement et aux fonctionnalités d’administration et de thème du plug-in Timer. Voici comment nous allons procéder:

Incluant les styles pour la fonctionnalité d'administration WordPress:

Le plugin Timer nécessite quelques éléments dans le panneau d’administration que nous devrons modifier légèrement, car le look par défaut n’est pas très accueillant. Pour ce faire, nous avons appelé à l'étape 3 les crochets de balise qui nous aident à le faire. Nous allons maintenant examiner les fonctions qui s'exécutent lorsque les crochets sont appelés et comment ils fonctionnent exactement..

Premièrement le TP_admin_register_styles fonction pour les styles de panneau d'administration enregistrés et inclus.

 fonction TP_admin_register_styles ()

Télécharger les styles

Parce que nous construisons un plugin de compte à rebours, nous avons besoin d’une date et d’une heure spécifiques pour le compte à rebours depuis le présent. Pour ce faire, parmi d’autres intégrations, nous utilisons le wp_register_style fonction pour enregistrer le dernier style personnalisé de l'interface utilisateur jQuery afin que nous puissions utiliser sa conception correctement dans ses fonctionnalités lors de la génération ultérieure des curseurs et du sélecteur de date du calendrier. Le fichier CSS est généré en téléchargeant la dernière interface utilisateur jQuery à partir de http://jqueryui.com/download en sélectionnant Core, Widget, Souris, Curseur, DatePicker dans la liste des options, jQuery Ui 1.8.20 dans la section version et UI Lightness. dans la liste déroulante des thèmes.

Enregistrement des styles

Il y aura un fichier CSS nommé jquery-ui-1.8.20.custom.css et un dossier d'images à l'intérieur du css / jquery-ui dossier dans l’archive personnalisée générée et téléchargée que vous obtiendrez des instructions précédentes. Nous allons remplacer le jquery-ui-1.8.20.custom.css nom du fichier à jquery-ui.css pour un nom plus convivial et copiez-le à côté du dossier images avec tous ses fichiers dans notre dossier plugin.

Après cela, nous pouvons commencer à ajouter les fonctions d’inscription et d’inclusion dans le TP_admin_register_styles fonction mentionnée précédemment.

 // register wp_register_style ('jquery-ui-theme', plugins_url ('jquery-ui.css', __FILE__)); wp_register_style ('tp-admin-style', plugins_url ('admin-style.css', __FILE__));

L'exemple précédent utilise wp_register_style enregistrer le jquery-ui.css fichier par le nom de jquery-ui-theme qui est utilisé plus tard dans le wp_register_style fonction dans l'exemple suivant. La même approche est utilisée pour inclure l'administrateur principal style.css fichier en utilisant cette fois le nom tp-admin-style utilisé dans les exemples suivants avec le wp_enqueue_style fonction pour l'inclure correctement dans les en-têtes WordPress.

Y compris les styles

 // met en file d'attente wp_enqueue_style ('jquery-ui-theme'); wp_enqueue_style ('tp-admin-style');

le tp-admin-style est utilisé pour enregistrer et inclure le style.css fichier qui sera utilisé pour styler le widget et la conception de la méta-boîte fournie par défaut dans l'implémentation de l'interface utilisateur jQuery et le style par défaut de WordPress.

Inclusion de styles pour la fonctionnalité de thème:

En utilisant exactement la même approche que précédemment pour enregistrer et inclure les fichiers de style, nous allons inclure dans le thème WordPress les fichiers de style nécessaires à la conception du widget timer et du shortcode..

 function TP_register_styles () // register wp_register_style ('tp-style', plugins_url ('style.css', __FILE__)); // met en file d'attente wp_enqueue_style ('tp-style');

Dans ce cas, nous incluons un simple style.css fichier de notre répertoire plugin que nous inclurons plus tard.

Incluant les scripts pour la fonctionnalité d'administration WordPress:

Parce que nous allons construire un widget et une méta-boîte avec le calendrier et la fonctionnalité de sélection de date et d'heure de jQuery UI, nous devrons disposer de jQuery, de jQuery UI et de tous les plug-ins nécessaires pour inclure et utiliser le curseur et le sélecteur de date que nous allons implémenter. plus tard. Pour ce faire, nous devons utiliser l'action déjà écrite pour la admin_print_scripts crochet. La prochaine fonction implémentera la fonctionnalité dont nous avons besoin.

 fonction TP_admin_register_scripts () // register wp_register_script ('tp-admin-script', plugins_url ('admin-script.js', __FILE__)); // met en file d'attente wp_enqueue_script ('jquery-ui-core'); wp_enqueue_script ('jquery-ui-datepicker'); wp_enqueue_script ('jquery-ui-slider'); wp_enqueue_script ('tp-admin-script');

Alors que nous travaillons dans le panneau d’administration de WordPress, jQuery et jQuery UI seront déjà enregistrés et inclus dans l’en-tête, ainsi que les dépendances et les plugins dont nous avons besoin: jquery-ui-mouse et jquery-ui-widget. Tout ce que nous incluons maintenant est le jquery-ui-core qui n'est pas inclus par défaut et les plugins datepicker et slider dont nous avons besoin et qui durent, le admin-script.js fichier contenant toutes les règles personnalisées pour notre fonctionnalité date-heure jquery-ui.

Y compris les scripts pour la fonctionnalité de thème:

Nous devons pouvoir avoir à l’intérieur du site Web une minuterie qui diminue à 0 quelque part dans la barre latérale en tant que widget et dans le contenu en tant que code abrégé. Comme moyen très facile de faire cela, j’ai choisi jQuery et du javascript simple pour faire fonctionner le minuteur. En conséquence, nous allons inclure le script.js fichier à l'intérieur de la fonction qui enregistre les scripts pour le hook frontal précédemment déclaré.

 function TP_register_scripts () // register wp_register_script ('tp-script', plugins_url ('script.js', __FILE__), 'jquery'); // met en file d'attente wp_enqueue_script ('tp-script');

Nous allons également spécifier jQuery en tant que dépendance, car le système frontal ne l’a pas inclus par défaut..

Étape 4 Créer le widget

Le plug-in est supposé utiliser un widget comme l'une des deux méthodes permettant d'intégrer une minuterie dans le thème, plus précisément la barre latérale dans ce cas. Pour pouvoir ajouter le minuteur à la barre latérale, nous devons implémenter la fonctionnalité de widget pour notre plugin dans WordPress..

Construire la classe

Pour implémenter la fonctionnalité de widget dans le plugin, nous devons inclure une classe de widget nommée TP_Widget. Ce nom n’est bien sûr pas obligatoire, mais il est obligatoire pour cette classe d’étendre la WP_Widget classe afin d’en hériter les fonctionnalités. Par conséquent, nous créons la classe comme dans l'exemple suivant:

 la classe TP_Widget étend WP_Widget // le code suivant sera ici

Vient ensuite le code que nous avons ajouté dans la classe pour que nous puissions utiliser le widget de la manière dont il était prévu dans WordPress, en utilisant toutes les fonctions nécessaires pour créer un widget fonctionnel dans WordPress..

Nous allons d’abord écrire le __construction fonction pour l'intégration initiale requise du code. le __construction fonction est l'endroit où le widget traite réellement. Nous allons donner au widget un nom et une description à l'intérieur de cette fonction en héritant et en utilisant celui du parent. __construction méthode comme dans l'exemple suivant:

 fonction publique __construct () // processus réels du widget parent :: __ construct ('TP_Widget', 'Timer Widget', array ('description' => __ ('Un widget du minuteur', 'text_domain')));

Le premier paramètre est un ID de widget, le second est un nom de widget, le troisième un tableau avec la description. La fonction suivante va être le forme une fonction. Nous allons créer et utiliser cette fonction pour définir et utiliser le formulaire de contenu du widget du panneau d'administration. Le code suivant sera exécuté dans l'espace réservé au widget dans la page des widgets du panneau d'administration:

 fonction publique form () if (! $ _ POST) $ tp_arr = unserialize (get_option ('tp_ID_'. $ this-> numéro));  else if ($ _POST ['tp-hidd'] == 'true') $ tp_arr ['tp-title'] = $ _POST ['tp-title']; $ tp_arr ['tp-date'] = $ _POST ['tp-date']; $ tp_arr ['tp-hour'] = $ _POST ['tp-hour-val']; $ tp_arr ['tp-minute'] = $ _POST ['tp-minute-val']; update_option ('tp_ID_'. $ this-> numéro, sérialiser ($ tp_arr));  // affiche le formulaire d'options sur admin

Dans cette partie, nous avons des informations sur les widgets telles que Titre, Date, Heure et Minute. Ces informations sont extraites d’une chaîne de tableau sérialisée stockée dans la base de données sous le nom tp_ID_X, où X est un identifiant unique du widget, utilisé pour identifier les données extraites par rapport au widget utilisé.

Dans cette partie, les valeurs du widget sont également stockées une par une dans le tableau, sérialisées et stockées dans la base de données en tant que champ d’option pour une utilisation ultérieure..

La partie suivante est les éléments de formulaire du widget admin qui sont utilisés dans le front-end.

 Titre:
 

 [ Modifier ]

 Sélectionnez une date:
  
Heures 
 
 Minutes

Il y a deux aspects à prendre en compte dans cette section:

Tout d'abord, les classes de balises comme tp-date, tp-heure, tp minute qui sont ensuite travaillées avec javascript et deuxièmement, les champs de saisie. Premièrement, il y a du code PHP inséré dans les champs de saisie qui existent dans le code ci-dessus, un code utilisé pour stocker des données, que ce soit pour les formulaires à soumettre ou pour que javascript soit implémenté dans jQuery et utilisé avec.

À la fin du code HTML au-dessus de la forme la fonction est fermée.

Mise à jour des données du widget

Quand le widget sauvegarder Si vous appuyez sur le bouton dans le panneau d'administration, les informations du formulaire sont soumises et traitées par la fonction suivante:

 public function update () // traite les options de widget à enregistrer si ($ _POST ['tp-hidd'] == 'true') $ tp_Arr ['tp-title'] = $ _POST ['tp-title' ]; $ tp_Arr ['tp-date'] = $ _POST ['tp-date']; $ tp_Arr ['tp-hour'] = $ _POST ['tp-hour-val']; $ tp_Arr ['tp-minute'] = $ _POST ['tp-minute-val']; $ tp_Arr ['tp-date'] = $ _POST ['tp-date']; update_option ('tp_ID_'. $ this-> numéro, sérialiser ($ tp_Arr));

le mettre à jour fonction est la fonction utilisée pour mettre à jour les informations dans le widget dans les widgets WordPress.

Écrire la sortie du widget dans la barre latérale

Cette partie suivante est le code qui génère et affiche le widget dans la barre latérale en tant que widget. Fondamentalement, c’est le contenu du code de widget déjà généré qui a la fonction d’un wrapper compatible..

Voici un exemple de seulement la moitié de la fonction, à savoir le code PHP utilisé pour obtenir les informations requises pour la sortie du widget..

 widget de fonction publique ($ args, $ instance) $ tp_arr = unserialize (get_option ('tp_ID_'. $ this-> numéro)); $ temp_date = explode ("/", $ tp_arr ['tp-date']); $ tp_arr ['tp-date'] = $ temp_date [2]. "/". $ temp_date [0]. "/". $ temp_date [1]; extrait ($ args); $ title = apply_filters ('widget_title', $ tp_arr ['tp-title']); echo $ before_widget; if (! empty ($ title)) echo $ before_title. $ titre. $ after_title;

Nous extrayons donc les données du widget précédemment enregistrées dans le panneau d'administration. La partie suivante est le code HTML et PHP qui représente le minuteur et / ou contient les valeurs utilisées ultérieurement par jQuery pour calculer l'heure et sa fonction en tant que minuteur..

   : 0 "/>  AA
 DD
 HH
 MM
 SS
 
  -
 -
 -
 -
 -

La balise UL est utilisée pour créer ultérieurement un style de ligne et de colonne afin que le minuteur ait une apparence ordonnée et se voit attribuer une classe afin de contrôler facilement les balises LI avec jQuery ultérieurement..

En outre, vous remarquerez peut-être les éléments d'entrée contenant des données PHP. JQuery utilise également ces éléments pour stocker les valeurs de la date et de l’heure enregistrées..

La fonction se termine après le code HTML avec une variable dynamique qui ferme le widget en utilisant des valeurs compatibles WordPress.

  Intégrer la classe
 Enfin, si vous vous en souvenez bien, l’une des actions décrites à l’étape 1 consistait à utiliser widgets_init tag et pointant vers le TP_widgets_init une fonction. Nous devons écrire ses fonctionnalités afin de relier correctement la classe à WordPress.
  fonction TP_widgets_init () register_widget ("TP_Widget"); 
   "Pour un aperçu plus complet de la fonctionnalité standard des widgets WordPress, consultez l'API du widget WordPress" 
 
 
  Étape 5 Créer la méta-boîte
 La méta-boîte est une boîte située dans l'un des panneaux de la barre latérale située dans l'éditeur d'administration de toute page ou publication. Comme nous utilisons presque les mêmes codes HTML, CSS et JavaScript, nous allons utiliser presque les mêmes codes PHP et HTML que le widget. Certaines modifications de certaines classes d'éléments parent sont requises pour la fonctionnalité jQuery. Mais tout d’abord, la méta-boîte doit être créée et implémentée dans WordPress à partir des paramètres du plug-in. Une autre des actions écrites à l’étape 1 et que nous n’avons pas encore terminée la mise en œuvre est la balise hook admin init. Ce crochet fonctionne avant que les en-têtes ne se produisent et il sera utilisé par nous pour implémenter la fonctionnalité meta-box avec le add_meta_box fonctionne comme l'exemple ci-dessous:
  function TP_admin_init () add_meta_box ('TP_metaid', __ ('Paramètres de publication du plug-in de minuterie', 'TP_textdomain'), 'TP_inner_custom_box', 'post', 'side'); add_meta_box ('TP_metaid', __ ('Paramètres de page du plugin de minuterie', 'TP_textdomain'), 'TP_inner_custom_box', 'page', 'side'); 
 Ce code crée une boîte personnalisée sur le côté de chaque page de publication et de modification de page dans le panneau d'administration avec le contenu et les fonctionnalités de la fonction. TP_inner_custom_box. Pour une vue plus complète de la façon dont add_meta_box devrait être utilisé, voir add_meta_box dans WordPress Codex.
 Fonctionnalité et code frontal
 La méta-boîte a un front-end similaire avec le widget et le code d’arrière-plan n’est pas si différent, mais des noms de champs d’options de base de données légèrement différents à enregistrer. Tout comme le formulaire d’administrateur du widget, il est composé de fonctionnalités PHP et HTML. En commençant par le TP_inner_custom_box fonction, nous créons les fonctionnalités d’administration avant et arrière de la méta-boîte, comme dans l'exemple suivant:
  fonction TP_inner_custom_box () global $ post; // Utilisez nonce pour la vérification wp_nonce_field (plugin_basename (__ FILE__), 'cuschost_noncename'); $ tp_arr = unserialize (get_option ('tp_pp_ID_'. $ post-> ID));
 Après cela, l'exemple de code HTML est remarquablement similaire. Les seules différences sont un bouton de saisie supplémentaire après lequel, la fonction est incluse avec le point-virgule et se termine.
  [ Modifier ]

 Sélectionnez une date:
  
Heures 
 
 Minutes 
  
 Sauvegarde des données
 Le formulaire précédent envoie des données lorsque le message ou la page est mis à jour, et nous devons récupérer ces données et les stocker pour un utilisateur ultérieur. Pour ce faire, nous utilisons un autre crochet que nous avons déjà implémenté, principalement le save_post balise hook qui pointe vers la fonction de rappel TP_save_postdata. La fonction de rappel récupère les données des variables de publication et les stocke dans la base de données sous un identifiant unique d'identifiant de publication, sous la forme suivante:
  fonction TP_save_postdata () global $ post; if ($ _POST ['tp-hidd'] == 'true') $ tp_arr ['tp-date'] = $ _POST ['tp-date']; $ tp_arr ['tp-hour'] = $ _POST ['tp-hour-val']; $ tp_arr ['tp-minute'] = $ _POST ['tp-minute-val']; update_option ('tp_pp_ID_'. $ post-> ID, sérialiser ($ tp_arr)); 
 
  Étape 6: implémentation du shortcode
 Pour implémenter le shortcode, nous devons ajouter une nouvelle action à la add_action liste de fonctions. Le prochain échantillon va couvrir:
 add_shortcode ('tp-shortcode', 'tp_shortcode');
 Il va sans dire que nous devons créer le tp_shortcode fonction qui gère le nouveau shortcode.
  fonction tp_shortcode ($ atts, $ content = "") global $ post; $ tp_arr = unserialize (get_option ('tp_pp_ID_'. $ post-> ID)); $ temp_date = explode ("/", $ tp_arr ['tp-date']); $ tp_arr ['tp-date'] = $ temp_date [2]. "/". $ temp_date [0]. "/". $ temp_date [1]; revenir '   AA
 DD
 HH
 MM
 SS
 
  -
 -
 -
 -
 -
 
 
'; 
 Code familier? C’est le frontal du code de widget de la barre latérale utilisé précédemment dans le widget fonctionner à l'intérieur du TP_Widget classe.
   "Pour plus d’informations sur l’utilisation du logiciel add_shortcode fonction voir add_shortcode dans le codex WordPress ". 
 
 
  Étape 7 Éditer les fichiers de style, styliser le minuteur
 C’est une étape très simple et rapide car elle ne concerne que 2 petits fichiers qui gèrent la conception du widget timer, du shortcode et de la section admin..
 La section admin:
 Dans cette section, le fichier de style ajouté à la première étape que nous allons modifier est admin-style.css et cela devrait ressembler à ceci:
  .tp-heure, .tp-minute padding: 0px! important; z-index: 0; largeur: 100px; marge: 10px 0px 10px 0px; hauteur: 10px;  .tp-hour-val, .tp-minute-val font-weight: gras; taille de police: 16px; largeur: 20px;  .tp-time margin-top: 10px; marge inférieure: 10px; taille de police: 12px;  .widget .editable, .inside .editable background-color: # FED22F;  .widget .ui-slider-horizontal, .inside .ui-slider-horizontal background: # FED22F; 
 Ce fichier de feuille de style traite de la largeur, de la hauteur, des couleurs et de la position des curseurs du widget d’administration et du calendrier de l’interface utilisateur jQuery lors de la sélection des heures et des minutes à partir du serveur frontal..
 Le style de la minuterie:
 le style.css fichier est le fichier CSS qui couvre la conception de l'UL, LI, OL du temporisateur dans le front-end. Voir le prochain échantillon:
  .contenu de la minuterie width: 300px;  .timer-main ul, .timer-content ul float: left; affichage: en ligne; débordement caché; largeur: 180px; marge: 0px; remplissage: 0px; marge supérieure: 0px; poids de police: gras;  .timer-main ul.tp-head, #content .timer-contenu ul.tp-head margin: 0px; remplissage: 0px; marge supérieure: 20px; taille de police: 12px;  .timer-main ul ol, .timer-content ul ol float: left; affichage: en ligne; débordement caché; largeur: 20px; marge: 0px; remplissage: 0px; marge droite: 2px; text-align: center; bordure: 1px solide #dcdcdc; rembourrage: 4px; arrière-plan: # f0f0f0;  .timer-main ul li, .timer-contenu ul li float: left; affichage: en ligne; débordement caché; largeur: 20px; marge: 0px; remplissage: 0px; marge droite: 2px; text-align: center; rembourrage: 4px; bordure: 1px blanc solide; 
 Certains éléments sont flottés, redimensionnés et positionnés avec des marges afin qu'ils aient l'apparence souhaitée. Un résultat de ce style est le design de la photo suivante:
  
  Step 8 Admin Widget et code Javascript MetaBox
 Le widget admin nécessite des fonctionnalités très spécifiques de jQuery, parfaitement associées aux classes HTML pour les balises. Tout le code suivant doit être placé à l’intérieur du admin-script.js fichier.
  jQuery (document) .ready (fonction ($) $ ('. tp-insert-shortcode'). clic (fonction () send_to_editor ('[tp-shortcode]');); $ ('. tp- time-edit '). live (' click ', function () $ ('. tp-date '). datepicker (format:' m / d / Y ', hourGrid: 4, minuteGrid: 10, position:' right ', onBeforeShow: function () $ (this) .DatePickerSetDate ($ (this) .val (), true);); $ ('. tp-date '). addClass (' editable '); $ (".tp-hour"). curseur (valeur: 0, min: 0, max: 23, étape: 1, diapositive: fonction (événement, ui) $ (". tp-hour-val") .val (ui.value);); $ (".tp-minute") .slider (valeur: 0, min: 0, max: 59, étape: 1, diapositive: function (événement, ui) $ ( ".tp-minute-val") .val (ui.value););););
 Dans cet exemple, après une initialisation jQuery et un événement de chargement de document, tout le code qui fonctionne avec le widget et le shortcode est chargé pour utilisation..
 Maintenant, comme le widget contient du contenu dynamique chargé en ajax, tout son contenu est invisible pour jQuery, sauf si utilisé avec vivre action. A cette fin, un lien avec le nom de classe de tp-time-edit et la fonctionnalité javascript option tag de vide (0) a été créé et, lorsque l'utilisateur clique dessus, exécute le raccordement en direct et rend disponibles toutes les balises HTML de l'appel de fonction d'événement.
 Dans la fonction de rappel, nous utilisons la fonctionnalité nécessaire pour créer le sélecteur de date pour la zone de texte de date à l'aide de la commande tp-date Classe CSS.
 Enfin et surtout, au début du code se trouve la fonctionnalité javascript en code court, plus précisément l’insertion jQuery du tp-insert-shortcode Valeur de la classe CSS trouvée dans le champ de saisie de la fonction de shortcode précédemment écrite à l'étape 6. Lorsque le bouton avec la classe tp-insert-shortcode est pressé, il faut ajouter le [tp-schortcode] valeur de chaîne dans l'éditeur WYSIWYG.
   "Très important! L'interface utilisateur de jQuery nécessite l'utilisation de classes dans les propriétés des balises pour les curseurs et les plugins datepicker. Cela ne fonctionne pas avec les identifiants" 
 
 
  Étape 9 Code Javascript du minuteur
 C’est le morceau de code le plus important et le plus difficile à visualiser à première vue dans l’ensemble du didacticiel, car il s’agit de la partie qui traite de nombreuses mathématiques..
 Cette partie fait exclusivement référence à la script.js fichier qui contient le code source javascript traitant de la minuterie réelle à la fois dans la partie widget et dans la partie shortcode dans l'interface frontale.
  jQuery (document) .ready (fonction ($) fonction start_by_parent (tp_parentClass) var tp_timer = "; tp_date = $ (tp_parentClass + 'input.tp-widget-date'). val (); tp_time = $ (tp_parentClass + ') .tp-widget-time '). val (); tp_timer = setInterval ("tp_set ('" + tp_parentClass + "'," "+ tp_date +", "" + tp_time + "');" ", 1000); start_by_parent ( '.timer-main'); start_by_parent ('. timer-content'););
 La classe parente qui gère le widget est minuterie principale, comme pour le shortcode le contenu de la minuterie La classe CSS est utilisée comme élément de balise parent utilisé pour affecter la li éléments de balise contenant les valeurs de temporisation pour JJ (jours), HH (heures), MM (minutes) et SS (secondes). L’implémentation ci-dessus est une approche dynamique des deux dans jQuery après l’envoi des valeurs au calc_data fonction pour gérer tous les maths.
 le tp_set la fonction utilise réellement le calc_data méthode pour calculer les valeurs avant de les insérer dans les éléments de balise HTML appropriés. Voici la mise en oeuvre tp_set méthode qui doit aller dans le même fichier, script.js.
  fonction tp_set (tp_parentClass, tp_date, tp_time) calc_data (tp_date, tp_time); jQuery (tp_parentClass + 'ul'). find ('li: nth-child (1)'). html (tp_years); jQuery (tp_parentClass + 'ul'). find ('li: nth-child (2)'). html (tp_days); jQuery (tp_parentClass + 'ul'). find ('li: nth-child (3)'). html (tp_hours); jQuery (tp_parentClass + 'ul'). find ('li: nth-child (4)'). html (tp_minutes); jQuery (tp_parentClass + 'ul'). find ('li: nth-child (5)'). html (tp_seconds); var tp_timer = setInterval ('tp_set (\ "+ tp_parentClass +' \ ', \" + tp_date +' \ ', \ "+ tp_time +' \ '); 1000,; clearTimeout (tp_timer);
 Enfin, l’une des parties les plus importantes de ce fichier de script, le calc_data méthode qui calcule le nombre de second



		
			
	   
	




Code