Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 2)
- 1. Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 1)
- 2. Atualmente lendo: Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 2)
- 3. Uma introdução à anatomia de um tema WordPress
Na primeira parte deste tutorial, abordamos os conceitos básicos de conversão de um modelo HTML em um tema WordPress. Se você é um pouco curioso, aprendemos algumas coisas sobre como dividir modelos HTML em arquivos PHP, reuni-los novamente, estilizar e nomear temas do WordPress. Realmente, aprendemos muito, e você vai querer se familiarizar com os conceitos que abordamos em nosso primeiro tutorial para aproveitar esta segunda porção. No post de hoje, vamos levar as coisas um pouco mais alto. Abordaremos mais algumas áreas para que você possa criar um tema WordPress totalmente funcional. Então, sem mais delongas, vamos lá.
Configurando imagens e arquivos JavaScript
Se você tinha imagens em seu modelo HTML original ( index.html ), provavelmente notou que elas pararam de aparecer depois de dividir o modelo em arquivos PHP. Não se preocupe, é assim que o PHP é. Por exemplo, se você tivesse um logotipo em sua seção de cabeçalho assim…
<img alt=”your_logo_alt_text” src=”images/logo.jpg” />
…você precisará brincar um pouco com o código. O código que vou revelar daqui a pouco ajudará os navegadores a encontrar seu logotipo (ou qualquer outra imagem) na pasta de imagens , que é (ou deveria ser) uma subpasta do diretório principal do seu tema. Portanto, para exibir seu logotipo na seção de cabeçalho, abra o arquivo header.php e substitua o código acima pelo seguinte:
<img alt=”your_logo_alt_text” src=”<?php echo get_template_directory_uri(); ?>/images/logo.jpg” />
A função get_template_directory_uri() retorna a url para o diretório do seu tema. Então, se você adicionar seu logotipo em uma pasta de imagens, o código pegará esse logotipo.
Nota alguma diferença? Obviamente, este pedaço de código corrigirá apenas seu logotipo. Para corrigir outras imagens, você precisará reescrever seus códigos de maneira semelhante. Coisas fáceis .
Passemos ao JavaScript. Se o seu site HTML utilizou JavaScript, crie uma pasta chamada js e coloque seus scripts lá. Você pode chamá-los no arquivo header.php usando o seguinte código:
<script type=”text/javascript” src=”<?php echo get_template_directory_uri(); ?>/js/example.js”></script>
O código acima usa example.js como ilustração. Não se esqueça de substituir essa parte pelo nome do seu arquivo JavaScript.
Claro que se você está criando um tema para outra pessoa, então você realmente deve carregar seus arquivos js com wp_enqueue_scripts. Confira as postagens de AJ sobre como adicionar JavaScript a temas do WordPress para obter mais informações e dicas.
Arquivos de modelo
Na primeira parte deste tutorial, mencionamos quatro arquivos de modelo básicos, a saber: index.php, header.php, sidebar.php e footer.php . Os arquivos de modelo controlam como seu site será exibido na web. Os modelos obtêm informações do banco de dados MySQL do seu WordPress e traduzem o mesmo em código HTML que é exibido nos navegadores da web.
Em outras palavras, os arquivos de modelo são os blocos de construção dos temas do WordPress. Para entender melhor os templates, vamos nos aprofundar em um conceito conhecido como hierarquia de templates .
Usaremos uma analogia. Se um visitante clicar em um link de categoria (ou seja, um link para uma categoria) como http://www.yoursite.com/blog/category/your-category/, o WordPress utiliza a hierarquia de modelos para gerar o arquivo (e conteúdo) correto conforme explicado abaixo:
- Em primeiro lugar, o WordPress procurará um arquivo de modelo que corresponda ao ID da categoria
- Se o ID da categoria for, por exemplo, 2, o WordPress procurará um arquivo de modelo chamado category-2.php
- Se category-2.php não estiver disponível, o WordPress irá para um arquivo de modelo de categoria genérico, como category.php
- Se este arquivo de modelo também não estiver disponível, o WordPress procurará um modelo de arquivo genérico, como archive.php
- Se o modelo de arquivo genérico não existir, o WordPress retornará ao arquivo de modelo principal, index.php
É assim que os modelos do WordPress funcionam e você pode usar esses arquivos para personalizar seu tema do WordPress para atender às suas necessidades. Outros arquivos de modelo incluem:
home.php ou index.php | Usado para renderizar o índice de postagens do blog |
página inicial.php | Usado para renderizar páginas estáticas ou postagens mais recentes conforme definido nas exibições da primeira página |
single.php | Usado para renderizar uma única página de postagem |
single-{post-type}.php | Usado para renderizar tipos de postagem personalizados, por exemplo, se o tipo de postagem fosse um produto, o WordPress usaria o single-product.php |
page.php | Usado para renderizar páginas estáticas |
category.php ou archive.php | Usado para renderizar o índice do Arquivo de Categoria |
autor.php | Usado para renderizar o autor |
data.php | Usado para renderizar a data |
search.php | Usado para renderizar resultados de pesquisa |
404.php | Usado para renderizar a página de erro 404 do servidor |
Esta é apenas uma pequena lista, existem muitos outros templates WordPress . O tópico de templates é grande, e a melhor maneira de aprender a brincar com arquivos de template é lendo a extensa biblioteca Theme Development no WordPress. Alternativamente, você pode ler a seção de modelos mais curta no WordPress Codex .
Tags de modelo
Vendo que acabamos de apresentar os arquivos de modelo, é justo mencionar uma coisa ou duas sobre tags de modelo e o papel que elas desempenham nos temas do WordPress. De acordo com o WordPress.org, “…as tags de modelo são usadas no modelo do seu blog para exibir informações dinamicamente ou personalizar seu blog, fornecendo as ferramentas para torná-lo tão individual e interessante quanto você”.
Em nosso tutorial anterior, você encontrou algumas tags de modelo, como get_header, get_sidebar, get_footer e bloginfo . Na seção a seguir, adicionaremos algumas tags de modelo ao nosso tema WordPress recém-criado. Estou assumindo que você já incluiu a declaração DOCTYPE em seu arquivo header.php. Caso não tenha, aqui está o código:
<!DOCTYPE HTML>
A declaração DOCTYPE dá significado ao seu código HTML. Com isso fora do caminho, vamos modificar a tag HTML de abertura. Incluiremos um atributo lang usando a tag language_attributes assim:
<html <?php language_attributes(); ?>
O código acima irá gerar o seguinte:
<html lang=”en-US”>
Com a declaração DOCTYPE e a tag language_attribute em vigor, a estrutura do seu tema é legítima e os navegadores entenderão seu código. Se você estiver criando um tema para um blog, é importante colocar links para sua URL de pingback e feed RSS em sua cabeça. Em seu header.php, adicione o seguinte código:
<link title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” rel=”alternate” type=”application/rss+xml” /><link href=”<?php bloginfo(‘pingback_url’); ?>” rel=”pingback” />
Você notou como usamos a tag bloginfo para incluir o feed RSS (‘rss2_url’) e o pingback (‘pingback_url’)? Antes de salvar seu arquivo header.php, adicione também o seguinte código:
<?php wp_head(); ?>
A tag wp_head acima puxará as folhas de estilo e os arquivos JavaScript exigidos pelos seus plugins. Se você deixar de fora este pequeno pedaço de código, seus plugins podem não funcionar como desejado. Com isso fora do caminho, vamos adicionar títulos de página ao nosso tema WordPress usando – mais uma vez – a tag bloginfo. Em seu arquivo header.php, adicione o seguinte código:
<title><?php wp_title( ‘|’, true, ‘right’ ); ?><?php bloginfo(‘name’); ?></title>
A primeira tag wp_title adicionará o título da sua página ou postagem e a segunda tag bloginfo(‘name’ ) adicionará o nome do seu blog. Agora que seu tema WordPress tem títulos de página, que tal criarmos uma captura de tela para o nosso tema, reempacotar o tema e descansar?
Criando uma captura de tela para o seu tema
Quando você carregou seu tema de teste pela primeira vez, você deve ter notado que faltava uma captura de tela no painel de temas do WordPress. Parecia monótono, especialmente se você tivesse outros temas com capturas de tela coloridas. Mas não se preocupe, criar uma captura de tela para o seu tema é muito fácil. Basta criar uma imagem usando seu editor de imagens favorito (por exemplo, Adobe Photoshop) ou fazer uma captura de tela do seu tema. Certifique-se de que sua imagem tenha 600px de largura e 450px de altura.
Salve a imagem como screenshot.png na pasta do seu tema. Salve todas as alterações, compacte a pasta do seu tema em um arquivo ZIP. Carregue o tema e ative-o para ver suas novas alterações
Conclusão
Eu quero acreditar que este segundo tutorial ofereceu a você uma visão mais profunda sobre como criar um tema WordPress a partir de HTML estático. Em um futuro próximo, apresentarei outros aspectos do tema WordPress, mas, enquanto isso, preparei os seguintes recursos apenas para você:
- Modelos – WordPress Codex
- Tags de modelo – WordPress Codex
- Crie seu próprio tema WordPress a partir de um modelo HTML – SitePoint
- Criando um tema WordPress a partir de HTML estático – WPtuts+
Feliz criação!