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

Na parte um deste tutorial, abordamos o básico da conversão de um modelo HTML em um tema WordPress. Se você é um pouquinho 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ê deve se familiarizar com os conceitos que abordamos em nosso primeiro tutorial para aproveitar esta segunda porção. Na postagem de hoje, elevaremos as coisas um pouco mais. Abordaremos mais algumas áreas para que você possa criar um tema WordPress totalmente funcional. Então, sem mais delongas, aqui vamos nós.


Configurando imagens e arquivos JavaScript

Se você tinha imagens no seu modelo HTML original (index.html), você provavelmente notou que eles pararam de aparecer após 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 como este…

your_logo_alt_text

… você precisará brincar um pouco com o código. O código que revelarei em breve ajudará os navegadores a encontrar seu logotipo (ou qualquer outra imagem) em seu imagens pasta, 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:

your_logo_alt_text

A função get_template_directory_uri () retorna a URL para o diretório do tema. Portanto, se você adicionar seu logotipo a uma pasta de imagens, o código pegará esse logotipo.

Notou alguma diferença? Obviamente, esse trecho de código corrigirá apenas o seu logotipo. Para corrigir outras imagens, você precisará reescrever seus códigos da mesma maneira. Coisas fáceis e fáceis.

Vamos para o 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:

O código acima usa example.js como uma ilustração. Não se esqueça de substituir essa parte pelo nome do seu arquivo JavaScript.

Obviamente, se você estiver criando um tema para outra pessoa, realmente deverá carregar seus arquivos js com wp_enqueue_scripts. Confira as postagens de AJ sobre como adicionar JavaScript aos temas do WordPress para obter mais informações e dicas.

Arquivos de modelo

Na parte um deste tutorial, mencionamos quatro arquivos de modelo básicos, index.php, header.php, sidebar.php e footer.php. Os arquivos de modelo controlam como o site será exibido na web. Os modelos obtêm informações do banco de dados MySQL do WordPress e traduzem o mesmo em código HTML exibido nos navegadores da web. Em outras palavras, os arquivos de modelo são os elementos básicos dos temas do WordPress. Para entender melhor os modelos, vamos nos aprofundar em um conceito conhecido como hierarquia de modelos.

Vamos usar uma analogia. Se um visitante clicar em um link de categoria (por exemplo, link para uma categoria), como http://www.yoursite.com/blog/category/your-category/, o WordPress utilizará a hierarquia de modelos para gerar o arquivo (e o conteúdo) certos, como 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 estiver indisponível, o WordPress utilizará um arquivo de modelo de categoria genérico, como category.php
  • Se esse 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 voltará 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 de acordo com suas necessidades. Outros arquivos de modelo incluem:

home.php ou index.phpUsado para renderizar o índice de postagens do blog
front-page.phpUsado para renderizar páginas estáticas ou postagens mais recentes, conforme definido nas exibições da primeira página
single.phpUsado para renderizar uma única página de postagem
single- {post-type} .phpUsado para renderizar tipos de postagem personalizados, por exemplo, se post-type fosse um produto, o WordPress usaria single-product.php
page.phpUsado para renderizar páginas estáticas
category.php ou archive.phpUsado para renderizar o índice do arquivo de categorias
author.phpUsado para renderizar o autor
date.phpUsado para renderizar data
search.phpUsado para renderizar resultados de pesquisa
404.phpUsado para processar a página de erro do servidor 404

Esta é apenas uma pequena lista, existem muitas outras Modelos do WordPress. O tópico dos modelos é grande e a melhor maneira de aprender a brincar com arquivos de modelo é lendo a extensa Desenvolvimento do Tema biblioteca no WordPress. Como alternativa, você pode ler o menor Seção Templates no WordPress Codex.

Tags de modelo

Como acabamos de apresentar os Arquivos de modelo, é justo mencionar uma coisa ou duas sobre tags de modelo e o papel que elas desempenham no tema 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ê conheceu 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. Suponho que você já tenha incluído a declaração DOCTYPE no seu arquivo header.php. Se você não tiver, aqui está o código:

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 o tag language_attributes igual a:

O código acima irá gerar o seguinte:

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 na sua cabeça links para seu URL de pingback e feed RSS. No seu header.php, adicione o seguinte código:

Você notou como empregamos o 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:

A tag wp_head acima exibirá folhas de estilo e arquivos JavaScript exigidos pelos plug-ins. Se você deixar de fora esse pequeno pedaço de código, seus plug-ins 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. No seu arquivo header.php, adicione o seguinte código:

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

A primeira tag wp_title adicionará o título da sua página ou postagem e a segunda tag bloginfo (“nome”) adicionará o nome do seu blog. Agora que o tema do WordPress tem títulos de página, que tal criar uma captura de tela para o tema, reembalar o tema e descansar??

Criando uma captura de tela para o seu tema

Quando você carregou o tema de teste pela primeira vez, 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, é muito fácil criar uma captura de tela para o seu tema. Basta criar uma imagem usando seu editor de imagens favorito (por exemplo, Adobe Photoshop) ou fazer uma captura de tela do seu tema. Garanta que sua imagem tenha 600 px de largura e 450 px de altura. Salve a imagem como screenshot.png na sua pasta de temas. Salve todas as alterações, comprima a pasta do tema em um arquivo ZIP. Faça o upload do tema e ative-o para ver suas novas alterações ��

Conclusão

Quero acreditar que este segundo tutorial ofereceu uma visão mais profunda sobre a criação de um tema WordPress a partir de HTML estático. Em um futuro próximo, apresentarei outros aspectos da temática do WordPress, mas, enquanto isso, preparei os seguintes recursos apenas para você:

Criação feliz!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me