Agência Ênfase » Blog » Blog, Curso WordPress » Desenvolvimento WordPress – Tema

Desenvolvimento WordPress – Tema

Posted on February 10, 2009

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 CTO da Empresa de Tecnologia – Ênfase Tecnologia

Murilo

Web Developer Sênior, trabalha como Consultor em SEM(SEO + PPC) e Web Analytics para várias empresas , mantém diversos projetos na internet. Siga o Murilo no twitter @murilosl

1 Response

  1. [...] Desenvolvimento WordPress – Tema [...]


Leave a Reply


Serviços