Trabalhamos em muitos sites WordPress onde usuários diferentes precisavam de experiências diferentes. Membros, clientes, autores e parceiros podem se beneficiar de um layout que se encaixe em sua função.
Mas o WordPress não oferece uma maneira integrada de estilizar coisas com base nas funções do usuário. Tentar fazer isso através de arquivos de tema pode parecer arriscado, especialmente se você não for um desenvolvedor.
Vimos usuários ficarem presos ou até mesmo quebrarem seus sites apenas adicionando o código errado. É por isso que sempre recomendamos uma maneira mais segura e fácil de lidar com isso.
Neste guia, mostraremos como aplicar CSS personalizado para funções de usuário específicas usando uma ferramenta amigável para iniciantes. Este é o mesmo método que usamos em nossos sites quando precisamos de uma solução rápida e segura.
Aqui está um breve resumo dos tópicos que abordaremos neste guia:
- Por que e quando aplicar CSS para funções de usuário específicas no WordPress
- Aplicando CSS personalizado para funções de usuário específicas no WordPress
- Adicionar CSS personalizado para funções de usuário específicas na área de administração do WordPress
- Adicionar CSS personalizado para funções de usuário específicas em outras áreas
- Perguntas Frequentes
- Dicas Bônus
Por que e quando aplicar CSS para funções de usuário específicas no WordPress
Gerenciamos vários sites para nossos negócios que exigem login de usuário. Frequentemente encontramos a necessidade de personalizar a aparência para diferentes funções de usuário.
Ao realizar testes A/B nesses sites, descobrimos que a personalização melhora muito a experiência do usuário. Uma melhor experiência do usuário leva, em última análise, a mais satisfação do cliente, conversões e vendas.
Quer você seja um proprietário de site, desenvolvedor ou designer, ter controle sobre a aparência do seu site para diferentes usuários pode ser muito útil.
Aqui estão alguns casos de uso comuns:
- Sites de Membros: Você pode usar CSS personalizado para oferecer experiências diferentes para membros premium.
- Lojas de eCommerce: Você pode destacar carrinhos de compras, retornar descontos para clientes e outros recursos para clientes logados.
- Blogs com Múltiplos Autores: Gerenciar um blog com múltiplos autores pode ficar confuso. Com CSS personalizado, você pode criar uma interface limpa e eficiente para editores, mantendo as coisas simples para contribuidores e assinantes.
- Sites de Clientes: Você pode criar uma área de administração simplificada para clientes ocultando certos elementos com CSS personalizado.
Agora, o problema é como dizer ao WordPress qual código CSS carregar para diferentes funções de usuário.
Aplicando CSS personalizado para funções de usuário específicas no WordPress
A maneira mais fácil de gerenciar código personalizado, incluindo CSS, no WordPress é usando WPCode. É o melhor plugin de snippets de código para WordPress e permite que você gerencie seu CSS personalizado com segurança em um só lugar.
Observação: Uma versão gratuita do WPCode também está disponível. No entanto, recomendamos a atualização para um plano pago para desbloquear mais recursos.
Por que recomendamos o WPCode:
- Ele permite que você adicione com segurança qualquer código personalizado, incluindo CSS, sem quebrar seu site. Se um trecho de código não estiver funcionando, você pode desativá-lo facilmente.
- Ele vem com poderosas ferramentas de inserção de código e lógica condicional, permitindo que você execute um trecho apenas quando necessário.
- Você tem acesso a uma enorme biblioteca de trechos de código úteis, economizando a necessidade de instalar vários plugins separados.
Dito isso, vamos adicionar um CSS personalizado e aplicá-lo para funções de usuário específicas.
Adicionando CSS Personalizado no WPCode
Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.
Após a ativação, vá para a página Snippets de Código » + Adicionar Snippet. Lá, você verá muitos snippets úteis para várias tarefas.
No entanto, como você está adicionando um código CSS personalizado, precisará começar do zero clicando em ‘+ Adicionar Snippet Personalizado’ na caixa ‘Adicione seu Código Personalizado (Novo Snippet)’.
Em seguida, você precisa selecionar ‘Snippet de CSS’ como o tipo de código na lista de opções que aparecem na tela.
Isso o levará ao editor de código.
Primeiro, você precisa inserir um título para o seu snippet, que pode ser qualquer coisa para ajudá-lo a lembrar para que serve o código.
Agora, você pode adicionar seu código CSS personalizado na caixa ‘Prévia do Código’.
Para este tutorial, estamos usando este código, que destaca o menu ‘Posts’ na área administrativa mudando sua cor de fundo. Você pode usar seu próprio código CSS aqui:
li#menu-posts {
background-color: #bf0505;
}
Escolher Lógica Condicional de Função do Usuário
Em seguida, role para baixo até a caixa ‘Lógica Condicional Inteligente’ e alterne o controle deslizante ao lado da opção ‘Ativar Lógica’.
Depois disso, escolha a ‘Condição’ (Mostrar ou Ocultar) e clique em ‘Adicionar novo grupo’.
Clique na primeira caixa na Regra para expandi-la. Você verá uma lista de regras para escolher.
Por exemplo, você pode selecionar o status de login, a função do usuário, o tipo de dispositivo, etc.
Selecione ‘Função do Usuário’ já que você quer que este código CSS personalizado seja adicionado para uma função de usuário específica.
Depois disso, você pode selecionar para qual função de usuário deseja aplicá-lo.
Observação: Você pode adicionar várias regras de lógica condicional clicando no botão ‘+ Adicionar novo grupo’.
Quando terminar, clique em ‘Salvar Snippet’ no canto superior direito da tela e, em seguida, alterne para ‘Ativo’.
O WPCode agora mostrará seu CSS personalizado para funções de usuário específicas no WordPress.
Adicionar CSS personalizado para funções de usuário específicas na área de administração do WordPress
Se você deseja que seu CSS personalizado seja adicionado apenas na área de administração do WordPress, o WPCode torna isso ainda mais fácil.
Na tela de edição do código, role para baixo até a opção ‘Localização’. Clique no menu suspenso para expandi-lo e você verá várias localizações onde pode carregar automaticamente o CSS.
Agora, simplesmente selecione a opção ‘Cabeçalho da administração’ ou ‘Rodapé da administração’ para carregar seu código CSS na área de administração do WordPress.
Adicionar CSS personalizado para funções de usuário específicas em outras áreas
A personalização do design em sites de comércio eletrônico leva a uma melhor experiência do usuário e comprovadamente diminui as vendas de carrinhos abandonados.
Se você gerencia uma loja WooCommerce, vende cursos online ou outros produtos digitais, adicionar CSS personalizado para clientes logados será útil.
O WPCode permite que você escolha onde adicionar código personalizado a um site de comércio eletrônico. Em Configurações de Localização, alterne para a guia ‘eCommerce’.
Você verá vários locais onde pode adicionar seu CSS personalizado, como antes do carrinho, antes do formulário de checkout, em páginas de produtos e muito mais.
O WPCode suporta WooCommerce, Easy Digital Downloads e MemberPress.
Perguntas Frequentes
Aqui estão as respostas para as perguntas mais frequentes sobre como personalizar o WordPress para diferentes funções de usuário.
Posso aplicar CSS a funções de usuário personalizadas no WordPress?
Sim, o WPCode permite que você direcione qualquer função de usuário, incluindo funções personalizadas criadas por plugins de associação, ferramentas LMS ou código personalizado. Você só precisa garantir que a função personalizada apareça nas opções de lógica condicional.
E se as alterações de CSS não aparecerem para alguns usuários?
Isso pode acontecer se o seu site usar cache agressivo ou uma CDN. Tente limpar seu cache e certifique-se de que o snippet do WPCode esteja ativo e visando o local e a função corretos.
Posso pré-visualizar as alterações de CSS antes de publicá-las?
O WPCode não possui uma pré-visualização visual, mas você pode manter o snippet inativo enquanto testa nas ferramentas de desenvolvedor do seu navegador. Assim que estiver satisfeito com a aparência, cole-o no WPCode e ative-o.
É seguro usar o WPCode em vez de editar os arquivos do tema?
Absolutamente. Na WPBeginner, usamos o WPCode porque ele mantém todo o nosso código personalizado separado dos arquivos do tema, para que as alterações não sejam perdidas durante as atualizações. Além disso, torna mais seguro e fácil gerenciar snippets em um só lugar.
Dicas Bônus
Abaixo estão alguns recursos adicionais para ajudá-lo a projetar experiências de usuário personalizadas no WordPress. Você nem precisa aprender CSS para algumas dessas opções:
- Como Mostrar Conteúdo Personalizado para Diferentes Usuários no WordPress
- Como Personalizar Cores no Seu Site WordPress
- Como Personalizar e Estilizar Seus Formulários WordPress (2 Métodos Fáceis)
- Como Criar uma Página Inicial Personalizada no WordPress (3 Métodos)
Esperamos que este artigo tenha ajudado você a aprender como aplicar CSS para funções de usuário específicas no WordPress. Você também pode querer ver nossa folha de referência de CSS gerado padrão do WordPress para iniciantes, ou conferir estes plugins e dicas para melhorar a área de administração do WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Tem alguma pergunta ou sugestão? Por favor, deixe um comentário para iniciar a discussão.