Tema Para WordPress Parte 2.2: Finalizando o Index

Hoje concluímos o index do nosso tema, acrescentando os códigos que irão gerar os posts.

Vá até o arquivo index.php, no seu servidor offline e localize o código abaixo, que você identificou como “main”:

<!--main-->

<div class="yui-b"><div class="yui-gc">

<div class="yui-u first">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas sit amet metus.

</div>

<!--main-->

Substitua o Lorem Ipsum (em vermelho, para não deixar dúvidas, pelo código abaixo:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

<?php else : ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

Clique em “update” e visualize seu blog de testes, os posts que você criou deverão aparecer normalmente entre as duas barras laterais, como na imagem abaixo:

Para finalizar, vamos adicionar os códigos que irão gerar as barras laterais e o rodapé.

Localize o código que você identificou com “rsidebar”:

<!--rsidebar-->

<div class="yui-u">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas sit amet metus.

</div>

<!--rsidebar-->

Substitua o Lorem Ipsum pelo código abaixo:

<div class="rsidebar">
<ul>
<?php 	/* Widgetized sidebar, if you have the plugin installed. */
					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(RightSidebar) ) : ?>

<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>

<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>

<?php endif; ?>
</ul>
</div>

Esse código ira gerar a barra lateral direita. O código que permitirá o uso de widgets já está incluído. Caso nenhuma widget seja utilizada, são exibidas as categorias, subcategorias, páginas, arquivos, blogroll e meta.

As widgets ainda não funcionam, já que seu uso depende do arquivo functions.php.

Repita a operação acima com o código identificado como “lsidebar”:

<!--lsidebar-->

<div class="yui-b">

Navigation Pane

</div>

<!--lsidebar-->

Substitua o lorem ipsum pelo código abaixo:

<div class="lsidebar">
<ul>
<?php 	/* Widgetized sidebar, if you have the plugin installed. */
					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(LeftSidebar) ) : ?>

<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>

<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>

<?php endif; ?>
</ul>
</div>

Agora só falta o rodapé. Localize a área que você identificou como footer:

<!--footer-->
<div id="ft">Footer is here.</div>
</div>
</body>
</html>

Substitua pelo código abaixo:

<!--footer-->
<div id="ft" class="footer">
<p>
<?php bloginfo('name'); ?> is proudly powered by
<a href="http://wordpress.org/">WordPress</a>
<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. | Theme by <a href="http://www.seublog.com/">Seu Nome</a>.
</p>
</div>
</body>
</html>

Com isso finalizamos nosso index.php.

No próximo post, provavelmente amanhã, vamos fatiar tudo isso, criando os arquivos individuais que você está acostumado a ver, como header, sidebars etc.

Qualquer dúvida, é só deixar um comentário.

Assine o Feed para não perder nenhum post da série.