Cómo crear un plugin de administración de avatares de WordPress desde cero: Introducción

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

Avatar Manager para WordPress es un plugin sencillo y agradable que facilita el almacenamiento local de avatares y mucho más.

Mejora tu sitio web WordPress permitiendo que tus usuarios elijan entre usar Gravatar o una imagen de avatar autoalojada desde la página de su perfil directamente. Flujo de trabajo mejorado, generación de imágenes a petición y permisos de usuario personalizados en una interfaz nativa. Dá la bienvenida al plugin Avatar Manager.

Introducción

Un plugin de WordPress es una aplicación PHP que añade un conjunto específico de características o servicios a WordPress, que pueden integrarse perfectamente con WordPress utilizando puntos de acceso y métodos proporcionados por la API de plugins de WordPress.

Este artículo te guiará a través del proceso de creación de tu propio plugin de WordPress desde cero.

Nota: En este artículo se supone que ya estás familiarizado con la funcionalidad básica de WordPress y la programación PHP.

Paso 1. Configurar el espacio de trabajo

Para empezar, navega a wp-content/plugins/ en tu instalación de WordPress. Para configurar el espacio de trabajo, comienza creando la siguiente estructura de directorios y archivos vacíos como se ejemplifica en la siguiente imagen:

Estructura del espacio de trabajo para el plugin Avatar Manager

Asegúrate de elegir un nombre único para el directorio del plugin y para el archivo PHP principal, como avatar-manager y avatar-manager.php en este ejemplo, y pon todos los archivos del plugin dentro de ese directorio.

El silencio es oro

Antes de empezar a escribir nuestro plugin, abre avatar-manager/index.php y añade el siguiente código:

1	<?php
2	// Silence is golden.
3	?>

Puedes ver este archivo en muchos lugares de WordPress. Es un simple truco utilizado para evitar la navegación por directorios.

Paso 2. Crear un plugin básico de WordPress

Ahora, es el momento de poner algo de información en nuestro archivo PHP principal del plugin.

Información estándar del plugin

La parte superior del archivo PHP principal del plugin debe contener un encabezado con información estándar del plugin. Este encabezado permite a WordPress reconocer la existencia del plugin, añadirlo a la pantalla de administración de plugins para que pueda ser activado, y cargado, así como para ejecutar sus funciones; sin el encabezado, el plugin nunca se activaría ni ejecutaría.

Abre avatar-manager/avatar-manager.php y añade las siguientes líneas:

<?php
/**
 * @package Avatar_Manager
 */
/*
Plugin Name: Avatar Manager
Plugin URI: http://wordpress.org/extend/plugins/avatar-manager/
Description: Avatar Manager for WordPress is a sweet and simple plugin for storing avatars locally and more. Easily.
Version: 1.0.0
Author: Cătălin Dogaru
Author URI: http://profiles.wordpress.org/cdog/
License: GPLv2 or later
*/
?>

La información mínima que WordPress necesita para reconocer nuestro plugin es la línea Plugin Name. El resto de la información (si está presente) se utilizará para crear la tabla de plugins en la pantalla de gestión de plugins. El orden de las líneas es indiferente.

Para que el mecanismo de actualización pueda leer correctamente la versión de nuestro plugin se recomienda elegir un formato para el número de versión y mantenerlo consistente en las diferentes versiones.

El slug de licencia debe ser un identificador común corto para la licencia bajo la que esté el plugin y está destinado a ser una forma sencilla y explícita de señalar la licencia del código.

Versiones

Por motivos de transparencia, para ser conscientes de nuestro ciclo de lanzamiento, y para esforzarnos por mantener la compatibilidad con versiones anteriores, Avatar Manager se mantendrá en la medida de lo posible bajo las directrices de control de Versionado Semántico.

Las versiones se numerarán con el siguiente formato:

<major>. <minor>.<patch>

Y se construirán siguiendo las siguientes pautas:

La ruptura de la compatibilidad con versiones anteriores corresponde a major (y restablece minor y patch).
Las nuevas adiciones que no rompen la compatibilidad con versiones anteriores se corresponden con minor (y restablece patch).
La corrección de errores y cambios varios se aplican a patch.

Para obtener más información sobre SemVer, visita semver.org.

Licencia

Es costumbre seguir el encabezado estándar con información sobre la licencia para el plugin. La mayoría de los plugins utilizan la misma licencia que usa WordPress, que es la licencia GPLv2 o una licencia compatible con la GPLv2. Para indicar una licencia GPLv2, incluye las siguientes líneas en nuestro plugin:

/*
Copyright © 2013 Cătălin Dogaru

This program is free software; you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation; either version 2 of the License, or (at your option) any later
version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with
this program; if not, write to the Free Software Foundation, Inc., 51 Franklin
Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/

A continuación, abre avatar-manager/LICENSE y pega la versión de texto sin formato de GPLv2 en él.

Paso 3. Programación del complemento Avatar Manager

Después de completar el paso anterior deberías poder localizar el plugin Avatar Manager en la pantalla Plugins.

El plugin Avatar Manager en Plugins Screen

Ahora, es el momento de hacer que nuestro plugin haga realmente algo. Actívalo y añade las siguientes líneas de código al archivo PHP del plugin principal:

1	define( 'AVATAR_MANAGER_VERSION', '1.0.0' );
2	define( 'AVATAR_MANAGER_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
3	define( 'AVATAR_MANAGER_AVATAR_UPLOADS', 0 );
4	define( 'AVATAR_MANAGER_DEFAULT_SIZE', 96 );

La función define() define una constante con nombre en tiempo de ejecución. La función plugin_dir_url() obtiene la URL (con barra diagonal final) para el plugin __FILE__ que se pasa. El valor de __FILE__ es la ruta completa y el nombre de archivo del archivo actual y es una de las ocho constantes mágicas que proporciona PHP.

Vamos más allá e inicializamos nuestro plugin:

/**
 * Sets up plugin defaults and makes Avatar Manager available for translation.
 *
 * @uses load_theme_textdomain() For translation/localization support.
 * @uses plugin_basename() For retrieving the basename of the plugin.
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_init() {
	// Makes Avatar Manager available for translation.
	load_plugin_textdomain( 'avatar-manager', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}

add_action( 'init', 'avatar_manager_init' );

La llamada add_action() enlaza una función a una acción específica. La acción init se ejecuta después de que WordPress haya terminado de cargarse, pero antes de que se envíen los encabezados. También la llamada load_plugin_textdomain() debe hacerse durante init, de lo contrario los usuarios no podrán engancharse a ella. Veremos más sobre esto más adelante, cuando cubra la internacionalización de nuestro plugin. La función dirname() devuelve la ruta del directorio principal, mientras que la función plugin_basename() obtiene el nombre base del plugin.

Ganchos, acciones y filtros

Los ganchos son proporcionados por WordPress para permitir que un plugin se conecte al resto de WordPress; es decir, para invocar funciones en el plugin en momentos específicos, y así poner el plugin en marcha. Hay dos tipos de ganchos:

Acciones: Las acciones son los ganchos que el núcleo de WordPress lanza en puntos específicos durante la ejecución, o cuando se producen eventos específicos.
Filtros: los filtros son ganchos que WordPress inicia para modificar texto de varios tipos antes de añadirlo a la base de datos o enviarlo a la pantalla del navegador.

Paso 4. Añadir opciones de plugin

A continuación, vamos a añadir las opciones del plugin. Al permitir la personalización, se consigue que un plugin sea mucho más flexible para el usuario.

/**
 * Registers sanitization callback and plugin setting fields.
 *
 * @uses register_setting() For registering a setting and its sanitization
 * callback.
 * @uses add_settings_field() For registering a settings field to a settings
 * page and section.
 * @uses __() For retrieving the translated string from the translate().
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_admin_init() {
	// Registers plugin setting and its sanitization callback.
	register_setting( 'discussion', 'avatar_manager', 'avatar_manager_sanitize_options' );

	// Registers Avatar Uploads settings field under the Settings Discussion
	// Screen.
	add_settings_field( 'avatar-manager-avatar_uploads', __( 'Avatar Uploads', 'avatar-manager' ), 'avatar_manager_avatar_uploads_settings_field', 'discussion', 'avatars' );

	// Registers Default Size settings field under the Settings Discussion
	// Screen.
	add_settings_field( 'avatar-manager-default-size', __( 'Default Size', 'avatar-manager' ), 'avatar_manager_default_size_settings_field', 'discussion', 'avatars' );
}

add_action( 'admin_init', 'avatar_manager_admin_init' );

La acción admin_init se desencadena antes que cualquier otro enlace cuando un usuario accede al área de administración. La función register_setting() registra una configuración y su devolución de llamada de desinfección. La función add_settings_field() registra un campo de configuración en una página y sección de configuración. Los usamos para añadir nuestras opciones de plugin en la Pantalla de discusión de configuración. La función __() se explicará más adelante, cuando cubra el proceso de internacionalización.

Paso 5. Añadir la devolución de llamada de desinfección

Antes de escribir la devolución de llamada de desinfección, necesitamos definir dos funciones más, avatar_manager_get_default_options() y avatar_manager_get_options().

/**
 * Returns plugin default options.
 *
 * @since Avatar Manager 1.0.0
 *
 * @return array Plugin default options.
 */
function avatar_manager_get_default_options() {
	$options = array(
		'avatar_uploads' => AVATAR_MANAGER_AVATAR_UPLOADS,
		'default_size'   => AVATAR_MANAGER_DEFAULT_SIZE
	);

	return $options;
}

La función avatar_manager_get_default_options() devuelve las opciones predeterminadas del plugin.

/**
 * Returns plugin options.
 *
 * @uses get_option() For getting values for a named option.
 * @uses avatar_manager_get_default_options() For retrieving plugin default
 * options.
 *
 * @since Avatar Manager 1.0.0
 *
 * @return array Plugin options.
 */
function avatar_manager_get_options() {
	return get_option( 'avatar_manager', avatar_manager_get_default_options() );
}

La función avatar_manager_get_options() recupera las opciones actuales del plugin. La función get_otpion() devuelve el valor de la opción especificada o el valor predeterminado si la opción no está en la base de datos.

/**
 * Sanitizes and validates plugin options.
 *
 * @uses avatar_manager_get_default_options() For retrieving plugin default
 * options.
 * @uses absint() For converting a value to a non-negative integer.
 *
 * @since Avatar Manager 1.0.0
 *
 * @return array Sanitized plugin options.
 */
function avatar_manager_sanitize_options( $input ) {
	$options = avatar_manager_get_default_options();

	if ( isset( $input['avatar_uploads'] ) && trim( $input['avatar_uploads'] ) )
		$options['avatar_uploads'] = trim( $input['avatar_uploads'] ) ? 1 : 0;

	if ( isset( $input['default_size'] ) && is_numeric( trim( $input['default_size'] ) ) ) {
		$options['default_size'] = absint( trim( $input['default_size'] ) );

		if ( $options['default_size'] < 1 )
			$options['default_size'] = 1;
		elseif ( $options['default_size'] > 512 )
			$options['default_size'] = 512;
	}

	return $options;
}

La función avatar_manager_sanitize_options() desinfecta y valida las opciones del plugin. La llamada isset() determina si se establece una variable y no NULL. La función trim() elimina los espacios en blanco del principio y del final de una cadena. La función is_numeric() busca si una variable es un número o una cadena numérica. La función absint() convierte un valor en un entero no negativo.

Paso 6. Añadir los campos de ajustes

Ahora, es el momento de añadir los campos de ajustes.

/**
 * Prints Avatar Uploads settings field.
 *
 * @uses avatar_manager_get_options() For retrieving plugin options.
 * @uses _e() For displaying the translated string from the translate().
 * @uses checked() For comparing two given values.
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_avatar_uploads_settings_field() {
	// Retrieves plugin options.
	$options = avatar_manager_get_options();
	?>
	<fieldset>
		<legend class="screen-reader-text">
			<span>
				<?php _e( 'Avatar Uploads', 'avatar-manager' ); ?>
			</span>
		</legend><!-- .screen-reader-text -->
		<label>
			<input <?php checked( $options['avatar_uploads'], 1, true ); ?> name="avatar_manager[avatar_uploads]" type="checkbox" value="1">
			<?php _e( 'Anyone can upload', 'avatar-manager' ); ?>
		</label>
	</fieldset>
	<?php
}

La devolución de llamada avatar_manager_avatar_uploads_settings_field() imprime el campo de configuración de Cargas de avatar. La función checked() compara dos valores dados y, si los valores son los mismos, añade el atributo checked a la casilla de verificación actual. La función _e() se describirá más adelante, cuando explique el proceso de internacionalización.

/**
 * Prints Default Size settings field.
 *
 * @uses avatar_manager_get_options() For retrieving plugin options.
 * @uses _e() For displaying the translated string from the translate().
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_default_size_settings_field() {
	// Retrieves plugin options.
	$options = avatar_manager_get_options();
	?>
	<fieldset>
		<legend class="screen-reader-text">
			<span>
				<?php _e( 'Default Size', 'avatar-manager' ); ?>
			</span>
		</legend><!-- .screen-reader-text -->
		<label>
			<?php _e( 'Default size of the avatar image', 'avatar-manager' ); ?>
			<input class="small-text" min="1" name="avatar_manager[default_size]" step="1" type="number" value="<?php echo $options['default_size']; ?>">
		</label>
	</fieldset>
	<?php
}

La devolución de llamada avatar_manager_default_size_settings_field() imprime el campo Configuración de tamaño predeterminado.

Después de añadir los campos de configuración, deberías poder localizar las opciones del plugin en la Pantalla de discusión de ajustes.

Las opciones del plugin Avatar Manager en la Pantalla de discusión de ajustes

La primera opción controla si los usuarios con privilegios bajos pueden cargar una imagen de avatar o no, mientras que la segunda opción representa el tamaño predeterminado para una imagen de avatar.

Paso 7. Añadir la sección Avatar

Para permitir que los usuarios administren su avatar, necesitamos añadir una nueva sección a tu página de perfil. Vamos a ir más allá y añadiendo la sección Avatar dentro de la pantalla de usuario Tu perfil:

/**
 * Prints Avatar section.
 *
 * @uses avatar_manager_get_options() For retrieving plugin options.
 * @uses get_post_meta() For retrieving attachment meta fields.
 * @uses remove_filter() For removing a function attached to a specified action
 * hook.
 * @uses _e() For displaying the translated string from the translate().
 * @uses checked() For comparing two given values.
 * @uses get_avatar() For retrieving the avatar for a user.
 * @uses esc_attr() For escaping HTML attributes.
 * @uses add_query_arg() For retrieving a modified URL (with) query string.
 * @uses self_admin_url() For retrieving an admin url link with optional path
 * appended.
 * @uses current_user_can() For checking whether the current user has a certain
 * capability.
 * @uses submit_button() For echoing a submit button, with provided text and
 * appropriate class.
 * @uses __() For retrieving the translated string from the translate().
 *
 * @since Avatar Manager 1.0.0
 *
 * @param array $profileuser User to edit.
 */
function avatar_manager_edit_user_profile( $profileuser ) {
	// Retrieves plugin options.
	$options = avatar_manager_get_options();

	$avatar_type = isset( $profileuser->avatar_manager_avatar_type ) ? $profileuser->avatar_manager_avatar_type : 'gravatar';

	if ( isset( $profileuser->avatar_manager_custom_avatar ) ) {
		// Retrieves attachment meta fields based on attachment ID.
		$custom_avatar_rating   = get_post_meta( $profileuser->avatar_manager_custom_avatar, '_avatar_manager_custom_avatar_rating', true );
		$user_has_custom_avatar = get_post_meta( $profileuser->avatar_manager_custom_avatar, '_avatar_manager_is_custom_avatar', true );
	}

	if ( ! isset( $custom_avatar_rating ) || empty( $custom_avatar_rating ) )
		$custom_avatar_rating = 'G';

	if ( ! isset( $user_has_custom_avatar ) || empty( $user_has_custom_avatar ) )
		$user_has_custom_avatar = false;

	if ( $user_has_custom_avatar )
		// Removes the function attached to the specified action hook.
		remove_filter( 'get_avatar', 'avatar_manager_get_avatar' );
	?>
	<h3>
		<?php _e( 'Avatar', 'avatar-manager' ); ?>
	</h3>
	<table class="form-table">
		...
	</table><!-- .form-table -->
	<?php
}

add_action( 'show_user_profile', 'avatar_manager_edit_user_profile' );
add_action( 'edit_user_profile', 'avatar_manager_edit_user_profile' );

Las acciones show_user_profile y edit_user_profile ayudan a personalizar la página de perfil de usuario. El parámetro $profileuser es un objeto WP_User del usuario que se esté editando. La función get_post_meta() devuelve los valores de los campos personalizados con la clave especificada de la entrada especificada. La función empty() determina si una variable está vacía. La función remove_filter() elimina una función asociada a un enlace de filtro especificado; es necesario eliminar nuestra función personalizada para recuperar una imagen de avatar.

A continuación, vamos a añadir un selector de avatares, un formulario de carga y un selector de calificación para la imagen de avatar personalizada de cada usuario.

El selector de avatares

El selector de avatares permite al usuario elegir entre usar Gravatar o una imagen de avatar personalizada. Para añadirlo, escribe el siguiente código:

<tr>
	<th>
		<?php _e( 'Display this avatar', 'avatar-manager' ); ?>
	</th>
	<td class="avatar-manager">
		<fieldset>
			<legend class="screen-reader-text">
				<span>
					<?php _e( 'Display this avatar', 'avatar-manager' ); ?>
				</span><!-- .screen-reader-text -->
			</legend>
			<label>
				<input <?php checked( $avatar_type, 'gravatar', true ); ?> name="avatar_manager_avatar_type" type="radio" value="gravatar">
				<?php echo get_avatar( $profileuser->ID, 32, '', false ); ?>
				<?php _e( 'Gravatar', 'avatar-manager' ); ?>
				<span class="description">
					<?php _e( '<a href="http://codex.wordpress.org/How_to_Use_Gravatars_in_WordPress" target="_blank">More information</a>', 'avatar-manager' ); ?>
				</span><!-- .description -->
			</label>
			<?php if ( $user_has_custom_avatar ) : ?>
				<br>
				<label>
					<input <?php checked( $avatar_type, 'custom', true ); ?> name="avatar_manager_avatar_type" type="radio" value="custom">
					<?php echo avatar_manager_get_custom_avatar( $profileuser->ID, 32, '', false ); ?>
					<?php _e( 'Custom', 'avatar-manager' ); ?>
				</label>
			<?php endif; ?>
			<?php
			if ( $user_has_custom_avatar && ( current_user_can( 'upload_files' ) || $options['avatar_uploads'] ) ) {
				$href = esc_attr( add_query_arg( array(
					'action'                       => 'update',
					'avatar_manager_action'        => 'remove-avatar',
					'avatar_manager_custom_avatar' => $profileuser->avatar_manager_custom_avatar,
					'user_id'                      => $profileuser->ID
				),
				self_admin_url( IS_PROFILE_PAGE ? 'profile.php' : 'user-edit.php' ) ) );
				?>
				<a class="delete" href="<?php echo wp_nonce_url( $href, 'update-user_' . $profileuser->ID ); ?>" onclick="return showNotice.warn();">
					<?php _e( 'Delete', 'avatar-manager' ); ?>
				</a><!-- .delete -->
				<?php
			}
			?>
		</fieldset>
	</td><!-- .avatar-manager -->
</tr>

La función get_avatar() recupera el avatar de un usuario que proporcionó un ID de usuario o una dirección de correo electrónico. Para recuperar una imagen de avatar personalizada mediante un ID de usuario, usamos la función avatar_manager_get_custom_avatar(), que escribiremos más adelante. La función current_user_can() comprueba si el usuario actual tiene una capacidad determinada. Normalmente, los usuarios con privilegios bajos como los suscriptores no pueden cargar archivos; esta es la razón por la que usamos la variable $options['avatar_uploads']. La función esc_attr() extrae los atributos HTML. La función self_admin_url() recupera una URL de enlace de administrador con la ruta de acceso opcional anexada. La constante IS_PROFILE_PAGE nos dice si estamos editando nuestro perfil o el perfil de otro usuario. La función wp_nonce_url() recupera la URL con nonce añadido a la consulta de URL. Antes de eliminar un avatar, pedimos al usuario que confirme llamando al método showNotice.warn() en el evento onclick del enlace Delete (Eliminar) que muestra un aviso de advertencia.

El formulario de carga

El formulario de carga permite a un usuario navegar y cargar una imagen de avatar personalizada:

<?php if ( current_user_can( 'upload_files' ) || $options['avatar_uploads'] ) : ?>
	<tr>
		<th>
			<?php _e( 'Select Image', 'avatar-manager' ); ?>
		</th>
		<td>
			<fieldset>
				<legend class="screen-reader-text">
					<span>
						<?php _e( 'Select Image', 'avatar-manager' ); ?>
					</span>
				</legend><!-- .screen-reader-text -->
				<label class="description" for="avatar-manager-upload-avatar">
					<?php _e( 'Choose an image from your computer:', 'avatar-manager' ); ?>
				</label><!-- .description -->
				<br>
				<input name="avatar_manager_import" type="file">
				<?php submit_button( __( 'Upload', 'avatar-manager' ), 'button', 'avatar-manager-upload-avatar', false ); ?>
			</fieldset>
		</td>
	</tr>
<?php endif; ?>

La función submit_button() se hace eco de un botón de envío, con texto proporcionado y la clase adecuada.

El selector de clasificación

El selector de clasificación solo aparece cuando hay un avatar personalizado disponible. Para añadirlo, escribe las siguientes líneas:

<?php if ( $user_has_custom_avatar ) : ?>
	<tr>
		<th>
			<?php _e( 'Avatar Rating', 'avatar-manager' ); ?>
		</th>
		<td>
			<fieldset>
				<legend class="screen-reader-text">
					<span>
						<?php _e( 'Avatar Rating', 'avatar-manager' ); ?>
					</span>
				</legend><!-- .screen-reader-text -->
				<?php
				$ratings = array(
					// Translators: Content suitability rating:
					// http://bit.ly/89QxZA
					'G'  => __( 'G &#8212; Suitable for all audiences', 'avatar-manager' ),
					// Translators: Content suitability rating:
					// http://bit.ly/89QxZA
					'PG' => __( 'PG &#8212; Possibly offensive, usually for audiences 13 and above', 'avatar-manager' ),
					// Translators: Content suitability rating:
					// http://bit.ly/89QxZA
					'R'  => __( 'R &#8212; Intended for adult audiences above 17', 'avatar-manager' ),
					// Translators: Content suitability rating:
					// http://bit.ly/89QxZA
					'X'  => __( 'X &#8212; Even more mature than above', 'avatar-manager' )
				);

				foreach ( $ratings as $key => $rating ) {
					?>
					<label>
						<input <?php checked( $custom_avatar_rating, $key, true ); ?> name="avatar_manager_custom_avatar_rating" type="radio" value="<?php echo esc_attr( $key ); ?>">
						<?php echo $rating; ?>
					</label>
					<br>
					<?php
				}
				?>
				<span class="description">
					<?php _e( 'Choose a rating for your custom avatar.', 'avatar-manager' ); ?>
				</span><!-- .description -->
			</fieldset>
		</td>
	</tr>
<?php endif; ?>

Permite al usuario elegir una calificación adecuada para la imagen de avatar personalizada que se esté utilizando.

Paso 8. Añadir scripts y estilos

Ahora que hemos añadido la sección Avatar, es hora de aplicarle estilo. Además, escribiremos algunos JS para cambiar la codificación del formulario; este paso es necesario porque le hemos añadido un control de carga de archivos.

El estilo CSS

Para dar estilo a nuestro plugin, abre avatar-manager/avatar-manager.css y escribe las siguientes líneas:

#profile-page .avatar-manager img {
	margin: 2px 0;
	vertical-align: middle;
}

#profile-page .avatar-manager .delete {
	color: red;
	padding: 2px;
}

#profile-page .avatar-manager .delete:hover {
	background: red;
	color: #fff;
	text-decoration: none;
}

Esto alinea verticalmente una imagen de avatar con una caja de radio y aplica estilos al enlace Eliminar en consecuencia para una integración perfecta con la interfaz nativa de WordPress.

El script JS

A continuación, abre avatar-manager/avatar-manager.js y añade el siguiente código:

1	jQuery( document ).ready( function() {
2	jQuery( '#your-profile' ).attr( 'enctype', 'multipart/form-data' );
3	} );

La función .attr() establece el valor de uno o más atributos para cada elemento coincidente. El atributo enctype especifica cómo se deben codificar los datos de formulario al enviarlos al servidor. Necesitamos cambiar su valor a multipart/form-data para permitir la carga de archivos.

Paso 9. Encolar los guiones y los estilos

El método seguro y recomendado de añadir scripts y estilos a una página generada por WordPress consiste en usar wp_enqueue_script() y wp_enqueue_style(). Estas funciones incluyen los scripts y los estilos si aún no han sido incluidos, y controlan de forma segura las dependencias.

/**
 * Enqueues plugin scripts and styles for Users Your Profile Screen.
 *
 * @uses wp_register_style() For registering a CSS style file.
 * @uses wp_enqueue_style() For enqueuing a CSS style file.
 * @uses wp_register_script() For registering a JS script file.
 * @uses wp_enqueue_script() For enqueuing a JS script file.
 *
 * @since Avatar Manager 1.0.0
 */
function avatar_manager_admin_enqueue_scripts() {
	global $hook_suffix;

	if ( $hook_suffix == 'profile.php' || $hook_suffix == 'user-edit.php' ) {
		// Registers plugin CSS style file.
		wp_register_style( 'avatar-manager.css', AVATAR_MANAGER_PLUGIN_URL . 'avatar-manager.css', array(), '1.0.0' );

		// Enqueues plugin CSS style file.
		wp_enqueue_style( 'avatar-manager.css' );

		// Registers plugin JS script file.
		wp_register_script( 'avatar-manager.js', AVATAR_MANAGER_PLUGIN_URL . 'avatar-manager.js', array( 'jquery' ), '1.0.0' );

		// Enqueues plugin JS script file.
		wp_enqueue_script( 'avatar-manager.js' );
	}
}

add_action( 'admin_enqueue_scripts', 'avatar_manager_admin_enqueue_scripts' );

La acción admin_enqueue_scripts es la primera acción enganchada a las acciones de scripts de administración. A continuación, se utiliza la variable global $hook_suffix para añadir nuestros scripts y estilos únicamente en las páginas necesarias. Antes de poner en cola un script o estilo, primero tenemos que registrarlo. La función wp_register_style() es una forma segura de registrar un archivo de estilo CSS para su posterior uso; la función wp_enqueue_style() se utiliza para ponerlo en cola. Del mismo modo, las funciones wp_register_script() y wp_enqueue_script() se utilizan para registrar y poner en cola nuestro archivo script JS del plugin.

Después de este paso deberías ser capaz de localizar las opciones del plugin dentro de la pantalla de usuario Tu perfil.

Las opciones del plugin Avatar Manager en la pantalla de usuario Tu perfil

La primera opción te permite elegir entre usar Gravatar o una imagen de avatar autoalojada. El segundo campo te permite navegar y cargar una imagen de avatar personalizada. La opción Clasificación de avatares solo aparece cuando hay un avatar personalizado disponible. Pero más adelante veremos más sobre esto, cuando manejaremos las cargas de avatares.

Qué viene a continuación

Esto completa la primera parte de nuestro tutorial. Espero que hayas disfrutado del tiempo que hemos pasado juntos y que te haya parecido útil. En la siguiente parte vamos a terminar el plugin Avatar Manager; gestionaremos las cargas de avatares y la generación de imágenes bajo demanda, Internacionalizaremos nuestro plugin y mucho más. ¡Gracias por leerme!

Referencias

WordPress Coding Standards: Estándares de código de WordPress, información general sobre los estándares de codificación para el desarrollo de WordPress.
Writing a Plugin: Escribir un plugin, el mejor punto de partida para aprender sobre el desarrollo de plugins para WordPress.
API de plugins: Descripción de cómo utilizar enlaces de acción y filtro en tu plugin WordPress, y funciones principales que los plugins pueden invalidar.
API de ajustes: Una referencia con ejemplos para añadir nuevos ajustes a las pantallas de configuración existentes.
Function Reference: Referencia de función, un artículo con muchas de las funciones principales de WordPress útiles para los desarrolladores de plugins y temas; enumera la mayoría de las funciones principales, excluyendo las etiquetas de plantilla.
SemVer: Especificación del control de versiones semántico (SemVer).
GPLv2: Licencia Pública General GNU, versión 2.

Enlaces externos

Avatar Manager en el directorio de plugins de WordPress: Inicio oficial para el plugin Avatar Manager.
Avatar Manager en GitHub: Código fuente del plugin Avatar Manager.