Voltar Como criar um tema no WordPress do zero
Parar criar um tema em Wordpress precisamos começar criando a estrutura de arquivos. Por exemplo, quando você acessar a home do site o sistema do Wordpress irá procurar pela arquivo front-page.php e o que tiver nesse arquivo ele irá mostrar ao usuário. Primeiramente crie uma pasta dentro de /wp-content/themes/ com os seguintes arquivos:
- style.css - Dados do tema e a apresentação visual do site
- header.php - Código do cabeçalho do site
- footer.php - Código do rodapé do site
- index.php - O arquivo principal de onde toda página irá buscar as configurações
Esses são os arquivos principais para que seu tema funcione. Você pode incluir vários outros seguindo A Hirarquia de Template do Wordpress. Aqui vamos focar nestes para criar um tema rápido e do zero.
Após criar os arquivos, você irá colocar os seguintes códigos comentados em cada um deles:
style.css
/*
Theme name: Nome do tema
Author: Seu nome
Author URI: Link para seu site
Description: Descrição do tema
Version: 1. 0. 0.;
*/header.php
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js?ver=3.7.0" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>footer.php
<?php wp_footer(); ?>
</body>
</html>index.php
<?php get_header; ?>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<h2>
<a href="<?php the_permalink() ?>">
<?php the_title() ?>
</a>
</h2>
<?php the_content() ?>
<?php endwhile; ?>
<?php else: echo '<p>There are no posts!</p>'; endif; ?>
<?php get_footer; ?>Agora você poderá ir no seu painel administrativo em Aparência > Temas e ativar seu novo tema:
Você não verá muita coisa pois não colocamos nenhum estilo no nosso tema, mas agora você já poderá começar a estilizar o index.php por exemplo e verá tudo acontecendo ao acessar qualquer página.
Bônus - Exibindo posts dinamicamente
Já que que agora você aprendeu a criar um tema em Wordpress do zero, vamos para um bônus. Uma amiga tinha dúvidas de como exibimos os campos dinamicamente em um loop. Portanto resolvi adicionar esta parte para mostrar como se exibe os campos e faz o loop nos posts.
Vamos começar criando um arquivo chamado front-page.php que será nossa Home. Neste arquivo listaremos os 3 últimos posts utilizando a função WP_QUERY() do Wordpress. Em negrito estão os campos dinâmicos do post. Coloque no arquivo o código abaixo:
<?php get_header; ?>
<?php
// Aqui estamos pedindo para buscar 3 posts
$the_query = new WP_Query(
array(
'post_type' => 'post',
'posts_per_page' => 3,
)
);
?>
<?php
// Criamos o loop dos posts
while ($the_query->have_posts()) : $the_query->the_post();
?>
<h1><?=get_the_title()?></h1>
<?php
// Exibindo imagem destacada
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'large' );
?>
<img src="<?php echo $image[0]; ?>" alt="Imagem destaque">
<p>Data: <?=get_the_date()?></p>
<a href="<?=get_the_permalink()?>">Leia mais</a>
<?php endwhile; wp_reset_query(); ?>
<?php get_footer; ?>Veja também como criar um Plugin de forma rápida e fácil:
Como criar um Plugin (Quickstart)