• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Core / Usar el Media Uploader de WordPress en tus plugins y temas
Anuncio banner webservi

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 ] [ 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

  • Exportar / importar  la configuración del personalizador de temas en WordPressExportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamenteAbrir enlaces externos en un nuevo tab automáticamente
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

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

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Personalizar el formulario de login de WordPress

Agregar animaciones de aparición sin plugins en WordPress

Usar Firebug para modificar un theme WordPress

Añadir código de Google Analytics sin plugins en WordPress

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad