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

Para continuar a serie Desenvolvimento com WordPress como citei no post.

Hoje vou falar como desenvolver um tema simples “só o cabeçalho” hoje, partindo do principio que você já tenha um layout do mesmo e está querendo deixar ele dinâmico.

O wordpress possui um API grande e bem documentada para consulta, além de fóruns, listas de e-mail e também muitos artigos espalhados pela web.

Abra seu editor predileto e vamos lá =).

Primeiramente no nosso caso irá montar uma pagina inicial do blog.

A antes de começar , acho importante explicar aonde colocar os arquivos , já ia esquecendo :S.

Os arquivos dos temas ficam na pasta /wp-content/themes/ , ali você vai encontrar 2 pastas que vêem por padrão no wordpress , crie uma pasta e coloque o nome do seu tema nela , após isso dentro da pasta crie os seguintes arquivos que vão ser usados.

• /wp-content/themes/curso_wordpress/index.php
• /wp-content/themes/curso_wordpress/header.php
• /wp-content/themes/curso_wordpress/footer.php
• /wp-content/themes/curso_wordpress/sidebar.php
• /wp-content/themes/curso_wordpress/style.css

Abaixo o header.php , que contém algumas coisas interessantes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">
@import url(<?php bloginfo('stylesheet_url'); ?>);
</style>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=postbypost&format=link&limit=10');
<?php wp_head(); ?>
</head>
<body>

Logo no inicio vemos <?php language_attributes();?> que nada mais informa qual língua do documento “pt-br” por exemplo.

Depois já colocamos o content-type do documento.
<?php bloginfo(‘html_type’);?> tipo do documento text/html
<?php bloginfo(‘charset’); ?> charset do documento por exemplo utf-8 “O mais recomendado pelo W3C”.

Depois colocamos o titulo da pagina.

<?php wp_title(); ?> aqui é o titulo do seu post ,pagina , arquivos etc , é preenchido automáticamente pelo wordpress.

<?php bloginfo(‘name’); ?> Nome do blog pode ser alterado no wp-admin.

Nas próximas linhas temos o RSS , ATOM.

<?php bloginfo(‘pingback_url’); ?> esse daqui é quando estamos citando algum outro site ele funciona em parceria com o trackback , ou seja, o pingback avisa que estou postando alguma coisa sobre terminada postagem e o trackback é responsável por receber esse aviso.

Logo depois temos <?php wp_get_archives(‘type=postbypost&format=link&limit=10′); ?> que vai  gerar <link das postagens no cabeçalho , se alguém já usou o Plone por exemplo verá que ele faz isso por padrão para deixar de fácil acesso para mecanismos de busca  , você pode trocar o limit e type . No caso o format pode trocar também se for usa-lo em outro lugar que não seja o header.

Por fim temos o <?php wp_header();?> que é de muita utilidade para colocar conteúdo dinamicamente no <head> ,  por exemplo um css que queria colocar:

function novo_css()
{
echo "<style tye='text/css'>
.novo{
color:#FFFFFF;
}
</style>
";
}
 
add_action('wp_head', 'novo_css');

O exemplo acima é a inserção do css no header atravez de um plugin com o add_action(‘wp_head’,’novo_css’) , primeiro parâmetro é o nome da função que vamos adicionar o css , o segundo é o nome da função.

O add_action é muito utilizado , para fazer uso do mesmo somente precisa ter um local aonde ele vai ser inserido que no nosso exemplo é no wp_head().

Nosso próximo passo é a index.php que vamos falar sobre como construir um index dinâmico , logo após uma parte “lateral e por fim um footer “rodapé”.

Até a próxima.

Autor: Murilo de Souza Lopes