FULL.

SÓ HOJE 20% DE DESCONTO

USE O CUPOM: SABADO.FULL

00
Horas
00
Minutos
00
Segundos

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Siga a FULL.

Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 2)

Você está em:

Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 2)
  1. 1. Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 1)
  2. 2. Atualmente lendo: Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 2)
  3. 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.phpUsado para renderizar o índice de postagens do blog
página inicial.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 o tipo de postagem fosse um produto, o WordPress usaria o single-product.php
page.phpUsado para renderizar páginas estáticas
category.php ou archive.phpUsado para renderizar o índice do Arquivo de Categoria
autor.phpUsado para renderizar o autor
data.phpUsado para renderizar a data
search.phpUsado para renderizar resultados de pesquisa
404.phpUsado 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ê:

Feliz criação!

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.