Uma introdução à anatomia de um tema WordPress
- 1. Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 1)
- 2. Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 2)
- 3. Atualmente lendo: Uma introdução à anatomia de um tema WordPress
Há algum tempo, apresentamos a você o conceito de criar um tema WordPress a partir de HTML. Dividimos o tutorial em duas partes e hoje vamos desenvolver os dois tutoriais, então sinta-se à vontade para considerar este post como o terceiro da série de posts. Meu objetivo é desmontar o tema WordPress para lhe dar uma visão clara de como ele (o tema) funciona.
Este post pressupõe que você tenha um conhecimento prático de HTML e CSS. Vou seguir em frente e declarar que ter habilidades em HTML e CSS é um pré-requisito para projetar temas do WordPress. Mais uma coisa, este post ficará livre de grandes palavras e conceitos difíceis – será fácil de compreender, então esteja pronto para se divertir e aprender.
Um pouco de preparação de HTML
Cada página da Web HTML é dividida em partes diferentes usando a tag <div>. Por exemplo, você pode dividir o corpo (<body>) do seu site em várias seções, como navegação, cabeçalho, conteúdo principal, barra lateral e rodapé, entre outros.
Depois de ter sua página da web em seções, você pode ordenar (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. Tal é o poder do CSS, que, aliás, é a abreviação de Cascading Style Sheets. Quando você junta seus arquivos HTML e CSS e joga 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 do WordPress a partir de HTML , os temas do WordPress são divididos em diferentes arquivos. Se você não consegue identificar alguma semelhança neste ponto, permita-me explicar.
As páginas da Web HTML estáticas são divididas em divisões (o que chamamos de seções anteriormente) usando tags <div> (ou tabelas, se você for realmente da velha escola). Por outro lado, os temas do WordPress são divididos em diferentes arquivos php, que são entã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 WordPress) vive em arquivos separados.
Assim, o cabeçalho ficará em header.php, a barra lateral encontrará home em sidebar.php, o conteúdo principal ficará em index.php, ou single.php (se for um post) ou page.php (se for uma página ). A seção de rodapé ficará em footer.php e assim por diante.
Você está seguindo? Confira a ilustração abaixo:
Da nossa ilustração acima, <?php get_header(); ?>, <?php get_sidebar(); ?> e <?php get_header(); ?> são chamados de tags de modelo. O trabalho deles é buscar header.php, sidebar.php e footer.php nessa ordem do diretório do seu tema e exibir o conteúdo em seu index.php, completando assim a página da web.
Não deixe a extensão .php assustá-lo, o conteúdo dentro dos arquivos php é apenas um código HTML com o qual você está familiarizado. Por exemplo, seu header.php pode conter navegação de lista HTML típica. Da mesma forma, você pode colocar um código HTML típico em footer.php, sidebar.php e index.php.
Você também pode colocar a função loop.php em seu index.php (ou em qualquer lugar que desejar) para exibir seus posts, mas 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:
- index.php
- header.php
- sidebar.php
- footer.php
Vamos ver o que vai em cada um desses arquivos mágicos :
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) que é carregado quando você visita um site WordPress. Considere o equivalente a index.html.
Um index.php típico em temas do WordPress terá a seguinte aparência:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Você pode adicionar o loop entre <?php get_header(); /> e <?php get_sidebar(); ?> para exibir as postagens do blog na página inicial (index.php) conforme mostrado abaixo:
<?php get_header(); ?>
<div class=”content”>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”post-header”>
<div class=”date”><?php the_time( ‘M j y’ ); ?></div>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”author”><?php the_author(); ?></div>
</div><!–end post header–>
<div class=”entry clear”>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!–end entry–>
<div class=”post-footer”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
</div><!–end post–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class=”navigation index”>
<div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
</div><!–end navigation–>
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Arquivo de Modelo Header.php
Esses arquivos de modelo contêm seu código de cabeçalho, navegação e código de cabeçalho HTML. Basicamente, header.php armazena tudo o que você deseja mostrar no topo 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:
<html>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js”></script>
<![endif]–>
<?php wp_head(); ?>
</head>
<body>
<div class=”header”>
<p>This is header section. Put your logo and other details here.</p>
</div>
Arquivo de modelo Sidebar.php
Sidebar.php contém tudo que você precisa para aparecer na(s) sua(s) barra(s) lateral(ais). 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 se parecer com:
<div class=”sidebar”>
Put your custom content or HTML code here.
</div>
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 você quiser! Você gostaria de ver como é um footer.php básico? Aqui:
<footer class=”footer”>
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
</footer>
</body>
</html>
Observe as tags de fechamento </body> e </html> no footer.php? Você consegue adivinhar por que eles devem ser incluídos no footer.php? Da mesma forma, você consegue adivinhar por que as tags de abertura <html> e <body> estão incluídas no header.php? Deixe-nos saber seus palpites na seção de comentários no final deste post
Os quatro arquivos de modelo que acabamos de abordar acima compõem um tema WordPress muito básico. Existem muitos outros arquivos de modelo; há um arquivo de modelo para cada elemento que você vê em um tema WordPress, sejam comentários, resultados de pesquisa e páginas de erro 404, apenas para citar alguns.
Para entender completamente a anatomia de um tema WordPress, você precisa se familiarizar com diferentes arquivos de modelo. Você pode navegar por todos os blocos de modelos utilizáveis no WordPress .
Em seguida, temos tags de modelo, que o WordPress usa para buscar arquivos de modelo do diretório de temas. Você pode aprender mais sobre tags de modelo e o papel que elas desempenham no WordPress .
Resumo
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 <?php get_header(); ?>, <?php get_sidebar(); ?> 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:
Quer continuar aprendendo? Confira o guia detalhado de anatomia do tema no WordPress Codex .
Conclusão
Todo tema WordPress que você vê na web usa a mesma estrutura anatômica (até mesmo nosso popular Tema WordPress Total ), que você pode personalizar para atender às suas necessidades. Depois de entender o básico do desenvolvimento de temas do WordPress, não há limite para o que você pode fazer com/para os temas do WordPress.
