Uma introdução à anatomia de um tema WordPress

  1. 1. Tutorial do WordPress: Como criar um tema WordPress a partir de HTML (Parte 1)
  2. 2. Tutorial do WordPress: Como criar um tema do WordPress a partir de HTML (parte 2)
  3. 3. Lendo atualmente: Uma introdução à anatomia de um tema WordPress

Há um tempo, apresentamos o conceito de criação de um tema WordPress a partir de HTML. Dividimos o tutorial em duas partes e hoje estamos focados em aprofundar os dois tutoriais. Portanto, fique à vontade para considerar este post como a terceira veiculação da série de posts. Meu objetivo é desmontar o tema WordPress para fornecer uma imagem clara de como ele (o tema) funciona.


Esta publicação pressupõe que você tenha um conhecimento prático de HTML e CSS. Vou seguir em frente e declarar que possuir habilidades em HTML e CSS é um pré-requisito para projetar temas do WordPress. Mais uma coisa, este post vai ficar longe de grandes palavras e conceitos difíceis – será fácil de entender, então esteja pronto para se divertir e aprender.

Um pouco de HTML Priming

Cada página da Web HTML é dividida em partes diferentes usando o

tag. Por exemplo, você pode quebrar o corpo () do seu site em várias seções, como navegação, cabeçalho, conteúdo principal, barra lateral e rodapé, entre outras.

Depois de ter sua página da web em seções, você pode solicitar (ou organizar) as seções como desejar usando CSS. Esse processo é conhecido como estilo e envolve a adição de outros elementos de estilo, como cor, tamanho, bordas, efeitos especiais, etc. Esse é o poder do CSS, que, aliás, é a abreviação de Cascading Style Sheets. Quando você junta seus arquivos HTMl e CSS e gera algumas imagens, você acaba com um site completo.

As coisas não são muito diferentes com os temas do WordPress. Como vimos na parte 1 de Como criar um tema WordPress a partir de HTML, os temas WordPress são divididos em arquivos diferentes. Se você não consegue identificar alguma semelhança neste momento, permita-me explicar.

As páginas HTML estáticas da Web são divididas em divisões (o que chamamos de seções anteriormente) usando

tags (ou tabelas, se você é realmente da velha escola). Por outro lado, os temas do WordPress são divididos em diferentes arquivos php, que são reunidos usando tags de modelo.

Portanto, em vez de ter todos os elementos do corpo (cabeçalho, conteúdo principal, barra lateral, rodapé etc.) vivendo em um único arquivo (como é o caso do HTML estático), cada um dos elementos do corpo (nos temas do WordPress) vive em arquivos separados.

Portanto, o cabeçalho ficará em header.php, a barra lateral ficará em home em sidebar.php, o conteúdo principal em index.php ou single.php (se for uma postagem) ou page.php (se for uma página ) A seção rodapé ficará em footer.php e assim por diante.

Você está seguindo? Confira a ilustração abaixo:

html-wordpress = estrutura

Da nossa ilustração acima, , e são chamados de tags de modelo. O trabalho deles é buscar header.php, sidebar.php e footer.php nessa ordem do diretório de temas e exibir o conteúdo em seu index.php, completando assim a página da web.

Não deixe o .php extensão o assusta, o conteúdo dos arquivos php é apenas um código HTML que você conhece. Por exemplo, seu header.php pode conter uma navegação típica da lista HTML. Da mesma forma, você pode colocar o código HTML típico no rodapé.php, sidebar.php e index.php.

Você também pode colocar o loop.php funcione no seu index.php (ou em qualquer lugar que você queira) para exibir as postagens do seu blog, mas eu devo desacelerar e voltar à anatomia dos temas do WordPress. Eu mencionei uma coisa ou duas sobre o loop na parte 2 de como criar um tema WordPress a partir de HTML. e falaremos sobre isso (o loop) e outras funções no futuro.

Se movendo…

Um tema básico do WordPress é composto por pelo menos quatro arquivos de modelo, a saber:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Vamos ver o que se passa em cada uma dessas mágico arquivos:

Arquivo de modelo Index.php

Este é o arquivo principal sem o qual você não tem um tema WordPress funcional. É o primeiro arquivo (ou padrão) carregado quando você visita um site WordPress. Considere o equivalente a index.html.

Um típico index.php em temas do WordPress será semelhante a este:





Você pode adicionar o loop entre e para exibir postagens do blog na página inicial (index.php), como mostrado abaixo:




Arquivo de modelo Header.php

Os arquivos deste modelo contêm seu código de cabeçalho, navegação e código de cabeçalho HTML. Basicamente, o header.php armazena tudo o que você deseja mostrar na parte superior do seu site. Você sabe, coisas como o título do seu site e coisas assim.

Você também cria um link para sua folha de estilo CSS no header.php. Aqui está um exemplo básico de header.php:





<?php wp_title( '|', true, 'right' ); ?>







Esta é a seção do cabeçalho. Coloque seu logotipo e outros detalhes aqui.

Arquivo de modelo Sidebar.php

O Sidebar.php contém tudo o que você precisa para aparecer nas suas barras laterais. A barra lateral contém menus adicionais, widgets, categorias, ícones de mídia social, conteúdo personalizado, código HTML, como anúncios, etc..

Sidebar.php pode conter marcação HTML pura ou chamadas de função php, dependendo de suas necessidades. Como tal, um sidebar.php básico pode parecer com:

Arquivo de modelo Footer.php

O que você acha que entra no footer.php? Você pode colocar suas informações de direitos autorais aqui, menus adicionais, links, ícones de mídia social – o que quiser! Gostaria de ver como é o rodapé básico.php? Aqui:

Coloque aqui o conteúdo do rodapé, incluindo chamadas de função php (para buscar arquivos de modelos diferentes, por exemplo, search.php), se necessário.

Observe o e fechando tags no footer.php? Você consegue adivinhar por que eles devem ser incluídos no footer.php? Da mesma forma, você pode adivinhar por que o e as tags de abertura estão incluídas no header.php? Deixe-nos saber suas suposições na seção de comentários no final deste post.

Os quatro arquivos de modelo que acabamos de cobrir acima compõem um tema WordPress muito básico. Existem muitos outros arquivos de modelo; existe um arquivo de modelo para cada elemento que você vê em um tema do WordPress, seja comentários, resultados de pesquisa e páginas de erro 404, apenas para citar alguns.

Para entender completamente a anatomia de um tema do WordPress, você precisa se familiarizar com diferentes arquivos de modelo. Você pode navegar por todos mosaicos de modelos utilizáveis ​​no WordPress.

Em seguida, temos tags de modelo, que o WordPress usa para buscar arquivos de modelo no diretório do tema. Você pode aprender mais sobre tags de modelo e o papel que desempenham no WordPress.

Sumário

Um tema WordPress consiste nos seguintes elementos anatômicos:

  • Arquivos de modelo como index.php, header.php, search.php, category.php etc
  • Tags de modelo como , etc
  • CSS
  • Imagens e outros arquivos de mídia
  • Arquivos JavaScript

E aqui está uma ilustração que resume a anatomia de um tema WordPress:

Deseja continuar aprendendo? Confira o detalhado guia de anatomia do tema no WordPress Codex.

Conclusão

Todo tema WordPress que você vê na Web usa a mesma estrutura anatômica (mesmo nosso popular Tema Total WordPress), que você pode personalizar para atender às suas necessidades. Depois de entender os conceitos básicos do desenvolvimento de temas do WordPress, não há limite para o que você pode fazer com / para os temas do WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map