{"id":28446,"date":"2021-05-25T18:48:00","date_gmt":"2021-05-25T15:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28446"},"modified":"2021-10-18T03:42:01","modified_gmt":"2021-10-18T00:42:01","slug":"dodawanie-niestandardowego-przycisku-obrazu-za-pomoca-programu-media-uploader-w-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/dodawanie-niestandardowego-przycisku-obrazu-za-pomoca-programu-media-uploader-w-wordpress\/","title":{"rendered":"Dodawanie niestandardowego przycisku obrazu za pomoc\u0105 programu Media Uploader w WordPress"},"content":{"rendered":"

Ostatnio pracowa\u0142em nad wtyczk\u0105, w kt\u00f3rej chcieli\u015bmy u\u017cy\u0107 domy\u015blnego narz\u0119dzia do przesy\u0142ania multimedi\u00f3w WordPressa dla naszych wymaga\u0144. Mieli\u015bmy niestandardowy przycisk obrazu i chcieli\u015bmy przes\u0142a\u0107 obraz za pomoc\u0105 programu do przesy\u0142ania multimedi\u00f3w. WordPress pi\u0119knie zbudowa\u0142 narz\u0119dzie do przesy\u0142ania multimedi\u00f3w, kt\u00f3re pozwala u\u017cytkownikowi przes\u0142a\u0107 nowy obraz lub u\u017cy\u0107 istniej\u0105cego obrazu z biblioteki multimedi\u00f3w.<\/p>\n

Zawsze zaleca si\u0119 korzystanie z wbudowanego programu do przesy\u0142ania multimedi\u00f3w, je\u015bli szukasz niestandardowego rozwi\u0105zania do przesy\u0142ania obrazu do zaplecza. W ten spos\u00f3b post\u0119pujesz zgodnie ze standardami WordPress. Zaimplementowanie programu do przesy\u0142ania multimedi\u00f3w zajmuje tylko kilka linijek kodu. Wi\u0119c bez dalszej dyskusji zacznijmy od tego.<\/p>\n

W tym samouczku dodam niestandardowy przycisk obrazu dla posta i strony. Po klikni\u0119ciu tego przycisku otworzy si\u0119 narz\u0119dzie do przesy\u0142ania multimedi\u00f3w, w kt\u00f3rym u\u017cytkownik mo\u017ce przes\u0142a\u0107 obraz. Przes\u0142any adres URL obrazu jest ustawiony w niestandardowym polu meta i zostanie zapisany jako meta posta dla konkretnego posta lub strony.<\/p>\n

Dodaj niestandardowy Meta Box w WordPress<\/h3>\n

Meta box to nic innego jak blok na po\u015bcie lub na stronie. Kategorie, tagi, wyr\u00f3\u017cniony obraz, fragment, dyskusja itp. s\u0105 przyk\u0142adami metaboks\u00f3w. Korzystaj\u0105c z pola Meta, mo\u017cesz doda\u0107 dodatkowe informacje do postu i strony.<\/p>\n

Potrzebujemy meta pola, kt\u00f3re zawiera przycisk przesy\u0142ania obrazu i pole tekstowe. Gdy u\u017cytkownik kliknie przycisk, prze\u015ble obraz, a ko\u0144cowy adres URL obrazu zostanie ustawiony w polu tekstowym.<\/p>\n

Dodanie metaboxa<\/a> jest \u0142atwe i proste. Napisz poni\u017cszy kod w functions.php<\/code>pliku lub we wtyczce.<\/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
Po dodaniu powy\u017cszego kodu przejd\u017a do swojego postu lub strony i powiniene\u015b zobaczy\u0107 dodane nowe metabox wraz z ich polami.<\/p>\n
\"Dodawanie<\/a><\/p>\n
Dostosuj program do przesy\u0142ania multimedi\u00f3w WordPress<\/h3>\n
Jeste\u015b teraz gotowy ze swoim meta boxem. Nast\u0119pn\u0105 rzecz\u0105 jest klikni\u0119cie przycisku \u201ePrze\u015blij obraz", otw\u00f3rz narz\u0119dzie do przesy\u0142ania multimedi\u00f3w i ustaw adres URL przes\u0142anego obrazu w polu tekstowym. Wi\u0119c najpierw musisz utworzy\u0107 plik js i umie\u015bci\u0107 go<\/a> w kolejce<\/a> w \u015brodowisku WordPress.<\/p>\n
Utw\u00f3rzmy plik js awscript.js<\/code>i umie\u015b\u0107my go w kolejce w nast\u0119puj\u0105cy spos\u00f3b:<\/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
Tutaj poda\u0142em \u015bcie\u017ck\u0119 motywu, zak\u0142adaj\u0105c, \u017ce dodajesz ca\u0142y kod w motywie. Je\u015bli robisz to za pomoc\u0105 wtyczki, musisz dostosowa\u0107 \u015bcie\u017ck\u0119 zgodnie z wtyczk\u0105.<\/p>\n
Aby wykona\u0107 to zadanie, wzi\u0105\u0142em referencj\u0119 do Javascript Reference\/wp.media<\/a> i napisa\u0142em kod jQuery. W awscript.js<\/code>napiszemy kod do przesy\u0142ania medi\u00f3w w nast\u0119puj\u0105cy spos\u00f3b.<\/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
Teraz id\u017a dalej i kliknij przycisk \u201ePrze\u015blij obraz”, otworzy si\u0119 narz\u0119dzie do przesy\u0142ania multimedi\u00f3w, wybierz \/ prze\u015blij obraz i powiniene\u015b zobaczy\u0107 adres URL obrazu dodany w polu tekstowym. Na koniec zamierzam zapisa\u0107 ten adres URL w tabeli \u201epostmeta” z kluczem \u201eaw_custom_image”. Kluczowi mo\u017cna oczywi\u015bcie nada\u0107 dowoln\u0105 nazw\u0119.<\/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 to akcja uruchamiana za ka\u017cdym razem, gdy tworzony lub aktualizowany jest post lub strona. Za pomoc\u0105 tej akcji mo\u017cesz wstrzykn\u0105\u0107 sw\u00f3j kod do systemu. Mo\u017cesz przeczyta\u0107 wi\u0119cej o tym haczyku w dokumentacji WordPressa<\/a>.<\/p>\n
Mam nadziej\u0119, \u017ce dowiedzia\u0142e\u015b si\u0119 o dodaniu niestandardowego narz\u0119dzia do przesy\u0142ania multimedi\u00f3w w WordPress. Wypr\u00f3buj go w swojej wtyczce lub motywie i daj mi zna\u0107 swoje przemy\u015blenia w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n