Criando Os Arquivos Essenciais Para O Seu WordPress Theme Framework

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.