Você já quis fazer o AffiliateWP se adequar às suas necessidades exatas, como adicionar uma mensagem pessoal ao painel do afiliado ou ajustar alguns elementos de design? Se você está se perguntando como personalizar o AffiliateWP sem nenhum risco para o seu site, este guia o guiará passo a passo.
Com a ajuda do plugin WPCode, mostraremos como adicionar trechos de código personalizados rapidamente, com segurança e em um só lugar.
Por que adicionar código personalizado?
Adicionar código personalizado pode ajudar você a tornar o AffiliateWP verdadeiramente seu. Se você deseja alterar a aparência ou personalizar a área de afiliados, trechos de código personalizados podem dar vida a essas alterações. Mas modificar o código diretamente nos arquivos do plugin pode ser arriscado — se algo der errado, isso pode tornar seu site inacessível.
Em vez disso, usaremos uma abordagem mais segura trabalhando com uma ferramenta de gerenciamento de código chamada WPCode, que mantém seus arquivos principais intocados enquanto permite que você organize e ative trechos de código personalizados em um só lugar.
Usando o plugin WPCode para adicionar os trechos de código
O primeiro passo é instalar o plugin WPCode, que permite adicionar e gerenciar trechos de código facilmente sem ter que editar os arquivos principais. O WPCode oferece uma área dedicada para adicionar código personalizado com segurança, para que você possa manter todas as suas alterações organizadas em um só lugar.
Para configurar o WPCode, vá para o seu painel do WordPress, navegue até Plugins > Adicionar Novo e pesquise por WPCode.
Depois de encontrá-lo, clique em Instalar Agora e depois em Ativar.
Após ativar o plugin, você verá um novo item de menu chamado Trechos de Código no painel.
É aqui que você adicionará e gerenciará seu código personalizado.
Adicionando código PHP
Vamos tentar adicionar nosso primeiro trecho de código personalizado ao AffiliateWP. Imagine que você deseja adicionar um título de boas-vindas no topo da Área do Afiliado para torná-la mais envolvente para seus afiliados. Este é um uso perfeito para um trecho PHP.
No seu painel do WordPress, vá para Trechos de Código e selecione Adicionar Novo. Como você acabou de instalar o plugin, sua lista estará vazia.
Você será levado a uma tela onde poderá inserir seu código personalizado. Aqui, você pode adicionar seu próprio código exclusivo ou selecionar um trecho de código da biblioteca pré-fabricada. Passe o mouse sobre Adicionar Seu Código Personalizado (Novo Trecho) e clique no botão Adicionar Trecho Personalizado.
Você será levado a uma tela onde poderá selecionar o tipo de código. Aqui você precisa selecionar Trecho PHP.
Comece dando um título ao seu trecho, como Título Personalizado da Área do Afiliado — algo que o ajude a lembrar o que este trecho faz.
Na caixa de código, cole o seguinte código PHP:
// Add a custom heading to the Affiliate Area
function custom_affiliate_area_heading() {
echo '<h2>Welcome to Your Affiliate Dashboard!</h2>';
}
add_action('affwp_affiliate_dashboard_top', 'custom_affiliate_area_heading');
Este trecho de código adiciona um título que aparece no topo da Área do Afiliado. Para garantir que o trecho seja executado automaticamente, escolha Inserção Automática nas opções de Inserção.
Quando terminar, ative o menu Ativo e clique no botão Salvar Trecho.
Agora, ao acessar a Área de Afiliados, você verá o título personalizado dando as boas-vindas aos seus afiliados.
Adicionando CSS personalizado
Agora, digamos que você queira ajustar a cor das abas de navegação na Área de Afiliados. Para isso, usaremos um snippet de CSS que altera a cor do texto, fazendo com que as abas de navegação combinem melhor com o design do seu site.
No painel do WPCode, clique em Adicionar Novo para criar outro snippet e selecione o snippet de CSS.
Na caixa de código, cole o seguinte código CSS:
/* Change text color for all navigation tabs */
#affwp-affiliate-dashboard-tabs li.affwp-affiliate-dashboard-tab a {
color: #333; /* Default text color */
}
/* Change text color for the active tab */
#affwp-affiliate-dashboard-tabs li.affwp-affiliate-dashboard-tab.active a {
color: #3498db; /* Active tab text color */
font-weight: bold; /* Optional: make active tab text bold */
}
Em seguida, defina a Inserção como Inserção Automática para que o estilo se aplique a todas as abas de navegação do AffiliateWP. Salve e ative seu snippet, e os links de navegação na Área de Afiliados agora serão exibidos com as cores atualizadas.
É isso! Você adicionou snippets PHP e CSS para personalizar o AffiliateWP, criando uma experiência mais personalizada para seus afiliados. Usar o WPCode torna esse processo seguro e simples, para que você não precise se preocupar em editar arquivos principais ou gerenciar alterações complexas de código.