Desenvolvimento WordPress – Tema
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
- Desenvolvimento WordPress – Tema – Estruturando
- Desenvolvimento WordPress – Tema – Sidebar e Footer
- Meu site foi bloqueado, como remover o malware?
- Campos personalizados no WordPress(Custom Fields)
- Top 10 questões do Fórum do Google para Webmasters
Murilo
CEO da Agência Ênfase, trabalha com internet desde 2002. Siga o Murilo no twitter @murilosl Veja também meu blog de seo
0 Comments For This Post
1 Trackbacks For This Post
[...] Desenvolvimento WordPress – Tema [...]
Leave a Reply