{"id":28413,"date":"2021-05-25T18:24:00","date_gmt":"2021-05-25T15:24:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28413"},"modified":"2021-10-17T16:45:06","modified_gmt":"2021-10-17T13:45:06","slug":"agregar-un-boton-de-imagen-personalizado-con-el-cargador-de-medios-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/agregar-un-boton-de-imagen-personalizado-con-el-cargador-de-medios-en-wordpress\/","title":{"rendered":"Agregar un bot\u00f3n de imagen personalizado con el cargador de medios en WordPress"},"content":{"rendered":"

Recientemente, estaba trabajando en un complemento en el que quer\u00edamos usar el cargador de medios predeterminado de WordPress para nuestro requisito. Ten\u00edamos un bot\u00f3n de imagen personalizado y quer\u00edamos subir una imagen a trav\u00e9s del cargador de medios. WordPress construy\u00f3 un cargador de medios maravillosamente que permite al usuario cargar una nueva imagen o usar una imagen existente de la biblioteca de medios.<\/p>\n

Siempre se recomienda utilizar el cargador de medios incorporado si est\u00e1 buscando una soluci\u00f3n personalizada para cargar una imagen en el backend. Al hacerlo, est\u00e1 siguiendo los est\u00e1ndares de WordPress. Implementar un cargador de medios solo requiere unas pocas l\u00edneas de c\u00f3digo. Entonces, sin m\u00e1s discusi\u00f3n, comencemos con eso.<\/p>\n

Para este tutorial, agregar\u00e9 un bot\u00f3n de imagen personalizado para la publicaci\u00f3n y la p\u00e1gina. Al hacer clic en este bot\u00f3n, se abrir\u00e1 el cargador de medios donde el usuario puede cargar la imagen. La URL de la imagen cargada se establece en un metacampo personalizado y se guardar\u00e1 como un meta de publicaci\u00f3n para la publicaci\u00f3n o p\u00e1gina espec\u00edfica.<\/p>\n

Agregar Meta Box personalizado en WordPress<\/h3>\n

Meta box no es m\u00e1s que un bloque en una publicaci\u00f3n o una p\u00e1gina. Categor\u00edas, Etiquetas, Imagen destacada, Extracto, Discusi\u00f3n, etc. son ejemplos de metacajas. Usando el cuadro Meta puede agregar informaci\u00f3n adicional para la publicaci\u00f3n y la p\u00e1gina.<\/p>\n

Necesitamos un cuadro de meta que contenga el bot\u00f3n de carga de imagen y un campo de texto. Cuando un usuario hace clic en el bot\u00f3n, cargar\u00e1 la imagen y la URL de la imagen final se establecer\u00e1 en el campo de texto.<\/p>\n

Agregar metabox<\/a> es f\u00e1cil y sencillo. Escriba el siguiente c\u00f3digo en el functions.php<\/code>archivo o en su complemento.<\/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
Despu\u00e9s de agregar el c\u00f3digo anterior, vaya a su publicaci\u00f3n o p\u00e1gina y deber\u00eda poder ver el nuevo cuadro de meta agregado junto con sus campos.<\/p>\n
\"Agregar<\/a><\/p>\n
Personalizar el cargador de medios de WordPress<\/h3>\n
Ahora est\u00e1 listo con su meta box. Lo siguiente es hacer clic en el bot\u00f3n ‘Cargar imagen’, abrir el cargador de medios y configurar la URL de la imagen cargada en el campo de texto. Entonces, primero debe crear un archivo js y ponerlo<\/a> en cola<\/a> en un entorno de WordPress.<\/p>\n
Creemos un archivo js awscript.js<\/code>y col\u00f3quelo de la siguiente manera:<\/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
Aqu\u00ed, he dado la ruta del tema asumiendo que est\u00e1 agregando un c\u00f3digo completo en el tema. Si lo est\u00e1 haciendo a trav\u00e9s de un complemento, debe ajustar la ruta seg\u00fan su complemento.<\/p>\n
Para realizar esta tarea he tomado una referencia de Javascript Reference \/ wp.media<\/a> y escribo el c\u00f3digo jQuery. En el awscript.js<\/code>, escribiremos un c\u00f3digo de cargador de medios de la siguiente manera.<\/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
Ahora contin\u00fae y haga clic en el bot\u00f3n ‘Cargar imagen’, se abrir\u00e1 el cargador de medios, elija \/ cargue la imagen y deber\u00eda ver la URL de la imagen agregada en el campo de texto. Finalmente, voy a guardar esta URL en la tabla ‘postmeta’ con la clave ‘aw_custom_image’. Por supuesto, puede dar cualquier nombre a la clave.<\/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
El save_post es una acci\u00f3n que se activa cada vez que se crea o actualiza una publicaci\u00f3n o p\u00e1gina. Con esta acci\u00f3n, puede inyectar su c\u00f3digo en el sistema. Puede leer m\u00e1s sobre este gancho en la documentaci\u00f3n de WordPress<\/a>.<\/p>\n
Espero que sepas c\u00f3mo agregar un cargador de medios personalizado en WordPress. Pru\u00e9belo en su complemento o tema y d\u00e9jeme saber lo que piensa en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n