Nenhum produto encontrado nessa seleção.
Continuando com a série de artigos sobre “Criar um tema WordPress“, hoje você vai ver como estruturar os arquivos do seu tema intercalando PHP, HTML e CSS para deixar o layout com a sua cara.
Antes que você continue a ler este artigo, é importante que você saiba que vou presumir que você tem algum conhecimento sobre HTML e CSS, caso contrário, dê uma lida em nossos artigos introdutórios sobre as linguagens, a começar por:
Depois disso, lembre-se de revisar os artigos anteriores dessa série:
Então vamos lá.
Nosso tema até agora
Até o momento criamos os seguintes arquivos:
- index.php – O arquivo principal do seu tema
- style.css – Com o nome e a descrição do seu tema
- header.php – Com o cabeçalho de todas as páginas do seu tema
- footer.php – Com o rodapé de todas as páginas
- functions.php – Com nossas funções personalizadas
- js/scripts.js – Uma pasta chamada js que contém um arquivo chamado scripts.js (para nosso JavaScript)
- css/main-style.css – Uma pasta chamada css com um arquivo chamado main-style.css (para nosso CSS)
- screenshot.png – Um arquivo com a foto de nosso tema ou nossa logo
O conteúdo de cada um dos arquivos acima foi descrito nas aulas anteriores (alguns não têm conteúdo algum ainda).
Conforme você deve estar vendo, ainda não temos nenhuma estrutura HTML ou CSS para dar estilo, vamos fazer isso a partir de agora.
Separando o loop em seu próprio arquivo
A primeira coisa que vamos fazer é separar o loop que está no arquivo index.php (criado na primeira aula) em seu próprio arquivo, isso deixará nosso index.php mais limpo.
Acesse o arquivo index.php e copie toda a parte do loop:
<!-- O loop --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- Container do artigo --> <div class="artigo-container"> <!-- Título do post --> <h1> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h1> <!-- Categoria --> <?php the_category(); ?> <!-- Autor --> <?php the_author(); ?> <!-- Data --> <?php the_date(); ?> <?php if ( is_single() || is_page() ): ?> <!-- Conteúdo do post --> <?php the_content(); ?> <?php else: ?> <!-- Resumo do post --> <?php the_excerpt(); ?> <?php endif; ?> </div> <?php endwhile; ?> <?php endif; // Loop ?>
Crie um novo arquivo chamado loop-index.php, cole e salve o conteúdo nesse arquivo.
Para adicionar o loop novamente no index, vamos utilizar a função get_template_part para colocá-lo novamente em seu devido local. Veja um exemplo:
<?php get_template_part('loop', 'index'); ?>Assim podemos manipular o HTML do index.php com maior facilidade.
Se você ainda não quiser fazer isso, aguarde que vou voltar na estrutura HTML do index.php posteriormente neste artigo.
HTML do header.php
Abra o arquivo header.php e adicione o seguinte abaixo da abertura da tag body:
<header class="conteudo cabecalho padding-total">
<div class="linha clearfix">
<div class="colunas principal">
<div class="conteudo-coluna margem-total">
<h1>
<a href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?>
</a>
</h1>
</div>
</div>
<div class="colunas lateral">
<div class="conteudo-coluna margem-total">
<div class="search-form">
<?php get_search_form(); ?>
</div>
</div>
</div>
</div>
</header>
Veja que estamos utilizando a função bloginfo para obter algumas informações do site, como URL e Nome, por exemplo. Além disso, para obter o formulário de pesquisa do WordPress, utilizamos get_search_form.
Não se preocupe com CSS ainda, vamos chegar lá.
HTML do index.php
Agora adicione o seguinte em seu index.php (completo).
<!-- Adiciona o cabeçalho (header.php) -->
<?php get_header(); ?>
<main role="main" class="artigos conteudo padding-esquerda-direita">
<div class="linha clearfix">
<div class="colunas principal">
<div class="conteudo-coluna margem-total">
<?php get_template_part('loop', 'index'); ?>
</div>
</div>
<aside class="colunas lateral">
<div class="conteudo-coluna margem-total">
<?php get_sidebar(); ?>
</div>
</aside>
</div>
</main>
<!-- Adiciona o rodapé (footer.php) -->
<?php get_footer(); ?>Nele estamos utilizando algumas funções que já descrevi anteriormente e mais uma função para obter a nossa barra lateral, get_sidebar. Essa função vai procurar por um arquivo chamado sidebar.php, portanto, vamos criá-lo.
Arquivo sidebar.php
Crie um arquivo chamado sidebar.php com o seguinte conteúdo:
<?php dynamic_sidebar('sidebar-1'); ?>Perceba que estamos chamando a função dynamic_sidebar, com um ID de sidebar que já criamos em nosso functions.php.
Vá até a área administrativa (wp-admin) e adicione alguns Widgets na sidebar para ver como funciona.
HTML do footer.php
Abra o arquivo footer.php e adicione o seguinte (completo):
<footer class="conteudo rodape padding-total"> <div class="linha clearfix"> <div class="colunas largura-total"> <div class="conteudo-coluna margem-total"> Conteúdo </div> </div> </div> </footer> <!-- O restante do rodapé que virá dentro do body. Criado automaticamente pelo WordPress. --> <?php wp_footer(); ?> </div><!-- .pagina --> <!-- Fecha o body --> </body> <!-- Fecha o HTML --> </html>
Veja que o rodapé do nosso site ainda não tem conteúdo. Você pode adicionar o que desejar ali.
CSS do arquivo css/main-style.css
Agora vamos adicionar o estilo necessário em nosso arquivo main-style.css, o que está na pasta css. Note que este arquivo já foi adicionado em nosso functions.php.
Veja:
*, *:before, *:after {
margin: 0;
padding: 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {
width: 100%;
display: block;
clear: both;
height: 0;
line-height: 0;
content: '.';
visibility: hidden;
overflow: hidden;
}
.pagina {
max-width: 1200px;
margin: 0 auto;
}
.conteudo {
width: 100%;
background: #fff;
}
.linha {}
.colunas {
float: left;
}
.lateral {
width: 33.33%;
}
.principal {
width: 66.64%;
}
.largura-total {
width: 100%;
}
.conteudo-coluna {
min-height: 1px;
}
.margem-total {
margin: 15px;
}
.padding-total {
padding: 15px;
}
.padding-esquerda-direita {
padding-right: 15px;
padding-left: 15px;
}
body {
font-family: sans-serif;
background: #ddd;
line-height: 1.5;
}
p {
margin: 1.3em 0;
}
h1 {
margin: 0.6em 0;
}
a {
text-decoration: none;
color: #1e88e5;
}
.cabecalho, .rodape {
background: #000;
color: #fff;
}
.cabecalho a, .rodape a {
color: #fff;
}
.artigos img {
max-width: 100%;
height: auto;
}
Pronto, se você verificar seu tema neste momento, já vai começar a ver algum estilo na tela.
Veja como está o meu:
Tema básico
Fiz uma pequena alteração em meu loop para exibir apenas o resumo do texto na página inicial, não o conteúdo completo. Para isso, basta utilizar algumas tags de condição (conditional tags).
Onde estava:
<?php the_content(); ?>
Troquei para:
<?php if ( is_single() || is_page() ): ?> <!-- Conteúdo do post --> <?php the_content(); ?> <?php else: ?> <!-- Resumo do post --> <?php the_excerpt(); ?> <?php endif; ?>
Download do tema até agora
Se você quiser estudar o que estamos criando ao longo das três aulas da série de artigos “Criar um tema WordPress“, baixe o código no link abaixo:
Descompacte a pasta dentro de wp-content/themes.
Concluindo
Apesar desse artigo ser um pouco mais avançado, da para você entender como funciona a brincadeira. Nada mais do que a intercalação de PHP, HTML e CSS em temas WordPress.
Claro que para facilitar nossa vida, utilizamos várias funções predefinidas no WordPress (é para isso que ele serve). Contudo, deixei um link para cada função utilizada, onde você poderá aprofundar ainda mais seus conhecimentos.
Nas próximas aulas vamos refinar um pouco mais nosso tema. Faremos a paginação, algumas melhorias no CSS, adicionaremos comentários e assim por diante.
