Deseja criar um tema personalizado do WordPress a partir do zero?
No passado, era necessário seguir o codex do WordPress e ter um conhecimento decente de codificação para criar um tema personalizado do WordPress. Mas, graças aos novos geradores de temas do WordPress, agora qualquer um pode criar um tema totalmente personalizado do WordPress em uma hora (não é necessário conhecimento de codificação).
Neste artigo, mostraremos como criar facilmente um tema personalizado do WordPress sem escrever nenhum código.
Crie um tema WordPress personalizado para iniciantes
Ao contrário dos sites HTML estáticos, os temas do WordPress são um conjunto de arquivos de modelo escritos em PHP, HTML, CSS e JavaScript. Geralmente, você precisa ter um entendimento decente de todas essas linguagens de design da web ou contratar um desenvolvedor da web para criar um tema personalizado do WordPress.
Se você contratou um desenvolvedor ou agência, o custo de um tema WordPress personalizado pode chegar a milhares de dólares.
Como muitos proprietários de pequenas empresas não podiam arcar com os altos custos de um tema personalizado do WordPress, muitos deles simplesmente se contentaram com os temas padrão que acompanham o WordPress.
Aqueles que não quiseram se definir e queriam personalizações, usaram um construtor de páginas de arrastar e soltar do WordPress ou uma estrutura de tema para criar um tema personalizado.
Embora as estruturas de temas do WordPress tenham facilitado a criação de um tema do WordPress, elas são uma solução para os desenvolvedores, e não para os proprietários de sites comuns.
Por outro lado, os plug-ins do construtor de páginas do WordPress tornaram muito fácil a criação de layouts de páginas personalizados usando uma interface de arrastar e soltar, mas estavam limitados apenas a layouts. Você não pode criar temas personalizados com ele.
Até o Beaver Builder, um dos melhores plugins para construtores de páginas do WordPress decidiu resolver esse problema com seu plug-in chamado Beaver Themer.
Beaver Themer é um plug-in de criação de sites que permite criar designs de temas personalizados usando uma interface de arrastar e soltar e sem aprender a codificar.
Vamos dar uma olhada em como usar o Beaver Themer para criar facilmente um tema para WordPress.
Tutorial em vídeo
Inscrever-se no WPBeginner
Se você não gosta do vídeo ou precisa de mais instruções, continue lendo.
Configure o Beaver Themer para criar um tema personalizado
O Beaver Themer é um plug-in adicional para o Beaver Builder; portanto, você precisará dos dois plug-ins para este artigo.
Primeiro, você precisa instalar e ativar os plugins Beaver Builder e Beaver Themer. Para mais detalhes, consulte o nosso guia passo a passo sobre como instalar um plugin do WordPress.
O Beaver Themer permite criar um tema personalizado, mas você ainda precisará de um tema para começar. Recomendamos o uso de um tema leve que inclua um modelo de página de largura total para atuar como seu tema inicial.
Você pode encontrar muitos desses temas no diretório de temas do WordPress.org. Os temas mais modernos do WordPress incluem um modelo de largura total. Nossas melhores opções são:
Astra – Um tema WordPress para todos os fins, leve e gratuito, que vem com suporte embutido para o Beaver Builder.
OeanWP – Outro popular tema WordPress multiuso gratuito que vem com suporte completo à criação de páginas.
Temas do StudioPress: todos os seus temas são compatíveis com o Beaver Builder e funcionariam muito bem com o Beaver Themer.
Para fins deste tutorial, usaremos o Astra, que é um tema WordPress leve e fácil de personalizar.
Configure o seu tema para Beaver Themer
Ao criar um tema WordPress personalizado com o Beaver Themer, é importante garantir que o Beaver Themer tenha acesso ao corpo inteiro da página (de ponta a ponta).
Esse é o layout padrão do Astra. Como você pode ver, esse design inclui uma barra lateral que pode ser difícil de trabalhar ao usar o Beaver Themer.
Você pode mudar isso visitando o painel de administração do seu site e navegando até Aparência »Personalizar página. A partir daqui, você deve mudar para Design »Barras laterais língua.
Uma vez lá, selecione "Sem barra lateral" na opção de layout padrão e clique no botão Publicar para salvar as alterações.
Seu tema agora começará a usar um layout sem barras lateral. Este é o melhor design para usar com o Beaver Themer.
Esse layout de página inteira permite que o Beaver Themer use cada centímetro da tela, para que você possa criar uma bela experiência visual de ponta a ponta.
A maioria dos temas do WordPress inclui um arquivo de modelo para páginas de largura total. Se você estiver usando outro tema, poderá encontrar uma opção para remover o barras lados nas configurações do tema.
Se você não conseguir encontrá-lo, entre em contato com o desenvolvedor do tema e ele poderá ajudá-lo.
Depois de configurar seu tema em um layout de largura total, você estará pronto para criar seu tema WordPress personalizado com o Beaver Themer.
O básico do Quick Beaver Themer
O Beaver Themer trabalha no Beaver Builder. Como um complemento para o construtor de páginas, o Beaver Builder permite arrastar e soltar elementos em uma página para criar layouts personalizados.
Possui os seguintes elementos que você pode usar em seus designs:
Apenas edite uma página no Beaver Builder e clique no botão Adicionar no canto superior direito. Em seguida, você pode arrastar e soltar colunas, linhas, módulos na sua página e começar a editá-los imediatamente.
Se você não deseja iniciar do zero, selecione uma lista de modelos pré-fabricados para iniciar.
O Beaver Builder também permite salvar seus designs e usá-los posteriormente como modelos.
Para obter mais informações, consulte nosso artigo sobre como criar um layout de página personalizado com o Beaver Builder.
No entanto, não queremos apenas criar layouts de página. Queremos criar um tema personalizado completo.
É quando Beamer Themer entra.
Adicione outro elemento ao Beaver Builder chamado "Themer Layout".
Os layouts do Themer permitem criar layouts personalizados para o cabeçalho, rodapé, áreas de conteúdo, página 404 e outras partes do modelo.
Esses são os elementos básicos de todos os temas do WordPress e, ao usá-los, você poderá criar um tema personalizado que atenda às suas necessidades.
Usando modelos do Beaver Themer para criar um tema personalizado do WordPress
Nas instruções a seguir, guiaremos você pelas etapas necessárias para criar os elementos de tema personalizado mais populares. Quando terminar, você terá transformado completamente o tema base em um tema filho do WordPress totalmente personalizado.
Crie um cabeçalho personalizado para o seu tema
Vamos começar com a área do cabeçalho do seu site. Um cabeçalho personalizado é um componente essencial de um tema, e a criação de um pode ser complicada usando métodos tradicionais.
Felizmente, o Beaver Themer possui recursos de cabeçalho embutidos. Você pode usar o modelo pré-criado ou usar os módulos de menu e imagem com um layout de duas colunas.
Para chegar a essa área de cabeçalho, primeiro precisamos configurar um layout de cabeçalho no Beaver Themer. Visita Beaver Builder »Adicionar novo página e forneça um título para seu cabeçalho.
Depois disso, selecione "Themer Layout" como o tipo e "Header" como a opção de layout. Quando terminar, clique no botão "Adicionar design do Themer" para continuar.
Isso o levará à página de configuração do layout. A partir daqui, você deve selecionar "Site inteiro" como o local onde o modelo do cabeçalho será exibido.
Em seguida, clique no botão "Iniciar Beaver Builder" para abrir a interface do gerador.
O Beaver Builder será iniciado com uma coluna básica simples e um layout de cabeçalho de duas linhas como ponto de partida.
Você pode usar as mesmas ferramentas de arrastar e soltar do Beaver Builder para alterar o plano de fundo, as cores, o texto etc. Você também pode adicionar outros módulos, carregar modelos pré-fabricados e adicionar linhas / colunas clicando no botão Adicionar no canto superior direito.
Quando estiver satisfeito com o design, clique no botão Concluído para salvar ou publicar seu design.
Agora você pode visitar o site deles para ver o cabeçalho do seu tema personalizado em ação. Como você pode ver, aplicamos o layout do cabeçalho ao nosso tema personalizado.
Além do cabeçalho, ele ainda não mostra nenhum conteúdo e você provavelmente verá a área do rodapé do tema base.
Vamos mudar isso.
Crie um rodapé personalizado para o seu tema
Você pode criar um rodapé personalizado para o seu tema usando o Beaver Themer, assim como criou um cabeçalho personalizado.
Dirigir-se a Beaver Builder »Adicionar novo página e forneça um título para o layout do rodapé. Em seguida, selecione "Themer Layout" como o tipo e "Footer" como a opção de layout.
Clique no botão "Add Themer Design" para continuar.
Isso o levará à página de configuração do layout. A partir daqui, você deve selecionar "Site Completo" como o local em que o modelo será exibido.
Depois disso, clique no botão "Iniciar Beaver Builder" para abrir a interface do gerador.
O Beaver Builder será iniciado com um layout de rodapé de três colunas. Você pode usar esse design como ponto de partida e começar a editar.
Você pode adicionar módulos, blocos de texto ou qualquer outra coisa que desejar. Você sempre pode alterar cores, fontes, adicionar uma imagem de fundo e muito mais.
Quando estiver satisfeito com o design, clique no botão Concluído para salvar ou publicar seu design.
Criar área de conteúdo para postagens e páginas
Agora que criamos cabeçalhos e rodapés para cada página e postagem no site, é hora de criar a postagem ou o corpo da página (a área de conteúdo).
Começaremos da mesma maneira que criamos o cabeçalho e o rodapé adicionando o layout "Singular" na página Adicionar novo.
Você escolherá onde exibir esse design. Você pode escolher o singular a ser usado em todas as postagens e páginas individuais ou escolher postagens ou apenas páginas.
Depois disso, clique no botão "Iniciar Beaver Builder" para abrir a interface do gerador.
O Beaver Builder carregará um layout de amostra exclusivo com o título da postagem / página na parte superior, seguido pelo conteúdo, caixa de bio do autor e área de comentários.
Você pode apontar e clicar para editar qualquer um desses itens ou adicionar novos módulos, colunas e linhas, conforme necessário.
Quando estiver satisfeito com o design, clique no botão Concluído para salvar e publicar suas alterações.
Agora você pode visitar o site deles para vê-lo em ação.
Crie layouts de arquivo para o seu tema personalizado
Agora que o seu tema personalizado começou a se formar, você pode continuar criando layouts para outras partes do seu site. As páginas de arquivo são onde o WordPress exibe suas categorias, tags, autor e arquivos mensais.
Vamos criar um layout de página de arquivo no seu tema personalizado.
Você começará visitando Beaver Builder »Adicionar novo página e forneça um título para o layout do arquivo.
Depois disso, selecione "Themer Layout" como o tipo e "File" como a opção de layout. Clique no botão "Add Themer Design" para continuar.
Isso o levará à página de configuração do layout. A partir daqui, você deve selecionar "Todos os arquivos" como o local em que o modelo será exibido. Você também pode criar layouts separados para cada tipo de arquivo individual, como data, resultados de pesquisa, categoria, tags etc.
Depois disso, clique no botão "Iniciar Beaver Builder" para abrir a interface do gerador.
O Beaver Builder será iniciado com um layout básico de arquivo de coluna única. Ele mostrará o título do arquivo na parte superior, seguido pelas postagens.
Você pode apontar e clicar em qualquer item para editar suas propriedades. Você também pode adicionar novos módulos, linhas e colunas, conforme necessário.
Depois disso, clique no botão "Concluído" para salvar e publicar suas alterações.
Crie outros designs para o seu tema WordPress personalizado
O Beaver Themer também permite criar layouts para outras páginas na hierarquia do modelo, por exemplo, página 404, partes do modelo, página de resultados de pesquisa e muito mais.
Usando a funcionalidade de arrastar e soltar incorporada do Beaver Builder, você pode criar facilmente seu próprio tema WordPress personalizado do zero, sem precisar escrever código. Este é realmente o método de desenvolvimento de temas WordPress mais amigável para iniciantes por aí.
Esperamos que este artigo tenha ajudado você a aprender como criar um tema personalizado do WordPress sem aprender a codificar. Você também pode conferir o nosso guia sobre como acelerar o seu site WordPress para uma melhor experiência do usuário e SEO.
Se você gostou deste artigo, assine o nosso canal YouTube para assistir a vídeos tutoriais do WordPress. Você também pode encontrar-nos em Twitter y Facebook.
