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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post