Como Criar um Tema WordPress Personalizado #57

0
229
Imagem Destacada do Post #57

Como criar um tema WordPress personalizado sem escrever código?

Antes, era necessário seguir tutoriais complexos do WordPress e ter conhecimentos avançados de codificação para criar um tema WordPress personalizado. Mas graças aos construtores de temas do WordPress, agora é possível criar facilmente um tema sem a necessidade de aprender programação.

Neste tutorial, vamos mostrar como criar um tema WordPress personalizado de forma simples, sem precisar escrever código.

Criando um Tema WordPress Personalizado

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

Normalmente, seria necessário ter um bom entendimento dessas linguagens de web design ou contratar um desenvolvedor web para criar um tema WordPress personalizado.

No entanto, contratar um desenvolvedor ou uma agência pode resultar em altos custos, chegando a milhares de dólares, o que muitos proprietários de pequenas empresas não podem arcar.

Diante dessa situação, muitos acabam se contentando com os temas padrão disponíveis. Aqueles que desejam algo mais personalizado recorrem aos construtores de páginas do WordPress ou às estruturas de temas para criar um tema personalizado.

Embora as estruturas de temas do WordPress facilitem a criação de um tema personalizado, elas são mais direcionadas para desenvolvedores, não para usuários comuns de sites.

Por outro lado, os plugins de construção de páginas do WordPress tornaram extremamente fácil criar layouts de página personalizados usando uma interface intuitiva de arrastar e soltar. No entanto, eles são limitados a layouts de páginas individuais e não permitem criar temas personalizados.

É aqui que entra o SeedProd.

O SeedProd é o melhor plugin de construção de temas WordPress que permite criar facilmente um tema WordPress personalizado, sem a necessidade de escrever código.

Construtor de páginas de destino SeedProd

SeedProd: O Construtor de Páginas WordPress de Arrastar e Soltar para a Personalização Perfeita

Descubra o poder do SeedProd, um incrível construtor de páginas WordPress desenvolvido para atender às necessidades de empresas, blogueiros e proprietários de sites. Com sua funcionalidade intuitiva de arrastar e soltar, você terá o controle total sobre o design do seu site.

O SeedProd também traz consigo um novo e revolucionário designer de temas personalizados, permitindo que você edite qualquer elemento com apenas alguns cliques.

Imagine a facilidade de adicionar elementos de design comuns ao seu tema, tudo isso através da simples ação de arrastar e soltar.

Criando um Tema Personalizado com um Plugin

Antes de começar a explorar as possibilidades do construtor de temas, é necessário instalar e ativar o plugin SeedProd no seu site WordPress. Certifique-se de ter pelo menos o plano Pro ou Elite para desbloquear todos os recursos do construtor.

Após ativar o plugin, vá para a seção SeedProd » Configurações no painel de administração do WordPress. Aqui, você encontrará várias opções para personalizar suas configurações.

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

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 Tema do Zero

Como alternativa, você pode iniciar seu tema do zero clicando no botão “New Theme Template“. 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 “Sections” 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 “Save” e selecionar “Publish” 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 desejará 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 “Inspect” 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 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 “Enable SeedProd Theme” para “Yes“.

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 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

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.