Como aplicar CSS para funções de usuário específicas no WordPress (maneira fácil)

Alterar a aparência do seu site para diferentes funções de usuário pode ajudá-lo a criar experiências de usuário personalizadas.

Descobrimos que muitos usuários preferem sites com interfaces personalizadas. Por exemplo, talvez você queira exibir elementos específicos para autores que estejam ocultos para outros usuários ou estilizar determinadas seções de forma diferente para assinantes ou clientes.

Neste tutorial, vamos orientá-lo na aplicação de CSS para funções de usuário específicas no WordPress. Isso o ajudará a personalizar diferentes áreas com base nas necessidades específicas de seus usuários.

Por que e quando aplicar CSS para funções de usuário específicas no WordPress

Gerenciamos vários sites para nossas empresas que exigem login de usuário. Muitas vezes, precisamos personalizar a aparência para diferentes funções de usuário.

Ao executar testes de divisão nesses sites, descobrimos que a personalização melhora muito a experiência do usuário. Uma melhor experiência do usuário, em última análise, leva a mais satisfação do cliente, conversões e vendas.

Se você é proprietário, desenvolvedor ou designer de um site, 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 associação: você pode usar CSS personalizado para oferecer experiências diferentes aos membros premium.
• Lojas de comércio eletrônico: você pode destacar carrinhos de compras, descontos para clientes que retornam e outros recursos para clientes conectados.
• Blogs com vários autores: O gerenciamento de um blog com vários autores pode ficar confuso. Com o CSS personalizado, você pode criar uma interface limpa e eficiente para os editores e, ao mesmo tempo, manter as coisas simples para os colaboradores e assinantes.
• Sites de clientes: você pode criar uma área de administração simplificada para os clientes ocultando determinados elementos com CSS personalizado.

Agora, o problema é como informar ao WordPress qual código CSS deve ser carregado para diferentes funções de usuário.

Aplicação de CSS personalizado para funções de usuário específicas no WordPress

A maneira mais fácil de gerenciar códigos personalizados, inclusive CSS, no WordPress é usar o WPCode. Ele é o melhor plug-in de snippets de código para WordPress e permite gerenciar com segurança seu CSS personalizado em um só lugar.

Observação: uma versão gratuita do WPCode também está disponível. No entanto, recomendamos fazer upgrade 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, inclusive CSS, sem danificar seu site. Se um snippet de código não estiver funcionando, você poderá desativá-lo facilmente.
• Ele vem com ferramentas avançadas de inserção de código e lógica condicional, permitindo que você execute apenas um snippet quando necessário.
• Você obtém acesso a uma enorme biblioteca de códigos com trechos úteis, o que evita a instalação de vários plug-ins separados.

Dito isso, vamos adicionar algumas CSS personalizadas e aplicá-las a funções de usuário específicas.

Adição de CSS personalizado no WPCode

Primeiro, você precisa instalar e ativar o plug-in WPCode. Para obter mais detalhes, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

Após a ativação, vá para a página Code Snippets ” +Add 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 “+ Add Custom Snippet” na caixa “Add Your Custom Code (New Snippet)”.

Isso o levará ao editor de código. Primeiro, você precisa digitar um título para o snippet de código e, em seguida, selecionar “CSS Snippet” em Code Type (Tipo de código).

Agora, você pode adicionar seu código CSS personalizado à caixa Code Preview (Visualização de código).

Para este tutorial, estamos usando este código, que destaca o menu “Posts” na área de administração alterando sua cor de fundo. Você pode usar seu próprio código CSS aqui:

li#menu-posts {
    background-color: #bf0505;
}

Selecionar a lógica condicional da função do usuário

Em seguida, role para baixo até a caixa “Smart Conditional Logic” (Lógica condicional inteligente) e alterne o botão de alternância ao lado da opção “Enable Logic” (Ativar lógica).

Depois disso, escolha a “Condição” (Mostrar ou Ocultar) e clique em “Adicionar novo grupo”.

Clique na primeira caixa da 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 “User Role” (Função do usuário), pois deseja que esse código CSS personalizado seja adicionado a uma função de usuário específica.

Depois disso, você pode selecionar a função de usuário à qual deseja aplicá-la.

Observação: Você pode adicionar várias regras de lógica condicional clicando no botão “+ Adicionar novo grupo”.

Quando terminar, clique em “Save Snippet” (Salvar snippet) no canto superior direito da tela e, em seguida, altere-o para “Active” (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ê quiser que seu CSS personalizado seja adicionado somente na área de administração do WordPress, o WPCode facilita ainda mais.

Na tela de edição de código, role para baixo até a opção “Location”. Clique no menu suspenso para expandi-lo e você verá vários locais onde é possível carregar automaticamente o CSS.

Agora, basta selecionar a opção “Admin header” (Cabeçalho do administrador) ou “Admin footer” (Rodapé do administrador) 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ê tiver uma loja WooCommerce, vender cursos on-line ou vender outros produtos digitais, será útil adicionar CSS personalizado para clientes conectados.

O WPCode permite que você escolha onde adicionar o código personalizado a um site de comércio eletrônico. Nas configurações de Localização, alterne para a guia “eCommerce”.

Você verá vários locais onde poderá adicionar seu CSS personalizado, como antes do carrinho, antes do formulário de checkout, nas páginas de produtos e muito mais.

O WPCode é compatível com o WooCommerce, o Easy Digital Downloads e o MemberPress.

Dicas de bônus

Veja a seguir alguns recursos adicionais para ajudá-lo a criar 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 as cores em seu site WordPress
• Como personalizar e estilizar seus formulários do 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. Talvez você também queira ver nossa folha de dicas de CSS gerada pelo WordPress padrão para iniciantes ou conferir estes plug-ins e dicas para melhorar a área de administração do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.