Como criar um tema WordPress personalizado do zero (2022)

Deseja criar um tema WordPress personalizado para dar ao seu site uma aparência única?

Construir um tema WordPress costumava ser impossível sem desenvolvedores caros ou ter conhecimento de codificação. Mas hoje, alguns plugins do WordPress oferecem a capacidade de criar seu próprio tema personalizado usando a funcionalidade simples de arrastar e soltar.

Neste artigo, mostraremos como criar seu próprio tema WordPress personalizado sem escrever código.

Para pular para uma seção específica do tutorial, você pode usar os links rápidos antes:

1. Instale o plug-in SeedProd
2. Selecione um modelo de tema
3. Personalize suas partes do tema WordPress
4. Conecte-se com um serviço de correspondência
5. Publique seu tema WordPress personalizado

Como você pode criar um tema WordPress do zero?

Os temas do WordPress são criados usando uma combinação de PHP, CSS, JavaScript e HTML. Estas são linguagens de codificação que exigem muito treinamento para aprender. Então, se você não fosse um desenvolvedor, sua única opção costumava ser contratar agências de desenvolvimento para criar temas para você, o que pode ser muito caro.

Mas graças ao SeedProd, agora você pode criar seu próprio tema WordPress personalizado sem codificação. Ele vem com uma interface simples de arrastar e soltar que qualquer pessoa pode usar e permite personalizar facilmente todos os aspectos do design do seu tema.

Por que SeedProd?

SeedProd é o plugin construtor de landing page mais fácil de usar para WordPress.

Ele fornece um alto nível de personalização e vem com uma ampla variedade de recursos extras, incluindo:

• Criador de temas
• Mais de 150 modelos de página de destino
• Construtor de arrastar e soltar
• Integrações de e-mail marketing
• 2 milhões de fotos
• e mais.

Com esses recursos, você pode criar rapidamente páginas de destino em seu site dentro de um tema WordPress existente. Mas agora, o SeedProd adicionou um novo recurso que permite criar seu próprio tema WordPress personalizado usando o mesmo design de arrastar e soltar para máxima facilidade de uso.

Vamos ver como você pode construir um tema WordPress usando o SeedProd.

Como criar um tema WordPress personalizado usando o SeedProd

Vamos supor que você já tenha um site WordPress hospedado em um domínio para este tutorial. Caso contrário, você pode conferir este guia sobre como criar um site WordPress.

Se você deseja substituir seu tema WordPress existente pelo que você vai criar, recomendamos usar um site de desenvolvimento de teste para ele. Dessa forma, você não corre o risco de causar erros acidentalmente em seu site principal. Os principais serviços de hospedagem do WordPress, como o Bluehost, oferecem ambientes de desenvolvimento para WordPress.

Por fim, certifique-se de fazer backup do seu site antes de criar seu tema. Isso garante que você sempre possa restaurar seu site para um estado estável se algo der errado. Você pode encontrar várias opções nesta lista de plugins de backup do WordPress.

Depois de fazer esses preparativos, é hora de começar a criar um tema WordPress personalizado sem código!

Etapa 1. Instale o plug-in SeedProd

Antes de tudo, instale o plugin SeedProd no seu site WordPress. Você pode ver as instruções para instalar plugins do WordPress se nunca instalou um plugin antes.

Você precisará de pelo menos a licença SeedProd Pro para desbloquear o recurso de construtor de temas. Para ativar a licença Pro, abra a área da sua conta SeedProd e clique na guia Downloads . Role para baixo para encontrar sua chave de licença e copie-a.

Em seguida, abra sua área de administração do WordPress e vá para SeedProd » Configurações. Em seguida, insira a chave que você copiou no campo Chave de licença e pressione Verificar .

Agora, vá para SeedProd » Theme Builder. Este é o painel onde todos os seus diferentes elementos de tema ficarão.

Agora, existem duas maneiras de criar seu tema com o SeedProd: crie você mesmo cada parte individual do seu tema ou use um modelo pré-fabricado e edite as partes que você não gosta.

Cada tema do WordPress consiste em diferentes partes, incluindo:

• Cabeçalho
• Rodapé
• Pagina inicial
• Postagem única
• Página Única
• Arquivo ou página do blog
• Barra Lateral

Pode ser um pouco intimidante criar cada uma dessas partes do zero se for a primeira vez que você cria um tema. Nesse caso, há uma maneira mais fácil de fazer isso.

O SeedProd vem com vários modelos de temas pré-criados que configuram a estrutura geral do seu tema completo. Dessa forma, todas as diferentes partes são adicionadas automaticamente à estrutura, mas você ainda pode personalizar cada parte de acordo com sua preferência.

Para o resto do tutorial, usaremos um dos temas do SeedProd para mostrar as etapas, pois esse é o método mais amigável para iniciantes de criar um tema WordPress personalizado.

Etapa 2. Selecione um modelo de tema

O recurso de construtor de temas tem vários temas pré-criados modelados com base em sites de negócios de diferentes tipos. Para visualizar os temas disponíveis, clique no botão Temas .

O SeedProd vem com modelos para diferentes negócios e setores, incluindo agências de marketing, restaurantes, empresas de cuidados com animais de estimação e muito mais.

Vamos usar o tema Starter para este exemplo. Assim que você selecionar um tema, o SeedProd criará automaticamente todas as partes individuais do tema.

Você também pode desativar diferentes partes do tema se não precisar delas para o seu site. Para desabilitar qualquer seção, você pode usar os botões de alternância sob o título Publicado.

Você pode alterar as configurações de cada parte do seu tema clicando no botão Editar Condições .

Isso abrirá um modal onde você poderá alterar o nome, tipo, prioridade e configurar as condições de quando e onde essa parte deve aparecer em seu site.

Na maioria dos casos, você pode deixar essas configurações como padrão e seguir para personalizar cada parte do tema.

Etapa 3. Personalize suas partes do tema WordPress

Agora que todos os componentes essenciais do seu tema estão definidos, podemos personalizar o design de cada um para ficar exatamente como queremos.

Para começar a editar, mova o cursor sobre uma parte do tema e clique em Editar Design .

Para este tutorial, personalizaremos o cabeçalho, o rodapé, a página inicial e a página do blog. Os mesmos princípios de personalização se aplicam a todas as outras páginas.

Cabeçalho e rodapé

Para começar a editar o cabeçalho, clique no botão Editar Design que aparece quando você passa o mouse sobre Cabeçalho. Isso o levará à interface do construtor de temas de arrastar e soltar do SeedProd. Aponte e clique na área do cabeçalho para abrir as opções de personalização, que aparecerão no painel esquerdo.

Por padrão, o cabeçalho tem o logotipo da SeedProd. Você pode substituí-lo pelo logotipo da sua empresa com muita facilidade. Clique na imagem para excluí-la ou substituí-la carregando seu próprio logotipo.

O SeedProd permite que você altere o tamanho e o alinhamento do seu logotipo. Você também pode adicionar um link personalizado ao logotipo. Por exemplo, talvez você queira redirecionar os usuários para a página inicial quando eles clicarem no logotipo.

Você também pode alterar a cor de fundo do cabeçalho. Basta mover o mouse sobre a área do cabeçalho até ver um contorno azul. Clique nele para encontrar um novo menu de opções no painel esquerdo. Agora, você pode alterar a cor do cabeçalho e escolher uma cor sólida ou até mesmo um gradiente.

Agora, clique na guia Avançado para acessar mais configurações, como sombra, espaçamento, borda, posição e muito mais.

Quando terminar de fazer todas as alterações, clique no botão Salvar no canto superior direito do construtor e clique no botão cruzado para sair para o painel principal do construtor de temas.

Se você deseja incluir um cabeçalho em seu site, pode repetir essas mesmas etapas para editar o design do rodapé.

Em seguida, vamos editar a página inicial.

Pagina inicial

A página inicial é a frente do seu site. Normalmente, ele contém elementos importantes que definem quem você é, o que você faz e fornece prova social por meio de avaliações e depoimentos.

O modelo de tema inicial que estamos usando tem todas as seções principais que você normalmente encontrará na página inicial de um site de negócios, incluindo:

• Área do herói
• Seção de recursos
• Depoimentos
• Seção de perguntas frequentes

Você pode alterar todos os blocos desta página, incluindo imagens, texto, botões, cores e layout.

No gif abaixo, mostraremos como é fácil editar diferentes partes da página usando ações simples de arrastar e soltar.

Use as configurações e blocos no menu à esquerda para editar o design até que esteja totalmente satisfeito. Depois de fazer todas as alterações, verifique a visualização para dispositivos móveis.

Se algum elemento do site parecer estar se desfazendo na visualização para dispositivos móveis, você poderá voltar à edição e fazer ajustes até que fique perfeito.

Quando estiver satisfeito com sua página inicial, pressione o botão Salvar e retorne ao painel do construtor de temas SeedProd.

Página do blog

Vamos agora criar uma página de blog personalizada para o seu site. No painel do construtor de temas, clique no link Editar design na seção Índice do blog, Arquivos, Pesquisa para começar a editá-lo.

Aqui, você pode adicionar ou remover diferentes elementos, como conteúdo de postagem, trecho, biografia do autor e muito mais usando a interface de arrastar e soltar. Clique em uma das postagens exibidas nesta página para acessar mais configurações.

Essas configurações permitem que você altere o tipo de consulta de postagens, layout, paginação. Você também pode alterar os detalhes adicionais de controle que devem aparecer com cada postagem, como data da postagem, autor, imagem em destaque, trecho e muito mais.

Depois de personalizar a página do blog, clique em Salvar e retorne ao seu painel novamente.

CSS global

A seção Global CSS define as configurações globais para cores, tipografia, layout e estilo do seu tema.

No painel do Theme Builder, clique em Editar design na seção CSS global do seu tema.

Por exemplo, você pode escolher a cor e a fonte do botão que deseja exibir em todo o site.

Da mesma forma, você pode alterar fontes de texto, planos de fundo, layout e até adicionar CSS personalizado ao seu tema. Essas alterações serão aplicadas em todo o site e garantirão consistência estilística.

Quando terminar de ajustar as configurações ao seu gosto, clique no botão Salvar .

Etapa 4. Conecte-se com um serviço de correspondência

O SeedProd permite que você se conecte ao seu serviço de email marketing, o que é um passo importante se você quiser incluir uma assinatura ou formulário de inscrição em seu tema.

Na verdade, se você tiver o WPForms instalado em seu site, ele se integra automaticamente ao SeedProd. Assim, você pode incorporar todos os formulários que criou com WPForms em qualquer parte do seu tema usando o SeedProd.

Depois de criar um formulário, você precisa garantir que seu serviço de marketing por e-mail esteja conectado ao SeedProd para que você possa enviar e receber e-mails relacionados ao formulário.

Para conectar seu serviço de email marketing ao seu tema SeedProd, clique na guia Conectar na barra superior da tela do criador de temas enquanto estiver editando qualquer parte do tema.

Clique em qualquer mailer da lista e siga as instruções na tela para completar a integração com o seu tema SeedProd. Quando terminar, suas entradas de formulário de optin serão automaticamente adicionadas à sua lista de e-mails.

Etapa 5. Publique seu tema WordPress personalizado

Seu tema agora está pronto para ser implantado! Para ativar seu tema, vá para o painel do construtor de temas e clique no botão de alternância Ativar tema do SeedProd no canto superior direito da tela.

Agora, vamos dar uma olhada no nosso tema WordPress personalizado recém-criado!

Esta é a página inicial do tema com o cabeçalho:

E aqui está a página do blog.

E é isso! Você acabou de criar seu primeiro tema WordPress personalizado sem código!

Em seguida, crie formulários de contato para seu site WordPress

Agora que você tem um novo site WordPress, considere adicionar formulários de contato para permitir que os visitantes o alcancem facilmente. WPForms é o construtor de formulários WordPress mais fácil de usar, com mais de 5 milhões de instalações ativas.

Você não apenas pode aumentar sua lista de e-mails com o WPForms, mas também realizar uma série de outras atividades, como coletar doações para sua organização sem fins lucrativos.

Crie seu formulário WordPress agora

Pronto para construir seu formulário? Comece hoje com o plug-in mais fácil de criação de formulários do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

Se este artigo o ajudou, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.