Então Você Quer Criar Seu Próprio Tema Customizado do WordPress?

Se você deseja que algo seja feito de uma determinada maneira — bem, você pode ter que fazer isso por conta própria. Embora existam muitos temas do WordPress disponíveis, encontrar um que atenda às suas necessidades específicas pode ser difícil. Em sua busca pela solução perfeita, você pode ser tentado a criar seu próprio tema personalizado do WordPress.

Felizmente, criar um tema personalizado para WordPress é um processo relativamente direto. Surpreendentemente, não requer muitos conhecimentos técnicos ou experiência com desenvolvimento web. Além disso, construir seu próprio tema pode valer muito a pena, já que você pode fazer seu site ficar exatamente do jeito que você quer.

Projetando um Site Personalizado do WordPress

Você quer que seu site tenha uma ótima aparência e toda a funcionalidade necessária, então você confere o Diretório de Temas do WordPress:

Infelizmente, nada do que você vê atende às suas exigências, e você não quer comprometer sua visão. Talvez você queira algo único para fazer seu site se destacar, mas você não quer gastar dinheiro em um tema premium.

Construtores de Páginas

Uma opção é usar um plugin de construtor de páginas. Essas ferramentas permitem que você pegue um tema existente e reorganize o layout para atender às suas necessidades. A maioria dos construtores de páginas populares oferece controles simples de arrastar e soltar sem a necessidade de programação. Certos temas multipropósito vêm com esse recurso integrado.

Temas de Bloco

Se você decidir experimentar o Editor nativo do WordPress, a edição completa do site é um conjunto de funcionalidades no WordPress que inclui várias ferramentas para tornar o processo de design mais acessível para os proprietários de sites.

Utilizando este novo Editor de Sites, você pode usar blocos de arrastar e soltar para personalizar a maior parte do seu site a partir de uma única interface, incluindo modelos de página, sem usar código. Aqui está o nosso guia completo para Edição Completa do Site.

Personalização de Tema

Se você escolher um tema personalizável, também poderá ajustar a aparência do seu site sem necessidade de conhecimentos técnicos. Usando o Personalizador do WordPress e o painel de Opções de Tema, você deve conseguir ajustar diversos elementos de design:

• Esquema de cores: Da cor de fundo do seu site à tonalidade específica do texto do corpo.
• Tipografia: Isso abrange as fontes usadas em seu site e como o texto é exibido em vários tipos de conteúdo.
• Layout: Certos temas permitem que você alterne entre diferentes layouts e escolha como seu site deve se adaptar a diferentes tamanhos de tela.

A escolha exata das opções aqui dependerá do tema que você escolher e como ele se coordena com o restante de seus ativos de marca e campanhas de marketing. Temas premium tendem a ser mais generosos com recursos de personalização.

Criando um Tema Filho

Se você deseja mais controle, pode considerar criar um tema filho.

Dado o número de opções no Diretório de Temas do WordPress, é provável que você encontre um tema que atenda a algumas (se não todas) das suas necessidades. Em vez de começar com um modelo muito básico, você pode adaptar o tema existente para atender à sua visão.

Na superfície, um tema filho do WordPress funciona como qualquer outro tema. A principal diferença é que um tema filho herda atributos de um tema principal (o tema original que você escolheu usar).

Essa relação permite que o tema filho substitua partes específicas do tema principal, mantendo a maior parte da aparência e funcionalidade do pai.

Temas Filhos oferecem um método eficiente para personalizar um tema existente sem modificar os arquivos do tema principal. Atualizar os temas principal e secundário para correções de segurança e bugs é essencial. Na maioria das vezes, apenas o tema principal precisará ser atualizado.

Assim, usar um tema filho é uma maneira eficaz de criar uma presença online única sem se aprofundar demais no mundo do desenvolvimento.

Controle Completo

Às vezes, até isso não é suficiente. Quando você quer construir algo verdadeiramente único, é hora de considerar criar seu próprio tema.

Felizmente, desenvolver um tema para WordPress é mais fácil do que você pode imaginar. Graças à interface amigável da plataforma e às numerosas ferramentas disponíveis, quase qualquer pessoa pode criar um tema personalizado.

Vamos guiá-lo através do processo de criação do seu primeiro tema. Para começar, você precisará de duas coisas:

• Seu próprio site WordPress
• Um plano de hospedagem de qualidade

Você também se beneficiará de ter experiência com ambientes de staging locais, pois você usará um para criar seu tema. Ter algum entendimento de CSS e PHP também será útil (embora não seja estritamente necessário).

Finalmente, há uma ferramenta importante que você vai querer ter, que tornará o processo muito mais fácil: um tema inicial.

O que é um Tema Inicial? (E Por Que Você Deve Usar Um)

Um tema inicial é um tema WordPress básico que você pode usar como base para criar o seu próprio. Isso permite que você construa em uma estrutura sólida sem se preocupar com as complexidades de codificar um tema do zero. Também ajudará você a entender como o WordPress funciona, mostrando a estrutura básica de um tema e como todas as suas partes funcionam juntas.

Existem muitos temas iniciais excelentes disponíveis, incluindo Underscores, UnderStrap e Bones (só para citar alguns).

Usaremos Underscores para nosso tutorial. É uma escolha sólida para iniciantes porque contém apenas o básico. Além disso, esse tema inicial foi desenvolvido pela Automattic (a equipe por trás do WordPress.com), o que significa que é mais provável que seja seguro, compatível e bem suportado a longo prazo.

Como Desenvolver Seu Primeiro Tema do WordPress (Em 5 Passos)

Com a preparação concluída, você está finalmente pronto para começar a criar seu primeiro tema. Como mencionamos anteriormente, usaremos um tema inicial para este guia.

Entretanto, se você quiser tentar criar tudo por si mesmo sem um modelo, pode fazê-lo, mas essa abordagem exigirá muito mais proficiência em programação.

Etapa 1: Configure um Ambiente Local

A primeira coisa que você precisará fazer é criar um ambiente de desenvolvimento local. Isso é efetivamente um servidor que você instala em seu computador, que pode usar para desenvolver e gerenciar sites locais do WordPress. Um site local é uma maneira segura de desenvolver um tema sem impactar seu site ao vivo.

Existem muitas maneiras de criar um ambiente local, mas usaremos Local. Esta é uma forma rápida e fácil de instalar uma versão local do WordPress gratuitamente e é compatível tanto com Mac quanto com Windows:

Para começar, selecione a versão gratuita de Local, escolha sua plataforma, adicione seus detalhes e baixe o instalador. Quando a instalação estiver concluída, você pode abrir o programa em seu computador.

Aqui, você será solicitado a configurar seu novo ambiente local:

Este é um processo simples, e você terá seu site local do WordPress pronto em poucos minutos. Uma vez configurado, seu novo site terá a aparência e funcionará exatamente como um site WordPress ao vivo.

Etapa 2: Baixe e Instale Seu Tema Inicial

Como a maioria dos temas iniciais, Underscores é muito fácil de começar. Na verdade, tudo o que você precisa fazer é acessar o site e nomear seu tema:

Se desejar, você pode clicar em Opções Avançadas para personalizar ainda mais o tema base:

Aqui, você pode preencher mais informações, como o nome do autor, e dar uma descrição ao tema:

Também existe a opção _sassify!, que adicionará arquivos Syntactically Awesome StyleSheets (SASS) ao seu tema. SASS é uma linguagem de pré-processamento para CSS que permite usar variáveis, aninhamento, operadores matemáticos e mais.

Quando você tiver feito suas escolhas, pode clicar em Generate, que fará o download de um arquivo .zip contendo seu tema inicial. Este é o arquivo principal ao redor do qual você desenvolverá seu próprio tema, então você precisará instalá-lo em seu site local.

Depois de instalar o seu tema, você pode visualizar seu site para ver como ele fica. Está muito básico agora, mas isso não será assim por muito tempo!

Etapa 3: Aprenda sobre os diferentes componentes de um tema do WordPress

Antes de personalizar seu tema, você precisará entender o propósito de seus componentes e como eles se encaixam.

Primeiro, vamos discutir os arquivos de template, que são os principais componentes de um tema WordPress. Esses arquivos determinam o layout e a aparência do conteúdo no seu site.

Por exemplo, header.php é usado para criar um cabeçalho, enquanto comments.php permite que você exiba comentários.

O WordPress determina quais arquivos de template usar em cada página percorrendo a hierarquia de templates. Esta é a ordem na qual o WordPress procurará pelos arquivos de template correspondentes toda vez que uma página do seu site for carregada.

Por exemplo, se você visitar a URL http://example.com/post/esse-post, o WordPress procurará os seguintes arquivos de template nesta ordem:

1. Arquivos que correspondem ao slug, como this-post
2. Arquivos que correspondem ao ID do post
3. Um arquivo de post único genérico, como single.php
4. Um arquivo de arquivo, como archive.php
5. O arquivo index.php

Uma vez que o arquivo index.php é necessário para todos os temas, ele é a opção padrão se nenhum outro arquivo puder ser encontrado. Underscores contém os arquivos de tema mais comuns, que funcionarão imediatamente. No entanto, você pode experimentar editando-os se quiser entender como eles funcionam juntos.

Arquivos Principais do Tema

Além do arquivo index.php, você encontrará os seguintes arquivos na maioria dos temas do WordPress:

• header.php: Este arquivo contém o HTML para o seu template de cabeçalho personalizado, incluindo metadados e links para as folhas de estilo. Observe que os menus geralmente são gerenciados pela funcionalidade de menu personalizado do WordPress.
• footer.php: Este arquivo mantém o HTML para o template de rodapé do seu site.
• sidebar.php: Se você deseja que seu site tenha uma barra lateral, o código virá daqui. Tenha em mente que isso é apenas a estrutura; widgets são controlados a partir da área administrativa.
• single.php: Este é o arquivo de template para postagens de blog individuais. Se você quiser suportar diferentes tipos de postagens, você pode criar mais de um arquivo.
• page.php: O layout padrão das páginas individuais vem deste arquivo. Novamente, você pode criar mais de um template — por exemplo, você poderia criar um design de página de produto para uma loja online.
• comments.php: Este arquivo controla a exibição de comentários sob suas postagens de blog e em páginas.
• search.php: Quando alguém usa a funcionalidade de busca no seu site, este template define como os resultados da busca aparecerão.

Em geral, você só precisará editar esses arquivos se quiser adicionar conteúdo ou alterar drasticamente o layout do seu site. A maioria das outras ajustes pode ser feita usando CSS personalizado no seu arquivo de folha de estilo.

O Loop

Outro elemento importante que você precisa entender é o Loop. O WordPress usa esse código para exibir o conteúdo, então, de muitas maneiras, é o coração pulsante do seu site. Ele aparece em todos os arquivos de template que exibem o conteúdo do post, como index.php ou sidebar.php.

The Loop é um assunto complexo que recomendamos que você leia mais a respeito se deseja entender como o WordPress exibe o conteúdo dos posts. Felizmente, o Loop já estará integrado ao seu tema graças ao Underscores, então não há necessidade de se preocupar com isso por enquanto.

Etapa 4: Configure Seu Tema

É fácil pensar que os temas são puramente para fins estéticos, mas eles realmente têm um grande impacto na funcionalidade do seu site. Vamos ver como você pode fazer algumas personalizações básicas.

Adicionar Funcionalidade com Hooks

Hooks são trechos de código inseridos em arquivos de modelo, que permitem executar ações PHP em diferentes áreas de um site, inserir estilização e exibir outras informações. A maioria dos hooks é implementada diretamente no software central do WordPress, mas alguns também são úteis para desenvolvedores de temas.

Vamos dar uma olhada em alguns dos ganchos mais comuns e para que eles podem ser usados:

• wp_head(): Adicionado ao elemento <head> em header.php. Ele habilita estilos, scripts e outras informações que são executadas assim que o site é carregado. Isso é frequentemente usado para inserir código do Google Analytics.
• wp_footer(): Adicionado em footer.php logo antes da tag </body>.
• wp_meta(): Normalmente aparece em sidebar.php para incluir scripts adicionais (como uma nuvem de tags).
• comment_form(): Adicionado em comments.php diretamente antes da tag de fechamento </div> do arquivo para exibir dados de comentários.

Esses ganchos já estarão incluídos no seu tema Underscores. No entanto, ainda recomendamos visitar o Banco de Dados de Ganchos para ver todos os ganchos disponíveis e aprender mais sobre eles.

Adicionar Estilos Com CSS

Cascading Style Sheets (CSS) definem a aparência de todo o conteúdo do seu site. No WordPress, isso é realizado utilizando o arquivo style.css. Você já terá esse arquivo incluído no seu tema, mas no momento, ele contém apenas o estilo básico, padrão:

Se você deseja um exemplo rápido de como o CSS funciona, você pode editar qualquer um dos estilos aqui e salvar o arquivo para ver os efeitos. Por exemplo, você pode encontrar o seguinte código (geralmente na linha 485):

a {
color: royalblue;
}

Este código controla a cor de hiperlinks não visitados, que aparecem azul real por padrão:

Vamos ver o que acontece se tentarmos mudar isso substituindo pelo seguinte código:

a {
color: red;
}

Salve o arquivo e confira seu site local. Como você pode esperar, todos os links não visitados agora aparecerão em vermelho brilhante:

Você pode notar que o link visitado no topo não mudou de cor. Isso ocorre porque ele é realmente governado pela próxima seção na folha de estilos:

a:visited {
color: purple;
}

Este é um exemplo muito básico de como editar style.css afetará a aparência do seu site. CSS é um tópico extenso que recomendamos que você explore mais se deseja aprender sobre criação de designs para web. Existem muitos recursos sobre o tema para iniciantes.

Etapa 5: Exporte o Tema e Faça o Upload para o Seu Site

Quando você terminar de ajustar o seu tema, é hora de garantir que ele funciona corretamente. Para fazer isso, você pode usar os dados do Theme Unit Test.

Este é um conjunto de dados fictícios que você pode fazer upload para o seu site. Ele contém muitas variações diferentes de estilos e conteúdo, e permitirá que você veja como seu tema lida com dados imprevisíveis.

Quando você tiver testado completamente seu tema e estiver convencido de que ele atende aos padrões exigidos, tudo o que resta agora é exportá-lo.

Primeiro, você precisará encontrar a localização do seu site na sua máquina local. Provavelmente, você encontrará em uma pasta chamada Websites, dentro do seu diretório Documentos padrão.

Abra a pasta do site e acesse /wp-content/themes/, onde você encontrará seu tema:

Você pode agora usar uma ferramenta de compressão, como o WinRAR, para criar um arquivo .zip a partir da pasta. Simplesmente clique com o botão direito na pasta e selecione a opção que permite compactá-la, como Comprimir “pasta.”

Quando a pasta estiver compactada, estará pronta para ser carregada e instalada em qualquer site WordPress, assim como você instalou seu tema Underscores no início.

Dicas Para Desenvolver Seu Primeiro Tema Personalizado

Quando você começa a mexer com código pela primeira vez, é sempre possível cometer alguns erros. Por essa razão, é uma boa ideia dedicar tempo ao desenvolvimento do seu primeiro tema e experimentar no seu ambiente local.

Aqui estão algumas medidas adicionais que você pode tomar para garantir que seu tema prosperará no ambiente:

• Utilize controle de versão: Sistemas como Git ajudam você a acompanhar as alterações no seu código ao longo do tempo e reverter bugs.
• Valide seu código: Use ferramentas como Theme Check e o W3C Validator para encontrar erros no seu código. Executar verificações frequentes pode ajudá-lo a identificar problemas mais cedo.
• Teste seu tema: Tente carregar seu tema em diferentes navegadores e dispositivos para identificar problemas de layout ou renderização. Um design que funciona perfeitamente no seu próprio computador pode não funcionar bem em uma plataforma diferente.
• Use comentários no código: Deixar notas para si mesmo explicando o que cada coisa faz pode ajudá-lo a resolver problemas em uma data futura.

Crie um Tema Personalizado do WordPress

Criar um tema personalizado do WordPress do zero não é uma tarefa fácil. No entanto, o processo pode não ser tão difícil quanto você pensa.

Para resumir, aqui está como desenvolver um tema do WordPress em cinco passos simples:

1. Configure um ambiente local, utilizando Local.
2. Baixe e instale um tema inicial, como Underscores.
3. Conheça os diferentes componentes de um tema WordPress.
4. Configure seu tema.
5. Exporte o tema e faça o upload para o seu site.

Seguindo as diretrizes no site de documentação Codex, você pode desenvolver um tema que atenda aos padrões de qualidade. Você pode até considerar submetê-lo ao Diretório de Temas do WordPress!

Lance Seu Site Único do WordPress Com DreamPress

Construir um ótimo tema é o primeiro passo para criar um site de sucesso. Nós temos as ferramentas para ajudá-lo a completar o resto.

Com a Hospedagem Gerenciada do WordPress DreamPress, você pode testar qualquer tema ou Plugins/plugin online com Staging de um clique. Também fornecemos backups à prova de balas, para que você possa reverter alterações a qualquer momento, e Cache integrado para desempenho ótimo.

Inscreva-se hoje para colocar seu site WordPress em funcionamento!