{"id":28620,"date":"2021-05-25T18:12:00","date_gmt":"2021-05-25T15:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28620"},"modified":"2021-10-17T04:38:36","modified_gmt":"2021-10-17T01:38:36","slug":"lagga-till-anpassad-bildknapp-med-media-uploader-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/lagga-till-anpassad-bildknapp-med-media-uploader-i-wordpress\/","title":{"rendered":"L\u00e4gga till anpassad bildknapp med Media Uploader i WordPress"},"content":{"rendered":"

Nyligen arbetade jag med ett plugin d\u00e4r vi ville anv\u00e4nda standardmediauppladdaren av WordPress f\u00f6r v\u00e5rt krav. Vi hade en anpassad bildknapp och ville ladda upp en bild via medieuppladdaren. WordPress byggde en medieuppladdare vackert som till\u00e5ter en anv\u00e4ndare att ladda upp en ny bild eller anv\u00e4nda en befintlig bild fr\u00e5n mediebiblioteket.<\/p>\n

Det rekommenderas alltid att anv\u00e4nda den inbyggda medieuppladdaren om du letar efter en anpassad l\u00f6sning f\u00f6r att ladda upp en bild i backend. Om du g\u00f6r det f\u00f6ljer du WordPress-standarder. Att implementera en medieuppladdare tar bara n\u00e5gra rader kod. S\u00e5 utan vidare diskussion, l\u00e5t oss komma ig\u00e5ng med det.<\/p>\n

F\u00f6r denna handledning l\u00e4gger jag till en anpassad bildknapp f\u00f6r inl\u00e4gget och sidan. N\u00e4r du klickar p\u00e5 den h\u00e4r knappen \u00f6ppnas medieuppladdaren d\u00e4r anv\u00e4ndaren kan ladda upp bilden. Den uppladdade bildens URL st\u00e4lls in i ett anpassat metaf\u00e4lt och kommer att sparas som en postmeta f\u00f6r det specifika inl\u00e4gget eller sidan.<\/p>\n

L\u00e4gg till anpassad metabox i WordPress<\/h3>\n

Meta-rutan \u00e4r inget annat \u00e4n ett block p\u00e5 inl\u00e4gget eller sidan. Kategorier, Taggar, Utvalda bilder, Utdrag, Diskussion, etc \u00e4r exempel p\u00e5 metaf\u00e4lt. Med rutan Meta kan du l\u00e4gga till ytterligare information f\u00f6r inl\u00e4gget och sidan.<\/p>\n

Vi beh\u00f6ver en metaruta som inneh\u00e5ller knappen f\u00f6r uppladdningsbild och ett textf\u00e4lt. N\u00e4r en anv\u00e4ndare klickar p\u00e5 knappen laddar de upp bilden och den slutliga webbadressen f\u00f6r bilden st\u00e4lls in i textf\u00e4ltet.<\/p>\n

Att l\u00e4gga till meta-rutan<\/a> \u00e4r enkelt och enkelt. Skriv koden nedan i functions.php<\/code>filen eller i ditt 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
N\u00e4r du har lagt till ovanst\u00e5ende kod, g\u00e5 till ditt inl\u00e4gg eller sida s\u00e5 ska du kunna se den nya metaf\u00e4ltet som l\u00e4ggs till tillsammans med deras f\u00e4lt.<\/p>\n
\"L\u00e4gga<\/a><\/p>\n
Anpassa WordPress Media Uploader<\/h3>\n
Du \u00e4r nu redo med din metaf\u00e4lt. N\u00e4sta sak \u00e4r genom att klicka p\u00e5 knappen "Ladda upp bild", \u00f6ppna medieuppladdaren och st\u00e4ll in den uppladdade bildens URL i textf\u00e4ltet. S\u00e5 f\u00f6rst m\u00e5ste du skapa en js-fil och l\u00e4gga in den<\/a> i en WordPress-milj\u00f6.<\/p>\n
L\u00e5t oss skapa en js-fil awscript.js<\/code>och ange den p\u00e5 f\u00f6ljande s\u00e4tt:<\/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
H\u00e4r har jag gett temabanan f\u00f6rutsatt att du l\u00e4gger till en hel kod i temat. Om du g\u00f6r det via plugin m\u00e5ste du justera s\u00f6kv\u00e4gen enligt ditt plugin.<\/p>\n
F\u00f6r att utf\u00f6ra denna uppgift har jag tagit en referens till Javascript Reference \/ wp.media<\/a> och skrivit jQuery-koden. I den awscript.js<\/code>kommer vi att skriva en medieuppladdarkod enligt f\u00f6ljande.<\/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
Forts\u00e4tt nu och klicka p\u00e5 knappen ’Ladda upp bild’, den \u00f6ppnar medieuppladdaren, v\u00e4lj \/ ladda upp bild och du ska se bildens URL l\u00e4ggas till i textf\u00e4ltet. Slutligen ska jag spara denna URL i ’postmeta’ tabellen med nyckeln ’aw_custom_image’. Naturligtvis kan du ange vilket namn som helst f\u00f6r nyckeln.<\/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
Save_post \u00e4r en \u00e5tg\u00e4rd som utl\u00f6ses n\u00e4r ett inl\u00e4gg eller en sida skapas eller uppdateras. Med den h\u00e4r \u00e5tg\u00e4rden kan du injicera din kod i systemet. Du kan l\u00e4sa mer om den h\u00e4r kroken p\u00e5 WordPress-dokumentation<\/a>.<\/p>\n
Jag hoppas att du fick veta hur du l\u00e4gger till en anpassad medieuppladdare i WordPress. Prova det i ditt plugin eller tema och l\u00e5t mig veta dina tankar i kommentarf\u00e4ltet nedan.<\/p>\n
relaterade artiklar<\/h4>\n