Crie um tema WordPress: passo a passo para desenvolvimento personalizado

Desde seu lançamento original em 2003, o WordPress evoluiu de uma simples ferramenta de blog para um poderoso e popular construtor de sites e um CMS (sistema de gerenciamento de conteúdo) abrangente usado por cerca de 38% dos sites na web! Dada sua popularidade, se o seu site precisa se destacar da multidão, você precisará criar um tema WordPress exclusivo para o seu site.

Na verdade, não é de se admirar que o WordPress foi capaz de fazer isso tão longe e se tornar tão popular.

A quantidade de flexibilidade que possui e os recursos que hospeda permitem seu amplo uso em diferentes tipos de sites. Além disso, o WordPress é bastante fácil de usar, com pouca ou nenhuma experiência anterior em codificação ou desenvolvimento web.

Estas são as razões por trás da história de sucesso do WordPress e são precisamente as razões quase 40% de todos os sites na World Wide Web são movidos por este software. 

WordPress tem uma variedade de recursos úteis que tornam o desenvolvimento e a programação da web less complicado e mais acessível a todos.

Introdução ao desenvolvimento de temas WordPress 

Outro recurso popular que torna o WordPress tão popular são seus temas. O tema é simplesmente uma coleção de folhas de estilo e modelos que definem a aparência e exibição de um site com WP.

O software oferece ao usuário uma ampla variedade de opções de edição diferentes quando se trata de temas da área de administração do WP.

Centenas de temas WordPress são totalmente gratuitos ou com muitos outros a um preço razoável de algumas dezenas de dólares.

Na verdade, o WordPress.org hospeda um enorme banco de dados de temas em seu diretório de temas.

Outros sites, como Themeforest, também oferecem muitos temas premium de diferentes desenvolvedores.

Cada um desses temas apresenta um layout, padrão de design e recursos diferentes.

Cabe ao usuário encontrar aquele que melhor atenda às necessidades de seu site. Na maioria dos casos, os temas são elaborados com determinados setores ou profissões em mente, o que significa que, por exemplo, os proprietários de restaurantes podem encontrar facilmente os temas com recursos de reserva.

Embora existam muitos temas incríveis que podem atender às suas necessidades, é seguro dizer que, se você quiser fazer algo excepcional, você terá que fazer você mesmo. Se você não consegue programar, uma boa alternativa opção seria ir para um desenvolvedor de software freelance (os preços podem variar dependendo de vários fatores).

Neste artigo, no entanto, vamos passar por TODAS as etapas necessárias para criar seu próprio tema WordPress personalizado para o seu site com WP. Estaremos analisando todos os aspectos importantes para garantir que você obtenha o melhor que o WordPress tem a oferecer. 

Começar a criar seu próprio tema como um iniciante pode, à primeira vista, parecer uma tarefa gigantesca.

No entanto, criar um tema personalizado do zero não é muito complicado no WP. Você não precisa ser um gênio do desenvolvimento web, se você tem o básico de codificação com PHP, pode facilmente aprender a criar um tema WordPress.

Além disso, criar seu próprio tema pode ser bastante gratificante, especialmente quando você vê o resultado final ao vivo em seu site.

Criando seu primeiro tema WordPress personalizado

Para começar a criar um tema WordPress, você precisará de algumas coisas básicas:

• Um site WordPress
• Um bom plano de hospedagem
• Um pouco de experiência anterior com coisas como ambientes de preparação locais
• Conhecimento básico de linguagens de codificação CSS e PHP
• Um tema inicial

Compreendendo a hierarquia de modelos do WordPress 

No WordPress, os arquivos de modelo (os blocos de construção do seu tema) são modulares e reutilizáveis.

Os arquivos de modelo são responsáveis ​​por gerar as páginas em seu site WP. Alguns desses arquivos são usados ​​em quase todas as suas páginas, enquanto outros são usados ​​apenas em circunstâncias específicas.

Dê uma olhada no diagrama abaixo - ele explica como a hierarquia de modelos do WordPress é organizada.

Os arquivos de modelo determinarão a aparência geral do conteúdo do site. Se quiser criar um cabeçalho, você usará um header.php arquivo, ou se quiser adicionar uma seção de comentários, você usará o comments.php arquivo. 

Para entender a hierarquia do modelo, você deve saber que o WordPress usa algo chamado "string de consulta" para decidir qual modelo ou conjunto de modelos deve ser usado para criar e exibir uma determinada página.

A string de consulta são informações armazenadas no link de cada parte do site que você está tentando modificar. Em termos mais simples, o WordPress analisa as informações e realiza pesquisas na hierarquia de modelos para encontrar um arquivo de modelo que corresponda às informações fornecidas na string de consulta.

Este é basicamente um esquema no qual o WP procura por arquivos de modelo correspondentes toda vez que as páginas são carregadas.

Por exemplo, se você digitar o seguinte URL http://example.com/post/this-post, O WordPress localizará os arquivos de modelo necessários na seguinte ordem: 

1. Arquivos que correspondem ao slug, neste caso, esta postagem.
2. Arquivos que correspondem ao ID da postagem.
3. Um único arquivo de postagem genérico, como single.php.
4. Um arquivo, neste caso, archive.php.
5. A index.php arquivo.

O último arquivo (index.php) é necessário em todos os temas, pois é o padrão (ou reserva) se nenhum outro arquivo for encontrado no processo de correspondência. sublinhados (um tema inicial do WP) tem os arquivos mais comuns. Esses arquivos incluídos neste tema funcionarão imediatamente.

Você pode editá-los se desejar experimentar ou se precisar criar alguma funcionalidade personalizada em seu site.

O que é um tema WordPress Starter? 

Um tema inicial é uma base básica de um tema WordPress personalizado.

Você pode usá-lo como base para colocar seu próprio tema exclusivo em funcionamento. Com um tema inicial, você pode criar seu próprio tema WordPress personalizado sem ter que projetar ou codificar um tema inteiro do zero.

Os temas iniciais do WordPress contêm todos os arquivos definidos pela hierarquia acima.

Usar um tema inicial permite que você compreenda melhor como o WordPress funciona, pois mostra o básico, a estrutura de um tema e como as diferentes partes funcionam juntas.

Um tema WordPress personalizado pode ser aplicado a uma variedade de diferentes tipos de sites, desde apresentações e diretórios a lojas online construído com WooCommerce, mídia social ou qualquer outra coisa para a qual você precise do seu site.  

Optar por temas iniciais (como UnderStrap, Underscores e Bones) ajudará a criar um tema WordPress que abre a porta para o uso de uma variedade de opções diferentes.

Usar sublinhados pode ser a melhor escolha para iniciantes, pois oferece os recursos mais importantes. Ele também vem de um desenvolvedor confiável e de longa data. Isso significa que é mais provável que seja compatível, seguro e confiável e terá um suporte melhor no longo prazo.

Por que você deve usar um tema inicial

Conforme declarado acima, um tema inicial é uma base, um projeto que o ajuda a criar um site exclusivo. Já está funcionando totalmente, mas ainda não possui os principais recursos definidores que tornam um site amigável. 

Essencialmente, ele ainda precisa ser estilizado e configurado corretamente. 

Dito isso, os temas iniciais são ideais para quem tem pouca ou nenhuma experiência com WordPress ou desenvolvimento web em geral. É uma ótima maneira de se familiarizar com o tópico de construção de temas e aprender o básico de sites com tecnologia WP. 

Um tema WordPress Starter economiza seu tempo e requer pouco ou nenhum conhecimento de fundo em codificação e no resto das complexidades do WordPress. 

Você pode aproveitar anos de trabalho árduo dos desenvolvedores do tema inicial e usar essas diretrizes para obter uma melhor compreensão de como o WordPress e o design do tema funcionam.   

Exemplos populares de temas para iniciantes

• sublinhados - Um tema inicial confiável e renomado que dá aos iniciantes uma vantagem inicial desenvolvimento de tema. O sublinhado é bastante básico e perfeito para começar imediatamente, se você tiver todas as ferramentas necessárias. O tema é ótimo para entender os conceitos de desenvolvimento do tema. Underscores tem tudo a ver com iniciar um novo projeto que deve ser visto mais como um kit de ferramentas em constante evolução e less como uma estrutura.
  
  
• Raízes - Este tema inicial oferece uma abordagem mais voltada para desenvolvedores, com sua marcação baseada no Boilerplate HTML5. Ele também oferece suporte a ferramentas mais avançadas, como Bootstrap e Grunhido. O tema inicial do Roots também inclui um wrapper de tema que ajuda a manter seu processo simplificado e elimina chamar as mesmas partes do modelo repetidamente.

O Roots também usa pré-processadores CSS e suporta LESS, uma extensão de linguagem compatível com versões anteriores para CSS, que pode acelerar significativamente o processo de desenvolvimento de seu tema.

Dito isso, o Roots oferece uma abordagem mais pragmática e requer um pouco mais de know-how do desenvolvedor.  

6 etapas básicas para desenvolver seu tema WordPress

Depois de cobrir o básico, você finalmente está pronto para começar a criar um tema WordPress.

Como este artigo é voltado mais para iniciantes, usaremos um tema inicial, no entanto, você também está livre para criar tudo do zero, sem nenhum tema inicial.

Se esse é o caminho que você deseja seguir, não se esqueça de que você precisará de muito mais tempo e de se aprofundar um pouco mais na codificação e no desenvolvimento web em geral.

1. Configurando o Ambiente de Desenvolvimento

Sua primeira etapa no processo deve ser a criação de um ambiente de desenvolvimento.

Este é basicamente um servidor que você precisa instalar em seu computador para gerenciar e desenvolver sites WP locais. Um ambiente de desenvolvimento permite desenvolver seu site com segurança, além de oferecer várias opções para a criação de um ambiente local.

utilização DesktopServer é um dos caminhos ideais que você pode seguir. É uma maneira fácil de obter uma versão local e rápida do WP compatível com Windows e Mac. Selecione a versão gratuita, registre-se e baixe-a e instale o software.

Depois de instalar, abra o programa e configure seu ambiente local.

É um processo bastante simples e você estará pronto em minutos. Após a configuração, você terá um site e um ambiente de desenvolvimento que funcionarão e se parecerão com qualquer site WP ativo.

2. Baixe e instale um tema inicial

Os temas iniciais mais básicos (como sublinhados) são fáceis para os iniciantes.

Ao contrário da maioria dos temas básicos, sublinhados permite personalizar opções através de seus Opções avançadas (como autor e descrição) após nomear seu tema. 

Você também pode adicionar folhas de estilo sintaticamente impressionantes ou SASS que é uma linguagem CSS de pré-processamento que permite introduzir recursos como aninhamento, operações matemáticas, utilização de variáveis, etc.

Depois de fazer suas escolhas, basta clicar em Gerar para baixar o arquivo .zip com seu tema inicial.

Agora, instale o arquivo em seu site local. Se você fez tudo corretamente, agora você pode ver uma versão básica do seu tema personalizado do WordPress.

Compreendendo os Princípios Básicos do WordPress 

Agora que o básico está configurado, você pode começar a trabalhar. No entanto, antes de mergulhar no processo de personalização, você precisará se familiarizar com os princípios e componentes básicos da criação de um tema WordPress usando os princípios básicos do WP. 

Em primeiro lugar, você deve aprender sobre arquivos de modelo, os principais blocos de construção de qualquer tema no WP.

Os arquivos de modelo basicamente determinam como seu layout e conteúdo serão exibidos em seu site. Se você quiser criar um cabeçalho, você vai querer usar o header.php arquivo, enquanto comments.php seria usado para exibir quaisquer comentários.

Conforme discutido acima, o WP usa sua hierarquia de modelo para determinar qual arquivo de modelo ele escolherá para executar o conteúdo que um usuário está solicitando / precisa. Você pode trabalhar com esses arquivos como eles estão, mas como você está aqui para criar um tema WordPress, sua maior parte do trabalho será ajustar esses arquivos às suas necessidades.

Quando falamos sobre os princípios básicos do WP, você também deve entender o conceito por trás The Loop.

É o código que o WP usa principalmente para exibir seu conteúdo e pode ser encontrado em todos os arquivos de modelo de exibição de conteúdo, como o index.php or barra lateral.php. É um assunto bastante complexo, mas felizmente, ele vem junto com o tema inicial (se você usar Underscores), o que significa que seu processo deve ser mais simples. 

Você precisará entender o conceito e trabalhar com ele. Confira alguns dos exemplos no link acima para entender melhor como o loop é usado e como você pode personalizar o código de acordo com suas necessidades.

3. Crie os detalhes do tema

Temas não são componentes puramente cosméticos.

Existem muitos recursos diferentes que você pode adicionar ao seu site que podem melhorar a funcionalidade. Vamos discutir como implementar alguns recursos básicos para apimentar seu site.

Adicionando Hooks pode permitir que você execute diferentes ações do PHP, exiba outras informações ou insira dados de estilo conforme necessário.

Ganchos são fragmentos de código que são inseridos em arquivos de modelo. A maioria deles é implementada diretamente como parte do núcleo do WordPress, mas alguns ganchos são muito úteis ao personalizar temas também.

Aqui está uma lista dos ganchos mais comuns e suas funções:

• wp_head () - é adicionado ao elemento em header.php. Ele ativa scripts, estilos e outras informações que são executados quando o site começa a carregar.
• wp_footer () - geralmente adicionado a footer.php antes do tag, mais frequentemente usada para inserir o código do Google Analytics ou outro código que precisa aparecer em cada página, mas é muito pesado para carregar no cabeçalho.  
• wp_meta () - Geralmente encontrado em sidebar.php e é mais frequentemente usado para incluir scripts adicionais (por exemplo, uma nuvem de tags).
• comment_form () - Adicionado a comments.php diretamente antes do fechamento do arquivo tag para mostrar comentários. 

Quando você estiver usando sublinhados, esses ganchos já estarão incluídos com o tema, mas é sempre uma boa ideia aprender mais sobre eles e ver todos os ganchos disponíveis. Ganchos permitem estender os recursos de seu tema personalizado.  

4. Adicionando estilos usando CSS

Cascading Style Sheets ou CSS define a aparência do conteúdo no site que você está criando.

Ao utilizar a blockchain da style.css arquivo, que já está incluído em seu tema, você pode editar qualquer um dos estilos encontrados aqui e salvá-los para ver como ele altera seu design. Por padrão, ele contém apenas o estilo básico.

CSS é usado para permitir a apresentação e separação do conteúdo do seu site, desde o layout até as fontes e o conteúdo. CSS pode ajudar a tornar o conteúdo do seu site mais acessível e flexível.

Aprofundar-se em como usar estilos com temas WordPress pode ser complicado e está além do escopo deste artigo. Se você não tiver certeza sobre isso, leia mais sobre CSS antes de continuar.

5. Incluindo JavaScript

Adicionar arquivos JavaScript ao seu tema, se necessário, pode aumentar os recursos e capacidades interativos e ter um site com um funcionamento melhor. É especialmente útil quando você deseja incorporar plug-ins de terceiros em seus sites, como reprodutores de áudio ou vídeo específicos, coisas como controles deslizantes, suporte a pop-up e outras bibliotecas de terceiros para criar funcionalidades avançadas.

Para usar Javascript com seu site personalizado, você pode criar uma chamada usando a sintaxe abaixo para adicionar o arquivo de script ao tema.

Alternativamente, você pode usar o script diretamente em seu header.php arquivo de modelo entre as metatags e o link da folha de estilo, como você faria no caso de uma página HTML. Ao usá-lo no arquivo de cabeçalho, ele deve se parecer com isto: 

Se você deseja usar JS diretamente, adicione a chamada para os arquivos diretamente conforme abaixo. Se você deseja definir um recurso “enviar para um amigo”, pode colocá-lo sob o título da postagem. Isso seria semelhante a este: 

" rel="bookmark">

<!--

página de email ();

// ->

</div>

Você também pode enfileirar scripts usando a sintaxe mostrada posteriormente neste artigo.

6. Teste seu tema e exporte-o

Quando você terminar com todos os itens acima, finalmente é hora de testar seu tema WordPress personalizado criado para ter certeza de que funciona sem problemas.

Para este propósito, você pode usar o Teste de Unidade de Tema Dados, um conjunto de dados fictícios que você pode enviar para o seu site. Os dados consistem em variações de estilo e conteúdo diferente, permitindo que você veja com que eficácia seu tema pode lidar com dados previsíveis e imprevisíveis.

Teste tudo minuciosamente (de acordo com o link Codex acima) para ter certeza de que o tema que você criou atende aos padrões exigidos e atende às suas expectativas antes de exportá-lo.

Depois de ter certeza do teste, você pode exportar o tema.

Você pode fazer a exportação encontrando o local em que instalou o ambiente de desenvolvimento de site localmente.

Abra a pasta e acesse  / Wp-content / themes /, onde você pode encontrar o tema no qual estava trabalhando.

Agora, com uma ferramenta de compressão, crie um zip.arquivo com base na pasta, compactando-a. Quando terminar, tudo o que você precisa fazer é fazer o upload e instalá-lo em qualquer site WordPress. Você também pode enviá-lo para o WordPress Diretório de Temas. 

Guia Detalhado de Desenvolvimento de Tema WordPress

Agora que você fez o básico, as próximas etapas listarão alguns detalhes adicionais sobre como criar um tema WordPress.

Criação de arquivos / diretórios de temas personalizados

Como você já sabe, os temas WP são criados a partir de diferentes arquivos de modelo que, no mínimo, incluirão um sidebar.php, cabeçalho.php. e footer.php. Você pode chamá-los usando as tags de modelo (get_header (), ao chamar o cabeçalho, get_sidebar (), ao chamar a barra lateral, etc.).

Você também pode criar versões personalizadas desses arquivos com pequenas modificações como estas: Barra Lateral-{your_custom_template} .php, cabeçalho-{your_custom_template} .php e rodapé-{your_custom_template} .php. 

Você também pode chamar as tags de modelo com a mesma analogia com o nome do modelo como um parâmetro como este:

get_header ( 'your_custom_template' ); 

As páginas são criadas por vários arquivos, o que significa que você também pode criar outros arquivos de modelo personalizado e chamá-los em qualquer local da página simplesmente usando get_template_part (). Basta dar ao arquivo um nome apropriado e usar o mesmo método personalizado usado para os arquivos de cabeçalho, rodapé e barra lateral. 

Digamos que você queira criar um modelo que lide com o seu conteúdo - você só precisa criar um arquivo chamado content.php e, em seguida, estenda o nome do arquivo para adicionar um layout específico. Neste caso, que seja content-product.php.

No final, quando você carrega o arquivo de modelo no tema, ele se parece com isto:

get_template_part ('conteúdo', 'produto') ;.

Usando diretórios

Para vincular a diretórios de temas, basta usar a função get_theme_file_uri ();

Esta função retornará o URI completo para a pasta principal do seu tema e você pode usá-lo para fazer referência a arquivos e subpastas usando o seguinte exemplo:

echo get_theme_file_uri ('images / logo.png');

Scripts de enfileiramento e folhas de estilo

Ao criar seu próprio tema, você também pode criar folhas de estilo personalizadas e seus próprios arquivos JavaScript.

Sempre que você estiver fazendo isso, certifique-se de carregá-los usando o método padrão do WordPress, caso contrário, há uma chance de que seu tema e plug-ins não funcionem corretamente em todas as circunstâncias.

Tudo que você precisa fazer é criar uma função que enfileire todos os estilos e scripts. Para isso, o WP cria um identificador e um caminho para encontrar o arquivo e as dependências (se houver), uma vez que isso aconteça, você precisará usar um gancho para inserir as folhas de estilo e os scripts. 

A função básica para o estilo de enfileiramento:

wp_enqueue_style ($ handle, $ src, $ deps, $ ver, $ media);

Para scripts de enqueing:

wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer); 

Enfileirar Google Fonts

As fontes do Google são um excelente recurso gratuito de fontes para web designers e podem ser simplesmente adicionadas ao seu tema personalizado.

Primeiro, você terá que encontrar um tipo de fonte que goste na biblioteca de fontes do Google. Depois de encontrar a fonte com a qual deseja trabalhar, basta clicar no botão “Selecionar este estilo”, que o levará para uma nova página.

Se você rolar para baixo aqui, encontrará as instruções para seu uso em uma caixa com o código necessário que você pode adicionar ao seu site.   

Você pode adicionar as fontes pelo método padrão e recomendado, ou você pode optar pelo método CSS @import ou usando o método Javascript.

Você também pode adicioná-lo ao WP colocando a fonte na fila do seu tema funções.php.arquivo ou usando um plugin específico.

function wpb_add_google_fonts () {

wp_enqueue_style ('wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic.400,700,300', false);

}

add_action ('wp_enqueue_scripts', 'wpb_add_google_fonts');

Se você quiser, pode ler mais sobre como alterar fontes em um tema WordPress Aqui.

Dividindo sua página em seções (Header.php / Footer.php)

Na maioria dos sites, o cabeçalho, rodapé e barra lateral serão iguais em todos os páginas. É verdade que, em alguns casos, você desejará customizar algumas coisas, mas em geral elas são consistentes.

Então, para dividir a página em um cabeçalho e rodapé, você deve recortar e colar do index.php página, as partes relevantes que devem estar no cabeçalho / rodapé e na barra lateral. Isso depende um pouco do seu index.php atual.

Por exemplo, se você estiver usando sublinhados, o cabeçalho e o rodapé já foram definidos corretamente em header.php e footer.php.

Vamos continuar este exemplo como se estivéssemos criando o conteúdo para o cabeçalho.

Na maioria dos sites, os cabeçalhos contêm os estilos de cabeçalhos essenciais e a navegação para o site.   

Começar de adicionar antes do fechamento . Você deveria ter algo assim. Isso é baseado no tema inicial de sublinhados, mas você pode ajustar o cabeçalho conforme necessário para criar suas próprias personalizações.

header.php

/ **
* O cabeçalho do nosso tema
*
* Este é o modelo que exibe todos os seção e tudo até
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-parcials
*
* @package Daves_Theme
*/

?>

>

">

>

the_custom_logo ();
if (is_front_page () && is_home ()):
?>
" rel="home">

senão :
?>
" rel="home">

endif;
$ daves_theme_description = get_bloginfo ('descrição', 'exibição');
if ($ daves_theme_description || is_customize_preview ()):
?>

wp_nav_menu (
matriz (
'theme_location' => 'menu-1',
'menu_id' => 'menu principal',
)
);
?>

O mesmo processo deve ser aplicado ao rodapé.

Usando Functions.php

O tema functions.php arquivo é um arquivo de modelo no tema WP que atua como um "mestre" que carrega automaticamente tanto para administradores quanto para páginas front-end de um site.

Normalmente, ele define funções, ações, filtros e classes que outros arquivos de modelo usam no tema. Além disso, pode ser usado para estender a funcionalidade do tema por meio de ganchos, ações e filtros adicionais.

Você pode encontrar facilmente o arquivo functions.php na pasta do tema. Você pode adicionar funções integradas do WP e funções regulares do PHP a filtros e ganchos que já estão definidos no núcleo do WP.

Você pode simplesmente criar um arquivo functions.php criando um arquivo de texto simples com o nome de functions.php e colocá-lo no diretório do tema. Com este arquivo, você pode habilitar formatos de postagem, menus de navegação e miniaturas de postagem junto com ações e filtros WP. 

Verifique o arquivo functions.php de um tema inicial para ver alguns exemplos do que pode ser feito. Você também pode pesquisar artigos que usam o functions.php que estende as funções de um site WordPress usando o arquivo de funções.

Usando as configurações principais do tema

As configurações principais permitem alterar certas configurações de tema sem modificar arquivos de tema ou ter que alterar qualquer código. Uma descrição detalhada disso está fora do escopo deste artigo, portanto, iremos encaminhá-lo para alguns artigos que explicam esse conceito em detalhes.

1. API de configurações descrição no WordPress Codex.
2. Guia completo para API de configurações do WordPress

O Loop WordPress

Como discutimos antes, o Loop é um mecanismo padrão usado pelo WP para exibir postagens por meio de arquivos de modelo.

Usando o mecanismo de loop, o WP recupera os posts nas páginas atuais e os formata de acordo com as "instruções" do loop.

Basicamente, ele percorre as postagens das páginas atuais, uma de cada vez, executando a ação especificada no tema. 

Você pode usar o loop para

• Exibindo conteúdo e comentários
• Exibindo títulos de postagens e trechos na página inicial do blog
• Exibir dados de campos personalizados e tipos de postagem personalizados
• Exiba o conteúdo em páginas individuais usando tags de modelo.
• Personalize o Loop para exibir e manipular o conteúdo em arquivos de modelo

Se estiver usando o tema inicial Underscores, você encontrará o loop do WordPress sendo usado nos arquivos single.php e page.php. Você pode querer dar uma olhada nesses arquivos para entender como eles funcionam e / ou podem ser usados.

get_header ();
?>

while (have_posts ()):
the_post ();

get_template_part ('template-parts / content', get_post_type ());

the_post_navigation (
matriz (
'prev_text' => ' '. esc_html __ ('Anterior:', 'daves-theme'). ' % title ',
'next_text' => ' '. esc_html __ ('Próximo:', 'daves-theme'). ' % title ',
)
);

// Se os comentários estão abertos ou temos pelo menos um comentário, carregue o modelo de comentário.
if (comments_open () || get_comments_number ()):
comments_template ();
endif;

fim; // Fim do loop.
?>

get_sidebar ();
get_footer ();

Menu e páginas

Menu Principal

Você pode selecionar seu menu principal no Editor de Menu WP (localizado em Aparência - Menu). Seu tema pode oferecer suporte a mais de um menu de navegação em locais diferentes dentro de seu tema. 

Também existem maneiras de registrar menus adicionais, por exemplo, você pode querer criar um menu de "rodapé".

Dê uma olhada no códice do WordPress para entender como fazer isso: https://codex.wordpress.org/Navigation_Menus

Página personalizada

WP permite a criação de páginas e posts por padrão. Ele controla a aparência da página por meio do page.php arquivo de modelo.

Embora esse arquivo afete todas as páginas do seu tema, você pode modificar o layout e a aparência delas. Editar esses modelos de página personalizados no WP requer um pouco de HTML, PHP e CSS, mas, mais uma vez, deve ser bastante simples.

index.php

Este modelo é o modelo substituto padrão no WordPress para exibir qualquer página quando a hierarquia de modelos não consegue encontrar nenhuma outra página que corresponda aos seus parâmetros fornecidos.

Você precisará usar isso para atender a qualquer coisa que não seja tratada pelo restante dos arquivos de modelo.

Arquivo.php

A archive.php modelo é usado para exibir tag, autor, categoria e outras páginas personalizadas de arquivo.

Criar uma página de arquivos pode ser uma boa maneira de reunir todo o seu conteúdo em uma única página.

Categoria

No desenvolvimento da Web WP, não é incomum usar vários modelos para categorias, tipos de post personalizados, taxonomias e tags. Ao criar categorias de modelos diferentes, você pode incluir recursos diferentes em cada página de categoria.   

Um modelo típico de category.php será semelhante a este:

/ **

* Um modelo de categoria simples

*/

get_header (); ?>

// Verifique se há alguma postagem para exibir

if (have_posts ()):?>

Categoria:

// Exibir descrição de categoria opcional

 if (category_description ()):?>

// O laço

while (have_posts ()): the_post (); ?>

de

 <?php

  comments_popup_link ('Nenhum comentário ainda', '1 comentário', '% comentários', 'comments-link', 'Comentários fechados');

?>

</div>

<?php finalizando;

mais:?>

Desculpe, nenhum post corresponde aos seus critérios.

</div>

Sidebar.php

A barra lateral é a área onde você pode colocar seus widgets em um tema WP. Na maioria das vezes, está no lado direito ou abaixo do seu conteúdo em todas as páginas.

As barras laterais são usadas para exibir coisas que não estão diretamente conectadas ao post ou ao conteúdo da página, mas coisas como links para diferentes áreas do seu site, formulários de inscrição, anúncios, links de mídia social e assim por diante.

Normalmente, a barra lateral é usada em conjunto com widgets WP.   

Veja como você pode adicionar uma barra lateral pronta para widget ao seu tema:

function wpb_widgets_init () {

    register_sidebar (array (

        'nome' => __ ('Barra lateral principal', 'wpb'),

        'id' => 'sidebar-1',

        'descrição' => __ ('A barra lateral principal aparece à direita em cada página, exceto o modelo da página inicial', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    register_sidebar (array (

        'nome' => __ ('Barra lateral da página inicial', 'wpb'),

        'id' => 'sidebar-2',

        'descrição' => __ ('Aparece no modelo estático da página inicial', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    }

add_action ('widgets_init', 'wpb_widgets_init');

Páginas de postagem individuais (single.php)

Digamos que você queira usar um modelo ou layout diferente para um artigo específico em seu site.

Para isso, você terá que criar um modelo de postagem única personalizado. Isso é muito semelhante à criação de páginas personalizadas. Seguindo as diretrizes básicas aplicadas lá, você também pode criar facilmente postagens individuais. 

Criação de uma imagem em destaque

Para adicionar suporte para imagens em destaque, basta adicionar o seguinte código ao tema functions.php arquivo:

add_theme_support ( 'pós-thumbnails'); 

Agora, você pode ir para suas páginas ou posts e verificar se a opção de imagem em destaque está disponível. Provavelmente, o WP não irá exibi-lo automaticamente, então, para exibir a imagem, você pode precisar fazer pequenas edições em seus modelos, onde as páginas e postagens são exibidas adicionando este código:

Paginação 

Este recurso permite que você vá e volte atrás nas páginas de conteúdo. Você pode usar este recurso ao visualizar listas de postagens com mais entradas do que pode caber em uma única página ou quando quiser dividir postagens mais longas usando o marcação.

A forma mais simples de paginação é colocar a função posts_nav_link (). No template após o loop. Isso gera links para a próxima página de postagens (quando você está dividindo listas de postagens) e para as postagens anteriores, quando aplicável.  

posts_nav_link ();

Você também pode usar next_posts_link & prev_posts_link para controlar onde o link da página de postagens anterior e seguinte aparecerá.

next_posts_link ();

anterior_posts_link ();

Comentários 

Os comentários são uma parte essencial de qualquer blog ou página. Dá aos visitantes do site a possibilidade de entrar em contato com você, dar feedback, fazer perguntas e, de modo geral, criar um vínculo mais profundo com o seu site e seu conteúdo.

Todos os comentários são exibidos na área de administração e há vários recursos que você pode adicionar, desde a ativação de comentários apenas para usuários específicos até a moderação de comentários.

Você pode usar o arquivo comments.php para personalizar a aparência dos comentários em seu tema.

Outras páginas e arquivos 

Dependendo de suas necessidades, você pode localizar ou criar páginas e arquivos diferentes e personalizá-los de acordo com suas preferências usando as mesmas diretrizes ou semelhantes mencionadas acima. 

Usando o tema pai / filho

Tema pai

Temas pais no WP são temas declarados “pais” por outros temas, a saber, temas filhos.

Um tema filho é usado para permitir que designers e desenvolvedores criem personalizações para temas sem quebrar a possibilidade de atualizar o tema pai. Isso ocorre porque se um desenvolvedor alterar os arquivos do tema original, ao realizar uma atualização do tema, as alterações serão perdidas.

No entanto, os temas pais passam seus recursos e funcionalidades para seus temas filhos. Os desenvolvedores são livres para fazer alterações na funcionalidade e nos recursos do tema filho sem afetar a capacidade de atualização do tema pai.

tema criança

Os temas filhos herdam a funcionalidade dos temas pais. Eles são usados ​​principalmente para modificar um tema existente sem perder qualquer estilo personalizado adicionado anteriormente durante as atualizações do tema.  

Os temas filhos aceleram o processo de desenvolvimento porque é fácil criar modificações com eles.

A maioria dos temas criará um tema filho e o tornará disponível com o tema, de forma que qualquer pessoa que usar o tema possa personalizá-lo por meio do tema filho. Nós definimos como criar um tema filho, em nosso artigo aqui.

Usando frameworks de desenvolvimento

Este termo se refere às bibliotecas de código que são usadas no desenvolvimento do tema. 

Estruturas de desenvolvimento foram criadas para servir como modelos de tema pai com todas as funcionalidades. Basicamente, como com os temas pais, os frameworks permanecem intocados enquanto os desenvolvedores podem realizar modificações nos temas filhos.

Isso torna o desenvolvimento mais rápido e facilita a eliminação de bugs em estruturas de tema específicas. Estruturas de desenvolvimento notáveis ​​incluem o Estrutura do tema Genesis, Themify e Divi por Elegant Themes.

Resumindo como criar um tema WordPress

O texto acima foi um guia passo a passo detalhado para começar a desenvolver seu próprio tema WordPress personalizado.

Em suma, embora você precise ter um bom conhecimento de WordPress e PHP, não é um processo tão exigente. Saber os fundamentos do desenvolvimento web é importante e você pode entender o núcleo do WordPress com mais detalhes à medida que o desenvolve. Se você ainda não deseja estar à altura da tarefa, tudo bem, reserve um tempo e experimente um pouco.

Depois de cometer alguns erros, você começará a aprender mais e mais. Também é bom dar uma olhada na base de código de outros temas populares para entender o que eles estão fazendo e ter uma boa ideia das práticas que fazem sentido.

Informe-nos se tiver alguma dúvida nos comentários abaixo.

Sobre o autor

Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/Email: david @collectiveray.com

David trabalha na indústria online e digital ou em torno dela há 21 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos que os cercam. Ele trabalhou com agências de desenvolvimento de software, empresas internacionais de software, agências de marketing locais e agora é Chefe de Operações de Marketing na Aphex Media – uma agência de SEO. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seus sites e plataformas digitais disponíveis atualmente. Sua combinação de experiência em tecnologia combinada com uma forte visão de negócios traz uma vantagem competitiva aos seus escritos.