série sobre criar um template wordpress

42
Série Sobre Criar um Template WordPress Nesta série de artigos sobre a construção de um wordpress theme vamos tentar falar na informação mais importante, usando sempre uma linguagem simples para que todos possam entender. Vamos seguir a seguinte ordem: ! Introdução aos WordPress Themes ! style.css e header.php ! index.php, archive.php ! single.php, page.php, 404.php ! comments.php ! sidebar.php e footer.php ! Melhorar a aparencia do tema (css) ! Funcionalidades Extras: Thumbails ! Funcionalidades Extras: Menus Personalizados Ferramentas e Conhecimentos Necessários Para poder seguir este tutorial e conseguir criar o seu tema, deve de: ! Ter um browser (de preferência o Firefox com o addon firebug instalado ! Conta de hospedagem online ou servidor local (Wamp (Windows), MAMP (Mac) e LAMP(Linux). ! Editor de texto à sua preferência. (Recomendamos o NotePad++ para Windows,TextWrangler para Mac e o Bluefish para Linux ! Última versão do WordPress – faça o download em wordpress.org ! Saber trabalhar com o WordPress ! Conhecimento em HTML e CSS – Se perceber PHP, melhor ainda A Estrutura do WordPress O WordPress é um gestor de conteúdo que no inicio pode fazer alguma confusão as muitas pastas e ficheiros que tem, mas você só tem que se preocupar com 2 coisas: o ficheiro wp-config.php e a pasta wp- content. O ficheiro wp-config.php contém toda a informação necessária para o WordPress se ligar a base de dados (banco de dados) e funcionar normalmente. Já a pasta wp-content é onde ficam os temas e os plugins.

Upload: ajraim

Post on 24-Nov-2015

15 views

Category:

Documents


2 download

TRANSCRIPT

  • Srie Sobre Criar um Template WordPress

    Nesta srie de artigos sobre a construo de um wordpress theme vamos tentar falar na informao mais importante, usando sempre uma linguagem simples para que todos possam entender.

    Vamos seguir a seguinte ordem:

    ! Introduo aos WordPress Themes

    ! style.css e header.php

    ! index.php, archive.php

    ! single.php, page.php, 404.php

    ! comments.php

    ! sidebar.php e footer.php

    ! Melhorar a aparencia do tema (css)

    ! Funcionalidades Extras: Thumbails

    ! Funcionalidades Extras: Menus Personalizados

    Ferramentas e Conhecimentos Necessrios

    Para poder seguir este tutorial e conseguir criar o seu tema, deve de:

    ! Ter um browser (de preferncia o Firefox com o addon firebug instalado ! Conta de hospedagem online ou servidor local (Wamp (Windows), MAMP (Mac) e LAMP(Linux). ! Editor de texto sua preferncia. (Recomendamos o NotePad++ para Windows,TextWrangler para Mac e

    o Bluefish para Linux ! ltima verso do WordPress faa o download em wordpress.org ! Saber trabalhar com o WordPress

    ! Conhecimento em HTML e CSS Se perceber PHP, melhor ainda

    A Estrutura do WordPress

    O WordPress um gestor de contedo que no inicio pode fazer alguma confuso as muitas pastas e ficheiros que tem, mas voc s tem que se preocupar com 2 coisas: o ficheiro wp-config.php e a pasta wp-content.

    O ficheiro wp-config.php contm toda a informao necessria para o WordPress se ligar a base de dados (banco de dados) e funcionar normalmente. J a pasta wp-content onde ficam os temas e os plugins.

  • Como neste tutorial vamos aprender a fazer temas, importante que voc saiba onde ele tem que ser colocado para poder ser usado no seu site. Como dissemos anteriormente, os temas e os plugins ficam dentro da pasta wp-content. Dentro desta pasta existem outras duas chamadas de plugins e themes. Ns vamos trabalhar dentro da pasta themes (wp-content/themes).

    Depois do tema estar pronto, voc tem transferir a pasta do tema para dentro desta pasta themes. S assim voc vai conseguir ativa-lo e usar-lo online.

    A Estrutura de um Tema

    Antes de comear a criar um template preciso saber como ele funciona. Um tema para wordpress basicamente uma pgina normal feita em HTML, mas dividida em partes. A parte que diz respeito ao cabealho fica num ficheiro, a parte do cdigo que diz respeito ao contedo fica noutro e assim por diante.

    As partes/ficheiros bsicos e essenciais de um tema so os seguintes:

    ! header.php: local onde fica o cdigo do cabealho ! sidebar.php: local onde fica o cdigo da lateral

  • ! footer.php: local onde fica o cdigo do rodap ! index.php: cdigo que mostra os artigos na pgina inicial ! single.php: cdigo que mostra o artigo na sua prpria pgina ! page.php: cdigo que mostra o contedo de uma pgina esttica ! archive.php: igual ao index.php, o cdigo nesta parte vai mostrar os artigos que esto no arquivo, nas categorias,

    tags, etc ! functions.php: local onde ficam algumas funes que adicionam mais capacidades aos temas ! 404.php: igual ao index.php, em vez de mostrar um artigo dever de mostrar um texto a avisar que o contedo no

    foi encontrado ! style.css: ficheiro onde fica o stylesheet do tema

    O que devo colocar em cada um destes ficheiros:

    J explicamos em cima o que deve de colocar em cada parte, mas para que no restem dvidas criamos uma pgina normal em HTML e vamos ensinar a separar cada parte.

    importante que antes de comear criar o seu wordpress theme, j tenha as pginas feitas em HTML. Depois s precisa de dividir essas pginas pelos vrios ficheiros do tema e usar php para que funcione bem.

    Este cdigo de uma simples pgina HTML.

    01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

    Pgina de HTML Titulo do Site Descrio do site Pgina 1 Pgina 2 Pgina 3 Pgina 4 Titulo do artigo 1 Postado por administrador em 16/01/2012 Conteudo do artigo Titulo do artigo 2 Postado por administrador em 16/01/2012

  • 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

    Conteudo do artigo Widget Pgina 1 Pgina 2 Pgina 3 Pgina 4 Widget Categoria 1 Categoria 2 Categoria 3 Categoria 4 2012 - Todos os Direitos Reservados

    Separando a pgina HTML em partes

    Vamos comear de cima para baixo, ou seja, no header.php (cabealho). Comece por criar um novo ficheiro no seu bloco de notas, copiar o cdigo deste o inicio at ao fim da div header e colar no bloco de notas. Depois grave com o nome header.php

    01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

    Pgina de HTML Titulo do Site Descrio do site Pgina 1 Pgina 2 Pgina 3 Pgina 4

  • 21 Depois do cabealho, passamos a div onde o contedo (artigos e sidebar) mostrado. Ento nos ficheiros index.php, single.php, page.php, archive.php e search.php, colamos toda a div conteudo com excepo da parte da sidebar. O cdigo este: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

    Titulo do artigo 1 Postado por administrador em 16/01/2012 Conteudo do artigo Titulo do artigo 2 Postado por administrador em 16/01/2012 Conteudo do artigo

    No colocamos o cdigo da sidebar no passo anterior, porque esse cdigo deve de ficar nosidebar.php, um ficheiro que contm todo o contedo da sidebar. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

    Pgina 1 Pgina 2 Pgina 3 Pgina 4 Categoria 1 Categoria 2 Categoria 3 Categoria 4

    Neste momento toda a parte do contedo tambm est pronta. Vamos passar ao que falta, ou seja, ao rodap do tema. Vamos usar para isso o footer.php, o ficheiro onde deve de ficar a nossa div footer e o cdigo restante. 1 2 3 4 5 6 7 8

    2012 - Todos os Direitos Reservados

    Agora toda a pgina HTML que tnhamos no inicio est dividida em partes.

    Como chamar outras partes dos temas

  • O prximo passo adicionar algumas tags para que o wordpress, quando usar o tema, possa juntar todas as partes e mostrar todas as partes do tema.

    Para fazer isto, vamos usar 3 tags que servem para ir chamar/incluir outras partes do tema. Numa pgina como o index.php, precisamos de chamar o cabealho (header.php), lateral (sidebar.php) e o rodap (footer.php):

    1 2 3 4 5

    Cada uma destas tags devem de ser colocadas no lugar onde o cdigo das outras pginas deve de ser includo. Por exemplo, no index.php precisamos de incluir o header.php logo no inicio, o sidebar.php no lugar onde antes estava o cdigo da sidebar e no fim da pgina, temos que incluir o footer.php.

    Ento os ficheiros index.php, single.php, page.php, archive.php e search.php ficam assim:

    01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

    Titulo do artigo 1 Postado por administrador em 16/01/2012 Conteudo do artigo Titulo do artigo 2 Postado por administrador em 16/01/2012 Conteudo do artigo

    Como pode ver, as tags foram adicionas em 3 lugares diferentes, a primeira chama o header, a segunda chama a sidebar e a terceira chama o footer.

    Estes so os primeiro passos para a criao de um tema. Depois temos que adicionar vrias tags, criar o loop que vai fazer com que os artigos e pginas sejam mostradas e tambm criar um stylesheet para que o tema fique apresentvel nos navegadores de internet. Tudo isto ser falado nos prximos artigos.

    Download dos ficheiros do tutorial

    ! Download dos ficheiros do tutorial

    Concluso

  • Neste primeiro artigo demos os primeiros passos na criao de um template para wordpress. Comeamos por saber onde que os temas esto, como so organizados, quantos ficheiros tem um tema, aprendemos a separar uma pgina HTML pelos vrios ficheiros do tema e tambm introduzimos pela primeira vez PHP nas pginas para chamar outras partes do tema. O mais bsico est feito.

    No prximo artigo vamos falar no stylesheet e tambm no header.php por isso fique atento! Se ainda no acompanha o wptotal, recomendamos que passe pela pgina de subscrio para saber como nos pode seguir

    Se tiver alguma dvida, deixe um comentrio. style.css

    No ficheiro style.css fica todo o cdigo css que responsvel pela a aparncia dos elementos que esto na pgina/tema. Neste ficheiro voc pode definir tamanhos, cores, margens, etc, sempre usando css.

    Se quer aprender css ou melhorar os seus conhecimentos, um dos melhores sites o W3Schools que tem uma categoria destinada ao CSS: www.w3schools.com/css/.

    Como fazer

    Primeiro comeamos por criar um novo ficheiro e guardamos na pasta do tema com o nomestyle.css. Depois comeamos a definir os atributos de cada elemento da pgina. Ns criamos um com uma personalizao muito simples e bsica e que funciona com os ficheiros que criamos na primeira parte do tutorial. Repare que adicionamos um comentrio no inicio do ficheiro, a informao que voc escrever nesta parte ser usada na pgina de ativao do tema:

    Este o nosso CSS, se quiser pode usa-lo. Copie e cole no seu style.css: 001 002 003

    /* Theme Name: WPTotal Theme URI: http://www.wptotal.com/ Description: WPTotal Author: WPTotal

  • 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021

    Author URI: http://www.wptotal.com/ */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;outline:0;vertical-align:baseline;margin:0;padding:0;} :focus{outline:0;} ol,ul{list-style:none;} table{border-collapse:separate;border-spacing:0;} caption,th,td{font-weight:normal;text-align:left;} blockquote:before,blockquote:after,q:before,q:after{content:"";} i,em{font-style:italic;} b,strong{font-weight:bold;} small{font-size:10px;} big{font-size:16px;} a img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} h1,h2,h3,h4,h5,h6{font-weight:bold;} a:link,a:visited{color:#0066cc;text-decoration:none;outline:0;} a:hover,a:active{color:#0055a9;text-decoration:none;outline:0;} body{background:#f4f4f4;font:normal 13px/150% Arial, Helvetica, sans-serif;color:#363636;} #corpo{ margin:20px auto; width:960px; background:#fff; } #header{ width:940px; margin:10px; float:left; }

  • 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039

    #header h1{ font-size:24px; margin-bottom:10px; } #header h2{ font-size:18px; margin-bottom:20px; } #nav{ width:940px; } #nav li{ display:inline; margin-right:30px; } #conteudo{ width:940px; margin:10px; float:left; } #artigos{ width:630px; float:left; } .artigo{ width:630px;

  • 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057

    margin-bottom:30px; float:left; } .artigo h1{ font-size:20px; margin-bottom:10px; } .artigo h2{ font-size:16px; margin-bottom:10px; } .artigo p{ margin-bottom:10px; } #sidebar{ width:300px; float:right; } .widget{ width:300px; margin-bottom:20px; } .widget h3{ font-size:14px; margin-bottom:10px; }

  • 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075

    #footer{ width:940px; margin:10px; font-size:11px; text-align:center; }

  • 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093

  • 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 Este ser o resultado:

  • header.php

    Com o style.css j pronto, vamos abrir o ficheiro header.php que criamos na primeira parte deste tutorial. Neste ficheiro ficam algumas tags que so importantes para o tema e alguns plugins funcionarem.Estas linhas de cdigo devem de ser adicionadas entre as tags e (apague as duas linhas de cdigo que esto l): 1 2 3

  • 4 5 6
  • 1 Se voc preferir mostrar as pginas em vez das categorias, use a seguinte tag: 1 No fim destas alteraes todas temos o seguinte cdigo no nosso header.php: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

  • Download dos ficheiros

    ! Download dos ficheiros style.css e header.php ! Download de todos os ficheiros criados at agora

    Concluso

    Nesta segunda parte da srie de artigos onde ensinamos a criar wordpress themes, comeamos j a trabalhar nos ficheiros individuais que fazem parte de um tema. J temos a aparncia desenhada (no style.css) e as tags mais importantes no cabealho (header.php).

    No prximo artigo vamos falar em dois ficheiros que so responsveis por mostrarem os artigos na pgina inicial e nas pginas de arquivo (categorias, tags, etc). Se no quer perder nenhum artigo, passe pela pgina de subscrio e esteja sempre atualizado sobre o que publicamos aqui no wptotal. index.php

    O index.php o ficheiro onde fica todo o contedo mostrado na homepage. Este ficheiro usado tambm quando algum ficheiro responsvel pela parte do contedo est em falta (single.php, archive.php, etc).

    No nosso index.php (criado na primeira parte do tutorial download dos ficheiros aqui) temos o seguinte cdigo: 01 02 03 04 05 06 07 08 09 10 11 12 13

    Titulo do artigo 1 Postado por administrador em 16/01/2012 Conteudo do artigo Titulo do artigo 2 Postado por administrador em 16/01/2012 Conteudo do artigo

  • 14 15 16 17 18 19

    Como este cdigo ainda html, o wordpress no sabe em que parte deve de mostrar o contedo, por isso temos que usar o chamado loop. Para quem no sabe, o loop responsvel pela mostragem do contedo na pgina inicial e pginas de arquivo do blog e tambm mostrar mensagens ao usurio no caso de no existir artigos para ser mostrados ou mostrar os links de navegao pelo arquivo.

    Vamos usar este cdigo para criar o loop do nosso index.php, a explicao sobre cada linha de cdigo est mais em baixo. 1 2 3 4 5 6 7

    Para entenderem o que cada linha faz, traduzimos para portugus:

    ! linha 1: se houver posts, ento mostrar posts (depois desta linha fica toda a div do post); ! linha 2: os posts j foram mostrados (at ao limite que est definido em Opes > Leitura) por isso no deve de

    mostrar mais posts (depois disto fica a navegao do blog); ! linha 3: no caso exista posts, ento mostrado o contedo que estiver depois desta linha (pode ser um

    simples pargrafo dizendo no existem posts); ! linha 4: como os posts ou a mensagem a informar que no existem posts j foram mostrados, o wordpress termina

    o loop aqui.

    Como aplicar este cdigo no index.php

    O loop fica dentro da div do contedo, neste caso a nossa div . Dentro do loop fica a div do post ( ) depois da primeira linha de cdigo.

    Resultado:

  • 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21

  • 2 3 4

    Este o CSS para o segundo cdigo, copie e cole em qualquer parte do style.css: 01 02 03 04 05 06 07 08 09 10 11 12

    .navegacao{ width:630px; float:left; } .recentes{ float:left; } .anteriores{ float:right; }

    E agora depois do fica a mensagem que aparece no caso de no existirem posts. Optamos por usar a mesma div do artigo mas com uma mensagem personalizada. Assim at quando existir um erro, a forma como a mensagem vai aparecer ser a mesma que um post: 1 2 3 4 5

    Nada Encontrado Erro 404 Lamentamos mas no foram encontrados artigos.

    Todo o loop est pronto mas ainda falta automatizar o contedo que vai aparecer como artigo. Vamos usar 7 tags:

    ! tag 1: mostra o ttulo ! tag 2: insere o link da pgina onde o artigo est

  • ! tag 3: mostra o nome do autor do artigo ! tag 4: mostra a data em que o artigo foi publicado ! tag 5: mostra o numero de comentrios e adiciona o link para os comentrios do artigo ! tag 6: mostra um texto Editar com o link para a pgina de edio do artigo. S aparece a usurios com o login

    feito e com permisses para editar posts. ! tag 7: mostra o contedo do artigo. 01 02 03 04 05 06 07 08 09 10 11 12 13

    Vamos agora colocar estas tags na div do artigo. Fica assim: 1 2 3 4 5

  • 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

  • archive.php

    Depois de termos o index.php pronto, vamos criar a pgina que responsvel por mostrar os arquivos do blog. Existem vrias pginas que podem fazer isto, at o index.php faz esse trabalho caso no exista nenhum ficheiro de arquivo, mas vamos usar um ficheiro que o default para todas as pginas de arquivo (categorias, tags, links, data, autores, etc): o archive.php Para esta pgina, vamos usar o cdigo do index.php e adicionar um hack que basicamente vai informar ao usurio qual o contedo esto a ver. Comece por criar um archive.php ou se fez o download dos ficheiros da segunda parte do tutorial, abra o ficheiro. Copie todo o cdigo do index.php e cole no archive.php (substitua todo o contedo caso exista algum).

    Este o hack que devemos de adicionar antes do loop: 01 02 03 04 05 06 07 08 09 10 11 12 13 14

    Arquivo da Categoria "" Arquivo de Arquivo de Arquivo de Arquivo do Autor Arquivo do Blog

    Este conjunto de ifs mostra uma mensagem diferente em cada tipo de arquivo. Explicao de cada if:

    ! 1 if: mostra uma mensagem na pgina das categorias ! 2 if: mostra uma mensagem na pgina de arquivo diario ! 3 if: mostra uma mensagem na pgina de arquivo mensal ! 4 if: mostra uma mensagem na pgina de arquivo anual ! 5 if: mostra uma mensagem na pgina de arquivo do autor ! 6 if: mostra uma mensagem generica caso no seja um arquivo dos anteriores

  • Como a ideia desta srie de tutoriais ensinar o mais importante e no complicar muito as coisas, no adicionamos nenhum estilo a esta mensagem, mas podem faz-lo. Fica a vosso critrio.

    Este o resultado final do nosso archive.php: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

    Arquivo da Categoria "" Arquivo de Arquivo de Arquivo de Arquivo do Autor Arquivo do Blog

  • 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

    Nada Encontrado Erro 404 Lamentamos mas no foram encontrados artigos.

    Ao entrar numa pgina de arquivo a mensagem aparece e muda conforme o arquivo que est a ver:

    Download dos ficheiros

    ! Download dos ficheiros index.php e archive.php ! Download de todos os ficheiros criados at agora

  • Concluso

    Neste momento j temos 4 ficheiros prontos: style.css, header.php, index.php e archive.php. No prximo artigo vamos falar em trs ficheiros que tambm so muito importantes: single.php, page.php, 404.php. single.php

    O ficheiro single.php usado para gerar o contedo da pgina de cada post. Assim como o index.php e archive.php criados da terceira parte desta srie de artigos, o single.php tambm tem um loop e o seu trabalho mostrar o post, os comentrios e uma mensagem de erro caso a pgina no seja encontrada (neste caso o wordpress usa normalmente o 404.php).

    Como o objectivo apenas ensinar a criar templates, vamos fazer manter esta pgina simples e usar as mesmas divs/cdigo que usamos na homepage (index.php), mas nos seus temas pode adicionar outras coisas como widgets de partilha, um local para as tags, adicionar os posts relacionados, etc.

    Vamos ento criar o nosso single.php (ou usar o que est disponvel para download) e apagar todo o cdigo que est nele. Vamos usar o cdigo base do index.php, com algumas alteraes: aqui no vamos precisar de uma pginao/navegao e temos que adicionar a tag que vai chamar o ficheiro responsvel pela parte dos comentrios (comments.php).

    Comeamos por adicionar a tag dos comentrios que vai ficar depois da div do artigo ( ): 1 Depois alteramos parte do loop que na homepage iria mostrar a navegao. Como no precisamos de uma navegao na pgina do post, substitui-mos isto: 1 2 3 4 5 6

    por esta linha de cdigo: 1

  • E este o cdigo final: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

  • Alm da tag dos comentrios e da alterao no loop, fizemos uma alterao que importante em termos de SEO: no ttulo usamos uma tag em vez da . Esta alterao importante porque devemos dizer aos motores de busca que aquele o principal assunto/ttulo da pgina.

    Por agora no tem que se preocupar com isto, mas depois seria bom que optimizasse melhor o SEO do tema. Saiba o que deve de fazer e porqu lendo o artigo Dicas SEO que faz parte da srie Como Criar um Blog de Sucesso.

    page.php

    Para o contedo que no deve de fazer parte do blog (pgina de contacto, sobre ns, etc), h as pginas estticas. Estas pginas so mostradas com base no ficheiro page.php e as diferenas entre este ficheiro e o single.php so poucas, normalmente removemos o seguinte:

    ! informaes sobre a pgina (data em que foi publicada, autor, categoria, etc);

    ! comentrios;

    ! widgets de partilha e outras coisas que no sejam necessrias nestas pginas.

    Vamos usar o cdigo do single.php neste ficheiro, s preciso apagar duas linhas de cdigo: informao do post e comentrios. 1 Postado por em - 1 Com estas alteraes, temos este cdigo: 01 02 03 04 05 06 07 08 09 10 11

  • 12 13 14 15 16 17 18 19 20 21 22

    Erro 404 Lamentamos mas no foram encontrados artigos.

    404.php

    Este ficheiro o template das pginas de erro 404 (no encontrado). Se algum tenta aceder a uma pgina ou ficheiro que no existe ou no foi encontrado, vai ver esta pgina por isso ela importante para que voc no perca essa visita.

    Primeiro comece por informar o usurio que o que ele procura no foi encontrado e que lamenta por isso. Depois coloque ferramentas para que ele possa navegar por outras pginas do blog, alguns exemplos:

    ! formulrio de pesquisa (busca) para que ele tente encontrar o que procura

    ! uma listagem das categorias ou arquivo por data

    ! link para a sua pgina de contacto para que ele possa falar consigo

    importante que a pgina seja simples e fcil de ler, no se esquea que o usurio est frustrado por no conseguir ver o que procurava.

    Para manter este tutorial simples, vamos adicionar apenas uma mensagem a informar o que aconteceu, mas num tema que vai ser usado num site recomendamos seguir as sugestes anteriores.

    Como no h nenhum artigo ou pgina para mostrar, no precisamos de usar um loop. Vamos apenas pegar na div do artigo, tirar as tags php e escrever manualmente a nossa mensagem: 01 02 03

  • 04 05 06 07 08 09 10 11 12

    Erro 404 - No Encontrado Lamentamos, mas o que voc procura no foi encontrado.

    E o nosso 404.php est pronto! comments.php

    Os comentrios so parte fundamental de um blog porque o espao onde os utilizadores podem exprimir as suas opinies sobre os artigos e sobre o seu trabalho. O wordpress suporta comentrios e o ficheiro responsvel por mostrar os comentrios e o formulrio para comentar ocomments.php. Este ficheiro chamado pela tag que adicionamos no nosso single.php (ver parte 4 do tutorial).

    O cdigo que vamos usar contem um loop que faz vrias verificaes e mostra os comentrios. Ele funciona desta maneira:

    ! ver se h comentrios e mostra-los;

    ! verificar se os comentrios ainda esto abertos e mostrar/no mostrar o formulrio dos comentrios;

    ! depois de submeter o comentrio ele guarda o comentrio na base de dados.

    Para comear abra o seu comments.php ou crie um ficheiro com esse nome e depois use o seguinte cdigo: 01 02 03 04 05 06 07

    Este artigo est protegido por password. Insira-a para ver os comentrios.

  • 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

    return; } ?> Deixe o seu comentrio!

  • 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

    Autentificado como

  • 66 67 68 69 70 71 Estilo dos Comentrios:

    Com este template os nossos comentrios esto prontos e a funcionar, mas a aparencia e organizao no so as melhores por isso vamos adicionar estas linhas de css ao style.css do tema: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

    #comments{ width:630px; float:left; border-top:1px solid #bebebe; } #comments h3{ font-size:14px; margin:20px 0; } ol.commentlist{ list-style:none; } ol.commentlist li{ margin-bottom:30px; } ol.commentlist ul{ margin:0px; }

  • 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

    ol.commentlist ul li{ margin:20px 20px 20px 40px; } #respond{ margin:0 0 30px 0; clear:both; } #respond form label{ float:left; clear:left; width:60px; text-align:right; margin-right:10px; } #respond form input{ float:left; width:250px; margin-bottom:10px; } #respond form textarea{ float:left; width:400px; height:100px; margin-bottom:10px; } #respond form input.commentsubmit{

  • 49 50 51 52 53 54 55 56 57

    float:left; margin-left:70px; }

    Este estilo no o perfeito, se estiver a criar um tema mesmo para usar recomendamos que personalize ainda mais todos os atributos existentes para tirar o mximo dos comentrios.

    Como este cdigo e estilo os comentrios ficam assim:

  • sidebar.php

    O ficheiro sidebar.php responsvel pelo contedo da sidebar (lateral) do blog. A sua utilizao no obrigatria, mas como a maioria dos templates para wordpress tm duas colunas e o tema que estamos a criar tambm tem (contedo + barra lateral), vamos criar o nosso sidebar.php e adicionar o suporte a widgets.

    Para que serve a sidebar?

    Nesta srie de artigos temos recebido vrios comentrios e um deles perguntava qual era o uso que podemos dar a um espao ao lado do contedo. A resposta muito simples, a sidebar pode ser usada para colocar publicidade, um formulrio de pesquisa, as categorias, links de sites parceiros, etc.

    O que so os widgets?

    Os widgets permitem que voc adicione contedo numa parte do tema sem ter que editar o cdigo. Normalmente os widgets so usados nas sidebars, mas voc pode adicionar widgets em qualquer lugar.

    Depois do tema estar preparado para trabalhar com widgets, v a Apresentao (Aparncia) > Widgets e s tem que arrastar os widgets para os espaos que o seu tema suporta.

    Criando o sidebar.php

    Agora que voc j sabe para que serve uma sidebar e o que so os widgets, vamos passar ao trabalho. Comece por criar um ficheiro chamado de sidebar.php ou abra o ficheiro que criamos na primeira parte do tutorial. Se ainda no fez o download dos ficheiros, faa-o aqui.

    Como algumas pessoas no sabem o que so os widgets e como que eles funcionam, fizemos este vdeo onde pode acompanhar toda a criao da sidebar e tambm a preparao do tema para receber widgets. A explicao em texto e todos os cdigos esto depois do vdeo.

    Comeamos por abrir o sidebar.php, este o cdigo que temos: 01 02 03 04 05 06 07 08

    Widget Pgina 1 Pgina 2 Pgina 3 Pgina 4

  • 09 10 11 12 13 14 15 16 17

    Widget Categoria 1 Categoria 2 Categoria 3 Categoria 4

    Para comear vamos remover todo o cdigo que est dentro da div sidebar e substituir por este: 1 Este cdigo faz uma verificao para saber se o tema suporta widgets. Se suportar, ento ele vai mostrar os widgets da zona/rea com o nome Sidebar.

    E este o nosso sidebar.php final: 1 2 3

    O prximo passo registar esta zona para que o wordpress consiga guardar e mostrar os widgets no template. Isso feito no ficheiro functions.php.

    functions.php

    Este um dos ficheiros mais importantes num tema e usado para adicionar muitas funcionalidades a um wordpress theme. O functions.php pode ser usado para definir muita informao, adicionar suporte para vrias funcionalidades e at alterar a forma como o wordpress trabalha.

    Para um tema suportar widgets, preciso dizer ao wordpress que o tema tem um ou mais espaos que suportam widgets. neste ficheiro que temos que adicionar um cdigo que faz esse trabalho.

    A explicao do cdigo:

    ! linha 1: inicio do cdigo php;

  • ! linha 4: se a funo register_sidebar existir (se o wordpress suportar widgets), ento faz o que estiver entre as { } (linhas 5 e 13);

    ! linha 5: inicio do registo de uma zona para widgets;

    ! linha 7: define o nome da zona de widgets;

    ! linha 8: define o cdigo que fica antes do inicio do widget;

    ! linha 9: define o cdigo que fica no fim do widget;

    ! linha 10: define o cdigo que aparece antes de um ttulo (caso o widget tenha um ttulo);

    ! linha 11: define o cdigo que fica depois do ttulo;

    ! linha 12: termina o registo da zona;

    ! linha 13: termina o trabalho iniciado na linha 4;

    ! linha 15: termina o cdigo php. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

  • footer.php

    O footer.php o ficheiro responsvel pelo rodap do site e nele fica uma tag que insere alguns scripts no tema. Esta tag wp_footer importante e necessria para que alguns plugins funcionem. Em condies normais no h nenhuma alterao visvel no design quando temos esta tag no cdigo do tema. S tem que copiar e colar em qualquer parte do footer.php: 1 Ns optamos por colocar a tag por baixo da linha dos crditos do site, por isso o footer.php final este: 1 2 3 4 5 6

    2012 - Todos os Direitos Reservados

  • 7 8 9

    E agora no h mais ficheiros para terminar, todo o nosso tema est pronto para funcionar!

    Download dos ficheiros

    ! Download dos ficheiros sidebar.php, functions.php e footer.php ! Download de todos os ficheiros criados at agora

    Concluso e Dicas Finais

    Neste momento o seu tema est pronto para ser usado online. Recomendamos que faa odownload deste pdf que contm uma lista de tags que podem ser usadas nos seus temas. Pode tambm encontrar muita informao no WordPress Codex, um site onde pode encontrar todas as informaes necessrias para criar, melhorar e entender melhor os temas, plugins e o prprio wordpress. Esta srie est agora terminada e nos prximos artigos sobre cdigo, que esto disponveis na categoria Cdigo e Hacks, vamos ensinar a adicionar funcionalidades avanadas num tema. Para no perder esses artigos, recomendamos que nos siga nas nas redes sociais ou subscreva a newsletter gratuita para receber os artigos por email: