{"id":25223,"date":"2021-05-25T18:08:00","date_gmt":"2021-05-25T15:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25223"},"modified":"2021-10-17T18:47:54","modified_gmt":"2021-10-17T15:47:54","slug":"kohandatud-pildinupu-lisamine-meediumide-uleslaadijaga-wordpressis","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kohandatud-pildinupu-lisamine-meediumide-uleslaadijaga-wordpressis\/","title":{"rendered":"Kohandatud pildinupu lisamine meediumide \u00fcleslaadijaga WordPressis"},"content":{"rendered":"

Hiljuti t\u00f6\u00f6tasin pistikprogrammi kallal, kus soovisime oma n\u00f5udeks kasutada WordPressi vaikimisi meediumilaadijat. Meil oli kohandatud pildinupp ja me tahtsime pildi meedialaadija kaudu \u00fcles laadida. WordPress ehitas suurep\u00e4raselt meedialaadija, mis v\u00f5imaldab kasutajal laadida \u00fcles uus pilt v\u00f5i kasutada meediumiteegist olemasolevat pilti.<\/p>\n

Alati on soovitatav kasutada sisseehitatud meediumilaadijat, kui otsite taustaprogrammi pildi \u00fcleslaadimiseks kohandatud lahendust. Nii toimides j\u00e4rgite WordPressi standardeid. Meedia\u00fcleslaadija juurutamiseks kulub vaid m\u00f5ni koodirida. Nii et ilma pikema aruteluta alustame sellega.<\/p>\n

Selle \u00f5petuse jaoks lisan postituse ja lehe jaoks kohandatud pildinupu. Sellel nupul kl\u00f5psates avaneb meedialaadija, kuhu kasutaja saab pildi \u00fcles laadida. \u00dcleslaaditud pildi URL on m\u00e4\u00e4ratud kohandatud metav\u00e4ljal ja see salvestatakse konkreetse postituse v\u00f5i lehe postitusmeta.<\/p>\n

Lisage WordPressis kohandatud metakast<\/h3>\n

Metakast pole muud kui postituse v\u00f5i lehe plokk. Kategooriad, sildid, esilet\u00f5stetud pilt, v\u00e4ljav\u00f5te, arutelu jne on metakastide n\u00e4ide. Meta kasti abil saate lisada postituse ja lehe kohta lisateavet.<\/p>\n

Vajame metakasti, mis sisaldab pildi \u00fcleslaadimise nuppu ja tekstiv\u00e4lja. Kui kasutaja nupul kl\u00f5psab, laadib ta pildi \u00fcles ja l\u00f5plik pildi URL m\u00e4\u00e4ratakse tekstiv\u00e4ljale.<\/p>\n

Lisades meta kasti<\/a> on lihtne ja sirgjooneline. Sisestage allolev kood functions.php<\/code>faili v\u00f5i pistikprogrammi.<\/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
P\u00e4rast \u00fclaltoodud koodi lisamist minge oma postitusele v\u00f5i lehele ja peaksite n\u00e4gema uut metakasti koos nende v\u00e4ljadega.<\/p>\n
\"Kohandatud<\/a><\/p>\n
Kohandage WordPressi meedialaadija<\/h3>\n
N\u00fc\u00fcd olete oma metakastiga valmis. J\u00e4rgmine asi on nupu \u201eLaadi pilt \u00fcles” kl\u00f5psamisel, avage meediumide \u00fcleslaadija ja m\u00e4\u00e4rake tekstiv\u00e4ljale \u00fcleslaaditud pildi URL. Nii et algul peate looma js-faili ja viimistlema selle<\/a> WordPressi keskkonnas.<\/p>\n
Loome js-faili awscript.js<\/code>ja loome selle j\u00e4rgmiselt:<\/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
Siin olen andnud teekonna tee eeldades, et lisate teemasse terve koodi. Kui teete seda pistikprogrammi kaudu, peate oma plugina kohast teed kohandama.<\/p>\n
Selle \u00fclesande t\u00e4itmiseks v\u00f5tsin viite Javascript Reference \/ wp.media<\/a> ja kirjutasin jQuery koodi. Kui awscript.js<\/code>me kirjutada meedia \u00fcleslaadija koodi j\u00e4rgmiselt.<\/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
N\u00fc\u00fcd j\u00e4tkake ja kl\u00f5psake nuppu "Laadi pilt \u00fcles", see avab meediumide \u00fcleslaadija, valib \/ laadib pildi \u00fcles ja tekstiv\u00e4ljale peaksite n\u00e4gema pildi URL-i. L\u00f5puks salvestan selle URL-i tabelisse postmeta v\u00f5tmega ‘aw_custom_image’. Muidugi v\u00f5ite anda v\u00f5tmele mis tahes nime.<\/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
Salvesta_post on toiming, mis k\u00e4ivitatakse alati, kui postitus v\u00f5i leht luuakse v\u00f5i v\u00e4rskendatakse. Selle toimingu abil saate oma koodi s\u00fcsteemi sisestada. Selle konksu kohta saate l\u00e4hemalt lugeda WordPressi dokumentatsioonist<\/a>.<\/p>\n
Loodan, et \u00f5ppisite WordPressis kohandatud meedialaadija \u00fcleslaadimisest lisama. Proovige seda oma pistikprogrammis v\u00f5i teemas ja andke oma m\u00f5tetest teada allpool olevas kommentaaride osas.<\/p>\n
seotud artiklid<\/h4>\n