{"id":25090,"date":"2021-05-25T18:20:00","date_gmt":"2021-05-25T15:20:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25090"},"modified":"2021-10-18T03:10:25","modified_gmt":"2021-10-18T00:10:25","slug":"aggiunta-di-pulsanti-immagine-personalizzati-con-media-uploader-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/aggiunta-di-pulsanti-immagine-personalizzati-con-media-uploader-in-wordpress\/","title":{"rendered":"Aggiunta di pulsanti immagine personalizzati con Media Uploader in WordPress"},"content":{"rendered":"

Di recente stavo lavorando a un plug-in in cui volevamo utilizzare l’uploader multimediale predefinito di WordPress per le nostre esigenze. Avevamo un pulsante immagine personalizzato e volevamo caricare un’immagine tramite l’uploader multimediale. WordPress ha creato un meraviglioso caricatore multimediale che consente a un utente di caricare una nuova immagine o utilizzare un’immagine esistente dalla libreria multimediale.<\/p>\n

\u00c8 sempre consigliabile utilizzare l’uploader multimediale integrato se stai cercando una soluzione personalizzata per caricare un’immagine nel back-end. In questo modo stai seguendo gli standard di WordPress. L’implementazione di un uploader multimediale richiede solo poche righe di codice. Quindi, senza ulteriori discussioni, iniziamo con esso.<\/p>\n

Per questo tutorial, aggiunger\u00f2 un pulsante immagine personalizzato per il post e la pagina. Facendo clic su questo pulsante, si aprir\u00e0 l’uploader multimediale in cui l’utente pu\u00f2 caricare l’immagine. L’URL dell’immagine caricata viene impostato in un campo meta personalizzato e verr\u00e0 salvato come meta post per il post o la pagina specifica.<\/p>\n

Aggiungi meta box personalizzati in WordPress<\/h3>\n

Il meta box non \u00e8 altro che un blocco sul post o sulla pagina. Categorie, Tag, Immagine in evidenza, Estratto, Discussione, ecc. sono l’esempio di meta box. Utilizzando la casella Meta puoi aggiungere ulteriori informazioni per il post e la pagina.<\/p>\n

Abbiamo bisogno di una meta box che contenga il pulsante di caricamento dell’immagine e un campo di testo. Quando un utente fa clic sul pulsante, caricher\u00e0 l’immagine e l’URL dell’immagine finale verr\u00e0 impostato nel campo di testo.<\/p>\n

L’aggiunta di meta box<\/a> \u00e8 facile e diretta. Scrivi il codice sottostante nel functions.php<\/code>file o nel tuo 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
Dopo aver aggiunto il codice sopra, vai al tuo post o pagina e dovresti essere in grado di vedere la nuova meta box aggiunta insieme ai loro campi.<\/p>\n
\"Aggiunta<\/a><\/p>\n
Personalizza l’uploader multimediale di WordPress<\/h3>\n
Ora sei pronto con la tua meta box. La prossima cosa \u00e8 fare clic sul pulsante "Carica immagine", aprire l’uploader multimediale e impostare l’URL dell’immagine caricata nel campo di testo. Quindi all’inizio devi creare un file js e accodarlo<\/a> in un ambiente WordPress.<\/p>\n
Creiamo un file js awscript.js<\/code>e accodiamolo come segue:<\/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
Qui, ho fornito il percorso del tema supponendo che tu stia aggiungendo un intero codice nel tema. Se lo stai facendo tramite il plug-in, devi regolare il percorso secondo il tuo plug-in.<\/p>\n
Per eseguire questo compito ho preso un riferimento a Javascript Reference\/wp.media<\/a> e ho<\/a> scritto il codice jQuery. Nel awscript.js<\/code>scriveremo un codice per l’uploader dei media come segue.<\/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
Ora vai avanti e fai clic sul pulsante "Carica immagine", si aprir\u00e0 l’uploader multimediale, scegli\/carica l’immagine e dovresti vedere l’URL dell’immagine aggiunto nel campo di testo. Infine, salver\u00f2 questo URL nella tabella "postmeta" con la chiave "aw_custom_image". Naturalmente, puoi dare qualsiasi nome alla chiave.<\/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
Il save_post \u00e8 un’azione attivata ogni volta che un post o una pagina viene creato o aggiornato. Usando questa azione puoi iniettare il tuo codice nel sistema. Puoi leggere di pi\u00f9 su questo hook sulla documentazione di WordPress<\/a>.<\/p>\n
Spero che tu sappia come aggiungere un caricatore multimediale personalizzato in WordPress. Provalo nel tuo plugin o tema e fammi sapere i tuoi pensieri nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n