Como Personalizar o Dashboard e o Painel CMS do WordPress

Como Personalizar o Dashboard e o Painel CMS do WordPress
AdsTerra, Junte-se ao AdsTerra

A Dashboard do WordPress é o coração do seu site, e personalizar esse espaço pode melhorar significativamente a eficiência e a experiência do usuário. Neste guia, vamos explorar como personalizar a Dashboard, desde a adição de widgets até a modificação do menu lateral, proporcionando uma experiência de administração adaptada às suas necessidades.

1. Personalizando a Dashboard: Dicas e Exemplos:

1.1 Escolha de Widgets:

  • Adicione ou remova widgets para exibir informações relevantes. Os códigos abaixo podem ser adicionados em seu arquivo functions.php do tema atual.
  • Exemplo de código:
function custom_dashboard_widget() {
    echo 'Seu conteúdo personalizado aqui';
}

function add_custom_dashboard_widget() {
    wp_add_dashboard_widget('custom_dashboard_widget', 'Título do Widget', 'custom_dashboard_widget');
}

add_action('wp_dashboard_setup', 'add_custom_dashboard_widget');

1.2 Estilos Personalizados:

  • Aplique estilos para dar à Dashboard uma aparência única.
  • Exemplo de código:
function custom_dashboard_styles() {
    echo '<style>
        /* Seus estilos personalizados aqui */
    </style>';
}

add_action('admin_head', 'custom_dashboard_styles');

2. Elementos Personalizáveis na Dashboard:

2.1 Box de Atividade:

  • Personalize com gráficos ou integre a APIs externas.
  • Exemplo de código com gráficos:
function custom_activity_box() {
    echo '<canvas id="site-analytics-chart"></canvas>';
    // Código JavaScript para inicializar o gráfico aqui
}

add_action('wp_dashboard_setup', 'add_custom_activity_box');

2.2 Personalizando o Menu Lateral:

  • Adicione novos itens ou remova os desnecessários.
  • Exemplo de adição de um item com ícone:
function custom_admin_menu() {
    add_menu_page(
        'Página Personalizada',   // Título da Página
        'Personalizado',          // Texto do Menu
        'manage_options',         // Capacidade necessária para acessar
        'custom-page',            // Slug da Página
        'custom_page_callback',   // Função de Callback para exibir o conteúdo
        'dashicons-admin-home'    // Ícone do Menu
    );
}

function custom_page_callback() {
    echo 'Conteúdo da página personalizada';
}

add_action('admin_menu', 'custom_admin_menu');

A lista de ícones pode ser visualizada na documentação do próprio WordPress. https://developer.wordpress.org/resource/dashicons

Removendo um item do menu lateral:

function remove_menu_items() {
    remove_menu_page('edit.php'); // Remove a opção "Posts"
}

add_action('admin_menu', 'remove_menu_items');

3. Mais Personalizações Relevantes:

3.1 Modificando o Quick Draft Box:

  • Adapte este box para incluir campos personalizados.
  • Exemplo de código:
function custom_quick_draft_box() {
    echo '<input type="text" placeholder="Título Personalizado">';
    echo '<textarea placeholder="Conteúdo Personalizado"></textarea>';
}

add_action('wp_dashboard_quick_press', 'custom_quick_draft_box');

4. Benefícios da Personalização:

4.1 Eficiência Aprimorada:

  • Acesso rápido às informações e ferramentas mais relevantes.

4.2 Experiência do Usuário Melhorada:

  • Aparência atraente e personalizada para uma experiência mais agradável.

4.3 Foco no Conteúdo Importante:

  • Destaque as métricas e atividades mais críticas para o seu site.

Esse é o resultado com algumas alterações simples realizadas. Neste exemplo, alteramos as cores do painel, adicionamos um widget novo ao painel inicial, removemos o menu padrão de "Posts" e adicionamos um menu com ícone customizado chamado de "Personalizado". É possível ir muito além e construir um painel totalmente personalizado para sua marca.

Conclusão:

Personalizar a Dashboard do WordPress não apenas adiciona um toque pessoal ao seu espaço de trabalho, mas também aumenta a eficiência e a usabilidade. Com os exemplos e dicas fornecidos, você pode começar a moldar a Dashboard de acordo com suas necessidades específicas, melhorando a gestão do seu site e proporcionando uma experiência mais agradável para os usuários. Experimente essas personalizações e transforme a Dashboard em uma ferramenta poderosa e adaptada às suas necessidades.

Sugestão de Cursos

Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.

Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.

As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.

Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.

Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.

O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.

Saiba mais sobre o curso de Node.js, React e React Native.

AdsTerra, Junte-se ao AdsTerra