Pessoal,
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
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..
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é.
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
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.
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.
No fim das contas teremos algo assim:
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








Ultimos Comentários