• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Usar el Media Uploader de WordPress en tus plugins y temas

Usar el Media Uploader de WordPress en tus plugins y temas

Usar el Media Uploader de WordPress en tus plugins y temas

[ 26 febrero 2019 ] [ Actualizado: 14 diciembre 2021 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

funcionalidad imagen

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Cuando estas desarrollando un plugin o un theme, es posible que necesites que el usuario pueda subir algún archivo multimedia, es en estos casos en que usar la funcionalidad del Media Uploader de WordPress le facilitará el trabajo al usuario haciendo el envío de archivos más sencillo.

 

1- Formulario HTM

Necesitas un formulario para mostrar los controles, constará de: un input en donde se guardará la ruta, el botón para llamar al Media Uploader y otro botón para hacer el submit; en este último botón puedes programar para hacer algo con la ruta proporcionada con por el Media Uploader.

Usaremos el siguiente código:


<div class="wrap">
	<h1>Ejemplo Media Uploader</h1>
	<form method="post">
		<input id="image-url" type="text" name="image" />
		<input id="upload-button" type="button" class="button" value="Upload Image" />
		<input class="button" type="submit" value="Submit" />
	</form>
</div>

 

2- Código Javascript

Luego necesitas código javascript para interactuar con el código del formulario HTML anterior, el código que usaremos será:


jQuery(document).ready(function($){
	var mediaUploader;

	$('#upload-button').click(function(e) {
		e.preventDefault();

	  // If the uploader object has already been created, reopen the dialog
		if (mediaUploader) {
			mediaUploader.open();
			return;
		}

	  // Extend the wp.media object
	  mediaUploader = wp.media.frames.file_frame = wp.media({
				title: 'Choose Image',
				button: {
				text: 'Choose Image'
			}, multiple: false });

	  // When a file is selected, grab the URL and set it as the text field's value
	  mediaUploader.on('select', function() {
			attachment = mediaUploader.state().get('selection').first().toJSON();
			$('#image-url').val(attachment.url);
		});

	  // Open the uploader dialog
	  mediaUploader.open();
	});

});

Ten en cuenta que en este código se hace referencia al id del botón: #upload-button, y al id de la caja de texto: #image-url

 

3- Integrando el código con WordPress

Finalmente vamos a integrar todo esto en WordPress, para nuestro ejemplo agregaremos una opción de menú en donde se muestre el formulario y además registraremos un archivo .js en donde estará el código javascript. Para hacerlo crearemos un plugin simple de ejemplo:

<?php
/*
Plugin Name: Upload image example
Plugin URI: https://decodecms.com
description: Demo plugin for uploading images using media library
Version: 1.0
Author: Jhon Marreros
Author URI: https://decodecms.com
License: GPL2
*/

// Show Form, option menu media
add_action( 'admin_menu', 'register_media_selector_settings_page' );

function register_media_selector_settings_page() {
	add_submenu_page( 'upload.php', 'Media Selector', 'Media Selector', 'manage_options', 'media-selector', 'dcms_media_selector_settings_callback' );
}

function dcms_media_selector_settings_callback() {
	?>
		<div class="wrap">
			<h1>Ejemplo Media Uploader</h1>
			<form method="post">
				<input id="image-url" type="text" name="image" />
				<input id="upload-button" type="button" class="button" value="Upload Image" />
				<input class="button" type="submit" value="Submit" />
			</form>
		</div>
	<?php
}

// Enqueu script
add_action("admin_enqueue_scripts", "dcms_insert_script_upload");

function dcms_insert_script_upload(){
	wp_enqueue_media();
    wp_register_script('my_upload', plugin_dir_url( __FILE__ ).'/js/upload.js', array('jquery'), '1', true );
    wp_enqueue_script('my_upload');
}

 

4- Resultado final

Luego de crear el plugin, veremos que aparece una opción de menú bajo el menú Medios llamada Media Selector. Al ingresar veremos que aparece el formulario que hemos creado y desde donde se puede usar el Media Uploader.

Construcción de formulario para usar Media Uploader

Puedes descargar el plugin desde el repositorio de GitHub: Media-Uploader-WordPress

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Subir archivos en WordPress a través de códigoSubir archivos en WordPress a través de código
  • Formato de entradas en WordPressFormatos de entrada en WordPress
  • Extraer un sitio desde un multisiteExtraer un sitio desde un multisite
  • Ordenar alfabéticamente el contenido de WordPressOrdenar alfabéticamente el contenido de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Alejandro Pereira

    13 marzo, 2019

    colle esto es en respuesta a mi petición de youtube gracias !!

  2. John

    14 marzo, 2019

    Me funciono perfectamente! muchas gracias!

  3. Jorg

    12 abril, 2020

    Hay forma de configurar el tipo de archivos que puede seleccionar (filter) ejemplo solo*.pdf … pero que no afecta a todo el sistema

    Gracias.

    • Jhon Marreros Guzmán

      13 abril, 2020

      Hola, puedes revisar esta discusión: https://wordpress.stackexchange.com/questions/59621/limit-upload-by-file-type-only-for-certain-custom-post-type

  4. Fernando

    20 julio, 2021

    Muy bien explicado, gracias.

  5. luis manga

    28 octubre, 2021

    alguna forma de subir múltiples imágenes?

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Modificar elementos en página de producto de WooCommerce

Agregar login y logout en un menú de WordPress

Mostrar mensaje según zona de envío en WooCommerce

Agregar subtítulos en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados