Whitelabel: guia completo para personalizar o painel administrativo do WordPress

Quando desenvolvemos um site usando WordPress, temos em mente que o site terá atualizações, sejam elas frequentes ou não. O painel administrativo torna estas alterações um trabalho mais fácil de ser realizado. Em diversos momentos, o próprio cliente pode querer fazer as alterações que forem necessárias no conteúdo, diretamente no painel.

Quando o cliente tem acesso ao painel, pode ser interessante personalizar a interface de modo que itens e funcionalidades que não sejam necessárias possam ser ocultas para o usuário — o que garante certa segurança — e que sua marca (logotipo, cores etc) seja exposta neste espaço.

Há algumas técnicas que podem ser facilmente aplicadas, além de plugins de fácil configuração que permitem fazer essa personalização do painel. Nesse post veremos como deixar o painel de administração do WordPress (também conhecido como dashboard)com a sua cara.

Página de login

wordpress-login

Uma das áreas que deve receber atenção especial quando vamos inserir nossa marca pelo WordPress é a página de login. Lembre-se: todo acesso ao painel passa por ela. Seguem algumas dicas para personalizá-la:

Trocando o logotipo

login-bloglite

Por padrão, a página de login traz o icônico símbolo do WordPress. Substituir por seu logotipo é super simples, bastando adicionar o seguinte trecho de código ao functions.php do seu tema — alterando o endereço da imagem, claro:

add_action( 'login_enqueue_scripts', 'bloglite_login_logo' );
function bloglite_login_logo() { ?>
   <style type="text/css">
      .login h1 a {
         background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png);
         height: 60px;
         width: 234px;
      }
   </style>
<?php }

Note que a função acima nada mais é que a inclusão de um código CSS que altera os estilos pré-definidos referente à linha que gera o logotipo na página de login. Com isso, a imagem será substituída pelo logo.png que estará na pasta img, dentro da pasta do seu tema (lembrando que você pode alterar este endereço), utilizando as medidas 60×234 px, alterando o padrão de 80×80 px do ícone do WordPress.

Link do logotipo

Clicando no logotipo da página de login, você será direcionado ao site oficial do WordPress. É interessante alterar este link para que, quando clicado, seja aberta a página inicial de seu site. A seguinte função faz tal alteração:

add_filter( 'login_headerurl', 'bloglite_login_logo_link' );
function bloglite_login_logo_link() {
   return home_url();
}

Cores e estilos

customize-wordpress-login-page

Quer dar uma personalidade ainda maior para a página de login? É simples, você só precisa de um conhecimento básico de CSS para fazer as alterações que achar convenientes. Usando o seguinte trecho no functions.php definiremos um arquivo .css que criaremos em seguida para “rodar” na página de login:

add_action( 'login_enqueue_scripts', 'bloglite_login_css' );
function bloglite_login_css() {
    wp_enqueue_style( 'login-css', get_template_directory_uri() . '/css/login.css' );
}

Repare que apenas chamamos o arquivo login.css localizado na pasta css, dentro da pasta do tema, para a página de login. Neste arquivos poderemos personalizar todos os elementos que constroem a página. Os elementos disponíveis, de acordo com o Codex, são:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Reorganizando os menus

screenshot-1

Uma dica muito boa é deixar os itens do menu do painel administrativo. A boa organização influencia diretamente na performance do usuário para realizar atualizações no site. Para deixar sempre “na mão” os menus mais acessados, além de esconder ou renomear outros que talvez não seja interessante o usuário ver, é bem simples. Segue um plugin que auxilia muito nessa tarefa.

Admin Menu EditorUsando este plugin você será capaz de editar através de uma interface visual intuitiva todos os links do menu do WordPress. Reorganizar, renomear, criar novos menus, separadores e uma infinidade de personalizações. Basta instalar o plugin pelo próprio instalador do WordPress (Plugins > Adicionar Novo) ou fazer o download no repositório e enviar o conteúdo do arquivo para a pasta wp-content/plugins.

Texto de rodapé

Outra dica simples mas bem bacana é substituir o onipresente “Obrigado por criar com WordPress” do rodapé do painel por outro texto a sua escolha. Você pode adicionar um link para seu portfólio, para uma página de suporte técnico, ou um copyright. Adicione a função abaixo no functions.php do seu tema, substituindo o texto como desejar (é aceito tags HTML):

add_filter('admin_footer_text', 'bloglite_footer_admin_text');
function bloglite_footer_admin_text() {
   echo 'Criado por <a href="https://www.bloglite.net/">BlogLite</a>.';
}

Logotipo da barra superior

admin-logo

Mais uma alteração simples e que dará mais personalidade ao visual do painel. O código a seguir que deve ser inserido no functions.php substitui o pequeno símbolo do WordPress localizado na barra do topo. Lembre-se, pode ser necessário alterar o diretório para a imagem, dependendo do seu tema.

add_action('wp_before_admin_bar_render', 'bloglite_adminbar_logo', 0);
function bloglite_adminbar_logo() { ?>
   <style type="text/css">
      #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
         content: url('<?php echo get_stylesheet_directory_uri(); ?>/img/admin-logo.png') !important;
         top: 2px;
      }
      #wpadminbar #wp-admin-bar-wp-logo > a.ab-item {
         pointer-events: none;
         cursor: default;
      } 
   </style>
<?php }

Concluindo…

Todas as dicas mencionadas são simples, mas, como já foi dito, contribuem para uma melhor performance da utilização por parte do usuário quando, além de tornarem a experiência mais intuitiva e com o estilo visual da sua marca.

Há diversos plugins que podem fazer parte do trabalho de forma mais fácil, mas, se você gosta de se aventurar no código, recomendo tentar realizar as alterações manualmente. Como sempre, faça um backup para garantir que você possa recuperar o site sem maiores dores de cabeça se algo der errado!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *