Je vais faire deux billets pour vous donner des astuces pour le développement de vos extensions ou options de thèmes.

Le premier concernant la fonctionnalité d’upload d’images, le deuxième concernera l’ajout d’un color picker : « Ajouter un champ color picker dans vos plugins WordPress« .

Ces deux astuces m’ont permis de développer le plugin WP Maintenance.

Ajouter la fonctionnalité d’upload d’image dans vos extensions

HTML
Commençons avec le code nécessaire pour charger le code HTML :

[pastacode manual= »Uploader%20votre%20image%20%3Clabel%20for%3D%22upload_image%22%3E%20%3Cinput%20id%3D%22upload_image%22%20size%3D%2236%22%20name%3D%22upload_image%22%20type%3D%22text%22%20%2F%3E%20%3Cinput%20id%3D%22upload_image_button%22%20value%3D%22Uploader%22%20type%3D%22button%22%20%2F%3E%20%3C%2Flabel%3E » provider= »manual » lang= »markup »/]

Php

Nous allons appeler en file d’attente les scripts et les styles. Nous avons besoin de ‘media-upload‘ et ‘thickbox’ pour leur exécution, ainsi que jQuery, qui est déjà inclus.

[pastacode manual= »function%20my_admin_scripts()%20%7B%20%0D%0A%20%20%20%20wp_enqueue_script(‘media-upload’)%3B%20%0D%0A%20%20%20%20wp_enqueue_script(‘thickbox’)%3B%20wp_register_script(‘my-upload’%2C%20WP_PLUGIN_URL.’%2Fmy-script.js’%2C%20array(‘jquery’%2C’media-upload’%2C’thickbox’))%3B%20%0D%0A%20%20%20%20wp_enqueue_script(‘my-upload’)%3B%0D%0A%0D%0A%20%20%20%20%2F%2F%20On%20%C3%A9vite%20les%20ereurs%20de%20chargement%20sur%20Chrome%0D%0A%20%20%20%20wp_enqueue_media()%3B%0D%0A%0D%0A%20%20%20%20%2F%2F%20Vous%20pouvez%20traduire%20le%20script%20ici%20avec%20vos%20data.%0D%0A%20%20%20%20wp_localize_script(%20’wpm-my-upload’%2C%20’Data’%2C%20array(%0D%0A%20%20%20%20%20%20’textebutton’%20%20%3D%3E%20%20__(%20’Choose%20This%20Image’%2C%20’textdomain’%20)%2C%0D%0A%20%20%20%20%20%20’title’%20%20%3D%3E%20__(%20’Choose%20Image’%2C%20’textdomain’%20)%2C%0D%0A%20%20%20%20)%20)%3B%0D%0A%7D%20%20%0D%0Afunction%20my_admin_styles()%20%7B%20%0D%0A%20%20%20%20wp_enqueue_style(‘thickbox’)%3B%20%0D%0A%7D%20%20%0D%0A%0D%0Aif%20(isset(%24_GET%5B’page’%5D)%20%26%26%20%24_GET%5B’page’%5D%20%3D%3D%20’my_plugin_page’)%20%7B%20%0D%0A%20%20%20%20add_action(‘admin_print_scripts’%2C%20’my_admin_scripts’)%3B%20%0D%0A%20%20%20%20add_action(‘admin_print_styles’%2C%20’my_admin_styles’)%3B%20%0D%0A%7D » provider= »manual » lang= »default »/]

Vous remarquerez une contition if (isset($_GET[‘page’]) && $_GET[‘page’] == ‘my_plugin_page’) n’oubliez pas de changer my_plugin_page par votre page.

Vous pouvez remarquez aussi ces deux lignes :
title: Data.title et text: Data.textebutton
Cela vous permet de traduire l’affichage de la fenêtre (le Titre et le texte du bouton). C’est pour cela que nous rajoutons ceci :

[pastacode manual= »%20%20%20%20wp_localize_script(%20’wpm-my-upload’%2C%20’Data’%2C%20array(%0D%0A%20%20%20%20%20%20’textebutton’%20%20%3D%3E%20%20__(%20’Choose%20This%20Image’%2C%20’wp-maintenance’%20)%2C%0D%0A%20%20%20%20%20%20’title’%20%20%3D%3E%20__(%20’Choose%20Image’%2C%20’wp-maintenance’%20)%2C%0D%0A%20%20%20%20)%20)%3B » provider= »manual » lang= »javascript »/]

jQuery
Nous avons chargé ‘my-script.js‘, voilà son contenu :

[pastacode manual= »jQuery(document).ready(function()%20%7B%0D%0A%0D%0A%20%20%20%20var%20custom_uploader%3B%0D%0A%20%0D%0A%20%20%20%20jQuery(‘%23upload_image_button’).click(function(e)%20%7B%0D%0A%20%0D%0A%20%20%20%20%20%20%20%20e.preventDefault()%3B%0D%0A%20%0D%0A%20%20%20%20%20%20%20%20%2F%2FIf%20the%20uploader%20object%20has%20already%20been%20created%2C%20reopen%20the%20dialog%0D%0A%20%20%20%20%20%20%20%20if%20(custom_uploader)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20custom_uploader.open()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%0D%0A%20%20%20%20%20%20%20%20%2F%2FExtend%20the%20wp.media%20object%0D%0A%20%20%20%20%20%20%20%20custom_uploader%20%3D%20wp.media.frames.file_frame%20%3D%20wp.media(%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3A%20Data.title%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20button%3A%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20Data.textebutton%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20multiple%3A%20false%0D%0A%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%0D%0A%20%20%20%20%20%20%20%20%2F%2FWhen%20a%20file%20is%20selected%2C%20grab%20the%20URL%20and%20set%20it%20as%20the%20text%20field’s%20value%0D%0A%20%20%20%20%20%20%20%20custom_uploader.on(‘select’%2C%20function()%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20attachment%20%3D%20custom_uploader.state().get(‘selection’).first().toJSON()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20jQuery(‘%23upload_image’).val(attachment.url)%3B%0D%0A%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%0D%0A%20%20%20%20%20%20%20%20%2F%2FOpen%20the%20uploader%20dialog%0D%0A%20%20%20%20%20%20%20%20custom_uploader.open()%3B%0D%0A%20%0D%0A%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%0D%0A%7D)%3B » provider= »manual » lang= »default »/]

J’espère que cela vous aidera pour vos futurs développement de plugins ou de thèmes WordPress, et en attendant maintenant vous saurez ajouter la fonctionnalité d’upload d’image dans vos extensions WordPress.