Novo: sem necessidade de estilização
Atualização 20/04/21 – Talvez você queira conferir o complemento Affiliate Portal pro. É uma nova alternativa à Área de Afiliados que oferece uma interface atraente para seus afiliados sem necessidade de personalização. Funciona com qualquer tema e fica ótimo em dispositivos móveis.
Fizemos um esforço considerável para que o AffiliateWP parecesse e se sentisse como parte do painel do WordPress. Ele está lá quando você precisa e fora do seu caminho quando não precisa. Da mesma forma, no front-end, projetamos o AffiliateWP para se integrar perfeitamente a qualquer tema do WordPress.
Acreditamos em fornecer aos afiliados uma experiência consistente em todo o site.
Por causa disso, o AffiliateWP inclui estilização mínima para a Área de Afiliados e depende da estilização atual do tema para a maior parte do trabalho pesado.
Para muitos de nossos clientes, a estilização padrão da Área de Afiliados é perfeita. Links aparecem na cor de link do tema, o texto é exibido na fonte do tema, os elementos do formulário têm a estilização de formulário do tema e assim por diante. No entanto, recebemos o ticket de suporte ocasional perguntando por que a Área de Afiliados não parece muito "flashy", com esquemas de cores personalizados, ícones, animação, fontes personalizadas; o que você quiser!
Poderíamos ter optado por estilizar a Área de Afiliados com base nas "tendências atuais de design", mas os clientes nem sempre concordarão com as decisões de design que tomamos. Como tal, uma Área de Afiliados fortemente estilizada provavelmente não corresponderá ao tema WordPress do cliente e, considerando os milhares de clientes que usam o AffiliateWP, você pode imaginar o problema potencial…
Os clientes exigirão que "corrijamos" o tema deles porque o AffiliateWP o "quebrou".
É melhor adicionar estilização a uma tela limpa (como a Área de Afiliados do AffiliateWP) do que remover tudo e começar de novo. Além disso, algumas tendências de design podem sair de moda no ano seguinte e seríamos forçados a redesenhar a Área de Afiliados repetidamente.
Como decidimos manter as coisas simples desde o início, nossos clientes sempre terão uma Área de Afiliados com ótima aparência que corresponde ao seu tema WordPress. Se houver o desejo de adicionar elementos de design personalizados, tudo o que é necessário é alguma estilização CSS.
Estilização com CSS
Ensinar CSS não é o objetivo deste artigo, mas felizmente existem inúmeros tutoriais disponíveis na web. Não há maneira melhor de aprender do que experimentando, mas antes de fazê-lo, você precisará considerar onde colocar seu código CSS personalizado.
No seu tema filho
O código CSS personalizado pode ser adicionado ao arquivo style.css do seu tema filho. Se você não tem um tema filho, é muito fácil criar um. Adicionar CSS a um tema filho garante que você não perca sua estilização personalizada quando o tema pai for atualizado.
Em um plugin personalizado
Existem muitos plugins gratuitos disponíveis no repositório do WordPress que permitem adicionar código CSS personalizado ao seu site, colando o CSS diretamente no admin do WordPress. Se o seu tema for atualizado, você não perderá suas modificações. Aqui está um desses plugins que me vem à mente: Reaktiv CSS Builder.
Encontrando os seletores CSS corretos para usar
Para estilizar a Área do Afiliado com CSS, você precisará saber o que estilizar. A maneira mais fácil de fazer isso é usar as ferramentas de desenvolvedor integradas do seu navegador. Isso permite que você simplesmente passe o mouse sobre qualquer elemento na Área do Afiliado e descubra exatamente qual é o seletor CSS relevante a ser usado.
Cada navegador tem uma maneira ligeiramente diferente de acessar suas ferramentas de desenvolvedor:
Chrome
https://developer.chrome.com/devtools
Firefox
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
Outra maneira de descobrir quais seletores CSS usar é olhar os arquivos de template do AffiliateWP em um editor de código. Todos os arquivos de template relevantes para a Área do Afiliado estão incluídos na pasta templates do plugin.
dashboard.php
O painel do afiliado
dashboard-tab-urls.php
A aba URLs do painel do afiliado
dashboard-tab-stats.php
A aba Estatísticas do painel do afiliado
dashboard-tab-graphs.php
A aba Gráficos do painel do afiliado
dashboard-tab-referrals.php
A aba Indicações do painel do afiliado
dashboard-tab-visits.php
A aba Visitas do painel do afiliado
dashboard-tab-creatives.php
A aba Criativos do painel do afiliado
dashboard-tab-settings.php
A aba Configurações do painel do afiliado
Estilizando os links da Área do Afiliado para parecerem "abas"
Um dos pedidos que recebemos é estilizar os links da Área do Afiliado para parecerem "abas". Abaixo está um exemplo de como você pode conseguir isso usando estilo CSS e o tema padrão TwentySixteen do WordPress.
Algo muito importante a notar é que todos os temas são únicos. Embora tenhamos fornecido código de exemplo para transformar os links em abas, pode ser necessário um estilo adicional para o seu tema. Com o TwentySixteen, tivemos que adicionar alguns estilos extras para que as coisas ficassem como queríamos. Isso é anotado nos comentários CSS no final.
Veja como os links padrão da Área do Afiliado ficam "fora da caixa" (com o tema TwentySixteen).
Veja como nossas novas abas ficam depois que algum estilo CSS foi adicionado.
Para experimentar você mesmo:
- Veja o código CSS.
- Copie e cole o código CSS (tudo entre as tags <style>) em um plugin CSS personalizado ou diretamente no arquivo style.css do seu tema filho (como discutido anteriormente).
- Aproveite!
Como nota final, os trechos de código em nosso repositório são configurados para serem plugins por conveniência. Uma maneira alternativa de usar o código CSS é salvar o arquivo mostrado e instalá-lo diretamente como um plugin em seu site. Você pode encontrar instruções sobre como fazer isso na seção “Usando Snippets”. Usá-lo desta forma tem a vantagem adicional de carregar o CSS apenas na sua Área de Afiliados e não em qualquer outra página que não o exija.
Com um pouco de entusiasmo e algum conhecimento básico de CSS, você pode estilizar a Área de Afiliados para que ela fique exatamente como você deseja. Se você estiver interessado em aprender mais sobre CSS, confira alguns tutoriais e experimente os vários elementos de design. Você pode até se divertir!
Boas estilizações!
Bom tutorial,
Vou modificar minha área de afiliados 😀
muito mais fácil com o visual composer, lol.
Com certeza! Existem muitas maneiras de abordar isso 🙂
é possível usar o elementor para editar o design da área de afiliados?
Estou esperando uma resposta para isso também. Talvez Andrew possa responder em algum momento este ano. Tnx.
Olá, você quer editar a página em si (ela se chama "Área de Afiliados" por padrão) ou quer editar os links reais, campos de formulário, etc. dentro da Área de Afiliados?
A página pode ser projetada usando Elementor, mas a Área de Afiliados em si precisaria ser modificada adicionando CSS personalizado ao Elementor. A Área de Afiliados é gerada usando um bloco ou shortcode (você pode escolher qual deles deseja usar), então não é algo que você possa personalizar de dentro do Elementor.
Como substituir os templates do plugin? Qual hierarquia você tem que colocar os arquivos em seu tema filho? Tentei todas as óbvias, nada está funcionando. Esta é uma opção de personalização absolutamente crítica necessária para personalizar a área de afiliados do WP, e você não fala sobre isso neste artigo.
Veja este artigo da documentação: http://docs.affiliatewp.com/article/118-modifying-template-files
Obrigado cara,
Está funcionando como um encanto.
Fico feliz em saber que esta postagem ajudou.
Qual é o melhor tema ou template do wp para usar com o plugin wp affiliate?
AffiliateWP funciona bem com qualquer tema do WP. O melhor tema será aquele cujo design e funcionalidade você gostar.
como configurar na aba do menu lateral...? você pode me ajudar...?
Olá Yupi, um dos consultores terceirizados pode ajudá-lo se você precisar de algum desenvolvimento personalizado: https://affiliatewp.com/consultants/
Recomendo tornar o plugin e os add-ons compatíveis com o Beaver Builder.
Olá,
Isso foi legal, mas não atendeu totalmente aos meus requisitos, então criei algo que parece um pouco melhor (se me permite dizer 🙂
https://github.com/mattbingham/wordpress-affiliateswp/blob/master/style1.css
Captura de tela aqui: https://github.com/mattbingham/wordpress-affiliateswp/blob/master/affiliateswp-style1.jpg
É responsivo, então as abas devem pular para a próxima linha em dispositivos menores.
Eu te amo! Obrigado por isso
Estou procurando comprar este plugin, já testei e gostei, mas tenho apenas uma pergunta e parece ser a mais importante para eu decidir comprar ou pular.
Seu plugin parece ótimo no desktop, mas de alguma forma em telas pequenas como em celulares, a área de afiliados, uma vez clicada em qualquer aba, seja Painel ou Estatísticas, o conteúdo pula para o final da tela, após o fim de todas as abas. E tudo que eu quero é que em tela pequena eu possa editar usando CSS em um tema filho de forma que, uma vez clicadas as abas, ele deslize para a próxima página com seu conteúdo e eu possa adicionar um botão para voltar ao menu.
Se for possível, então eu comprarei
Olá Tabish!
Isso parece possível, mas você precisará de algum conhecimento de CSS e HTML (talvez até JavaScript para obter o efeito de deslizamento) para obter o resultado final que você deseja.
A Área de Afiliados pode ser completamente personalizada ao seu gosto, copiando os arquivos de modelo para o seu tema filho do WordPress.
Mais informações sobre os arquivos de modelo podem ser encontradas aqui: https://docs.affiliatewp.com/article/118-modifying-template-files
Espero que ajude!
Olá
Quero adicionar algum texto sob a aba de URLs de afiliados. Como é possível?
Olá Saket,
Você poderia conseguir isso de várias maneiras:
1. Crie sua própria aba de URLs personalizada usando o complemento Affiliate Area Tabs: https://affiliatewp.com/add-ons/official-free/affiliate-area-tabs/
Você pode usar uma página do WP para a aba, o que significa que você pode colocar qualquer coisa nela, incluindo seu texto personalizado. Você pode então colocar o shortcode [affiliate_urls] abaixo do seu texto para imitar a funcionalidade fornecida na aba original.
Este shortcode é fornecido pelo complemento Affiliate Area Shortcodes: https://affiliatewp.com/add-ons/official-free/affiliate-area-shortcodes/
2. Adicione o texto usando o arquivo de modelo dashboard-tab-urls.php fornecido pelo AffiliateWP. Mais informações sobre arquivos de modelo aqui: https://docs.affiliatewp.com/article/118-modifying-template-files
3. Adicione o texto através do hook de ação affwp_affiliate_dashboard_urls_top. Algum conhecimento de desenvolvimento seria necessário para isso.
Como posso combinar o conteúdo de duas abas?
Por exemplo, quero URLs de afiliados e Estatísticas sob uma única aba
Como posso estilizar o portal? Especificamente, a página de criativos. Tentei adicionar as classes flex-1, w-0 -mr -px ao meu CSS de tema filho, mas nada muda. Não há "creatives.php" dentro de /wp-content/plugins/affiliatewp-affiliate-portal/templates/ para eu ter uma ideia melhor das classes usadas (mas tenho certeza de que são essas).
Eu só quero mudar a cor de fundo de branco para que a arte reversa possa ser vista.
Olá Shane,
O complemento Affiliate Portal tem sua própria estilização personalizada, portanto, não é possível personalizar o CSS. O portal remove todas as outras folhas de estilo para evitar conflitos de estilização entre ele e o tema ativo.
Provavelmente adicionaremos algumas opções básicas de cores no futuro para que você possa combinar melhor as cores da sua marca. Também estamos considerando o suporte ao modo escuro. Isso ajudaria a arte invertida a ser vista contra o fundo branco na página de criativos.
A Área de Afiliados padrão ainda é uma opção para você? Você pode personalizá-la como quiser e ela tem modelos que você pode substituir (o portal não tem nenhum modelo).
O Portal me atraiu e eu comprei a versão Pro. Então percebi que não funcionaria porque meu site está em modo escuro com cores de fonte do corpo BRANCAS.
Passei as últimas 7 horas tentando personalizar as cores via CSS e só li seu comentário aqui. Estou morrendo
olá quero exibir apenas a página de login e uma página de registro nesta página de login o usuário se não estiver registrado então clique no link de registro caso contrário faça login em nossa conta de afiliado como isso é possível?
O AffiliateWP exibe um formulário de login e registro na mesma página por padrão. Se um usuário estiver desconectado, ele verá ambos.
Há um link quebrado no artigo: https://github.com/AffiliateWP/affiliatewp-code-snippet-library/blob/master/affiliate-area/affiliate-area-custom-styling.php
Obrigado Lucas, o link foi atualizado.
onde posso colocar classes CSS?