Desenvolvimento WordPress – Tema – Estruturando

Olá, hoje vou dar continuidade ao mini-curso de wordpress chamado de desenvolvimento wordpress, caso queria dar uma olhada no que já foi falado por aqui abaixo os links:

• Desenvolvimento com WordPress
• Desenvolvimento WordPress – Tema

Bom hoje vou terminar  cabeçalho (básico), e já dividir a home em 2 colunas “two columns”.

Resolvi deixar o desenvolvimento primeiro, depois a explicação:

header.php  final

<!-- Inicio Pagina -->
<div id="page">
<!-- Inicio Cabeçalho -->
<div id="header">
<h1><?php bloginfo("name")?></h1>
<h2><?php bloginfo('description') ?></h2>
<ul>
<li><a href="<?php bloginfo("url")?>/" title="Home">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&title_li=') ?>
</ul>
</div>
<!-- Fim Cabeçalho -->

Essa são as ultimas linhas do arquivo header.php, bem básico nosso cabeçalho, somente para começar a brincar com ele.

Temos:

<?php bloginfo(“name”)

Que nada mais coloca o nome do blog em um h1.

<?php bloginfo('description') ?>

Depois a descrição do blog.

<?php wp_list_pages('sort_column=menu_order&title_li=') ?>

Um menu para listar a paginas, o padrão é o link Home o resto é dinâmico, wp_list_pages como o nome já sugera “wordpress lista as páginas”.

Importante pensar nos usuários que vão utilizar o tema, deixando o usuário mudar textos, adicionar novas paginas, quando estiver desenvolvendo mantenha o foco no usuário, para deixar cada vez melhor seu trabalho, vendo possibilidades de deixar esses espaços dinâmicos para o wordpress é uma boa!!.

O header.php por enquanto vai ficar assim.

Vamos para o próximo arquivo o sidebar.php sem simples e depois o footer.php também bem simples depois vamos incrementar algumas coisas neles.
sidebar.php

<!-- Inicio Coluna do lado direito -->
<div class="sidebar">
</div>
<!-- Fim Coluna do lado direito -->

footer.php

</div>
<!-- Fim Pagina -->
</body>
</html>

Até aqui já temos 3 arquivos , o próximo é o index.php.

<?php get_header(); ?>
<!-- Inicio Coluna do meio -->
<div class="column">
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<div class="posts" id="post-id-<?php echo $post->ID;?>">
<h3><a href="<?php the_permalink();?>" title="Link Permanente - <?php the_title();?>"><?php the_title();?></a></h3>
<?php
the_content();
?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)'))?> | Enviado por <?php the_author()?>            </div>
<?php
endwhile;
else:
?>
<h3>Nenhum post cadastrado!!</h3>
<?php
endif;
?>
</div>
<?php get_sidebar() ?>
<!-- Fim Coluna do meio -->
<?php get_footer(); ?>

<?php get_header(); ?>
Pega nosso header.php

if (have_posts()) : while (have_posts()) : the_post();

Verifica se tem algum post , se tiver ele faz um loop até 10, que é o padrão do wordpress podendo mudar caso tenha necessidade de deixar menos posts por pagina.

<?php echo $post->ID;?>

Nessa parte coloquei somente para organização, vamos supor que futuramente precise manipular algum post via javascript por exemplo, vai ficar brincando como o DOM por que ele não foi legal com você ?
Se pensar como será seu modelo de objetos antes de precisar usar eles é bem melhor do que precisar encontrar um objeto sem identificação.

<?php the_permalink();?>

O link do post.

<?php the_title();?>

Titulo

<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)'))?>

Link para a pagina de comentários que também vou comentar aqui logo.

Deixei em inglês por que estou usando aqui o wordpress 2.7 já traduzido, então não tem por que mudar já que traduz sozinho =D.

Bom até a próxima