Como criar um tema WordPress personalizado em 5 etapas sem código

Deseja criar um tema WordPress personalizado para o seu site?

Criar seu próprio tema WordPress do zero costumava envolver a escrita de código complexo ou a contratação de desenvolvedores de temas para criar um tema para você. Mas graças aos novos e fáceis de usar geradores de temas WordPress, qualquer pessoa pode criar um tema WordPress personalizado sem escrever código.

Este artigo mostrará como criar um tema personalizado no WordPress passo a passo.

O que é um tema WordPress?

Os temas do WordPress são arquivos de modelo escritos em PHP, HTML, CSS e JavaScript. Cada arquivo trabalha em conjunto para criar o design e a funcionalidade do seu site WordPress.

Um tema WordPress típico incluirá alguns, se não todos, os seguintes arquivos de tema:

• footer.php
• header.php
• index.php
• page.php
• sidebar.php
• arquivo.php

Os temas do WordPress também incluem um arquivo functions.php e um arquivo style.css.

Normalmente, você precisaria de uma sólida compreensão de várias linguagens de web design ou de um desenvolvedor web para criar um tema WordPress personalizado.

Criando temas personalizados do WordPress para iniciantes

Se você contratar um desenvolvedor ou agência de desenvolvimento web, o custo de criar um tema personalizado do zero pode ser de milhares de dólares. Como muitas pequenas empresas não podem arcar com o custo, elas se contentam com os temas padrão do WordPress que acompanham a plataforma.

No entanto, se você é proprietário de um site que não deseja se contentar com o padrão, pode usar uma estrutura de temas, como Genesis by StudioPress, por exemplo, ou um plugin de construtor de páginas WordPress para criar um tema personalizado para seu site WordPress.

As estruturas de temas do WordPress facilitam a criação de um tema do WordPress, lidando automaticamente com muito do design e da funcionalidade. No entanto, eles ainda são uma solução um tanto complicada, exigindo, por exemplo, temas filhos, então são melhores para os desenvolvedores do que para o proprietário médio do site.

Por outro lado, os construtores de páginas do WordPress facilitam muito a criação de layouts de página personalizados usando uma interface de arrastar e soltar, mas também têm seus limites. Os construtores de páginas só permitem criar layouts e, normalmente, você não pode usá-los para criar temas personalizados.

Até o SeedProd, o melhor construtor de sites WordPress para temas personalizados, decidiu resolver esse problema com seu construtor de temas WordPress.

O que é o construtor de temas SeedProd?

O SeedProd já é um poderoso construtor de páginas de arrastar e soltar usado por mais de 1 milhão de proprietários de sites. Mas com seu construtor de temas, qualquer usuário não técnico pode criar um tema WordPress completamente personalizado sem código.

Em vez de fazer malabarismos com arquivos de conteúdo wp, você pode criar temas do zero com apenas alguns cliques. O SeedProd até criará sua folha de estilo automaticamente.

SeedProd vem com:

• Interface visual de arrastar e soltar
• Mais de 150 modelos profissionais
• 2 milhões de fotos
• Suporte WooCommerce
• Painel de gerenciamento de assinantes
• Integrações de e-mail marketing

E tantos recursos e widgets adicionais que você precisa para criar um site personalizado usando o WordPress rapidamente.

Com isso em mente, vamos ver como criar um tema WordPress personalizado sem escrever uma única linha de código usando o SeedProd.

Como criar um tema WordPress personalizado sem código

Para criar um tema WordPress personalizado com o SeedProd, primeiro você precisará de um site WordPress para instalar o plug-in SeedProd. Se você ainda não tiver uma instalação do WordPress, siga estas etapas para aprender como criar um site WordPress.

Seu site também deve ter um tema WordPress simples instalado. Você pode encontrar muitas soluções gratuitas no diretório de temas do WordPress. Você não precisará se preocupar com a aparência do tema porque o SeedProd o substituirá quando você publicar suas personalizações.

Também é uma boa ideia usar um ambiente de desenvolvimento ao alterar seu tema do WordPress para evitar quebrar acidentalmente seu site. Empresas de hospedagem WordPress populares como BlueHost oferecem ambientes de teste por padrão.

Você também deve fazer backup do seu site antes de fazer alterações importantes. Aqui está uma lista dos melhores plugins de backup do WordPress que você pode usar.

Quando seu site WordPress estiver pronto, siga as etapas abaixo para criar um tema WordPress personalizado sem código.

Etapa 1. Instale e ative o SeedProd

O primeiro passo é instalar e ativar o plugin do construtor de sites SeedProd. Para acessar o recurso de construtor de temas, você precisará de uma licença SeedProd Pro ou Elite.

Depois de baixar o arquivo zip do plugin SeedProd para o seu computador, carregue, instale e ative-o no seu painel do WordPress. Se você precisar de ajuda com esta etapa, siga este guia sobre como instalar um plug-in do WordPress.

Depois de instalar o SeedProd, navegue até SeedProd ≫ Configurações da sua área de administração do WordPress e insira sua chave de licença do SeedProd.

Você pode encontrar sua chave de licença visitando a área da sua conta SeedProd e copiando-a na guia Downloads.

Agora você pode ir para SeedProd ≫ Theme Builder e ver a visão geral do Theme Builder. É aqui que você pode criar uma hierarquia de modelos para o seu tema WordPress.

Em outras palavras, é onde você pode criar todas as partes individuais que compõem seu tema, como as seguintes:

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

Você pode criar cada uma dessas partes do tema individualmente clicando no botão Adicionar novo modelo de tema .

Mas se isso parece muito difícil para sua primeira tentativa, há outra maneira de criar seu tema.

Você pode usar os modelos de tema pré-fabricados do SeedProd para criar rapidamente a estrutura básica para o seu tema e personalizá-los para atender às suas necessidades de design, sem código. Como essa solução é super fácil para iniciantes, é nisso que vamos focar neste tutorial.

Observação: o SeedProd também oferece centenas de modelos de página de destino responsivos para ajudá-lo a criar páginas de destino personalizadas.

Etapa 2. Escolha um modelo de tema

O construtor de temas do SeedProd já tem vários temas criados para você. Para encontrá-los, clique no botão Temas .

No momento da redação deste guia, existem 9 modelos de temas, incluindo:

1. Tema inicial
2. Negócios modernos
3. Agência de marketing
4. Tema de design de produto
5. Empresa de cuidados com animais de estimação
6. Tema de estratégia digital
7. Tema de música ao vivo
8. Tema do corretor de hipoteca
9. Tema do restaurante

Para escolher um modelo de tema para o seu site, passe o mouse sobre a miniatura e clique no ícone de marca de seleção. Para este guia, usaremos o SeedProd Starter Theme.

Após escolher seu template, o SeedProd cria automaticamente todas as partes que compõem seu tema.

Se houver um recurso específico que você não deseja exibir em seu site, clique no botão de alternância sob o título Publicar e desative essa parte do tema.

Se você clicar no link de condições para cada parte do modelo, poderá alterar seu nome, tipo, prioridade e escolher quando e onde ele aparecerá em seu site.

Etapa 3. Personalize suas partes do tema WordPress

Com os blocos de construção básicos do seu tema no lugar, agora é hora de começar a editar cada seção do tema para criar um tema WordPress verdadeiramente personalizado para o seu site.

Para editar qualquer seção de tema, passe o mouse sobre ela e clique no link Editar design .

Começaremos editando o cabeçalho.

Cabeçalho e rodapé

Ao editar uma seção de tema no SeedProd, você irá para o construtor visual de arrastar e soltar. Você pode personalizar o cabeçalho do seu tema nesta tela simplesmente apontando e clicando.

Como você pode ver, o Starter Theme vem com um cabeçalho de 2 colunas que possui um logotipo e um menu de navegação. Você pode personalizá-lo para mostrar seu logotipo personalizado clicando no logotipo na visualização ao vivo.

A partir daí, você pode excluir o logotipo do espaço reservado no painel esquerdo e fazer upload de um novo do seu computador ou da biblioteca de mídia do WordPress.

Você pode ajustar o tamanho e o alinhamento do seu logotipo no mesmo painel e adicionar um link personalizado, como o URL do seu site principal.

Se você quiser alterar a cor de fundo do cabeçalho, passe o mouse sobre a seção do cabeçalho até que ela tenha um contorno roxo e clique nela para visualizar as configurações da seção no painel esquerdo. A partir daí, você pode dar ao seu cabeçalho uma cor de fundo personalizada, imagem e escolher a largura do cabeçalho.

E na guia Avançado , você pode personalizar a sombra, o espaçamento, a borda e muito mais do seu cabeçalho.

Quando estiver satisfeito com seu cabeçalho personalizado do WordPress, clique no botão Salvar no canto superior direito e volte para o construtor de temas.

Agora repita essas etapas para editar o rodapé do WordPress. Clique em Editar design para abri-lo no editor visual e clique em qualquer elemento para personalizar o conteúdo, cores, links e muito mais.

Pagina inicial

Em seguida, personalizaremos a página inicial do seu site WordPress, que geralmente é a primeira página que os usuários veem ao visitar seu site. Portanto, abra a seção Página inicial no editor visual.

Como já personalizamos o design do cabeçalho e do rodapé, você verá seus novos designs na parte superior e inferior da sua página inicial. Mas não se preocupe, as alterações feitas nesta tela não afetarão seu cabeçalho ou rodapé; eles estão simplesmente lá como um guia visual.

O modelo Starter Theme da SeedProd tem todos os recursos que a maioria dos sites de negócios precisa, incluindo:

• Área do herói
• Logotipos de clientes
• Recursos
• Depoimentos
• Seção de perguntas frequentes

Assim como o cabeçalho, você pode personalizar cada centímetro para torná-lo único. Vamos começar mudando a área do herói.

A área do herói tem as seguintes características:

• Seção
• Layout de 2 colunas
• Imagem
• Cabeçalho
• Texto
• Botão

Para alterar a imagem padrão, basta clicar nela e fazer upload de uma nova imagem, como fez com seu logotipo.

Você também pode editar o título e a descrição clicando em cada bloco e substituindo o conteúdo pelo seu texto personalizado.

Se você clicar no bloco de botões, poderá alterar o texto do botão, o link, o alinhamento e muito mais.

Você pode encontrar todos esses elementos no painel de blocos à esquerda. Dessa forma, você pode arrastar um bloco da esquerda e soltá-lo em seu design para adicionar mais conteúdo ao seu tema.

Siga este processo para personalizar o restante de sua página inicial até que reflita sua empresa. Por exemplo, você pode adicionar informações sobre os serviços da sua empresa ou destacar os recursos do seu produto na seção de recursos.

Em seguida, você pode usar o bloco Testemunhos integrado do SeedProd para adicionar provas sociais positivas de seus clientes e clientes existentes.

Também alteramos a cor de fundo desta seção para corresponder ao cabeçalho do nosso tema, abrindo as configurações da seção e escolhendo uma cor diferente.

Depois de personalizar sua página inicial, você pode clicar no ícone de visualização móvel para ver como seu design fica em dispositivos móveis.

Se algo não parecer certo, você pode mover as coisas até que a tela do seu celular ofereça uma boa experiência ao usuário.

Quando estiver satisfeito com a aparência da sua página inicial, clique no botão Salvar e retorne ao criador de temas.

Página do blog, postagens individuais e páginas

É provável que você queira incluir uma página personalizada para postagens de blog em seu novo tema do WordPress. A boa notícia é que o SeedProd tem uma parte do tema que você pode personalizar especificamente para esse fim.

Essa seção é chamada de Índice do Blog, Arquivos, Pesquisa no construtor de temas. Ele permite que você personalize sua página de postagens de blog, arquivos de postagem e página de resultados de pesquisa para corresponder ao restante da marca do seu site.

Portanto, clique no link Editar design para abrir esta parte do tema no construtor de arrastar e soltar.

Nesta página, o tema inicial usa tags de modelo para extrair informações dinâmicas do WordPress, incluindo o título do arquivo e as postagens. Ao clicar em qualquer um desses blocos, você verá suas configurações no painel esquerdo.

Por exemplo, ao clicar na tag de modelo Postagens, você pode exibir postagens por padrão, personalizadas (postagens, mídia ou postagens personalizadas) ou manualmente digitando parâmetros de consulta específicos.

Você também pode escolher o número de colunas, postagens por página, mostrar ou ocultar a imagem em destaque, mostrar um trecho e muito mais.

Depois de personalizar seu arquivo ou página de blog, volte para o construtor de temas e edite a seção de Postagens únicas .

Esta parte do tema usa as seguintes tags de modelo para obter informações sobre postagens individuais do WordPress:

• Título da postagem
• Informações da postagem
• Publicar conteúdo
• Caixa do autor
• Postar comentários
• Pós-navegação

Você pode editar cada um desses blocos como faria com qualquer outro bloco SeedProd. Basta clicar em qualquer elemento e personalizá-lo no painel de configurações.

Por exemplo, se você clicar no bloco Post Info , poderá adicionar mais meta-informações, alterar o alinhamento e ajustar as cores dos ícones.

Barra Lateral

Muitos sites WordPress ainda usam barras laterais para exibir informações importantes aos visitantes, como perfis de mídia social, postagens mais recentes e caixa de inscrição em boletim informativo. Mas, ao contrário de muitos temas pré-fabricados do WordPress, você pode usar o SeedProd para criar uma barra lateral personalizada do WordPress com seus blocos de construção visuais.

Para fazer isso, clique em Editar design na parte do modelo da barra lateral. A partir daí, você pode arrastar e soltar qualquer conteúdo que desejar no design da barra lateral.

O tema inicial inclui uma caixa de pesquisa, ícones de mídia social e categorias de postagem por padrão. Mas você pode adicionar o que quiser aqui. Por exemplo, você pode querer exibir uma lista de postagens de blog recentes ou uma imagem com link para um parceiro afiliado.

Você também pode usar o bloco de formulário de inscrição do SeedProd e coletar endereços de e-mail para aumentar sua lista, diretamente na barra lateral. O melhor é que você não precisará de nenhum conhecimento técnico para fazer isso acontecer.

CSS global

Até agora, você construiu a maior parte do seu tema WordPress personalizado sem código. Mas há mais uma parte que você deve observar para garantir que tudo seja consistente em todo o seu tema.

Esse é o seu CSS Global , que controla o estilo global, a tipografia, as cores e o layout do seu tema. Portanto, clique em Editar design nessa parte do tema para abri-lo no editor de páginas.

Como você pode ver, esta página lhe dá controle sobre muitos estilos do seu tema. No painel esquerdo estão as seções para:

• Cores
• Fontes
• Fundo
• Botões
• Formulários
• Esquema
• CSS customizado

Por exemplo, você pode abrir a seção Botões e escolher uma cor personalizada. Em seguida, essa cor aparecerá em todos os botões do seu tema.

Você pode fazer o mesmo no cabeçalho Fontes e atribuir uma cor personalizada para cada link em seu tema.

Portanto, vá em frente e ajuste essas configurações até que seu tema fique exatamente como você deseja e clique no botão Salvar para armazenar suas alterações.

Etapa 4. Conecte seu serviço de marketing por e-mail

Se um dos seus objetivos de negócios é aumentar sua lista de e-mail, é provável que você tenha adicionado um formulário de inscrição em algum lugar no design do seu tema WordPress. Mas para adicionar novos contatos à sua lista automaticamente, você precisará conectar seu formulário ao seu serviço de email marketing.

O SeedProd integra-se diretamente com muitos serviços populares de marketing por e-mail, como Constant Contact, Mailchimp, Drip, etc. E é muito fácil vincular sua conta.

Basta editar qualquer parte do tema e clicar na guia Conectar na parte superior da tela.

Em seguida, clique em qualquer integração da lista e siga as instruções na tela. Como resultado, qualquer pessoa que preencha seu formulário de optin será automaticamente adicionada à sua lista de e-mail.

Etapa 5. Habilite seu tema WordPress personalizado

A etapa final na criação de um tema WordPress personalizado com o SeedProd é tornar o tema ativo em seu site. Para fazer isso, encontre o título Ativar tema SeedProd no canto superior direito e alterne a alternância para a posição "ativada".

Seu novo tema substituirá seu tema padrão, permitindo que você veja suas personalizações no front-end do seu site.

É isso! Seu novo tema personalizado do WordPress está disponível em seu site. Vamos ver como fica.

Aqui está a página inicial com seu novo cabeçalho e rodapé:

Aqui está a página do blog com sua barra lateral personalizada do WordPress:

Parabéns!

Agora você sabe como criar um tema WordPress personalizado sem código.

Com o construtor de temas WordPress fácil e poderoso do SeedProd, você não precisará de nenhuma experiência técnica, desenvolvedores WordPress ou um orçamento enorme para criar um tema WordPress personalizado.

O poder e a funcionalidade estão em suas mãos no momento em que você instala o plug-in.

Então, o que você está esperando?

Obrigado por ler. Siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para expandir seus negócios.