Alguns dias atrás, me pediram para criar um painel personalizado do WordPress para substituir o original. Não estava apenas exibindo ou ocultando metaboxes já personalizadas, estava substituindo todo o painel. Esta foi a primeira vez que me pediram para fazer algo assim, então foi bem desafiador. Como sempre, neste caso, procurei na internet para ver se algo semelhante já havia sido feito. e mais uma vez, nenhum resultado. Não sei se sou ruim em perguntar coisas específicas ao Google, ou se a maioria dos tutoriais do WordPress tratam dos mesmos assuntos, mas não encontrei nada.
Então, eu lembro que desde o WordPress 3.x, há uma nova página assim que entramos pela primeira vez após uma atualização. Isso é mais ou menos o que eu queria fazer.
Depois de uma pesquisa rápida nos arquivos principais do WordPress, encontrei coisas realmente ótimas. E por fim, consegui criar um painel totalmente personalizado no estilo WordPress. Para isso, mais uma vez criei um plugin.
Passo 1: a criação do plugin
Se você leu meus posts anteriores no WPexplorer, agora deve saber como criar um plugin, mas aqui está um lembrete.
Abra a pasta plugins em wp-content e crie um novo repositório chamado «sweet-custom-dashboard», e dentro desta pasta crie um novo arquivo chamado «sweet-custom-dashboard.php». Em seguida, abra o arquivo.
Para declarar o plugin, basta adicionar este código ao arquivo:
<?php
/*
Plugin Name: Sweet Custom Dashboard
Plugin URL: http://remicorson.com/sweet-custom-dashboard Description: A nice plugin to create your custom dashboard page
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com Contributors: corsonr
Text Domain: rc_scd
*/
Somente adicionando este código, você já criou um plugin, um plugin vazio, mas um plugin funcionando!
Agora, precisamos definir uma constante para a URL do plugin, que precisaremos mais tarde. Adicione este código:
/*
|————————————————————————–
| CONSTANTS
|————————————————————————–
*/
// plugin folder url
if(!defined(‘RC_SCD_PLUGIN_URL’)) {
define(‘RC_SCD_PLUGIN_URL’, plugin_dir_url( __FILE__ ));
}
Agora é hora de criar a classe principal do nosso plugin:
/*
|————————————————————————–
| MAIN CLASS
|————————————————————————–
*/
class rc_sweet_custom_dashboard {
/*——————————————–*
* Constructor
*——————————————–*/
/**
* Initializes the plugin
*/
function __construct() {
} // end constructor
}
// instantiate plugin’s class
$GLOBALS[‘sweet_custom_dashboard’] = new rc_sweet_custom_dashboard();
Etapa 2: o construtor
Na etapa dois, precisamos adicionar uma ação que ocorrerá apenas se o usuário estiver na página do painel. Para fazer isso, substitua a função constructore por este código:
function __construct() {
add_action(‘admin_menu’, array( &$this,’rc_scd_register_menu’) );
add_action(‘load-index.php’, array( &$this,’rc_scd_redirect_dashboard’) );
} // end constructor
Ao adicionar este código, estamos dizendo ao WordPress que queremos carregar a função rc_get_screen() quando index.php for carregado (index.php é a página do painel). Também estamos dizendo ao WordPress para registrar uma nova página do painel. O que usaremos no redirecionamento. O próximo passo é a construção da função rc_redirect_dashboard().
Etapa 3: o redirecionamento do painel
A função rc_redirect_dashboard() é bem simples. Seu objetivo é redirecionar o usuário para uma página personalizada quando ele quiser acessar o painel padrão. Para fazer isso, temos que verificar se estamos na tela certa (leia «página») usando a função get_current_screen(). Quando esta função é chamada do gancho ‘admin_init’ ela retorna NULL, é em parte por isso que eu liguei o rc_dashboard_redirection() para «load-index.php». Aqui está o conteúdo da função:
function rc_scd_redirect_dashboard() {
if( is_admin() ) {
$screen = get_current_screen();
if( $screen->base == ‘dashboard’ ) {
wp_redirect( admin_url( ‘index.php?page=custom-dashboard’ ) );
}
}
}
Este código é bastante compreensível, se estivermos no admin, e se a tela atual for «dashboard» então forçamos um redirecionamento para um arquivo chamado «custom_dashboard.php».
Registrando a página do painel
Agora é hora de registrar a nova página do painel. Para fazer isso, precisamos adicionar duas funções: uma para registrar a página no menu do WordPress e outra para preencher a página de conteúdo:
function rc_scd_register_menu() {
add_dashboard_page( ‘Custom Dashboard’, ‘Custom Dashboard’, ‘read’, ‘custom-dashboard’, array( &$this,’rc_scd_create_dashboard’) );
}
function rc_scd_create_dashboard() {
include_once( ‘custom_dashboard.php’ );
}
Se você salvou o arquivo, ative o plugin e tente acessar o painel, você deverá ver uma página em branco ou uma mensagem 404. Podemos criar nosso painel personalizado.
Etapa 4: a criação do painel personalizado
Quando criei este plugin, queria que o novo painel estivesse no estilo WordPress, por isso meu ponto de partida foi a página que você vê quando faz login pela primeira vez após uma atualização do núcleo. Percorri o código desta página para encontrar inspiração.
Para começar, crie um novo arquivo chamado «custom_dashboard.php» em sua pasta sweet-custom-dashboard. Abra-o e adicione este código:
<?php
/**
* Our custom dashboard page
*/
/** WordPress Administration Bootstrap */
require_once( ABSPATH . ‘wp-load.php’ );
require_once( ABSPATH . ‘wp-admin/admin.php’ );
require_once( ABSPATH . ‘wp-admin/admin-header.php’ );
?>
A primeira função require_once() carrega o WordPress, adicionando esta linha simples, agora você pode usar qualquer variável do WordPress ou qualquer função.
As outras duas cargas require_once() precisavam ser arquivadas para exibir corretamente a administração.
Tudo o que precisamos agora é criar o conteúdo do nosso painel personalizado. O código abaixo é inspirado no arquivo mencionado anteriormente, por isso talvez você precise ajustá-lo um pouco para atender às suas necessidades. No meu exemplo eu só quero um menu com 3 links que serão exibidos como abas, e dois parágrafos, uma vez incluindo uma imagem. Aqui está o código:
<div class=”wrap about-wrap”>
<h1><?php _e( ‘Welcome to My Custom Dashboard Page’ ); ?></h1>
<div class=”about-text”>
<?php _e(‘Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.’ ); ?>
</div>
<h2 class=”nav-tab-wrapper”>
<a href=”#” class=”nav-tab nav-tab-active”>
<?php _e( ‘Step 1’ ); ?>
</a><a href=”#” class=”nav-tab”>
<?php _e( ‘Step 2’ ); ?>
</a><a href=”#” class=”nav-tab”>
<?php _e( ‘Step 3’ ); ?>
</a>
</h2>
<div class=”changelog”>
<h3><?php _e( ‘Morbi leo risus, porta ac consectetur’ ); ?></h3>
<div class=”feature-section images-stagger-right”>
<img src=”<?php echo esc_url( admin_url( ‘images/screenshots/theme-customizer.png’ ) ); ?>” class=”image-50″ />
<h4><?php _e( ‘Risus Consectetur Elit Sollicitudin’ ); ?></h4>
<p><?php _e( ‘Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.’ ); ?></p>
<h4><?php _e( ‘Mattis Justo Purus’ ); ?></h4>
<p><?php _e( ‘Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.’ ); ?></p>
</div>
</div>
</div>
Nada realmente interessante neste código, é apenas código HTML.
E, finalmente, temos que carregar o rodapé de administração do WordPress. Para fazer isso, basta esta linha na parte inferior do arquivo:
<?php include( ABSPATH . ‘wp-admin/admin-footer.php’ );
E é isso ! O plug-in agora está funcionando muito bem, é claro que há muitas maneiras de torná-lo melhor, por exemplo, você pode adicionar folhas de estilo personalizadas e arquivos javascript personalizados ou adicionar alguma verificação extra para exibir o painel personalizado apenas para algumas funções de usuário…
Bem, espero que tenham gostado deste tutorial, e estou ansioso para ler seus comentários na seção de comentários!
Mais uma coisa, existe uma versão já compilada do plugin no repositório oficial de plugins do WordPress . Clique aqui para fazer o download.
