{"id":24825,"date":"2021-05-25T18:41:00","date_gmt":"2021-05-25T15:41:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24825"},"modified":"2021-10-18T02:13:40","modified_gmt":"2021-10-17T23:13:40","slug":"ajout-d-un-bouton-d-image-personnalise-avec-media-uploader-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/ajout-d-un-bouton-d-image-personnalise-avec-media-uploader-dans-wordpress\/","title":{"rendered":"Ajout d’un bouton d’image personnalis\u00e9 avec Media Uploader dans WordPress"},"content":{"rendered":"

R\u00e9cemment, je travaillais sur un plugin o\u00f9 nous voulions utiliser le t\u00e9l\u00e9chargeur multim\u00e9dia par d\u00e9faut de WordPress pour nos besoins. Nous avions un bouton d’image personnalis\u00e9 et voulions t\u00e9l\u00e9charger une image via le t\u00e9l\u00e9chargeur de m\u00e9dias. WordPress a magnifiquement construit un t\u00e9l\u00e9chargeur de m\u00e9dias qui permet \u00e0 un utilisateur de t\u00e9l\u00e9charger une nouvelle image ou d’utiliser une image existante de la m\u00e9diath\u00e8que.<\/p>\n

Il est toujours recommand\u00e9 d’utiliser le t\u00e9l\u00e9chargeur multim\u00e9dia int\u00e9gr\u00e9 si vous recherchez une solution personnalis\u00e9e pour t\u00e9l\u00e9charger une image dans le backend. Ce faisant, vous suivez les normes WordPress. La mise en \u0153uvre d’un t\u00e9l\u00e9chargeur de m\u00e9dias ne prend que quelques lignes de code. Alors, sans plus de discussion, commen\u00e7ons par cela.<\/p>\n

Pour ce tutoriel, j’ajouterai un bouton d’image personnalis\u00e9 pour la publication et la page. En cliquant sur ce bouton, le t\u00e9l\u00e9chargeur de m\u00e9dias s’ouvrira o\u00f9 l’utilisateur pourra t\u00e9l\u00e9charger l’image. L’URL de l’image t\u00e9l\u00e9charg\u00e9e est d\u00e9finie dans un champ m\u00e9ta personnalis\u00e9 et sera enregistr\u00e9e en tant que m\u00e9ta de publication pour la publication ou la page sp\u00e9cifique.<\/p>\n

Ajouter une m\u00e9ta-bo\u00eete personnalis\u00e9e dans WordPress<\/h3>\n

La m\u00e9ta-bo\u00eete n’est rien d’autre qu’un bloc sur une publication ou une page. Les cat\u00e9gories, les balises, l’image en vedette, l’extrait, la discussion, etc. sont des exemples de bo\u00eetes m\u00e9ta. En utilisant la zone Meta, vous pouvez ajouter des informations suppl\u00e9mentaires pour le message et la page.<\/p>\n

Nous avons besoin d’une bo\u00eete m\u00e9ta qui contient le bouton de t\u00e9l\u00e9chargement d’image et un champ de texte. Lorsqu’un utilisateur clique sur le bouton, il t\u00e9l\u00e9charge l’image et l’URL de l’image finale est d\u00e9finie dans le champ de texte.<\/p>\n

L’ajout d’une m\u00e9ta-bo\u00eete<\/a> est simple et direct. \u00c9crivez le code ci-dessous dans le functions.php<\/code>fichier ou dans votre plugin.<\/p>\n

function aw_custom_meta_boxes( $post_type, $post) {\n\u00a0\u00a0\u00a0\u00a0add_meta_box(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'aw-meta-box',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0__( 'Custom Image' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'render_aw_meta_box',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array('post', 'page'), \/\/post types here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'normal',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'high'\n\u00a0\u00a0\u00a0\u00a0);\n}\nadd_action( 'add_meta_boxes', 'aw_custom_meta_boxes', 10, 2 );\n\u00a0\nfunction render_aw_meta_box($post) {\n\u00a0\u00a0\u00a0\u00a0$image = get_post_meta($post->ID, 'aw_custom_image', true);\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0<table>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><a href=\"#\" class=\"aw_upload_image_button button button-secondary\"><?php _e('Upload Image'); ?><\/a><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><input type=\"text\" name=\"aw_custom_image\" id=\"aw_custom_image\" value=\"<?php echo $image; ?>\" style=\"width:500px;\" \/><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\u00a0\u00a0\u00a0\u00a0<\/table>\n\u00a0\u00a0\u00a0\u00a0<?php\n}<\/code><\/pre>\n
Apr\u00e8s avoir ajout\u00e9 le code ci-dessus, acc\u00e9dez \u00e0 votre article ou \u00e0 votre page et vous devriez pouvoir voir la nouvelle bo\u00eete m\u00e9ta ajout\u00e9e avec leurs champs.<\/p>\n
\"Ajout<\/a><\/p>\n
Personnaliser WordPress Media Uploader<\/h3>\n
Vous \u00eates maintenant pr\u00eat avec votre bo\u00eete m\u00e9ta. La prochaine chose est de cliquer sur le bouton \u00ab\u00a0T\u00e9l\u00e9charger l’image\u00a0\u00bb, d’ouvrir le t\u00e9l\u00e9chargeur de m\u00e9dias et de d\u00e9finir l’URL de l’image t\u00e9l\u00e9charg\u00e9e dans le champ de texte. Donc, au d\u00e9but, vous devez cr\u00e9er un fichier js et le mettre<\/a> en file d’ attente<\/a> dans un environnement WordPress.<\/p>\n
Cr\u00e9ons un fichier js awscript.js<\/code>et mettons-le en file d’ attente comme suit\u00a0:<\/p>\n
function aw_include_script() {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (! did_action( 'wp_enqueue_media')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_media();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'awscript', get_stylesheet_directory_uri(). '\/js\/awscript.js', array('jquery'), null, false );\n}\nadd_action( 'admin_enqueue_scripts', 'aw_include_script' );<\/code><\/pre>\n
Ici, j’ai donn\u00e9 le chemin du th\u00e8me en supposant que vous ajoutez un code entier dans le th\u00e8me. Si vous le faites via le plugin, vous devez ajuster le chemin selon votre plugin.<\/p>\n
Pour effectuer cette t\u00e2che, j’ai pris une r\u00e9f\u00e9rence de Javascript Reference\/wp.media<\/a> et \u00e9crit le code jQuery. Dans le, awscript.js<\/code>nous \u00e9crirons un code de t\u00e9l\u00e9chargement de m\u00e9dia comme suit.<\/p>\n
jQuery(function($){\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.aw_upload_image_button', function(e){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var button = $(this),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aw_uploader = wp.media({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: 'Custom image',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0library: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadedTo: wp.media.view.settings.post.id,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'image'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0button: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text: 'Use this image'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0multiple: false\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}).on('select', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var attachment = aw_uploader.state().get('selection').first().toJSON();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#aw_custom_image').val(attachment.url);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.open();\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Maintenant, allez-y et cliquez sur le bouton "T\u00e9l\u00e9charger l’image", cela ouvrira le t\u00e9l\u00e9chargeur de m\u00e9dias, choisissez\/t\u00e9l\u00e9chargez l’image et vous devriez voir l’URL de l’image ajout\u00e9e dans le champ de texte. Enfin, je vais enregistrer cette URL dans la table ‘postmeta’ avec la cl\u00e9 ‘aw_custom_image’. Bien s\u00fbr, vous pouvez donner n’importe quel nom \u00e0 la cl\u00e9.<\/p>\n
function aw_save_postdata($post_id)\n{\n\u00a0\u00a0\u00a0\u00a0if (array_key_exists('aw_custom_image', $_POST)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0update_post_meta(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$post_id,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'aw_custom_image',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$_POST['aw_custom_image']\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0}\n}\nadd_action('save_post', 'aw_save_postdata');<\/code><\/pre>\n
Le save_post est une action d\u00e9clench\u00e9e chaque fois qu’un article ou une page est cr\u00e9\u00e9 ou mis \u00e0 jour. En utilisant cette action, vous pouvez injecter votre code dans le syst\u00e8me. Vous pouvez en savoir plus sur ce crochet sur la documentation WordPress<\/a>.<\/p>\n
J’esp\u00e8re que vous avez appris \u00e0 ajouter un t\u00e9l\u00e9chargeur de m\u00e9dias personnalis\u00e9 dans WordPress. Essayez-le dans votre plugin ou votre th\u00e8me et faites-moi part de vos commentaires dans la section commentaire ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n