WordPress admin pointer

Cómo hacer que los temas y complementos de WordPress sean más utilizables

La creación de un gran tema o complemento de WordPress se trata tanto de facilitar su uso como de funcionalidad y código optimizado. Cada vez que los usuarios activan un tema o complemento y tienen dificultades para encontrar el camino hacia y alrededor de su configuración, en algún lugar del mundo, un gatito sufre. Sería bueno si pusiéramos fin a esto, ¿verdad?

Afortunadamente, todo lo que necesita hacer para que sus complementos y temas sean más utilizables es aprovechar la funcionalidad incorporada de WordPress. “Reinventar la rueda” no está en la lista de habilidades requeridas para esto. Echemos un vistazo a algunas técnicas que ayudarán a los usuarios a orientarse y eliminar la frustración de usar sus complementos y temas.

  1. Consejos de administración
  2. Aviso de administración
  3. Ayuda contextual
  4. Vínculos de la barra de administración
  5. Acción de complemento y metavínculos

Consejos de administración

Introducidos en WordPress 3.3, los punteros de administración de WordPress son la forma más agresiva de captar la atención de los usuarios, así que no te vuelvas loco con los punteros. Otra vez, Si hay algo que absolutamente necesita decirle a las personas que acaban de instalar / actualizar su tema o complemento, los consejos de administración de WordPress son el camino a seguir.

Son muy fáciles de usar pero están mal documentados en el sitio web de WordPress Codex. Aquí hay una breve descripción de cómo funcionan los punteros, seguida de una ejemplo que agrega un puntero al lado del menú Configuración.

  • Un tema o un complemento puede registrar nuevos punteros, asignando un identificador único a cada
  • Los punteros se presentan a los usuarios hasta que hacen clic en el enlace “Omitir”.
  • Cuando esto sucede, la ID del puntero se agrega al usuario dismissed_wp_pointers la tecla meta y el puntero ya no se muestran

Y el ejemplo, como prometí:

/**
 * Adds a simple WordPress pointer to Settings menu
 */
 
function thsp_enqueue_pointer_script_style( $hook_suffix ) {
	
	// Assume pointer shouldn't be shown
	$enqueue_pointer_script_style = false;

	// Get array list of dismissed pointers for current user and convert it to array
	$dismissed_pointers = explode( ',', get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );

	// Check if our pointer is not among dismissed ones
	if( !in_array( 'thsp_settings_pointer', $dismissed_pointers ) ) {
		$enqueue_pointer_script_style = true;
		
		// Add footer scripts using callback function
		add_action( 'admin_print_footer_scripts', 'thsp_pointer_print_scripts' );
	}

	// Enqueue pointer CSS and JS files, if needed
	if( $enqueue_pointer_script_style ) {
		wp_enqueue_style( 'wp-pointer' );
		wp_enqueue_script( 'wp-pointer' );
	}
	
}
add_action( 'admin_enqueue_scripts', 'thsp_enqueue_pointer_script_style' );

function thsp_pointer_print_scripts() {

	$pointer_content  = "<h3>Stop looking for it, it is right here!</h3>";
	$pointer_content .= "<p>If you ever activated a plugin, then had no idea where its settings page is, raise your hand.</p>"; ?>
	
	<script type="text/javascript">
	//<![CDATA[
	jQuery(document).ready( function($) {
		$('#menu-settings').pointer({
			content:		'<?php echo $pointer_content; ?>',
			position:		{
								edge:	'left', // arrow direction
								align:	'center' // vertical alignment
							},
			pointerWidth:	350,
			close:			function() {
								$.post( ajaxurl, {
										pointer: 'thsp_settings_pointer', // pointer ID
										action: 'dismiss-wp-pointer'
								});
							}
		}).pointer('open');
	});
	//]]>
	</script>

<?php
} ?>

Lo que resultará en algo como esto:

Puntero de administrador de WordPress

Era simple, si desea saber más sobre los punteros de administración de WordPress, consulte este artículo en Integración con la interfaz de usuario de WordPress: consejos de administración.

Aviso del administrador

Si los indicadores administrativos fueran un tipo que sostiene una gran flecha frente a una tienda, los avisos administrativos serían el mismo tipo que reparte volantes en un lugar remoto. No es exactamente un entrenamiento, pero sigue llamando la atención. Claro, no desea mostrar reseñas todo el tiempo, por lo que debe hacerlas anulables o ponerlas en una función condicional. Aquí un ejemplo:

Aviso de administrador de WordPress

/**
 * Add admin notices
 */
function thsp_admin_notices() {
	global $current_user;
	$userid = $current_user->ID;
	global $pagenow;
	
	// This notice will only be shown in General Settings page
	if ( $pagenow == 'options-general.php' ) {
		echo '<div class="updated">
			<p>This is an "updated" notice.</p>
		</div>';
	}
	
	// Only show this notice if user hasn't already dismissed it
	// Take a good look at "Dismiss" link href attribute
	if ( !get_user_meta( $userid, 'ignore_sample_error_notice' ) ) {
		echo '<div class="error">
			<p>This is an "error" notice. <a href="?dismiss_me=yes">Dismiss</a>.</p>
		</div>';
	}
}
add_action( 'admin_notices', 'thsp_admin_notices' );

El primer aviso de este ejemplo solo se mostrará en la página Configuración general. El segundo solo se muestra a los usuarios que no lo han ignorado. Como puede ver, verifica el metacampo de usuario ignore_sample_error_notice del usuario actual y solo muestra si ese campo está vacío. Entonces, ¿cómo se agrega un metacampo de usuario cuando hacen clic en “ignorar”? Fácil:

/**
 * Add user meta value when Dismiss link is clicked
 */

function thsp_dismiss_admin_notice() {
	global $current_user;
	$userid = $current_user->ID;
	
	// If "Dismiss" link has been clicked, user meta field is added
	if ( isset( $_GET['dismiss_me'] ) && 'yes' == $_GET['dismiss_me'] ) {
		add_user_meta( $userid, 'ignore_sample_error_notice', 'yes', true );
	}
}
add_action( 'admin_init', 'thsp_dismiss_admin_notice' );

Nosotros aguantamos admin_init acción y comprobar si dismiss_me Se ha definido el parámetro GET. Dado que el atributo href de nuestro enlace “Ignorar” es ?dismiss_me=yes una vez que un usuario hace clic en él, se agrega un metacampo de usuario y es un aviso de despedida.

Ayuda contextual

Ayuda contextual de WordPress

Imagine un mundo en el que toda la documentación que necesita está a su alcance, exactamente y solo cuando la necesita. Ahora hagamos que eso suceda.

La ayuda contextual hace que esto no solo sea posible, sino también muy fácil. Guardemos una página de configuración para nuestro complemento para que podamos agregarle ayuda contextual.

/**
 * Add settings page, under Settings menu
 */
 
function thsp_add_settings_page() {

	global $thsp_settings_page;

	$thsp_settings_page = add_options_page(
		'Our Settings Page',
		'Our Settings Page',
		'manage_options',
		'thsp_settings_page',
		'thsp_show_settings_page'
	);

	// Check if WP version is 3.3 or higher, add contextual help
	global $wp_version;
	if ( version_compare( $wp_version, '3.3') >= 0 ) {
		add_action( 'load-' . $thsp_settings_page, 'thsp_add_help_tabs' );
	}

}
add_action( 'admin_menu', 'thsp_add_settings_page' );

No nos ocuparemos de la función de devolución de llamada de la página de configuración. thsp_show_settings_page, ya que está fuera del alcance de esta publicación de blog. Si necesita saber más sobre Páginas de configuración de WordPress de Wptuts + Tom McFarlin lo tiene cubierto. De todos modos, el fragmento de código en el que realmente queremos profundizar es el siguiente:

// Check if WP version is 3.3 or higher, add contextual help
global $wp_version;
if ( version_compare( $wp_version, '3.3') >= 0 ) {
	add_action( 'load-' . $thsp_settings_page, 'thsp_add_help_tabs' );
}

Se requiere WordPress 3.3 o superior, ya que usaremos función add_help_tab para agregar pestañas de ayuda sensibles al contexto. Observe cómo el gancho utilizado en add_action contiene una variable: 'load-' . $thsp_settings_page? Esto garantiza thsp_add_help_tabs La función solo está enganchada en la página de configuración que acabamos de registrar. Brillante.

Ahora aquí está la función que agrega pestañas de ayuda:

/**
 * Callback function for contextual help, requires WP 3.3
 */
 
function thsp_add_help_tabs () {

	global $wp_version;
	if ( version_compare( $wp_version, '3.3') >= 0 ) {
	
		global $thsp_settings_page;

		$screen = get_current_screen();

		
		// Check if current screen is settings page we registered
		// Don't add help tab if it's not
		if ( $screen->id != $thsp_settings_page )
			return;

		// Add help tabs
		$screen->add_help_tab( array(
			'id'	=> 'thsp_first_tab',
			'title'	=> __( 'First tab', 'thsp_contextual_help' ),
			'content'	=> __( '
				<p>Yeah, you can even embed videos, nice!</p>
				<iframe width="560" height="315" src="https://www.youtube.com/embed/RBA-lH2a6E8" frameborder="0" allowfullscreen></iframe>
				', 'thsp_contextual_help'
			),
		) );

		$screen->add_help_tab( array(
			'id'	=> 'thsp_second_tab',
			'title'	=> __( 'Second tab', 'thsp_contextual_help' ),
			'content'	=> __( '
				<p>I'm just a second tab that no one will ever click.</p>
				', 'thsp_contextual_help'
			),
		) );

		// Set help sidebar
		$screen->set_help_sidebar(
			'
			<ul>
				<li><a href="http://thematosoup.com">' . __( 'Our website', 'ts-fab' ) . '</a></li>
				<li><a href="http://twitter.com/#!/thematosoup">Twitter</a></li>
				<li><a href="http://www.facebook.com/ThematoSoup">Facebook</a></li>
				<li><a href="http://plus.google.com/104360438826479763912">Google+</a></li>
				<li><a href="http://www.linkedin.com/company/thematosoup">LinkedIn</a></li>
			</ul>
			'
		);

	}

}

Solo necesitamos verificar si la versión de WordPress es 3.3 o superior, asegurarnos de que estamos en la página correcta y agregar una pestaña de ayuda usando la función add_help_tab y la barra lateral de ayuda usando set_help_sidebar. Todo lo demás es HTML puro.

Si hay desventajas en la ayuda contextual, es que la mayoría de los usuarios de WordPress ni siquiera lo saben (opciones de pantalla también). Entonces, ¿tal vez un puntero, para asegurarse de que no se lo pierdan?

Vínculos de la barra de administración de WordPress

Estos son muy útiles, especialmente para los usuarios que han iniciado sesión y que navegan por la interfaz de sus sitios. Proporcionan acceso con un clic a las funciones más importantes del tablero y si cree que su tema o complemento merece un lugar en la barra de administración de WordPress, así es como es fácil hacerlo:

/**
 * Admin bar customization
 */

function thsp_admin_bar_links() {

	global $wp_admin_bar;
	
	// Adds a new submenu to an existing to level admin bar link
	$wp_admin_bar->add_menu( array(
		'parent'	=> 'new-content',
		'id'		=> 'install_plugin',
		'title'		=> __( 'Plugin', 'thsp_admin_bar' ),
		'href'		=> admin_url( 'plugin-install.php' )
	) );

	// Adds a new top level admin bar link and a submenu to it
	$wp_admin_bar->add_menu( array(
		'parent'	=> false,
		'id'		=> 'custom_top_level',
		'title'		=> __( 'Top Level', 'thsp_admin_bar' ),
		'href'		=> '#'
	) );
	$wp_admin_bar->add_menu( array(
		'parent'	=> 'custom_top_level',
		'id'		=> 'custom_sub_menu',
		'title'		=> __( 'Sub Menu', 'thsp_admin_bar' ),
		'href'		=> '#'
	) );

	// Removes an existing top level admin bar link
	$wp_admin_bar->remove_menu( 'comments' );
	
}
add_action( 'wp_before_admin_bar_render', 'thsp_admin_bar_links' );

Utilizamos wp_before_admin_bar_render gancho de acción para modificar el objeto $ wp_admin_bar antes de que se procese. El ejemplo anterior agrega un submenú a un enlace de nivel superior existente (Nuevo), un nuevo enlace de nivel superior con otro enlace anidado dentro (Nivel superior, Submenú) y elimina un enlace del nivel superior existente (Comentarios).

Acción del complemento de WordPress y meta enlaces

La pantalla Complementos del panel muestra una lista de todos los complementos instalados. Puede ver el nombre del complemento, la descripción, la versión, el autor y los vínculos del sitio web y los vínculos de acción para cada complemento: una combinación de habilitar, deshabilitar, editar, eliminar, dependiendo de si el complemento está activado o no.

Para algunos complementos, esto es bastante bueno. Pero Si su complemento tiene una página de configuración, me gustaría escuchar una buena razón para no agregarle un enlace de acción., especialmente si es así de simple:

/**
 * Add action links in Plugins table
 */
 
add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), 'thsp_plugin_action_links' );
function thsp_plugin_action_links( $links ) {

	return array_merge(
		array(
			'settings' => '<a href="' . admin_url( 'tools.php?page=our-settings-page.php' ) . '">' . __( 'Settings', 'ts-fab' ) . '</a>'
		),
		$links
	);

}

Debe agregar este código al archivo principal de su complemento (plugin-name.php) para que se pueda usar el gancho correcto. Por ejemplo, si el archivo principal de su complemento es realmente plugin-name.php, se utilizará el enlace de filtro ‘plugin_action_links_plugin-name’, asegurándose de que los enlaces de acción se agreguen solo para su complemento. Otro de esos momentos mágicos de WordPress.

Los metavínculos de las líneas de complementos son ligeramente diferentes. El nombre del gancho no es dinámico, por lo que debe pasar dos argumentos a su función personalizada, una matriz de enlaces existentes y los enlaces de complementos actuales se están procesando para:

/**
 * Add meta links in Plugins table
 */
 
add_filter( 'plugin_row_meta', 'thsp_plugin_meta_links', 10, 2 );
function thsp_plugin_meta_links( $links, $file ) {

	$plugin = plugin_basename(__FILE__);
	
	// create link
	if ( $file == $plugin ) {
		return array_merge(
			$links,
			array( '<a href="http://twitter.com/thematosoup">Follow us on Twitter</a>' )
		);
	}
	return $links;
}

Depende de usted seleccionar los enlaces para mostrar dónde, por lo que si nunca antes se ha ocupado de la acción del complemento y los metavínculos, consulte su lista de complementos instalados para ver cómo les va a otros desarrolladores.

Conclusión

La planificación inteligente, el sentido común y las funciones integradas de WordPress pueden ayudar, pero como con todo en la vida, la moderación es clave. Demasiados punteros de administración o enlaces innecesarios a la barra de administración pueden resultar frustrantes.

No es necesario ser un experto en usabilidad para crear productos WordPress utilizables.

¿Tiene otras técnicas que le gustaría compartir?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba