mar 09

logoPessoal,
tentarei ser bem didático nesse post .  Porém é preciso saber ao menos o básico de PHP, CSS e utilização do WP ^^.

Ah… cliquem nas fotos para aumentar o tamanho. ;)

1- Noções importantes

O Wordpress divide sua camada de apresentação em arquivos. Dentre eles temos:

-index.php e single.php
-header.php
-footer.php

outros 2 arquivos importantes são:

-style.css e screenshot.png

No Wordpress, o arquivo index.php funciona como uma ligação entre todos os arquivos ha pouco apresentados. Para isso são utilizadas funções nativas do WP. Estas mesmas funcções serão apresentadas no decorrer do texto.

Lembrando que é  necessária a criação de uma pasta com o nome do nosso theme e inserir todos os arquivos dentro dela.

Então… vamos lah…

2- criando o index.php

vejamos conteúdo do arquivo index.php

oloop

note que a 1ª função do index.php é “get_header()”.  Ela é responsável por obter o conteúdo do arquivo header.php, que iremos montar mais à frente.

Logo abaixo temos o “LOOP” do wordpress. Ele é responsavel por “varrer” o banco de dados atrás de nossos posts e apresenta-los na tela. O interessante é que  quando as funções “the_title()” e “the_content(“”,$content,”") são usadas, estão ligadas ao post “varrido” naquele momento. A quantidade de posts “varridos” será determinada no painel de controle do Wordpress, na sessão de configuração>>Leitura. Lá, será especificada a quantidade de artigos que a página incial irá apresentar.

O loop inicia-se em “if (have_posts()) : while (have_posts()) : the_post();” e termina em “endif;”. Dentro desse bloco pode-se utilizar uma infinidade de funções do Wordpress a fim de apresentar o conteúdo como o criador do theme achar conveniente.

Em seguida temos o “get_sidebar()”  e “get_footer()”, funções descritas mais à frente.

3- Arquivo header.php

Este arquivo tem a responsabilidade de apresentar o conteúdo do cabeçalho de nosso site ou blog. Vamos usar  a função “bloginfo()” para algumas configurações..

header

Veja que a função “bloginfo()” recebe parâmetros.  No primeiro caso o parametro ‘name’ insere no titulo da home o NOME DO SITE.  Depois usamos os parâmetros  ‘html_type’ e ‘charset’ para configurar a tag META. Adiante usamos ’stylesheet_url’ para indicar onde estará o arquivo style.css.  A fim de obtermos os FEEDs do nosso site, usamos ‘rss2_url’ e ‘rss_url’. Em fim,  usamos “wp_head()” para ativar todos os plugins que possamos utilizar no cabeçalho do nosso site.

4- Arquivo footer.php

Aqui iremos criar o arquivo que corresponde ao conteúdo do rodapé.

footer

Criamos uma div para exemplificar algum uso de conteúdo no rodapé e invocamos a função “wp_footer()”, também nativa do Wordpress. Ela será a responsável por ativar os plugins que usam o rodapé como referência.

5- Arquivo sidebar.php

sidebar

Aqui está nossa barra lateral. Usamos 2 funções: wp_tag_cloud(’smallest=8&largest=16&number=30&orderby=name’) e wp_list_categories(‘depth=1&orderby=id&title_li=’). Respectivamente elas criarão a famosa Nuvem de tags e a lista de categorias do site.

6- Arquivo single.php

Esse arquivo é 95% igual ao index.php. A única coisa que muda é o “LOOP”. Nesse caso removeremos seu laço. Assim o arquivo fica como indicado na imagem do arquivo single.

single

7-Arquivos style.css e screeshot.png

No style.css precisamos inserir, obrigatoriamente, nas primeiras linhas as descrições do arquivo:

/*
    Theme Name: Teiati
    Theme URI: http://www.teiati.com.br
    Description: Theme direcionado para Portais baseados no   Wordpress   
 
    Author: Fernando Carvalho
    Author URI: http://www.fish.jpa.com.br
    Version: 1.0
 */

O screeshot.png é um printscreen do seu site, salvo em PNG. São justamente com esses arquivos que será possível ter um preview de como ficará o theme em seu sistema.

selectortheme

No fim das contas teremos algo assim:

ideia1

obs. O rodapé fica mais embaixo, lembrando o header, mas na parte inferior do site

Conclusão

Pessoal fiz esse artigo pensando em ajudar aquela galera que precisa de uma luz de última hora. Por esse motivo, estou disponibilizando meu theme criado para o portal TEIA TI. O portal evoluiu destes 7 passos que coloquei ha pouco. Agora ele está com MUITA linha de código e outras funcionalidades. Lembrando que não sou Web designer, por isso vcs vão ver algumas “sujeirinhas” quanto ao design ^^. Outra coisa, disponibilizei a versão BLOG do theme TeiaTI

Theme TEIATI

written by Fernando Carvalho \\ tags: , , , ,


Leave a Reply