Méta-boîtes personnalisées réutilisables, partie 3 champs supplémentaires

Dans les parties 1 et 2 de notre série de tutoriels de modèles de boîtes méta personnalisées, nous avons appris à créer un tableau de champs à parcourir en boucle et à créer une méta-boîte personnalisée avec vos champs standard. Ajoutons maintenant un peu de JavaScript pour des champs sophistiqués mais très utiles..

Sélecteur de date

Chacun des champs que nous couvrons dans ce didacticiel nécessitera jQuery et l'interface utilisateur jQuery. Heureusement, WordPress facilite grandement leur utilisation avec wp_enqueue_script, et à partir de la version 3.3, toutes les interactions et tous les widgets de l'interface utilisateur de jQuery sont fournis avec WordPress..

Puisque nous travaillons sur une page qui met déjà en file d'attente jQuery, nous pouvons l'ignorer, mais nous devrons obtenir le Datepicker de l'interface utilisateur jQuery. Nous aurons également besoin de créer notre propre feuille de style car le CSS nécessaire n’est pas encore fourni dans WordPress - bien qu’ils travaillent à cela..

 if (is_admin ()) wp_enqueue_script ('jquery-ui-datepicker'); wp_enqueue_style ('jquery-ui-custom', get_template_directory_uri (). '/ css / jquery-ui-custom.css'); 

Nous avons seulement besoin de les charger dans l’administrateur, et non au début du site, alors enveloppez les fonctions dans un conditionnel. La première fonction appelle le sélecteur de date et charge également le noyau de l'interface utilisateur jQuery. La deuxième fonction appellera notre feuille de style jquery-ui-custom.css à partir du dossier css du thème. L'exemple de feuille de style inclus dans le téléchargement au début de ce didacticiel ne nécessite pas d'images. Vous pouvez également créer votre propre thème d'interface utilisateur jQuery..

Maintenant, regardons l'élément de tableau que nous devons ajouter à notre $ custom_meta_fields tableau que nous avons commencé dans la partie 1.

 array ('label' => 'Date', 'desc' => 'Description du champ.', 'id' => $ prefix.'date ',' type '=>' date ')

Ce tableau est presque identique à notre élément de texte. Il comporte une étiquette principale, une description, un identifiant unique et le type de date est défini. Nous allons simplement aller avec une implémentation de base du sélecteur de date dans notre exemple ici, mais si vous avez besoin de pimenter votre utilisation du sélecteur de date, vous pouvez également ajouter d'autres informations au tableau, telles que le format préféré, la localisation. et la plage de dates pour en nommer quelques-uns. Vous pouvez ensuite utiliser ces informations dans l'appelant de script suivant, que nous devons ajouter à l'en-tête de la page:

 add_action ('admin_head', 'add_custom_scripts'); function add_custom_scripts () global $ custom_meta_fields, $ post; $ output = ''