Carros personalizados. Eles o levarão do ponto A ao B como qualquer outro automóvel. Eles são feitos dos mesmos materiais e queimam galões de gasolina como qualquer outro veículo motorizado. No entanto, nós (ou pelo menos os aficionados por carros entre nós) temos um profundo amor pelo carro feito sob medida. Por quê?
- Eles parecem muito melhores do que suas contrapartes diretamente da linha de montagem
- Eles são otimizados para melhor desempenho
O WordPress é um dos maiores veículos que você pode usar para realizar seus sonhos online. Ele vem com um ótimo painel e, pronto para uso, o WordPress ajudará você e/ou seus clientes a criar ótimos sites rapidamente.
Mas o painel de administração do WordPress é muito “mainstream” em termos de aparência e aparência. Quero dizer, embora seja bonito, não exala exatamente um estilo pessoal. É um pouco genérico e provavelmente não impressionará um cliente que já usou a plataforma antes. Caramba, não vai impressionar um cliente que aprecia estilo pessoal ou alguma semelhança de marca.
Por outro lado, os painéis personalizados do WordPress são pessoais e fornecerão aos seus clientes o fator adicional de bem-estar que os mantém ansiando por mais. Você pode construir sua marca ou ajustar o painel do WordPress às
- Elimine widgets e menus desnecessários para criar um painel personalizado mais limpo e leve
- Personalizar o link do rodapé do painel
- Livre-se de elementos genéricos, como o logotipo do WordPress
- Opções de toque na tela
- Toque em alguns plugins que você pode usar para personalizar seu painel
Ao final deste post, você deverá ser capaz de criar painéis de administração WordPress bonitos e pessoais que ressoem com seus clientes ou reforcem a presença da sua marca online. Aproveite até o final e nos surpreenda com seus pensamentos na seção de comentários abaixo!
Esperar! Antes de começarmos, crie um tema filho
Você pode editar seus arquivos de tema principais ou usar o Editor em Aparência no painel do seu tema, mas isso significaria nunca atualizar seu tema do WordPress novamente. Antes de fazer qualquer alteração nos arquivos do tema, você deve criar um tema filho . Dessa forma, quando você atualizar o tema principal, todas as suas alterações permanecerão intactas. Aqui estão alguns passos rápidos para você configurar apenas para este tutorial, mas também temos um guia completo de criação de tema filho ou você pode consultar o codex do WordPress para obter mais ajuda.
- Crie sua pasta de tema filho: Faça login na sua instalação do WordPress e localize a pasta wp-content/themes/yourthemename . Dentro desta pasta, adicione uma nova pasta e nomeie-a como “child-theme” ou “yourthemename-child” (você entendeu).
Crie o arquivo CSS do seu tema filho: Agora que você tem uma nova pasta de tema filho, você pode adicionar novos arquivos para ajustar ou substituir o estilo e a função do seu tema atual. Primeiro, crie um novo arquivo style.css dentro da pasta do tema filho e edite o novo arquivo para adicionar algumas informações básicas de cabeçalho (só para que você ou os desenvolvedores subsequentes saibam o que está acontecendo):
/*—————————————————
Theme Name: Your Child Theme Folder Name Here
Description: Child theme for Parent Theme Name Here
Author: Your Name Here
Template: Parent Theme Name Here
- —————————————————-*/
- Após o título, você pode adicionar todo o seu incrível CSS para alterar a aparência do seu tema pai usando seu tema filho.
Crie o arquivo PHP do seu tema filho: Dentro de sua nova pasta de tema filho, crie um arquivo functions.php. Em seguida, edite o novo arquivo de funções para adicionar o código que carregará o estilo do seu tema “pai” original:
<?php
function myprefix_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
- add_action( ‘wp_enqueue_scripts’, ‘myprefix_theme_enqueue_styles’ ); ?>
- Apenas certifique-se de adicionar seus ajustes de function.php após a última tag PHP aberta.
É claro que você pode adicionar muito mais ao seu tema filho para fazer alterações nos modelos do seu cabeçalho, rodapé ou qualquer outra coisa. Mas para os propósitos deste tutorial está tudo pronto! Aqui vamos nos…
Eliminando widgets desnecessários do painel do WordPress
Depois de fazer login no painel do WordPress, você notará algumas seções (widgets), como Visão geral , Estatísticas do site, Rascunho rápido e Notícias do WordPress , entre outros. A maioria desses widgets do painel são adicionados pelo WordPress, mas o número de widgets exibidos pode aumentar ou diminuir dependendo do seu tema e/ou plugins. Alguns temas e plugins adicionam seus próprios widgets ao painel.
Embora alguns desses widgets sejam úteis, seus clientes precisam ver cada um deles? Você precisa ver cada um desses widgets toda vez que fizer login? Talvez você tenha que aturar os widgets porque não tinha como se livrar deles. Hoje é seu dia de sorte. Você pode remover facilmente quantos widgets do painel desejar usando algumas linhas de código:
// Remove dashboard widgets
function remove_dashboard_meta() {
if ( ! current_user_can( ‘manage_options’ ) ) {
remove_meta_box( ‘dashboard_incoming_links’, ‘dashboard’, ‘normal’ );
remove_meta_box( ‘dashboard_plugins’, ‘dashboard’, ‘normal’ );
remove_meta_box( ‘dashboard_primary’, ‘dashboard’, ‘normal’ );
remove_meta_box( ‘dashboard_secondary’, ‘dashboard’, ‘normal’ );
remove_meta_box( ‘dashboard_quick_press’, ‘dashboard’, ‘side’ );
remove_meta_box( ‘dashboard_recent_drafts’, ‘dashboard’, ‘side’ );
remove_meta_box( ‘dashboard_recent_comments’, ‘dashboard’, ‘normal’ );
remove_meta_box( ‘dashboard_right_now’, ‘dashboard’, ‘normal’ );
remove_meta_box( ‘dashboard_activity’, ‘dashboard’, ‘normal’);
}
}
add_action( ‘admin_init’, ‘remove_dashboard_meta’ );
Copiar o código acima no arquivo functions.php do seu tema filho (encontrado em wp-content/themes/yourthemename/child-theme/functions.php ) e salvar as alterações eliminará todos os widgets do painel com exceção daqueles adicionados pelo seu tema ou plug-ins. No código acima, todos os usuários com menos recursos de administrador não verão os widgets graças a esta parte do código:
if ( ! current_user_can( ‘manage_options’ ) )
…que verifica se o usuário tem capacidade (‘manage_options’) disponível apenas para administradores. Talvez você não queira livrar seu painel de todos os widgets. Você pode usar o seguinte código em vez disso:
// Create the function to use in the action hook
function wpexplorer_remove_dashboard_widget () {
remove_meta_box ( ‘dashboard_quick_press’, ‘dashboard’, ‘side’ );
}
add_action (‘wp_dashboard_setup’, ‘wpexplorer_remove_dashboard_widget’);
Copie o código acima para o seu arquivo functions.php e salve as alterações para se livrar do widget Quick Draft . Para remover qualquer outro widget, basta substituir ‘dashboard_quick_press’, ‘dashboard’, ‘side’ pelo slug correspondente para cada widget. Outros slugs de widget padrão incluem:
- dashboard_incoming_links
- painel_plugins
- painel_primário
- painel_secundário
- dashboard_quick_press
- dashboard_recent_drafts
- dashboard_recent_comments
- painel_right_now
- painel_atividade
Mas você pode ter widgets adicionais adicionados pelo seu tema pai, outros plugins que você instalou ou até mesmo sua hospedagem ( WP Engine adiciona um chamado wpe_dify_news_feed ). Para encontrar o slug para esses widgets adicionados, use um inspetor de navegador (gostamos do Chrome – faz parte de suas ferramentas padrão de desenvolvedor da Web, então tudo que você precisa fazer é clicar com o botão direito do mouse em um elemento e escolher “inspecionar”) e copiar o div ID do widget que você deseja remover.
Adicionando widgets do painel do WordPress
Agora que você pode eliminar os widgets do painel como quiser, vamos tentar adicionar nossos próprios widgets personalizados. Você pode exibir o que quiser com seu widget, então nada o impedirá de criar o painel personalizado dos seus sonhos. A melhor parte é que é super fácil adicionar um widget ao seu painel do WordPress. Basta adicionar o seguinte código ao seu arquivo wp-content/themes/yourthemename/child-theme/functions.php :
/**
* Add a widget to the dashboard.
*
* This function is hooked into the ‘wp_dashboard_setup’ action below.
*/
function wpexplorer_add_dashboard_widgets() {
wp_add_dashboard_widget(
‘wpexplorer_dashboard_widget’, // Widget slug.
‘My Custom Dashboard Widget’, // Title.
‘wpexplorer_dashboard_widget_function’ // Display function.
);
}
add_action( ‘wp_dashboard_setup’, ‘wpexplorer_add_dashboard_widgets’ );
/**
* Create the function to output the contents of your Dashboard Widget.
*/
function wpexplorer_dashboard_widget_function() {
echo “Hello there, I’m a great Dashboard Widget. Edit me!”;
}
Salve as alterações. Claro, você pode editar o plugin para atender às suas necessidades. Coloque seu HTML, PHP ou o que quer que você tenha:
echo “Hello there, I’m a great dashboard Widget. Edit me!”;
Seu novo widget personalizado aparecerá na parte inferior absoluta – abaixo de todos os widgets – que pode estar fora da janela de visualização se você tiver muitos widgets. Você pode, no entanto, arrastar e soltar o widget na parte superior (ou em qualquer outro lugar).
Página personalizada do painel do WordPress
Digamos que você esteja interessado em criar um painel totalmente diferente. Um que vem com seu próprio HTML personalizado, PHP e até mesmo estilo. Se você quiser ir além de apenas adicionar/remover widgets do painel, confira Como criar uma página de painel personalizada do WordPress por Remi Corson.
Ele construiu um ótimo plugin que o ajudará a acelerar a criação de sua própria página de painel personalizada (custom-dashboard.php). Você deve aprimorar suas habilidades de desenvolvimento PHP para bifurcar o plug-in para atender às suas necessidades específicas. Em suma, experimentei o Sweet Custom Dashboard e é incrível. Seu painel personalizado pode estar a uma instalação de distância :). Quer personalizar sua mensagem de boas-vindas, confira nossa postagem em Personalizando sua mensagem de boas-vindas do painel do WordPress .
Removendo os menus do painel do WordPress
Podemos adicionar ou eliminar widgets do painel do WordPress e até mesmo alterar a aparência do painel inteiramente (graças a Remi). Agora vamos para a próxima parte: eliminar itens de menu indesejados.
Por quê? Você deseja remover alguns menus para fornecer aos clientes um painel mais enxuto e impedi-los de acessar áreas “restritos”. Se um cliente não conhece o WordPress, ele pode acabar quebrando o site se visitar e alterar opções em páginas como Configurações ou Plugins. Adicione o seguinte código ao seu arquivo functions.php:
function wpexplorer_remove_menus() {
remove_menu_page( ‘themes.php’ ); // Appearance
remove_menu_page( ‘plugins.php’ ); // Plugins
remove_menu_page( ‘users.php’ ); // Users
remove_menu_page( ‘tools.php’ ); // Tools
remove_menu_page( ‘options-general.php’ ); // Settings
}
add_action( ‘admin_menu’, ‘wpexplorer_remove_menus’ );
O código acima remove os links de menu para Configurações, Plugins, Aparência, Usuários e Ferramentas para todos os usuários. Você também pode remover submenus. Aqui está o código de exemplo que remove o submenu Widgets em Aparência:
function wpexplorer_adjust_the_wp_menu() {
$page = remove_submenu_page( ‘themes.php’, ‘widgets.php’ );
}
add_action( ‘admin_menu’, ‘wpexplorer_adjust_the_wp_menu’, 999 );
No exemplo acima, os usuários acessarão todos os submenus em Aparência, exceto Widgets. Você pode remover quantos menus ou submenus desejar. Lembre-se de que isso não impedirá que os usuários acessem essas páginas diretamente. Quer dizer, se um usuário entrar, por exemplo yourdomain.com/wp-admin/options-general.php, ele acessará sua página de configurações. Ainda bem que a maioria dos usuários não se incomodará se o item não estiver no menu.
Se você não pode ou não quer editar seu arquivo functions.php, você sempre pode instalar o plugin Admin Menu Editor , que lhe dá controle total sobre seus menus. Ele vem com alguns recursos interessantes, incluindo restrições de menu baseadas em função, capacidade de ocultar menus e criar itens de menu personalizados, entre outros recursos interessantes.
Personalizando o rodapé do painel do WordPress
Até o momento, fizemos uma personalização “significativa” no painel de administração do WordPress. É justo levar algum crédito por todo o trabalho brilhante que você está fazendo. Personalizar o rodapé (“Obrigado por criar com o WordPress .”) pode ajudar ainda mais a fortalecer sua marca (ou a do cliente). Vamos alterar seu rodapé para “Construído com amor pelo seu nome”. Basta adicionar o seguinte trecho ao seu arquivo functions.php e salvar as alterações:
// Custom Admin footer
function wpexplorer_remove_footer_admin () {
echo ‘<span id=”footer-thankyou”>Built with love by <a href=”http://www.wpexplorer.com/” target=”_blank”>WPExplorer</a></span>’;
}
add_filter( ‘admin_footer_text’, ‘wpexplorer_remove_footer_admin’ );
Substitua ‘Your Name’ pelo seu nome, site, endereço de e-mail, etc., e yourdomain.com pelo seu nome de domínio real. Se movendo…
Personalizando o formulário de login
Até agora, você tem tudo o que é preciso para personalizar seu painel de administração do WordPress. Vamos dar um passo adiante e personalizar a página de login, para que seus usuários possam ter uma experiência verdadeiramente personalizada desde o início. Afinal, por que se preocupar em personalizar seu painel do WordPress apenas para ser distribuído pela página de login?
Com esta página, precisamos personalizar dois elementos: o logotipo padrão do WordPress e o link wordpress.org que o acompanha. Mas antes de mostrar o código , você pode personalizar sua página de login facilmente usando qualquer um desses 15 melhores plug-ins de página de login personalizados para WordPress . Agora, para a sensação de calor e confusão que vem ao brincar com o código, copie o seguinte para o seu functions.php:
function wpexplorer_login_logo() { ?>
<style type=”text/css”>
body.login div#login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png );
padding-bottom: 30px;
}
</style>
<?php }
add_action( ‘login_enqueue_scripts’, ‘wpexplorer_login_logo’ );
Substitua logo.png pelo seu nome de arquivo de logotipo personalizado, que você deve primeiro enviar para wp-content/themes/yourtheme/images . Mantenha seu logotipo personalizado abaixo de 80 x 80 pixels, mesmo que você possa alterar isso com algum CSS personalizado. Com o logotipo de login personalizado, é hora de alterar o link que acompanha o logotipo original do WordPress. Vamos vincular seu novo logotipo ao seu site. Copie este código para o seu arquivo functions.php e salve as alterações:
function wpexplorer_login_logo_url() {
return esc_url( home_url( ‘/’ ) );
}
add_filter( ‘login_headerurl’, ‘wpexplorer_login_logo_url’ );
function wpexplorer_login_logo_url_title() {
return ‘Your Site Name and Info’;
}
add_filter( ‘login_headertitle’, ‘wpexplorer_login_logo_url_title’ );
Lembre-se, você sempre pode estilizar sua página de login como desejar usando CSS . Ou você pode simplesmente começar com um tema incrível, como o tema Total Multi-purpose & Responsive WordPress, que vem com opções integradas para uma página de login personalizada e marca do site.
Personalizar o painel do WordPress: opções de tela
Se você não quiser mergulhar no código ou instalar plugins, pode aproveitar as opções de tela para criar um painel personalizado do WordPress. Basta fazer login no seu painel do WordPress e, na parte superior da tela à direita, você verá um menu suspenso Opções de tela. Clique aqui para expandir e marque/desmarque para ativar/desativar widgets. Você pode então arrastar e soltar seus widgets para organizá-los como desejar.
A única desvantagem é que esse método salva suas configurações por usuário, o que significa que não será muito bom se você tiver um blog com vários autores. Além disso, você não pode impedir que os usuários reativem os widgets à vontade.
Bônus: Use um Plugin
Passamos a maior parte do nosso tempo cobrindo opções de código. Mas se você estiver com pouco tempo, um plugin pode ser útil.
Opção 1: Plugin Ultimate Tweaker para WordPress
Primeiro, algo um pouco diferente: o Ultimate Tweaker for WordPress , disponível na CodeCanyon. A opção de plugin verdadeiramente definitiva para editar seu administrador do WordPress (além de alguns outros recursos do WordPress).
A maioria dos plugins suporta funcionalidades para um propósito específico, mas não o Ultimate Tweaker; este plugin é um polivalente versátil, como eu nunca vi antes. Essencialmente, o Ultimate Tweaker suporta mais de 240 hacks, truques e ferramentas diferentes do WordPress para facilitar sua vida. Isso o torna útil de várias maneiras: melhorando a eficiência, removendo as partes do WordPress que o incomodam e estendendo a funcionalidade principal do WordPress além do que você pensava ser possível.
Esses 240 hacks são realmente diversos e podem ser divididos em 35 categorias diferentes. Para dar uma ideia do que o Ultimate Tweaker pode fazer, aqui estão apenas alguns de seus “hacks”:
- Adicionar um logotipo acima de um menu da barra lateral
- Renomeie o painel do WordPress e a página de login
- Desative o botão direito do mouse ou o botão Print Screen em seu site
- Aumente a segurança adicionando o reCaptcha 2 à sua tela de login
- Defina a qualidade JPEG para reduzir o tamanho do arquivo de imagens
- Ativar códigos de acesso em widgets de texto
- Crie uma contagem mínima de palavras para postagens
- Desabilite a senha errada “shake” na tela de login
- Adicione o código do Google Analytics ao seu site
- 19 novos atalhos de teclado para WordPress
- Criar uma página 404 personalizada
- Desative as atualizações automáticas do WordPress
Muitos desses hacks do WordPress são coisas para as quais todos recorremos ao Google em algum momento ou outro. A maioria deles é relativamente pequena por si só, mas com uma lista abrangente de várias centenas, coletivamente o plugin pode oferecer muito valor. A comunidade WordPress geralmente fala muito sobre o que eles gostariam de ver no núcleo do WordPress, então eu realmente espero que os desenvolvedores ouçam a comunidade e implementem algumas de suas sugestões em futuras atualizações deste plugin.
Opção 2: Forest – Revolution WordPress Tema Admin
Quer apenas mudar a marca do back-end do seu site? Embora normalmente recomendemos usar um pouco de código, você também pode usar um plug-in. Se você está entediado com a aparência do painel padrão, o tema de administração do Forest WordPress permite que você faça um facelift. E por apenas $9. Forest não mudará a forma como você faz tarefas familiares no WordPress, como adicionar posts/páginas, apenas fará com que o WordPress pareça melhor quando você estiver fazendo isso! O plugin também permite modificar a página de login padrão do WordPress.
Forest permite que você adicione sua própria imagem de plano de fundo ao painel do WordPress – ou você pode usar uma das seis imagens fornecidas gratuitamente, incluindo a da captura de tela acima. Você pode personalizar o painel usando sua própria criatividade (usando cores ilimitadas) ou usando um dos esquemas de cores padrão do WordPress. Você pode personalizar ainda mais o painel escolhendo sua própria tipografia entre mais de 600 fontes do Google. O plugin suporta uma pele clara e escura, e você pode configurar os níveis de opacidade de cada elemento. Se houver alguns botões no painel que você não usa, você pode até ocultá-los – isso é ótimo para sites de clientes, onde muitas opções podem sobrecarregá-los.
Observação: o Forest não alterará a aparência do seu site ao vivo de forma alguma, é puramente para o back-end.
Recursos sobre como personalizar o painel do WordPress
Procurando saber mais sobre como personalizar o painel do WordPress? Aqui estão alguns recursos extras para o seu kit de ferramentas profissional :
- API de widgets do painel
- 15 dos melhores plugins de página de login personalizados para WordPress
- Como criar uma página de painel personalizada do WordPress
- Personalizando o painel do WordPress para seus clientes
- Personalizando o Administrador do WordPress – O Painel
Pra Você…
Criar um painel de administração personalizado do WordPress é uma das melhores maneiras de fortalecer a imagem da marca e fornecer uma experiência personalizada aos seus clientes. É simples e não vai tomar muito do seu tempo. Então, o que você está esperando? Adquira a personalização.
Fora isso, o que você aprendeu aqui hoje? Você já criou um painel de administração personalizado do WordPress? Compartilhe com nossa comunidade ansiosa nos comentários abaixo. Saúde!
