Portuguese (Português) translation by thierry rene matos (you can also view the original English article)
Nos artigos anteriores, nos aprendemos como funcionam os theme frameworks e análisamos seus recursos para ajudar a desenvolver nosso próprio theme framework.
Agora é hora de mergulharmos no código!
Neste tutorial vamos pegar um tema básico e editar os arquivos do template para que eles possam estar preparados para as configurações do nosso framework. O propósito deste tutorial é organizar o tema para que o código não seja duplicado, o que significa que vamos criar include de arquivos para gerar loops.
Isso significa que você não precisa duplicar loops nos temas filhos quando você cria novos arquivos para o template, e se você precisar editar o loop, você faz isso apenas uma vez.
Nota: os arquivos iniciais baseados no tema que eu criei pra série estão disponíveis no link creating a WordPress theme from HTML, com algumas alterações. Você também pode efetuar donwload através do repositório do GitHub que acompanha esta série.
O que vamos precisar
Para acompanhar o tutorial, você vai precisar:
- WordPress configurado em ambiente de teste (ou online, para teste)
- arquivos iniciais ou os arquivos iniciais presentes no repositório do GitHub para esta série
- um editor de código (IDE)
Criando os arquivos de Loop para utilizar com Include
Pretendo criar três loops para o meu framework:
- um para o arquivo do blog, incluindo a página principal do blog (função que lista os posts do blog em forma de arquivo, por data, categoria, etc.)
- um para os posts
- um para as páginas
Isso porque eu quero que cada um deles tenha funções diferentes para o conteúdo gerado.
Mesmo contendo três loops, esse método é melhor e mais eficiente do que incluir um loop em cada arquivo do template no framework.
O loop principal
O loop principal é utilizado para visualizar os arquivos do blog e a página padrão (que mostra os posts em forma de arquivo). Na sua pasta theme, crie um arquivo chamado loop.php.
Copie o seguinte código, do arquivo archive.php, para o arquivo criado:
<?php
/* Queue the first post, that way we know if this is a date archive so we can display the correct title.
* We reset this later so we can run the loop properly with a call to rewind_posts().
*/
if ( have_posts() )
the_post();
?>
<h2 class="page-title">
<?php if ( is_day() ) { ?>
Archive for <?php echo get_the_date();
}
elseif ( is_month() ) { ?>
Archive for <?php echo get_the_date('F Y');
}
elseif ( is_year() ) { ?>
Archive for <?php echo get_the_date('Y');
}
else {
echo get_queried_object()->name;
} ?>
</h2>
<?php rewind_posts(); ?>
<?php // start the loop ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
<?php the_title(); ?>
</a>
</h2>
<section class="left image quarter">
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'medium', array(
'class' => 'left',
'alt' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
) ); ?>
</a>
<?php } ?>
</section><!-- .image -->
<section class="entry-meta">
<p>Posted on <?php the_date(); ?> by <?php the_author(); ?></p>
</section><!-- .entry-meta -->
<section class="entry-content">
<?php the_content(); ?>
</section><!-- .entry-content -->
<section class="entry-meta">
<?php if ( count( get_the_category() ) ) : ?>
<span class="cat-links">
Categories: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?>
</section><!-- .entry-meta -->
</article><!-- #01-->
<?php endwhile; ?>
<?php // ends the loop ?>
Você não precisa apresentar um cabeçalho na página principal do blog, então adicionamos uma tag condicional entre o primeiro loop para chegar se não estamos nesta página:
if ( ! is_front_page() ) {
}
O primeiro loop ficou agora desta forma:
if ( ! is_front_page() ) {
if ( have_posts() )
the_post();
?>
<h2 class="page-title">
<?php if ( is_day() ) { ?>
Archive for <?php echo get_the_date();
}
elseif ( is_month() ) { ?>
Archive for <?php echo get_the_date('F Y');
}
elseif ( is_year() ) { ?>
Archive for <?php echo get_the_date('Y');
}
else {
echo get_queried_object()->name;
} ?>
</h2>
<?php rewind_posts();
} ?>
Agora você precisa incluir esteo loop nos arquivos relevantes do template. Nos arquivos archive.php e index.php, substitua o loop existente com a tag get_template_part(), e inclua seu arquivo loop no lugar, da seguinte maneira:
<?php get_template_part( 'loop' ); ?>
Pronto, temos um loop funcional para os arquivos (posts) do blog.
Loop para páginas
Agora vamos criar um arquivo de loop para páginas. Crie um arquivo chamado loop-page.php.
Copie o loop presente no arquivo page.php:
<?php
// Run the page loop to output the page content.
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( ! is_front_page() ) { ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } ?>
<section class="entry-content">
<?php the_content(); ?>
</section><!-- .entry-content -->
</article><!-- #post-## -->
<?php endwhile; ?>
Agora substitua o loop presente nos templates de página (page.php e page-full-width.php), por:
<?php get_template_part( 'loop' , 'page' ); ?>
Loop para Single Posts
Por fim, vamos criar o loop para single posts, que vai funcionar tanto para posts normais quanto para custom posts criados posteriormente. Este loop é similar ao primeiro, para o arquivo, a diferença é que este não inclui um link para o post e não possui um loop no início para verificar em que tipo de arquivo do blog nos estamos.
Crie um arquivo de nome loop-single.php e outro chamado single.php.
Copie o conteúdo do arquivo index.php para o arquivo single.php, e altere o comentário no início para loop. Deve ficar da seguinte maneira:
<?php get_template_part( 'loop', 'single' ); ?>
agora copie o código do arquivo loop.php para o arquivo single-loop.php, sem incluir o primeiro loop para o arquivo do blog. Edite o cabeçalho inicial dentro do loop para remover o link, deve ficar da seguinte forma:
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="entry-title">
<?php the_title(); ?>
</h2>
<section class="left image quarter">
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'medium', array(
'class' => 'left',
'alt' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
) ); ?>
</a>
<?php } ?>
</section><!-- .image -->
<section class="entry-meta">
<p>Posted on <?php the_date(); ?> by <?php the_author(); ?></p>
</section><!-- .entry-meta -->
<section class="entry-content">
<?php the_content(); ?>
</section><!-- .entry-content -->
<section class="entry-meta">
<?php if ( count( get_the_category() ) ) : ?>
<span class="cat-links">
Categories: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?>
</section><!-- .entry-meta -->
</article><!-- #01-->
<?php endwhile; ?>
Salve os dois arquivos e pronto, agora temos todos os arquivos de loop que precisamos para o nosso theme framework.
Sumário
Organizar um tema rezudindo a duplicidade de códigos antes de utiliza-lo junto ao theme framework pode salvar horas de trabalho no futuro.
Voce vai começar a notar, conforme cria temas filhos, a necessidade ou vontade de criar loops sob medida para cada caso. Tendo apenas três loops discretos, evita a necessidade de duplicar arquivos do template no tema filho, neste caso você vai precisar apenas duplicar os arquivos de loop.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
