Como criar facilmente um tema WordPress personalizado (sem nenhum código)

Publicados: 2022-01-22


Deseja criar um tema WordPress personalizado do zero?

No passado, você tinha que seguir tutoriais complicados do WordPress e ter um conhecimento decente de codificação para criar um tema WordPress personalizado. Mas graças aos novos construtores de temas do WordPress, agora você pode facilmente criar um sem aprender nenhuma habilidade de programação.

Neste artigo, mostraremos como criar facilmente um tema WordPress personalizado sem escrever nenhum código.

Criando um tema WordPress personalizado sem nenhuma habilidade de codificação

Aqui está a lista de tópicos que abordaremos neste artigo.

  • Criando um tema WordPress personalizado para iniciantes
  • Criando um tema personalizado com o SeedProd Theme Builder
  • Editando um tema com o SeedProd Theme Builder
  • Alterando o design de todo o site para o seu tema
  • Aplicando e publicando seu tema WordPress personalizado
  • Criando outros layouts para seu tema WordPress personalizado

Preparar? Vamos começar.

Vídeo tutorial

Se preferir instruções escritas, continue lendo.

Criando um tema WordPress personalizado para iniciantes

Um site WordPress usa um tema para layout e design do site. Esses temas são compostos de arquivos de modelo escritos em PHP, HTML, CSS e JavaScript.

Normalmente, você precisaria ter uma compreensão decente de todas essas linguagens de web design ou contratar um desenvolvedor web para criar um tema WordPress personalizado.

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 WordPress personalizado, muitos deles apenas se contentam com temas padrão. Aqueles que não quiseram se contentar usaram um construtor de páginas do WordPress ou uma estrutura de temas para criar um tema personalizado.

Embora as estruturas de temas do WordPress facilitem a criação de um tema do WordPress, elas são uma solução para desenvolvedores, não para um proprietário de site comum.

Por outro lado, os plugins do construtor de páginas do WordPress tornaram super fácil criar layouts de página personalizados usando uma interface de arrastar e soltar, mas eles eram limitados apenas a layouts de página única. Você não pode criar temas personalizados com eles.

É aqui que entra o SeedProd.

É o melhor plugin construtor de temas WordPress que permite criar facilmente um tema WordPress personalizado sem escrever nenhum código.

Construtor de páginas de destino SeedProd

SeedProd é um construtor de páginas WordPress de arrastar e soltar para empresas, blogueiros e proprietários de sites. Ele também vem com um novo designer de tema personalizado que permite que você apenas aponte e clique para editar qualquer elemento.

Você também pode adicionar elementos de design comumente usados ​​ao seu tema com arrastar e soltar.

A melhor coisa sobre o construtor de temas SeedProd é que ele é independente de temas. Isso significa que ele não depende do seu tema WordPress existente para estilo ou funcionalidade, oferecendo total liberdade e controle sobre o design do seu site.

Dito isto, vamos dar uma olhada em como criar seu tema WordPress personalizado sem escrever nenhum código.

Criando um tema personalizado com o SeedProd Theme Builder

A configuração do construtor de temas SeedProd é bastante simples, pois funciona com qualquer site WordPress usando qualquer tema.

Primeiro você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Observação: você precisará de pelo menos o plano Pro ou Elite para desbloquear o construtor de temas.

Após a ativação, vá para a página SeedProd »Configurações para inserir a chave de licença do plug-in. Você pode encontrar essas informações em sua conta no site da SeedProd.

Digite sua chave de licença SeedProd

Depois de inserir sua chave de licença, agora você está pronto para criar seu tema WordPress personalizado usando o construtor de temas SeedProd.

Criar seu próprio tema WordPress personalizado com o SeedProd é bastante simples.

Primeiro, você precisa ir para a página SeedProd » Theme Builder . Aqui, você verá a lista de modelos para o seu tema personalizado atual do SeedProd. Como ainda não começamos, temos apenas um template Global CSS. Mostraremos como usar isso mais adiante no tutorial.

Crie seu tema personalizado

Para começar, você tem duas opções.

  • Use um dos temas SeedProd prontos como ponto de partida
  • Crie modelos de tema manualmente do zero

Vamos dar uma olhada em como essas opções funcionam.

1. Começando com um tema pronto (recomendado)

Recomendamos começar com um tema existente. Isso permite que o SeedProd gere automaticamente todos os arquivos de modelo. Estes são temas completos projetados profissionalmente, o que lhe dá uma vantagem na edição dos modelos de acordo com seus próprios requisitos.

Basta clicar no botão Temas e escolher um dos temas disponíveis. Existem diferentes temas para diferentes tipos de sites, então você pode escolher aquele que melhor atende às suas necessidades.

Escolha um tema para começar

Não se preocupe muito com design e layout neste momento. Todos esses temas são totalmente editáveis, então você pode alterar todos os aspectos dentro do construtor de temas.

Depois de escolher um tema, o SeedProd gerará todos os modelos de tema.

Modelos de tema

Esta é a versão de rascunho do seu tema WordPress personalizado.

Mais adiante neste tutorial, mostraremos como editar esses arquivos de tema para projetar seu tema e, em seguida, publicar seu tema para aplicá-lo em seu site.

2. Crie manualmente modelos de tema do zero

Como alternativa, você pode iniciar seu tema do zero clicando no botão 'Adicionar novo modelo de tema'. Você terá que dar um nome ao seu modelo e, em seguida, escolher um dos tipos de modelo para começar.

Criar um modelo de tema

Atualmente, você tem a opção de escolher entre os seguintes tipos de modelo:

  • Cabeçalho
  • Rodapé
  • Postagem única
  • Página Única
  • Arquivo
  • Procurar Resultados
  • Parte Global
  • Página personalizada

Você também pode definir condições para usar um modelo. Por exemplo, você pode aplicá-lo a todo o site ou a uma seção específica do seu site.

Depois de salvar o modelo, o SeedProd o abrirá no construtor de temas, onde você poderá começar a editá-lo.

Editando um tema com o SeedProd Theme Builder

Depois de gerar seus modelos de tema, você pode editá-los usando o SeedProd Theme Builder.

Basta clicar no link Editar design abaixo de um arquivo de modelo para editá-lo.

Editando um modelo

Isso iniciará o arquivo de modelo no construtor de temas SeedProd.

Você verá uma visualização ao vivo do modelo na coluna da direita com um painel de edição na coluna da esquerda.

Interface do criador de temas

Para alterar um item em seu arquivo de modelo, basta apontar e clicar para editá-lo.

Editando itens no construtor de temas

Dependendo do tipo de item, você verá diferentes opções de edição na coluna da esquerda. Você poderá alterar fontes, cores, plano de fundo, espaçamento e muito mais.

Para adicionar novos itens, você pode adicionar blocos SeedProd na coluna da esquerda. Ele vem com vários tipos de blocos que você pode adicionar ao seu modelo.

Adicione blocos ao layout do seu tema

1. Blocos de tags de modelo

Os blocos de tags de modelo são os blocos dinâmicos que permitem gerar elementos de tema em tempo real a partir do banco de dados do WordPress.

Blocos de tags de modelo

Por exemplo, você pode usar o bloco Posts para listar seus posts recentes ou o bloco Post Content para exibir o conteúdo do post ou página exibida no momento.

2. Blocos Padrão

Em seguida, você tem seus blocos padrão para adicionar elementos comuns de web design ao modelo do seu tema.

Blocos padrão

Você pode usá-los para adicionar texto, mídia, botões, colunas, divisores e muito mais.

3. Outros Blocos

Outros blocos avançados permitem adicionar formulários de contato, perfis sociais, botões de compartilhamento, códigos de acesso do WordPress, Google Maps e muito mais.

Blocos avançados

O SeedProd também vem com integração completa com WooCommerce.

Se você administra uma loja online, pode usar blocos WooCommerce em seu tema.

Blocos WooCommerce

Você pode criar modelos WooCommerce completamente personalizados com uma página de carrinho personalizada e conferir a experiência.

Usando seções para layouts de temas rápidos

Além dos blocos, você também pode adicionar seções completas ao seu modelo de tema.

Basta alternar para a guia Seções no painel Design.

Adicionando seções ao seu layout

As seções são grupos de blocos para diferentes áreas do design do site. Por exemplo, você encontrará seções prontas para uso para seu cabeçalho, rodapé, chamadas para ação, recursos e muito mais.

Basta clicar em uma seção para adicioná-la ao seu modelo de tema e editá-la de acordo com seus próprios requisitos.

Seção de perguntas frequentes

Salvando e publicando seu modelo

Quando estiver satisfeito com o design, basta clicar no botão Salvar e selecionar Publicar para salvar seu modelo.

Salve e publique seu modelo

Repita o processo para editar outros arquivos de modelo com suas próprias necessidades de conteúdo e design.

Alterando o design de todo o site para o seu tema

Ao editar seus modelos de tema, você deve garantir que seu design seja consistente em todo o site.

Por exemplo, você provavelmente gostaria de usar o mesmo estilo de tipografia, tamanhos de fonte, cores e outros estilos visuais em todas as páginas.

Nos temas tradicionais do WordPress, você tinha que fazer isso manualmente editando arquivos CSS complexos. Esse processo exigia o uso da ferramenta Inspecionar de um navegador, localização de classes CSS, aprendizado de código e muito mais.

O SeedProd também torna isso super fácil.

Em vez de escrever o código CSS, você pode simplesmente editar o modelo Global CSS.

O modelo CSS global permite visualizar elementos comuns do site e, em seguida, basta apontar e clicar neles para editar suas propriedades.

CSS global

Aplicando e publicando seu tema WordPress personalizado

Quando estiver satisfeito com seu tema WordPress personalizado, a etapa final é ativá-lo em seu site WordPress.

O SeedProd permite que você aplique seu tema WordPress personalizado com um simples interruptor.

Simplesmente vá para a página SeedProd » Theme Builder e alterne a opção ao lado da opção 'Ativar tema SeedProd' para 'Sim'.

Ativar o tema SeedProd

O SeedProd agora substituirá o tema WordPress existente pelo tema WordPress personalizado que você criou.

Agora você pode visitar seu site para ver seu tema WordPress personalizado em ação.

Visualização do site

Criando outros layouts para seu tema WordPress personalizado

Agora que você criou seu tema WordPress personalizado, você tem a opção de estender sua funcionalidade e criar mais designs e layouts com base no seu tema.

O SeedProd torna isso extremamente fácil.

Você ainda pode ajustar seu tema WordPress personalizado e criar vários modelos para diferentes seções do seu site.

Por exemplo, você pode querer adicionar um novo modelo de cabeçalho ao seu tema que é exibido apenas em categorias específicas.

Modelos adicionais

Da mesma forma, você pode criar um modelo para páginas ou postagens específicas.

Você pode adicionar isso ao seu tema também.

Adicionar modelo de página personalizado

Que tal criar landing pages personalizadas?

O SeedProd também cobre você.

Você pode simplesmente ir para SeedProd » Landing Pages e clicar no botão Add New Landing Page para criar uma.

Página de destino personalizada

Para mais detalhes, veja nosso tutorial sobre como criar uma landing page com o WordPress.

Ao usar o construtor de temas de arrastar e soltar amigável para iniciantes do SeedProd, você pode criar facilmente qualquer tipo de layout personalizado que precisar.

Esperamos que este artigo tenha ajudado você a aprender como criar um tema WordPress personalizado sem aprender a codificar. Você também pode querer ver nosso guia sobre como acelerar seu site WordPress para melhor SEO e experiência do usuário.

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

O post Como criar facilmente um tema WordPress personalizado (sem nenhum código) apareceu pela primeira vez no WPBeginner.