{"id":24809,"date":"2021-05-25T18:25:00","date_gmt":"2021-05-25T15:25:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24809"},"modified":"2021-10-17T20:39:55","modified_gmt":"2021-10-17T17:39:55","slug":"mukautetun-kuvapainikkeen-lisaaminen-media-uploader-ohjelmalla-wordpressissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/mukautetun-kuvapainikkeen-lisaaminen-media-uploader-ohjelmalla-wordpressissa\/","title":{"rendered":"Mukautetun kuvapainikkeen lis\u00e4\u00e4minen Media Uploader -ohjelmalla WordPressiss\u00e4"},"content":{"rendered":"

Viime aikoina ty\u00f6skentelin laajennuksen parissa, jossa halusimme k\u00e4ytt\u00e4\u00e4 vaatimuksemme WordPressin oletustiedostolatausohjelmaa. Meill\u00e4 oli mukautettu kuvapainike ja halusimme ladata kuvan median latausohjelman kautta. WordPress rakensi kauniisti median latausohjelman, jonka avulla k\u00e4ytt\u00e4j\u00e4 voi ladata uuden kuvan tai k\u00e4ytt\u00e4\u00e4 olemassa olevaa kuvaa mediakirjastosta.<\/p>\n

On aina suositeltavaa k\u00e4ytt\u00e4\u00e4 sis\u00e4\u00e4nrakennettua medianlatausohjelmaa, jos etsit mukautettua ratkaisua kuvan lataamiseen backendiin. N\u00e4in noudatat WordPress-standardeja. Median latausohjelman k\u00e4ytt\u00f6\u00f6notto vie vain muutaman rivin koodia. Joten ilman lis\u00e4keskusteluja, aloitetaan sen kanssa.<\/p>\n

T\u00e4t\u00e4 opetusohjelmaa varten lis\u00e4t\u00e4\u00e4n mukautettu kuvapainike viesti\u00e4 ja sivua varten. Napsauttamalla t\u00e4t\u00e4 painiketta, median latausohjelma avautuu, johon k\u00e4ytt\u00e4j\u00e4 voi ladata kuvan. L\u00e4hetetyn kuvan URL-osoite asetetaan mukautettuun metakentt\u00e4\u00e4n ja se tallennetaan tietyn viestin tai sivun viestin meta.<\/p>\n

Lis\u00e4\u00e4 mukautettu metakentt\u00e4 WordPressiin<\/h3>\n

Metakentt\u00e4 ei ole muuta kuin postin tai sivun lohko. Luokat, Tunnisteet, Esitelty kuva, Ote, Keskustelu jne. Ovat esimerkkej\u00e4 meta-ruuduista. Meta-ruudun avulla voit lis\u00e4t\u00e4 lis\u00e4tietoja viestist\u00e4 ja sivusta.<\/p>\n

Tarvitsemme metakent\u00e4n, joka sis\u00e4lt\u00e4\u00e4 l\u00e4hetyskuvapainikkeen ja tekstikent\u00e4n. Kun k\u00e4ytt\u00e4j\u00e4 napsauttaa painiketta, h\u00e4n l\u00e4hett\u00e4\u00e4 kuvan ja lopullinen kuvan URL-osoite asetetaan tekstikentt\u00e4\u00e4n.<\/p>\n

Lis\u00e4\u00e4m\u00e4ll\u00e4 meta laatikko<\/a> on helppo ja suoraviivainen. Kirjoita alla oleva koodi functions.php<\/code>tiedostoon tai laajennukseen.<\/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
Kun olet lis\u00e4nnyt yll\u00e4 olevan koodin, siirry viestiin tai sivulle ja sinun pit\u00e4isi pysty\u00e4 n\u00e4kem\u00e4\u00e4n uusi metakentt\u00e4 lis\u00e4ttyn\u00e4 niiden kenttien kanssa.<\/p>\n
\"Mukautetun<\/a><\/p>\n
Mukauta WordPress Media Uploader<\/h3>\n
Olet nyt valmis meta-laatikkosi kanssa. Seuraava asia on ’Lataa kuva’ -painikkeen napsautuksella, avaa mediatiedostojen latausohjelma ja aseta l\u00e4hetetyn kuvan URL-osoite tekstikentt\u00e4\u00e4n. Joten aluksi sinun on luotava js-tiedosto ja pidett\u00e4v\u00e4 se<\/a> WordPress-ymp\u00e4rist\u00f6ss\u00e4.<\/p>\n
Luodaan js-tiedosto awscript.js<\/code>ja asetetaan se seuraavasti:<\/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
T\u00e4ss\u00e4 olen antanut teeman polun olettaen, ett\u00e4 lis\u00e4\u00e4t koko koodin teemaan. Jos teet sen laajennuksen kautta, sinun on s\u00e4\u00e4dett\u00e4v\u00e4 polku laajennuksesi mukaan.<\/p>\n
T\u00e4m\u00e4n teht\u00e4v\u00e4n suorittamiseksi olen ottanut viittauksen Javascript Reference \/ wp.media -ohjelmaan<\/a> ja kirjoittanut jQuery-koodin. Vuonna awscript.js<\/code>tulemme kirjoittaa median lataaja on seuraavanlainen.<\/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
Mene eteenp\u00e4in ja napsauta ’Lataa kuva’ -painiketta. Se avaa median latausohjelman, valitse \/ lataa kuva ja sinun pit\u00e4isi n\u00e4hd\u00e4 kuvan URL-osoite tekstikent\u00e4ss\u00e4. Lopuksi aion tallentaa t\u00e4m\u00e4n URL-osoitteen postmeta-taulukkoon avaimella aw_custom_image. Tietenkin voit antaa avaimelle mink\u00e4 tahansa nimen.<\/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 on toiminto, joka k\u00e4ynnistet\u00e4\u00e4n aina, kun viesti tai sivu luodaan tai p\u00e4ivitet\u00e4\u00e4n. T\u00e4m\u00e4n toiminnon avulla voit lis\u00e4t\u00e4 koodisi j\u00e4rjestelm\u00e4\u00e4n. Voit lukea lis\u00e4\u00e4 t\u00e4st\u00e4 koukusta WordPress-dokumentaatiossa<\/a>.<\/p>\n
Toivon, ett\u00e4 sait tiet\u00e4\u00e4 mukautetun median latausohjelman lis\u00e4\u00e4misest\u00e4 WordPressiin. Kokeile sit\u00e4 laajennuksessasi tai teemalla ja kerro minulle ajatuksesi alla olevasta kommenttiosasta.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n