Como personalizar seu painel de administração do WordPress

Carros personalizados. Eles o levarão do ponto A ao B, como qualquer outro automóvel. Eles são fabricados com os mesmos materiais e queimam galões de gás como qualquer outro veículo a motor. 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 seus colegas diretamente da linha de montagem
  • Eles são otimizados para melhor desempenho

O WordPress é um dos melhores 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 em pouco tempo.

Mas o painel de administração do WordPress é muito “mainstream” na aparência. Quero dizer, embora seja bonito, não exala exatamente o estilo pessoal. É um pouco genérico e provavelmente não impressionará um cliente que já usou a plataforma. Caramba, isso não 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 a seus clientes o fator adicional de bom humor que os mantém ansiosos por mais. Você pode criar sua marca ou ajustar o painel do WordPress às ​​necessidades do seu cliente, deixando um ótimo produto que vem em ótimas embalagens – sua própria embalagem personalizada. Na postagem de hoje, iremos:

  • 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 plug-ins que você pode usar para personalizar seu painel

No final desta postagem, você poderá criar painéis de administração do WordPress bonitos e pessoais que ressoam com seus clientes ou reforçam a presença de sua marca online. Aproveite até o final e surpreenda-nos com a sua opinião na seção de comentários abaixo!

Esperar! Antes de começarmos, crie um tema filho

Você pode editar seus arquivos de temas principais ou usar o Editor em Aparência no painel do tema, mas isso significaria nunca atualizar seu tema WordPress novamente. Antes de fazer alterações nos arquivos de temas, 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 algumas etapas rápidas para você configurar apenas este tutorial, mas também temos um guia completo de criação de tema filho ou você pode consultar o Codex WordPress para mais ajuda.

  1. Crie sua pasta de temas filhos: Entre na sua instalação do WordPress e localize o wp-content / themes / yourthemename pasta. Dentro desta pasta, adicione uma nova pasta e chame-a de “tema filho” ou “seu nome do filho” (você entendeu).
  2. Crie o arquivo CSS do seu tema filho: Agora que você possui uma nova pasta de tema filho, 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 na pasta do tema filho e edite o novo arquivo para adicionar algumas informações básicas do cabeçalho (para que você ou os desenvolvedores subsequentes saibam o que está acontecendo):
    / *---------------------------------------------------
    Nome do tema: Seu nome de pasta de tema filho aqui
    Descrição: tema filho para o nome do tema pai aqui
    Autor: Seu nome aqui
    Predefinição: Nome do Tema Pai Aqui
    ----------------------------------------------------* /

    Após o cabeçalho, você pode adicionar todo o seu CSS impressionante para alterar a aparência do tema principal usando o tema derivado.

  3. Crie o arquivo PHP do seu tema filho: Dentro da 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:

    Apenas certifique-se de adicionar seu function.php tweaks 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 cabeçalho, rodapé ou de qualquer outra coisa. Mas, para os fins deste tutorial, você está 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 Num relance, Estatísticas do site, Rascunho Rápido, e Notícias do WordPress entre outros. A maioria desses widgets do painel é adicionada pelo WordPress, mas o número de widgets exibidos pode aumentar ou diminuir, dependendo do seu tema e / ou plug-ins. 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 sempre que fizer login? Talvez você tenha que suportar 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:

// Remover widgets do painel
função 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'); 

Copiando o código acima no arquivo functions.php do tema do seu filho (encontrado em wp-content / themes / yourthemename / child-theme / functions.php) e salvar as alterações eliminará todos os widgets do painel, exceto os adicionados pelo seu tema ou plug-ins. No código acima, todos os usuários com menos de recursos administrativos não verá os widgets graças a esta parte do código:

if (! current_user_can ('manage_options')))

… que verifica se o usuário tem (“opções de gerenciamento”) disponíveis apenas para administradores. Talvez você não queira livrar seu painel de todos os widgets. Você pode usar o seguinte código:

// Crie a função a ser usada no gancho de ação
função 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 Rascunho Rápido ferramenta. Para remover qualquer outro widget, basta substituir “Dashboard_quick_press”, “dashboard”, “side” com lesma correspondente para cada widget. Outras lesmas de widget padrão incluem:

  • dashboard_incoming_links
  • dashboard_plugins
  • dashboard_primary
  • dashboard_secondary
  • dashboard_quick_press
  • dashboard_recent_drafts
  • dashboard_recent_comments
  • dashboard_right_now
  • dashboard_activity

Mas você pode ter widgets adicionais adicionados pelo seu tema principal, outros plugins que você instalou ou até sua hospedagem (o WP Engine adiciona um chamado wpe_dify_news_feed) Para encontrar a lesma desses widgets adicionados, use um inspetor de navegador (como o do Chrome – ele faz parte de suas ferramentas padrão de desenvolvedor da web. Tudo o que você precisa fazer é clicar com o botão direito do mouse em um elemento e escolher “inspecionar”) e copiar o ID da div para o widget que você deseja remover.

Adicionando widgets do painel do WordPress

Agora que você pode eliminar os widgets do painel como quiser, tente adicionar nossos próprios widgets personalizados. Você pode exibir o que quiser com seu widget. Portanto, nada impede você 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 wp-content / themes / yourthemename / child-theme / functions.php Arquivo:

/ **
* Adicione um widget ao painel.
*
* Esta função está conectada à ação 'wp_dashboard_setup' abaixo.
* /
função wpexplorer_add_dashboard_widgets () {
wp_add_dashboard_widget (
'wpexplorer_dashboard_widget', // Lesma de widget.
'Meu widget de painel personalizado', // Título.
'wpexplorer_dashboard_widget_function' // Função de exibição.
);
}
add_action ('wp_dashboard_setup', 'wpexplorer_add_dashboard_widgets');

/ **
* Crie a função para gerar o conteúdo do seu Dashboard Widget.
* /
função wpexplorer_dashboard_widget_function () {
eco "Olá, sou um ótimo widget de painel. Edite-me!";
}

Salve as alterações. Obviamente, você pode editar o plugin para atender às suas necessidades. Coloque seu HTML, PHP ou o que você quiser:

eco "Olá, sou um ótimo widget de painel. Edite-me!";

Seu novo widget personalizado aparecerá na parte inferior absoluta – abaixo de todos os widgets – que podem estar fora da janela de exibição se você tiver muitos widgets. No entanto, você pode 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é estilo. Se você quiser ir além da adição / remoção de widgets do painel, consulte Como criar uma página de painel personalizado do WordPress por Remi Corson.

Ele criou 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 plugin para atender às suas necessidades específicas. Ao todo, tentei Painel personalizado doce e é incrível. Seu painel personalizado pode ser uma instalação ausente :). Deseja personalizar sua mensagem de boas-vindas, confira nossa postagem em Personalizando sua mensagem de boas-vindas do painel do WordPress.

Removendo menus do painel do WordPress

Podemos adicionar ou eliminar os widgets do painel do WordPress e até alterar a aparência total do painel (graças à 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 impedir que eles acessem áreas “restritas”. Se um cliente não conhece o WordPress, ele pode acabar quebrando o site, caso visite e altere opções em páginas como Configurações ou Plugins. Adicione o seguinte código ao seu arquivo functions.php:

função wpexplorer_remove_menus () {
remove_menu_page ('themes.php'); // Aparência
remove_menu_page ('plugins.php'); // Plugins
remove_menu_page ('users.php'); // Comercial
remove_menu_page ('tools.php'); // Ferramentas
remove_menu_page ('options-general.php'); // Definições
}
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ê pode remover submenus também. Aqui está o código de exemplo que remove o submenu Widgets em Aparência:

função 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. Quero dizer, se um usuário entrar, por exemplo, seudominio.com/wp-admin/options-general.php, ele acessará sua página 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 deseja editar seu arquivo functions.php, sempre pode instalar o Plug-in do Admin Menu Editor, o que lhe dá controle completo sobre seus menus. É fornecido com alguns recursos interessantes, incluindo restrições de menu baseadas em funções, 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 seu painel de administração do WordPress. É justo receber algum crédito por todo o brilhante trabalho que você está fazendo. Personalizando o rodapé (“Obrigado por criar com WordPress.”) Pode ajudar ainda mais a fortalecer sua marca (ou a do cliente). Vamos mudar o rodapé para “Construído com amor pelo seu nome”. Basta adicionar o seguinte trecho ao seu arquivo functions.php e salvar as alterações:

// Rodapé do administrador personalizado
função wpexplorer_remove_footer_admin () {
eco 'Construído com amor por WPExplorer';
}
add_filter ('admin_footer_text', 'wpexplorer_remove_footer_admin');

Substitua ‘Seu nome” pelo seu nome, site, endereço de e-mail etc. e seudominio.com pelo seu nome de domínio real. Se movendo…

Personalizando o formulário de login

Até agora, você tem tudo 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 vem com ele. 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 confusão resultante da reprodução do código, copie o seguinte para o seu functions.php:

função wpexplorer_login_logo () {?>

Substitua logo.png pelo nome do arquivo do logotipo personalizado, para o qual você deve primeiro fazer o upload wp-content / themes / yourtheme / images. Mantenha seu logotipo personalizado abaixo de 80 x 80 pixels, mesmo que você possa alterá-lo 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 no seu arquivo functions.php e salve as alterações:

função wpexplorer_login_logo_url () {
retornar esc_url (home_url ('/'));
}
add_filter ('login_headerurl', 'wpexplorer_login_logo_url');

função wpexplorer_login_logo_url_title () {
retornar 'Nome e informações do seu site';
}
add_filter ('login_headertitle', 'wpexplorer_login_logo_url_title');

Lembre-se, você sempre pode estilize sua página de login como desejar usando CSS. Ou então, você pode simplesmente começar com um tema incrível, como o tema WordPress multifuncional e responsivo total, que vem com opções integradas para uma página de login personalizada e a marca do site..

Personalizar o painel do WordPress: opções de tela

Se você não deseja se aprofundar no código ou instalar plug-ins, aproveite as Opções de tela para criar um painel personalizado do WordPress. Basta fazer login no 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 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 plug-in

Passamos a maior parte do tempo cobrindo opções de código. Mas se você estiver com pressa, um plug-in pode ser útil.

Opção 1: Ultimate Tweaker Plugin for WordPress

Ultimate Tweaker para WordPress

Primeiro, algo um pouco diferente: o Ultimate Tweaker para WordPress, disponível no CodeCanyon. A opção de plug-in verdadeiramente definitiva para editar seu administrador do WordPress (ad alguns outros recursos do WordPress).

A maioria dos plugins suporta a funcionalidade para um propósito específico, mas não o Ultimate Tweaker; esse plug-in é versátil e versátil, como 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 ter uma idéia 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 no 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 as postagens
  • Desabilite a senha incorreta "agitar" na tela de login
  • Adicione o código do Google Analytics ao seu site
  • 19 novos atalhos de teclado para WordPress
  • Crie uma página 404 personalizada
  • Desativar atualizações automáticas do WordPress

Muitos desses hacks do WordPress são coisas para as quais voltamos 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 do WordPress geralmente é muito sincera sobre o que eles gostariam de ver do 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 Admin Theme

Tema de administração do WordPress da floresta

Deseja alterar a marca do back-end do seu site? Embora normalmente recomendamos o uso de 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 administrador do Forest WordPress permite que você faça um facelift. E por apenas US $ 9. A floresta não mudará a maneira como você executa tarefas familiares no WordPress, como adicionar postagens / páginas, isso apenas tornará o WordPress Veja melhor quando você está fazendo eles! O plug-in também permite modificar a página de login padrão do WordPress.

Captura de tela do tema admin da floresta

O Forest permite adicionar 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 plug-in 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 ocultá-los - isso é ótimo para sites clientes onde muitas opções podem sobrecarregá-los.

Observação: o Forest não mudará a aparência do seu site ao vivo de forma alguma, é apenas para o back-end.

Recursos sobre como personalizar o painel do WordPress

Deseja saber mais sobre como personalizar o painel do WordPress? Aqui estão alguns recursos extras para o seu kit de ferramentas profissional:

Até você ...

Criar um painel de administração personalizado do WordPress é uma das melhores maneiras de fortalecer a imagem da marca e fornecer experiência personalizada aos seus clientes. É simples e não vai demorar muito tempo. Então, o que você está esperando? Obter personalização.

Fora isso, o que você aprendeu aqui hoje? Você já criou um painel de administração do WordPress personalizado? Compartilhe com a nossa comunidade ansiosa nos comentários abaixo. Felicidades!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me