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 la funcionalidad y el código optimizado. Cada vez que los usuarios activan un tema o complemento y luchan por encontrar su 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 eso, ¿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. Punteros de administrador
  2. Avisos de administración
  3. Ayuda contextual
  4. Vínculos de la barra de administración
  5. Acción de complemento y metavínculos

Punteros de administrador

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. Todavía, Si hay algo que absolutamente debe 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. A continuación, se muestra un desglose rápido de cómo funcionan los punteros, seguido de una ejemplo que agrega un puntero al lado del menú Configuración.

  • Un tema o complemento puede registrar nuevos punteros, asignando un ID único a cada uno
  • Los punteros se muestran a los usuarios hasta que hacen clic en el enlace “Descartar”.
  • Cuando eso sucede, el identificador de puntero se agrega a la meta clave del usuario despedido_wp_pointers y el puntero ya no se muestra

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  = "

Stop looking for it, it is right here!

"; $pointer_content .= "

If you ever activated a plugin, then had no idea where its settings page is, raise your hand.

"; ?>

Lo que resultará en algo como esto:

Puntero de administrador de WordPress

Esto fue solo uno simple, si desea obtener más información sobre los punteros de administrador de WordPress, consulte este artículo sobre Integración con la interfaz de usuario de WordPress: Punteros de administrador.

Avisos de administración

Si los indicadores de administrador fueran un tipo con un gran letrero de flecha frente a una tienda, los avisos de administrador serían ese mismo tipo repartiendo folletos en una ubicación remota. No exactamente arrastrándote, pero aún llamando la atención. Por supuesto, no desea mostrar avisos todo el tiempo, por lo que debe hacerlos descartables o colocarlos dentro de una función condicional. He aquí un ejemplo:

Avisos de administración 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 '

This is an "updated" notice.

'; } // 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 '

This is an "error" notice. Dismiss.

'; } } add_action( 'admin_notices', 'thsp_admin_notices' );

El primer aviso en este ejemplo solo se mostrará en la página Configuración general. El segundo solo se muestra a los usuarios que no lo han descartado. Como puede ver, comprueba el metacampo del usuario ignore_sample_error_notice del usuario actual y solo se muestra si ese campo está vacío. Entonces, ¿cómo agregamos el metacampo de usuario cuando hacen clic en “Descartar”? 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' );

Nos estamos conectando a la acción admin_init y comprobando si se ha establecido el parámetro GET de despedir_me. Dado que el atributo href para nuestro enlace “Descartar” es? Dismiss_me = yes una vez que un usuario hace clic en él, se agrega el metacampo del usuario y es un aviso de despedida.

Ayuda contextual

Ayuda contextual de WordPress

Imagine un mundo en el que cualquier documentación que necesite está al alcance de su mano, exactamente y solo cuando la necesita. Ahora hagámoslo realidad.

La ayuda contextual no solo lo hace posible, sino también muy fácil. Registremos 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 queda fuera del alcance de esta publicación de blog. Si necesita aprender sobre las páginas de configuración de WordPress, Tom McFarlin de Wptuts + lo tiene cubierto. De todos modos, el fragmento de código que realmente queremos analizar más a fondo es este:

// 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 la función add_help_tab para agregar pestañas de ayuda contextual. Observe cómo el gancho usado en add_action tiene una variable – ‘load-‘. $ thsp_settings_page? Esto asegura que la función thsp_add_help_tabs solo se enganche 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'	=> __( '
				

Yeah, you can even embed videos, nice!

https://www.youtube.com/watch?v=RBA-lH2a6E8 ', 'thsp_contextual_help' ), ) ); $screen->add_help_tab( array( 'id' => 'thsp_second_tab', 'title' => __( 'Second tab', 'thsp_contextual_help' ), 'content' => __( '

I'm just a second tab that no one will ever click.

', 'thsp_contextual_help' ), ) ); // Set help sidebar $screen->set_help_sidebar( ' ' ); } }

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 la 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 simple.

Si hay alguna desventaja de 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 registrados que navegan por el front-end de sus sitios. Proporcionan acceso con un clic a las funciones más importantes del panel y si cree que su tema o complemento merece un lugar en la barra de administración de WordPress, así de fácil es 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' );

Estamos usando el gancho de acción wp_before_admin_bar_render 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 de él (Nivel superior, Submenú) y elimina un enlace de nivel superior existente (Comentarios).

Acción del complemento de WordPress y metavínculos

La pantalla de complementos del tablero muestra una lista de todos los complementos instalados. Puede ver el nombre, la descripción, la versión, los enlaces al autor y el sitio web del complemento y los enlaces de acción de cada complemento, una combinación de Activar, Desactivar, Editar, Eliminar, dependiendo de si el complemento está activado o no.

Para algunos complementos, eso es lo suficientemente 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 tan simple como esto:

/**
 * 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' => '' . __( 'Settings', 'ts-fab' ) . ''
		),
		$links
	);

}

Debe agregar este código al archivo principal de su complemento (plugin-name.php) para que se pueda usar el enlace adecuado. Por ejemplo, si el archivo principal de su complemento realmente es 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 filas 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, se está procesando una matriz de enlaces existentes y enlaces de complementos actuales 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( 'Follow us on Twitter' )
		);
	}
	return $links;
}

Depende de usted seleccionar qué enlaces mostrar dónde, por lo que si nunca antes se ocupó de la acción del complemento y los metavínculos, verifique la lista de sus complementos instalados para ver cómo lo están haciendo otros desarrolladores.

Conclusión

Un poco de planificación inteligente, sentido común y la funcionalidad incorporada de WordPress pueden ayudarte mucho, pero como con todo lo demás en la vida, la moderación es clave. Demasiados punteros de administrador o enlaces a la barra de administración pueden resultar frustrantes.

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

¿Tienes otras técnicas que te gustaría compartir?