Construir um ótimo tema ou plugin do WordPress é tanto torná-lo fácil de usar quanto funcionalidade e código otimizado. Toda vez que os usuários ativam um tema ou plugin e lutam para encontrar o caminho para suas configurações, em algum lugar do mundo um gatinho sofre. Seria bom se acabássemos com isso, certo?
Felizmente, tudo o que você precisa fazer para tornar seus plugins e temas mais úteis é aproveitar a funcionalidade integrada do WordPress. “Reinventar a roda” não está na lista de habilidades necessárias para isso. Vamos dar uma olhada em algumas técnicas que ajudarão os usuários a se orientar e eliminar a frustração de usar seus plugins e temas.
- Ponteiros de administrador
- Avisos do administrador
- Ajuda contextual
- Links da barra de administração
- Ação do plug-in e meta links
Ponteiros de administrador
Introduzidos no WordPress 3.3, os ponteiros de administração do WordPress são a maneira mais agressiva de atrair a atenção dos usuários, então não enlouqueça. Ainda assim, se houver algo que você absolutamente deve dizer às pessoas que acabaram de instalar/atualizar seu tema ou plugin, os ponteiros de administração do WordPress são o caminho a percorrer .
Eles são muito fáceis de usar, mas mal documentados no site WordPress Codex. Aqui está um rápido detalhamento de como os ponteiros funcionam, seguido por um exemplo que adiciona um ponteiro ao lado do menu Configurações .
- Um tema ou plugin pode registrar novos ponteiros, atribuindo um ID único a cada um
- Os ponteiros são mostrados aos usuários até que eles cliquem no link “Dispensar”
- Quando isso acontece, o ID do ponteiro é adicionado à dismissed_wp_pointersmeta-chave do usuário e o ponteiro não é mais exibido
E o exemplo, como prometido:
/**
* 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
} ?>
O que resultará em algo assim:
Este foi apenas um simples, se você quiser saber mais sobre os ponteiros de administração do WordPress, confira este artigo sobre Integração com a interface do usuário do WordPress: Ponteiros de administrador .
Avisos do administrador
Se os ponteiros do administrador fossem um cara segurando uma grande placa de seta na frente de uma loja, os avisos do administrador seriam esse mesmo cara distribuindo panfletos em um local remoto. Não exatamente arrastando você, mas ainda chamando a atenção. Claro, você não quer mostrar avisos o tempo todo, então você deve torná-los dispensáveis
/**
* 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’ );
O primeiro aviso neste exemplo será mostrado apenas na página Configurações gerais. O segundo é exibido apenas para usuários que não o dispensaram. Como você pode ver, ele verifica o meta-campo do usuário ignore_sample_error_notice do usuário atual e é exibido apenas se esse campo estiver vazio. Então, como adicionamos o metacampo do usuário quando eles clicam em “Dispensar”? 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’ );
Estamos entrando em admin_initação e verificando se dismiss_meo parâmetro GET foi definido. Como o atributo href para o nosso link “Dispensar” é ?dismiss_me=yesuma vez que o usuário clica nele, o meta-campo do usuário é adicionado e é um aviso de adeus.
Ajuda contextual
Imagine um mundo em que qualquer documentação que você precisa esteja ao seu alcance, exatamente e somente quando você precisar. Agora vamos fazer acontecer.
A ajuda contextual não apenas torna isso possível, mas também muito fácil. Vamos registrar uma página de configurações para nosso plugin para que possamos adicionar alguma ajuda contextual a ele.
/**
* 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’ );
Não estaremos lidando com a função de retorno de chamada da página de configurações – thsp_show_settings_page, pois ela está fora do escopo desta postagem do blog. Se você precisa aprender sobre as páginas de configurações do WordPress, Tom McFarlin, do Wptuts+, tem tudo para você. De qualquer forma, o pedaço de código que realmente queremos dar uma olhada mais profunda é 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’ );
}
O WordPress 3.3 ou superior é necessário, pois usaremos a função add_help_tab para adicionar guias de ajuda contextuais. Observe como o gancho usado em add_action tem uma variável nele – ‘load-‘ . $thsp_settings_page? Isso garante que thsp_add_help_tabsa função seja conectada apenas na página de configurações que acabamos de registrar. Brilhante.
Agora, aqui está a função que adiciona guias de ajuda:
/**
* 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=”http://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>
‘
);
}
}
Nós só precisamos verificar se a versão do WordPress é 3.3 ou superior, certifique-se de que estamos na página correta e adicione a guia de ajuda usando a função add_help_tab e a barra lateral de ajuda usando set_help_sidebar. Todo o resto é HTML simples.
Se houver alguma desvantagem na ajuda contextual, é que a maioria dos usuários do WordPress nem está ciente disso (Opções de tela também). Então, talvez um ponteiro, para garantir que eles não percam?
Links da barra de administração do WordPress
Estes são muito úteis, especialmente para usuários logados que navegam no front-end de seus sites. Eles fornecem acesso com um clique às funções mais importantes do painel e, se você acha que seu tema ou plugin merece um lugar na barra de administração do WordPress, veja como é fácil fazer isso:
/**
* 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 wp_before_admin_bar_rendero gancho de ação para modificar o objeto $wp_admin_bar antes que ele seja renderizado. O exemplo acima adiciona um submenu a um link de nível superior existente (Novo), um novo link de nível superior com outro link aninhado dentro dele (Nível superior, Submenu) e remove um link de nível superior existente (Comentários).
Ação de plug-in e links meta
A tela de plug-ins do painel mostra uma lista de todos os plug-ins instalados. Você pode ver o nome de cada plug-in, descrição, versão, links para o autor e site do plug-in e links de ação – uma combinação de Ativar, Desativar, Editar, Excluir, dependendo se o plug-in está ativado ou não.
Para alguns plugins isso é bom o suficiente. Mas se o seu plug-in tiver uma página de configurações, gostaria de ouvir um bom motivo para não adicionar um link de ação a ele , especialmente se for tão simples assim:
/**
* 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
);
}
Você deve adicionar este código ao arquivo principal do seu plugin (plugin-name.php) para que o hook apropriado possa ser usado. Por exemplo, se o arquivo principal do seu plugin realmente for plugin-name.php, o hook de filtro ‘plugin_action_links_plugin-name’ será usado, garantindo que os links de ação sejam adicionados apenas para o seu plugin. Mais um daqueles momentos mágicos do WordPress.
Os metalinks de linha de plug-in são ligeiramente diferentes. O nome do gancho não é dinâmico, portanto, você precisa passar dois argumentos para sua função personalizada, uma matriz de links existentes e os links de plug-in atuais estão sendo processados
/**
* 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;
}
Cabe a você selecionar quais links mostrar onde, portanto, se você nunca lidou com ações de plugins e meta links antes, verifique a lista de seus plugins instalados para ver como outros desenvolvedores estão fazendo isso.
Conclusão
Algum planejamento inteligente, bom senso e funcionalidade interna do WordPress podem levar você longe, mas, como em tudo na vida, a moderação é fundamental. Muitos ponteiros de administração desnecessários ou links da barra de administração podem ser frustrantes.
Você não precisa ser um especialista em usabilidade para criar produtos WordPress utilizáveis.
Tem alguma outra técnica que gostaria de compartilhar?
