Cómo integrar el WordPress Media Uploader en las opciones de tema y complemento

Spanish (Español) translation by Esther (you can also view the original English article)

¡Bienvenido a los desarrolladores de temas y plugins de WordPress! A todos nos gustaría que los usuarios de nuestros temas pudieran subir sus propias imágenes o logotipos utilizando una página de Opciones de Temas creada por nosotros (incluyendo páginas de plugins) pero, ¿cómo se programa? ¿Utilizas el cargador de medios de WordPress (como cuando subes una imagen destacada o insertas una imagen en un post) o simplemente añades un campo de entrada de archivo y te olvidas de todas las demás cosas? ¿Subes las imágenes a una carpeta de subida correctamente? ¿Adjuntas la imagen a la biblioteca de medios de WordPress? Y, este es un punto importante, ¿borroneas el archivo (si es lo que el usuario quiere) correctamente? Bueno, es hora de dar forma a nuestra página de Opciones de Tema usando la interfaz de WordPress. Queremos usuarios felices, queremos una interfaz fácil de usar.

Este tutorial se centra en la subida de imágenes a una página de Opciones de Tema, así que si no estás muy seguro de cómo crear una, te recomiendo seriamente que antes que nada, eches un vistazo al asombroso tutorial de Tom McFarlin La Guía Completa de la serie de APIs de configuración de WordPress.

¿Qué vamos a hacer en este tutorial?

Añadiremos un botón a nuestro formulario para subir imágenes o logotipos a nuestro sistema de archivos del servidor y otro botón para eliminar esta imagen.
Crearemos un campo de entrada para previsualizar la imagen.
Usaremos el WordPress Media Uploader para subir el archivo o para elegir uno existente, así que no tendremos que preocuparnos por todo el proceso. También nos las arreglaremos para subir la imagen a la carpeta de la derecha y la adjuntaremos a la biblioteca de medios de WordPress.
Podremos borrar la imagen en sí, así como su archivo adjunto de la biblioteca de medios de WordPress. No queremos desperdiciar espacio en el servidor.

Preparando la Creación de una página de opciones de temas

Necesitamos crear una carpeta llamada wptuts-options en la carpeta raíz del tema que contiene un archivo llamado wptuts-options.php donde se definirá todo el código necesario para crear nuestra página de Opciones del Tema. También debemos crear una carpeta llamada js donde guardaremos los archivos de JavaScript que necesitemos.

En primer lugar, debemos llamar a nuestro archivo wptuts-options.php desde dentro de nuestras funciones.php:

1	require_once( 'wptuts-options/wptuts-options.php' );

Dentro de nuestro archivo wptuts-options.php crearemos una función donde especificaremos los valores por defecto. En este caso, el valor será la URL de la imagen en nuestro servidor. Asignaremos una cadena vacía por defecto pero también podríamos asignar la URL de una imagen que ya tenemos en alguna carpeta de temas.

function wptuts_get_default_options() {
	$options = array(
		'logo' => ''
	);
	return $options;
}

Ahora vamos a crear una función que, si nuestra opción no existe en la base de datos (la llamaremos theme_wptuts_options), la iniciará con los valores dados por nuestra función anterior.

function wptuts_options_init() {
	$wptuts_options = get_option( 'theme_wptuts_options' );

	// Are our options saved in the DB?
	if ( false === $wptuts_options ) {
		// If not, we'll save our default options
		$wptuts_options = wptuts_get_default_options();
		add_option( 'theme_wptuts_options', $wptuts_options );
	}

	// In other case we don't need to update the DB
}

// Initialize Theme options
add_action( 'after_setup_theme', 'wptuts_options_init' );

Ahora es el momento de crear nuestra página de Opciones de Tema, añadirla al Panel de Administración y crear un formulario.

// Add "WPTuts Options" link to the "Appearance" menu
function wptuts_menu_options() {
	// add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function);
	add_theme_page('WPTuts Options', 'WPTuts Options', 'edit_theme_options', 'wptuts-settings', 'wptuts_admin_options_page');
}
// Load the Admin Options page
add_action('admin_menu', 'wptuts_menu_options');

function wptuts_admin_options_page() {
	?>
		<!-- 'wrap','submit','icon32','button-primary' and 'button-secondary' are classes
		for a good WP Admin Panel viewing and are predefined by WP CSS -->

		<div class="wrap">

			<div id="icon-themes" class="icon32"><br /></div>

			<h2><?php _e( 'WPTuts Options', 'wptuts' ); ?></h2>

			<!-- If we have any error by submiting the form, they will appear here -->
			<?php settings_errors( 'wptuts-settings-errors' ); ?>

			<form id="form-wptuts-options" action="options.php" method="post" enctype="multipart/form-data">

				<?php
					settings_fields('theme_wptuts_options');
					do_settings_sections('wptuts');
				?>

				<p class="submit">
					<input name="theme_wptuts_options[submit]" id="submit_options_form" type="submit" class="button-primary" value="<?php esc_attr_e('Save Settings', 'wptuts'); ?>" />
					<input name="theme_wptuts_options[reset]" type="submit" class="button-secondary" value="<?php esc_attr_e('Reset Defaults', 'wptuts'); ?>" />
				</p>

			</form>

		</div>
	<?php
}

En resumen: Usando el gancho admin_menu hemos añadido nuestra página al Panel de Administración en Apariencia -> Opciones de WPTuts y podría ser identificada por el slug wptuts-settings. Después de esto, hemos creado un formulario que todavía no tiene ningún campo de entrada basado en las funciones setting_fields y do_settings_sections. Como he dicho antes, el objetivo de este tutorial no es describir cómo funcionan estas funciones, así que no vamos a explicar para qué sirven. Puedes leer la serie de Tom en el enlace de arriba.

Pero, presta atención al hecho de que, además de crear el botón de submit, también hemos creado otro, un botón de Reset. Cuando lo presionemos, el valor de la imagen será el establecido por defecto.

Finalmente vamos a crear nuestro botón para subir imágenes y un campo de entrada donde, una vez subido, muestra su URL.

function wptuts_options_settings_init() {
	register_setting( 'theme_wptuts_options', 'theme_wptuts_options', 'wptuts_options_validate' );

	// Add a form section for the Logo
	add_settings_section('wptuts_settings_header', __( 'Logo Options', 'wptuts' ), 'wptuts_settings_header_text', 'wptuts');

	// Add Logo uploader
	add_settings_field('wptuts_setting_logo',  __( 'Logo', 'wptuts' ), 'wptuts_setting_logo', 'wptuts', 'wptuts_settings_header');
}
add_action( 'admin_init', 'wptuts_options_settings_init' );

function wptuts_settings_header_text() {
	?>
		<p><?php _e( 'Manage Logo Options for WpTuts Theme.', 'wptuts' ); ?></p>
	<?php
}

function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="text" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

No hay mucho más que decir aquí, solo que el valor del campo logo muestra la URL de la imagen escapada. Ahora mismo esto es lo que muestra nuestra pantalla:

Y no te olvides de nuestra función de validación de datos:

function wptuts_options_validate( $input ) {
	$default_options = wptuts_get_default_options();
	$valid_input = $default_options;

	$submit = ! empty($input['submit']) ? true : false;
	$reset = ! empty($input['reset']) ? true : false;

	if ( $submit )
		$valid_input['logo'] = $input['logo'];
	elseif ( $reset )
		$valid_input['logo'] = $default_options['logo'];

	return $valid_input;
}

Guardemos el valor del campo logo tal como está si enviamos el formulario o dejémoslo con su valor por defecto si reseteamos el formulario. Es aconsejable comprobar el valor del campo de entrada, validando los URL.

Si hemos llegado a este punto (eso espero) y no estamos realmente cansados podemos probar la forma. Veremos que el valor del campo de entrada se guarda sin problemas y que muestra, después de esto, una URL como valor.

Ahora, continuemos con lo que es realmente importante.

Paso 1Añadir el JavaScript necesario

Si queremos que el cargador de medios de WordPress funcione correctamente debemos importar varias librerías de JavaScript así como algunos CSS adicionales:

Thickbox (JS) - Responsable de la gestión de la ventana modal, a la que podremos arrastrar o seleccionar archivos. Es proporcionado por WordPress Core.
Thickbox (CSS) - Proporciona los estilos necesarios para esta ventana. También viene con la instalación de WordPress.
Media Upload (JS) - Proporciona todas las funciones necesarias para subir, validar y dar formato a los archivos. Es el corazón del WordPress Media Uploader.
Nuestro propio JS - Inicializará los parámetros necesarios para mostrar la ventana correctamente.

Tenemos que introducir el siguiente código en el archivo wptuts-options.php:

function wptuts_options_enqueue_scripts() {
	wp_register_script( 'wptuts-upload', get_template_directory_uri() .'/wptuts-options/js/wptuts-upload.js', array('jquery','media-upload','thickbox') );

	if ( 'appearance_page_wptuts-settings' == get_current_screen() -> id ) {
		wp_enqueue_script('jquery');

		wp_enqueue_script('thickbox');
		wp_enqueue_style('thickbox');

		wp_enqueue_script('media-upload');
		wp_enqueue_script('wptuts-upload');

	}

}
add_action('admin_enqueue_scripts', 'wptuts_options_enqueue_scripts');

Hay un par de cosas que debemos aclarar: en la primera línea estamos registrando un script (aún no hemos hablado de ello) que se encargará del proceso destinado a abrir la ventana del modelo y a recoger los datos de la imagen. Como hemos explicado antes vamos a crear una carpeta llamada js. Una peculiaridad de este script es que depende de otras librerías como jQuery, Media-Upload y Thickbox, todas ellas vienen al instalar WordPress.

En la segunda línea usamos la función get_current_screen() que nos proporciona el slug de la página en la que estamos trabajando. Esta función no siempre puede utilizarse y, dependiendo del gancho que utilicemos, estará disponible o no. Con el gancho admin_enqueue_scripts la función funcionará sin problemas. get_current_screen() -> id nos da un trozo de la página en la que estamos trabajando. Para las páginas que vienen por defecto en el Panel de Administración de WordPress, pueden ser 'themes','edit-post','plugins' etc. En nuestro caso, este slug se parece a appearance_page_{OUR_SLUG}. ¿Recuerdas el slug que definimos en la función add_theme_page? Bueno, nuestra página de Opciones de Tema, finalmente tiene el siguiente slug: appearance_page_wptuts-settings. Por lo tanto, solo cargaremos los scripts cuando sea apropiado.

Las otras dos líneas añaden las librerías de Javascript jQuery, Thickbox, Media Upload y nuestra JS, wptuts-upload.js. Además, también añadimos el CSS Thickbox.

Nuestro Script: wptuts-upload.js

A pesar de lo que parece, nuestro script va a ser más fácil de lo que parece. Solo es necesario conocer algunas funciones de la Thickbox y el Media Uploader para que funcione. El problema es que es difícil encontrar información al respecto y al final, como buenos programadores que somos, no tenemos otra opción que trabajar con el código. Como estamos a punto de ver, es realmente fácil de hacer. Continuemos directamente a nuestro primer código de versión:

	jQuery(document).ready(function($) {
		$('#upload_logo_button').click(function() {
			tb_show('Upload a logo', 'media-upload.php?referer=wptuts-settings&type=image&TB_iframe=true&post_id=0', false);
			return false;
		});
	});

¡Éxito! Si presionamos ahora mismo nuestro botón de Upload logo, aparecerá el WordPress Media Uploader. Genial, hemos terminado, ¡hasta pronto! No, esto no es cierto, pero no tardará mucho más en hacer que nuestra página de Opciones de Tema funcione, de una manera sencilla.

Revisando el código podemos ver que hemos asignado un evento de clic al botón que lanza una función Thickbox destinada a mostrar la ventana modal. Esta función acepta tres parámetros:

Nombre de la ventana - En nuestro caso "Subir un logo
URL - Ejecuta una biblioteca de WordPress que maneja y valida archivos, además de crear contenido para la ventana.
imageGroup - Hemos elegido la opción false porque no vamos a trabajar con grupos de imágenes sino solo con una.

Entre ellas, la más interesante es la URL. WordPress utiliza un archivo llamado media-upload.php para manejar la ventana y también permite varios parámetros $_GET. Debemos recordar que los caracteres & deben ser codificados con su entidad HTML para que la URL funcione sin ningún problema.

referer - Este parámetro es opcional. Lo usaremos más tarde para hacer un pequeño truco.
type - Es el tipo de archivo. Puede ser video, audio, imagen o archivo.
TB_iframe - Debe ser siempre seleccionado true para que la ventana se muestre en un iframe, o no funcionará. Aunque te cueste creerlo, es el parámetro más importante y ahora veremos por qué.
post_id - Se utiliza para indicar que la imagen no se adjuntará a ningún post y que será libre como un pajarito.

Bueno, no quiero mentirte. Solo uno de estos tres parámetros es realmente necesario: TB_iframe. Podemos olvidarnos de los otros. Hace algunas versiones, WordPress unificó su Media Uploader para subir cualquier tipo de archivo, sin necesidad de diferenciar las imágenes de los videos o la música, por lo que type no es necesario y el ID del post es 0 por defecto. De todas formas, no hay nada malo en dejarlos por si acaso tenemos algún problema de compatibilidad. Sería interesante indicar post_id si es una Meta Caja en un post.

La siguiente parte de nuestro JavaScript debe contener la siguiente función:

	window.send_to_editor = function(html) {
		var image_url = $('img',html).attr('src');
		$('#logo_url').val(image_url);
		tb_remove();
	}

send_to_editor es un evento incluido en la biblioteca de WordPress JavaScript Media Uploader. Entregará los datos de las imágenes en formato HTML, para que podamos ponerlos donde queramos.

Este evento entrega un parámetro a la función de manejo, html que incluye el siguiente código (como ejemplo):

1	<a href="{URL ON THE SERVER FOR THE UPLOADED IMAGE}"><img src="{URL ON THE SERVER FOR THE UPLOADED IMAGE}" alt="" title="" width="" height"" class="alignzone size-full wp-image-125" /></a>

Así que es fácil extraer la URL de la imagen una vez cargada en el servidor usando la línea $('img',html).attr('src'); entonces se almacenará en nuestro campo de entrada con la línea $('#logo_url').val(image_url);.

La función tb_remove cierra la ventana modal, eso es todo. Ahora, ya podemos enviar el formulario y guardar la URL de la imagen en la base de datos. Podríamos parar ahora, pero el resultado no se vería realmente hermoso o fácil de usar, así que hagamos una mejora.

Si prestamos atención, cuando subimos la imagen usando el Media Uploader podemos insertar la URL de la imagen en nuestro campo de entrada a través del botón Insert into Post. Esto podría confundir al usuario. Por eso, podemos cambiar este texto usando filtros en WordPress. Escribimos el siguiente código en nuestro archivo wptuts-options.php:

function wptuts_options_setup() {
	global $pagenow;

	if ( 'media-upload.php' == $pagenow || 'async-upload.php' == $pagenow ) {
		// Now we'll replace the 'Insert into Post Button' inside Thickbox
		add_filter( 'gettext', 'replace_thickbox_text'  , 1, 3 );
	}
}
add_action( 'admin_init', 'wptuts_options_setup' );

function replace_thickbox_text($translated_text, $text, $domain) {
	if ('Insert into Post' == $text) {
		$referer = strpos( wp_get_referer(), 'wptuts-settings' );
		if ( $referer != '' ) {
			return __('I want this to be my logo!', 'wptuts' );
		}
	}
	return $translated_text;
}

Usando el gancho admin_init, comprobamos que las páginas en las que estamos trabajando son las utilizadas por el Media Uploader. Estas páginas son: media-upload.php y async-upload.php. El primero abre la ventana modal y el segundo se carga una vez que la imagen ha sido cargada. Para confirmar que estamos trabajando en cualquiera de ellos tenemos que usar la variable global $pagenow y no la función get_current_screen() porque admin_init todavía no permite esta función.

Ahora, ¿por qué estamos usando la variable referer? Ok, esto es un poco difícil y funciona así:

Cuando pulsamos el botón de Subir Imagen, la URL de referencia es algo como https://www.ourdomain.com/.../ wp-admin/themes.php?page=wptuts_settings
Si luego hacemos clic en una pestaña como Media Library dentro del Media Uploader, la URL de referencia cambia y toma el siguiente valor: http://localhost/.../wp-admin/media-upload.php?referer=wptuts-settings&type=image.
Lo mismo ocurre cuando subimos una nueva imagen. El URL de referencia cambia y toma el mismo valor.

¿Ves ahora por qué incluimos el parámetro de referencia en nuestro JavaScript? Necesitamos saber desde qué página estamos lanzando el Media Uploader porque necesitamos reemplazar el texto Insert into Post en el botón solo en nuestra página de Opciones de Tema y no en una página de Post por ejemplo. Por eso incluí el parámetro de referencia. Ahora, usando la función wp_get_referer() obtenemos la URL de referencia y solo tenemos que encontrar la cadena wptuts-settings dentro de esa URL. Con este método lo reemplazaremos en el contexto correcto.

Ahora aplicamos el filtro gettext y cada frase que contenga "Insert into post" la reemplazamos con "¡Quiero que este sea mi logo!". Si abrimos de nuevo la ventana de Thickbox y cargamos un nuevo archivo, veremos que el texto del botón ha cambiado. Si no estás muy seguro de cómo usar el filtro gettext, y dado que no es uno de los objetivos de este tutorial, puedes visitar el codex de WordPress.

Se han hecho algunas mejoras, ¿no es así?

Paso 2 Vista previa de la imagen

El usuario siempre necesita ver las cosas que suceden en la pantalla. No basta con que el usuario suba una imagen y vaya a la página para comprobar que la imagen está ahí. Ahora, vamos a añadir un campo de entrada a nuestra página de Opciones de Tema para que el usuario pueda ver la hermosa imagen ya cargada.

Tenemos que escribir el siguiente código en nuestra función wptuts_options_settings_init():

1	// Add Current Image Preview
2	add_settings_field('wptuts_setting_logo_preview', __( 'Logo Preview', 'wptuts' ), 'wptuts_setting_logo_preview', 'wptuts', 'wptuts_settings_header');

Y también tenemos que crear una nueva función para la vista previa:

function wptuts_setting_logo_preview() {
	$wptuts_options = get_option( 'theme_wptuts_options' );  ?>
	<div id="upload_logo_preview" style="min-height: 100px;">
		<img style="max-width:100%;" src="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
	</div>
	<?php
}

Si subimos una nueva imagen ahora mismo y enviamos el formulario, veremos esto:

¡Genial! Tranquilo, no corras. Hay dos pasos a seguir, primero subimos la imagen y luego estamos obligados a enviar el formulario si queremos guardar los cambios. El usuario podría pensar una vez que la imagen se sube, ¿dónde diablos está mi logo? ¿Tengo que presentar el formulario? Evita molestarte añadiendo algunas líneas simples a nuestro JavaScript:

	window.send_to_editor = function(html) {
		var image_url = $('img',html).attr('src');
		$('#logo_url').val(image_url);
		tb_remove();
		$('#upload_logo_preview img').attr('src',image_url);

		$('#submit_options_form').trigger('click');
	}

¡Subimos la imagen y podemos ver que el formulario ha sido enviado! Solo hay que añadir una frase: ahora, cuando la imagen se carga, activamos el evento de click en el botón Submit y el formulario se envía inmediatamente, actualizando la base de datos y la vista previa de la imagen al mismo tiempo. ¡Perfecto!

Eliminar lo que es innecesario

Hasta ahora, la forma es atractiva, utilizable y funciona más que bien pero hay algo que empieza a molestarnos. ¿Por qué necesitamos el campo de entrada? Oye, lo necesitamos para guardar la URL de la imagen. Veámoslo de otra manera: ¿por qué el usuario necesita un campo de entrada? Por nada. Basta con mostrar al usuario la imagen que ha subido y que todo funciona correctamente.

Convirtamos nuestra forma un poco más con la función wptuts_setting_logo():

function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="text" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

Por si no te has dado cuenta, lo único que hemos hecho es cambiar el tipo de entrada de la forma. Estamos hablando ahora de un campo de entrada hidden y no de un campo de entrada text. La forma mantiene la misma funcionalidad pero es mucho más agradable para el usuario:

Paso 3Borrar la imagen

Naturalmente, en algún momento, el usuario querrá borrar la imagen. Para facilitar las cosas vamos a crear un botón para eliminarlo. Pero la imagen no debe ser eliminada solo cuando el usuario hace clic en el botón, también debe ser eliminada cuando suben una nueva imagen o reseteamos el formulario.

Lo primero es lo primero. Vamos a crear el nuevo botón en la función wptuts_setting_logo():

function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="hidden" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<?php if ( '' != $wptuts_options['logo'] ): ?>
			<input id="delete_logo_button" name="theme_wptuts_options[delete_logo]" type="submit" class="button" value="<?php _e( 'Delete Logo', 'wptuts' ); ?>" />
		<?php endif; ?>
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

Si prestamos atención, el nuevo botón solo aparecerá cuando haya un logo ya cargado. Además, estamos hablando de un botón de envío, así que enviaremos el formulario cuando hagamos clic en él.

Tendremos que añadir la siguiente funcionalidad de validación para que el botón actúe como queremos, wptuts_options_validate():

	$default_options = wptuts_get_default_options();
	$valid_input = $default_options;

	$wptuts_options = get_option('theme_wptuts_options');

	$submit = ! empty($input['submit']) ? true : false;
	$reset = ! empty($input['reset']) ? true : false;
	$delete_logo = ! empty($input['delete_logo']) ? true : false;

	if ( $submit ) {
		if ( $wptuts_options['logo'] != $input['logo'] && $wptuts_options['logo'] != '' )
			delete_image( $wptuts_options['logo'] );

		$valid_input['logo'] = $input['logo'];
	}
	elseif ( $reset ) {
		delete_image( $wptuts_options['logo'] );
		$valid_input['logo'] = $default_options['logo'];
	}
	elseif ( $delete_logo ) {
		delete_image( $wptuts_options['logo'] );
		$valid_input['logo'] = '';
	}

	return $valid_input;

Muy bien, ¿qué estamos haciendo aquí? Hemos añadido una nueva variable $wptuts_options para verificar si el usuario ha hecho clic en el botón Delete Logo. Si el usuario hace esto, se ejecuta la función delete_image y establecemos el valor de la URL del logo como una cadena vacía. Además, el logo será borrado si enviamos y subimos una imagen diferente a la que ya tenemos o incluso si reiniciamos el formulario.

¡Cuidado! El restablecimiento de la forma y la eliminación de la imagen no tiene que ser el mismo proceso. En nuestro caso, el valor por defecto es una cadena vacía, por lo que coinciden.

Ahora añadiremos la función delete_image():

function delete_image( $image_url ) {
	global $wpdb;

	// We need to get the image's meta ID.
	$query = "SELECT ID FROM wp_posts where guid = '" . esc_url($image_url) . "' AND post_type = 'attachment'";
	$results = $wpdb->get_results($query);

	// And delete it
	foreach ( $results as $row ) {
		wp_delete_attachment( $row->ID );
	}
}

La verdad es que este paso necesita una explicación más profunda, pero es muy fácil. Lo primero que estamos haciendo es ejecutar una consulta que encontrará el Meta ID de nuestra imagen en la base de datos. Puede pensar que es una mentira, pero los datos de nuestra imagen están en la tabla wp_posts. Bueno, la consulta intenta seleccionar aquellos registros cuya guía (la imagen, el post o la URL de la página) coincida con la de nuestra imagen y post_type = 'attachment' (Es un adjunto, ¿no?). Guardamos este ID (no debería haber más de uno) en $results y lo pasamos como parámetro al archivo adjunto wp_delete_attachment() de WordPress que borrará la imagen en sí y también borrará el archivo adjunto de la Biblioteca Multimedia. Es fácil, limpio y óptimo.

Paso4 Mostrar nuestro logo en el encabezado de nuestro sitio

Veamos a dónde nos llevó todo este lío. Necesitamos la plantilla header.php donde vamos a insertar un espacio para nuestro querido logo, donde insertaremos este trozo de código en el lugar que más nos guste:

<body <?php body_class(); ?>>

		<div id="container" class="container_12">

			<?php $wptuts_options = get_option('theme_wptuts_options'); ?>

			<?php if ( $wptuts_options['logo'] != '' ): ?>
				<div id="logo">
					<img src="<?php echo $wptuts_options['logo']; ?>" />
				</div>
			<?php  endif; ?>

Aquí está el resultado:

Notas finales

La verdad es que no hay mucho más que decir. ¿Es posible hacer esto de otra manera? Por supuesto, y de hecho encuentro ejemplos constantemente, pero desde mi punto de vista el WordPress Media Uploader es realmente útil y una vez conocido en profundidad hace la vida realmente fácil. Guardamos el código, la validación (en el tutorial no hemos usado mucho, deberíamos haber usado más, y te recomendamos que lo leas) y usamos el sistema de archivos que WordPress pone a nuestra disposición. Todo son ventajas para el usuario, que está acostumbrado a trabajar con la interfaz de WordPress y puede ver cómo todo funciona correctamente y de acuerdo con la funcionalidad estándar de WordPress. De hecho, podría pensarse que es la funcionalidad predeterminada de WordPress.

Recursos externos

Aunque hemos hablado de la funcionalidad específica de WordPress, la verdad es que hay muchos conocimientos intermedios que son necesarios. Aquí tenemos una lista con recursos relacionados: