{"id":27833,"date":"2021-05-25T18:31:00","date_gmt":"2021-05-25T15:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27833"},"modified":"2021-10-18T04:09:20","modified_gmt":"2021-10-18T01:09:20","slug":"adicionar-botao-de-imagem-personalizado-com-o-uploader-de-midia-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/adicionar-botao-de-imagem-personalizado-com-o-uploader-de-midia-no-wordpress\/","title":{"rendered":"Adicionar bot\u00e3o de imagem personalizado com o uploader de m\u00eddia no WordPress"},"content":{"rendered":"

Recentemente, eu estava trabalhando em um plugin em que quer\u00edamos usar o uploader de m\u00eddia padr\u00e3o do WordPress para nossos requisitos. T\u00ednhamos um bot\u00e3o de imagem personalizado e quer\u00edamos fazer upload de uma imagem por meio do uploader de m\u00eddia. O WordPress construiu um carregador de m\u00eddia lindamente que permite ao usu\u00e1rio fazer upload de uma nova imagem ou usar uma imagem existente da biblioteca de m\u00eddia.<\/p>\n

\u00c9 sempre recomend\u00e1vel usar o uploader de m\u00eddia integrado se voc\u00ea estiver procurando uma solu\u00e7\u00e3o personalizada para fazer upload de uma imagem no back-end. Fazendo isso, voc\u00ea est\u00e1 seguindo os padr\u00f5es do WordPress. Implementar um uploader de m\u00eddia requer apenas algumas linhas de c\u00f3digo. Portanto, sem mais discuss\u00e3o, vamos come\u00e7ar com isso.<\/p>\n

Para este tutorial, adicionarei um bot\u00e3o de imagem personalizada para a postagem e a p\u00e1gina. Ao clicar neste bot\u00e3o, o uploader de m\u00eddia ser\u00e1 aberto, onde o usu\u00e1rio pode fazer o upload da imagem. O URL da imagem carregada \u00e9 definido em um metacampo personalizado e ser\u00e1 salvo como um meta de postagem para a postagem ou p\u00e1gina espec\u00edfica.<\/p>\n

Adicionar Meta Box personalizada no WordPress<\/h3>\n

Meta box nada mais \u00e9 do que um bloco no post ou na p\u00e1gina. Categorias, tags, imagem em destaque, trecho, discuss\u00e3o, etc. s\u00e3o exemplos de caixas de meta. Usando a caixa Meta, voc\u00ea pode adicionar informa\u00e7\u00f5es adicionais para a postagem e a p\u00e1gina.<\/p>\n

Precisamos de uma metacaixa que cont\u00e9m o bot\u00e3o de upload de imagem e um campo de texto. Quando um usu\u00e1rio clica no bot\u00e3o, ele faz o upload da imagem e o URL final da imagem \u00e9 definido no campo de texto.<\/p>\n

Adicionar metacaixa<\/a> \u00e9 f\u00e1cil e direto. Escreva o c\u00f3digo abaixo no functions.php<\/code>arquivo ou no seu 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
Depois de adicionar o c\u00f3digo acima, v\u00e1 para a sua postagem ou p\u00e1gina e voc\u00ea ver\u00e1 a nova metacaixa adicionada junto com seus campos.<\/p>\n
\"Adicionar<\/a><\/p>\n
Personalize WordPress Media Uploader<\/h3>\n
Agora voc\u00ea est\u00e1 pronto com sua metacaixa. A pr\u00f3xima coisa \u00e9 clicar no bot\u00e3o ‘Carregar imagem’, abrir o carregador de m\u00eddia e definir o URL da imagem carregada no campo de texto. Portanto, primeiro voc\u00ea precisa criar um arquivo js e enfileir\u00e1-lo<\/a> em um ambiente WordPress.<\/p>\n
Vamos criar um arquivo js awscript.js<\/code>e enfileir\u00e1-lo da seguinte maneira:<\/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
Aqui, forneci o caminho do tema presumindo que voc\u00ea esteja adicionando um c\u00f3digo inteiro ao tema. Se voc\u00ea estiver fazendo isso por meio do plug-in, ser\u00e1 necess\u00e1rio ajustar o caminho de acordo com o seu plug-in.<\/p>\n
Para realizar esta tarefa, peguei uma refer\u00eancia de Javascript Reference \/ wp.media<\/a> e escrevi o c\u00f3digo jQuery. No awscript.js<\/code>, iremos escrever um c\u00f3digo de uploader de m\u00eddia da seguinte maneira.<\/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
Agora v\u00e1 em frente e clique no bot\u00e3o ‘Upload de imagem’, ele abrir\u00e1 o carregador de m\u00eddia, escolha \/ fa\u00e7a upload da imagem e voc\u00ea dever\u00e1 ver o URL da imagem adicionado no campo de texto. Por fim, salvarei este URL na tabela ‘postmeta’ com a chave ‘aw_custom_image’. Claro, voc\u00ea pode dar qualquer nome para a chave.<\/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
O save_post \u00e9 uma a\u00e7\u00e3o disparada sempre que uma postagem ou p\u00e1gina \u00e9 criada ou atualizada. Usando esta a\u00e7\u00e3o, voc\u00ea pode injetar seu c\u00f3digo no sistema. Voc\u00ea pode ler mais sobre este gancho na documenta\u00e7\u00e3o do WordPress<\/a>.<\/p>\n
Espero que voc\u00ea saiba como adicionar um uploader de m\u00eddia personalizado no WordPress. Experimente em seu plugin ou tema e deixe-me saber sua opini\u00e3o na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n