Bom como pretendo mudar o layout do meu blog, tenho que montar o template para o wordpress.

Para poder explicar alguma coisa sobre como funciona esse processo de montar um template, o básico do que eu fizer vou passar pra vocês, principalmente esse comecinho.

Vamos começar então, criei um blog de teste no seguinte endereço:

http://www.fazedordesite.com/novo

Todos os temas instalados no wordpress do seu blog estarão no seguinte local:

/wp-content/themes/nomedotema

Crie uma pasta dentro desta pasta themes, é onde ficara o seu tema.

De inicio é importante que você salve uma imagem do seu layout que foi desenhado no photoshop ou qualquer outro programa de edição de imagens, no formato PNG, com o nome screenshot.png.
Esta imagem deve ter 300px de largura por 225 px de altura, ela será exibida naquela lista onde escolhemos qual tema usar.

Se você não desenhou seu layout antes, pare de ler aqui, você tem muito que aprender ainda antes de pensar em fazer qualquer coisa, sugiro que acompanhe o Profissão Fazedor de Site.

O próximo passo é criar um arquivo chamado style.css, no inicio deste arquivo você deve inserir informações sobre o tema, podem seguir este exemplo:

/*

Theme Name: FS Dark Blue

Theme URI: http://fazedordesite.com

Description: Fazedor de Site Theme

Version: 1.0

Author: Rodrigo Fante

Author URI: http://fazedordesite.com

This theme was designed and built by Rodrigo Fante,

whose blog you will find at http://fazedordesite.com/blog

The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

Atenção pois é importante que estas linhas estejam comentadas com o /* antes e o */ depois das informações.

Agora como em qualquer site, precisamos de um index.php, ainda, usaremos um arquivo com nome de sidebar.php, e outro com nome de footer.php, e por fim header.php, estes nomes são usados normalmente como padrão, pois existem funções dentro do WP que os chamam automaticamente.

Dentro do index.php a primeira coisa que deve conter é a seguinte linha de código:

 <?php get_header(); ?>

A função get_header, pega automaticamente o cabeçalho do HTML contido dentro do arquivo header.php. Neste arquivo normalmente eu coloco o doctype, os metatags, inclusão do CSS, javascript, tags de cabeçalho como <title>, com a ultima linha sempre com </head>.

Para facilitar nosso trabalho o WP tem algumas funçoezinhas bastante úteis.

No titulo por exemplo você pode inserir o seguinte código:

 <title>

	 <?php bloginfo('name'); ?>

	 <?php if ( is_single() ) { ?> » Blog Archive <?php } ?>

	 <?php wp_title(); ?>

 </title>

Essa seqüência de funções dentro do title, vai mostrar o nome do blog na barra de titulo, se estiver na pagina inicial, mostrara a descrição do blog inserida no menu option do WP, e se estiver dentro de algum artigo especifico, após o nome mostrara o título do artigo, otimizando seu blog assim para os motores de busca.

Para pegar por exemplo o css padrão do blog, aquele mesmo que você inseriu as informações sobre o blog, basta usar a seguinte linha:

 <?php bloginfo('stylesheet_url'); ?>

Atenção, ainda dentro do header.php, antes de fechar a tag </head>, insira o seguinte código:

 <?php wp_head(); ?>

Ela é necessária para alguns plugins do WP.

Meu Javascript eu colocarei dentro de uma pasta chamada js, dentro do diretório do tema.

Para cada script inserido dentro do header.php usarei a seguinte linha de código:

 <script type="text/javascript"

 src="<?php bloginfo('template_directory'); ?>/js/nome_do_script.js">

 </script>

A função bloginfo(’template_directory’), retorna o diretório onde esta o tema usado.

A esse altura o WP já deve reconhecer seu tema na listagem no Administrador, e já permite que o ative.

Embora ainda não mostre nada.

Por enquanto é isso, o básico pra montar uma estrutura que o WP reconhece.

Mas vem mais por ai, no final, deixarei o template que vou usar no blog disponível para download.

Trackback para este Post | Assine o Feed RSS dos comentários