omo criar um tema matador para wordpress

Upload: evertonlobao

Post on 30-May-2018

219 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    1/12

  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    2/12

    Uma vez na pasta themes, crie uma nova pasta e d o nome do seu tema. Se ainda nopensou em um, use um nome qualquer, isso pode ser mudado depois. Eu vou chamar deTema Tutorial e utilizar esse nome onde for necessrio.

    1. Folha de Estilos ou style.css

    Abra o bloco de notas, copie e cole o cdigo abaixo, depois salve na pasta que voccriou com o nomestyle.css.

    /*Theme Name: Tutorial WordPress ThemeTheme URI: http://www.seudominio.com/Description: Tema exclusivo do blog Seu Blog.Version: 1.0Author: Dono do BlogAuthor URI: http://seudominio.com/

    Tags: blue, fixed width, three columns, widgets*/ Esse cdigo fundamental em um tema para WordPress. a ele que o sistema procurapara saber qual tema deve ser exibido ao carregar a pgina. Na falta dele no tema ativo,o tema padro ser ativado.

    No custa lembrar que seudominio.com deve ser substitudo pela url do seu blog.

    As tags no so obrigatrias, mas devem ser includas se voc pretende submeter seutema ao Diretrio de Temas do WordPress. Substitua as que eu utilizei por tags quedescrevam o que voc tem em mente. Utilize-se de tags em ingls, isso vai fazer com

    que mais gente encontre seu tema, caso ele seja aprovado e exibido no diretrio.

    2. Criando a Estrutura do Tema

    Antes de entrarmos em mais detalhes, precisamos definir alguns detalhes do tema, comolargura total, nmero e largura das colunas.

    Eu decidi utilizar o Yahoo Grids, que facilita a criao do layout bsico. Baixe oarquivo nesse link.

    Uma ferramenta online facilita em muito essa parte do processo. O Grid Builder gera abase em html que vai ser utilizada no nosso tema.

    A Toolbox esquerda pode ser arrastada para qualquer lugar na pgina. Eu defini 974pxde largura, que garante uma boa exibio em resolues a partir de 1024768, sidebarleft 160px e o restante do contedo dividido na razo 66/33. Clique na imagem queilustra isso para v-la em tamanho maior.

    http://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/WordPres_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/WordPres_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/WordPres_DisplayType_Ghttp://wordpress.org/extend/themes/http://wordpress.org/extend/themes/http://wordpress.org/extend/themes/http://developer.yahoo.com/yui/grids/http://developer.yahoo.com/yui/grids/http://developer.yahoo.com/yui/grids/http://developer.yahoo.com/yui/download/http://developer.yahoo.com/yui/download/http://developer.yahoo.com/yui/download/http://developer.yahoo.com/yui/grids/builder/http://developer.yahoo.com/yui/grids/builder/http://developer.yahoo.com/yui/grids/builder/http://developer.yahoo.com/yui/grids/builder/http://developer.yahoo.com/yui/download/http://developer.yahoo.com/yui/grids/http://wordpress.org/extend/themes/http://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/WordPres_DisplayType_G
  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    3/12

    Voc pode definir os valores que quiser. A configurao que eu utilizei resulta em umarea de um pouco mais de 500 px de largura para os posts e uma barra lateral direita quetem a largura ideal para exibir postagens e comentrios recentes, caixas para assinaturade feed por email e outros fru-frus que ficam melhor em larguras maiores.

    A barra lateral esquerda comporta anncios no formato padro 160600, porque ganhardinheiro uma boa . Alm disso, uma largura boa para exibir listas de categorias epginas fixas.

    Depois de definir os valores, clique em show code, na janela que se abrir, marque acaixainclude lorem ipsun e clique emview plain . Copie o cdigo que vai ser gerado,cole no bloco de notas e salve comoindex.php , na mesma pasta onde j se encontra ostyle.css.

    http://www.ofimdavarzea.com/wp-content/uploads/2008/07/grid-builder.jpg
  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    4/12

    Criado o index.php, hoje vamos deix-lo pronto para entrar em ao.

    Se voc fez tudo certo, ao acessar a administrao do WordPress offline, em Design >Themes, voc dever encontrar um link para ativar o tema, com o thumbnail embranco.

    Clique para ativar e depois visualize o blog. Voc dever ver algo parecido com omostrado na imagem abaixo. Clique para ampliar.

    Antes de continuar, vamos definir e identificar algumas reas do index. YUI Base Page

    YUI: CSS Grid Builder

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Maecenas sit amet metus.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas sit amet metus.

    http://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/WordPres_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/WordPres_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/WordPres_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/index_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/index_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/index_DisplayType_Ghttp://www.ofimdavarzea.com/wp-content/uploads/2008/07/index.jpghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/index_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/WordPres_DisplayType_G
  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    5/12

  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    6/12

    "http://www.w3.org/TR/html4/strict.dtd">YUI Base Page

    Substitua por esse:

  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    7/12

    /">

    Clique em update e visualize o blog, se voc fez tudo certo, deve aparecer uma pginacomo a mostrada na imagem abaixo.

    Para concluir o header, precisamos da css que vai dar forma ao blog. Como ela ficalinkada noheader.php , bom inclu-la j no tema, para evitar esquecimentos futuros.

    Descompacte o arquivo que voc baixou doYahoo Grids , se no baixou ainda, baixenesse link.

    Depois de descompactado, localize o arquivoreset-font-grids.css , ele fica na pastareset-font-grids, que por sua vez se localiza na pasta grids.O caminho esse, para facilitar a localizao:yui_2.5.2\yui\build\reset-fonts-grids

    Arraste o arquivoreset-fonts-grids.css para a mesma pasta onde se encontra oindex.php e o style.css do seu tema. Ele ja est linkado no header e no necessriofazer mais nada.

    A funo desse arquivo de css limpar toda e qualquer formatao que possa serdefinida por navegadores, garantindo que nada vai interferir na exibio.

    Ele tambm traz todas as informaes sobre o posicionamento de todas as sees dapgina.

    Clique em update e visualize a pgina. Agora voc deve ver tudo no lugar, como naimagem. Clique para ampliar.

    Agora, v at a pasta base, no caminho abaixo, tambm na pasta do Yahoo Grids:

    yui_2.5.2\yui\build\base

    http://developer.yahoo.com/yui/download/http://developer.yahoo.com/yui/download/http://www.ofimdavarzea.com/wp-content/uploads/2008/07/teste-2.jpghttp://developer.yahoo.com/yui/download/
  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    8/12

    Nessa pasta, voc vai encontrar o arquivobase.css , ele traz uma formatao bsica paraa tipografia do blog.

    Abra-o com um editor de html, at o Frontpage serve. O bloco de notas no recomendado nessa parte, j que aqui, pelo menos, ele incluiu caracteres estranhos.

    Copie tudo que se encontra no arquivo, desde:

    h1 {/*18px via YUI Fonts CSS foundation*/font-size:138.5%;}

    at:

    p,fieldset,table,pre {/*so things don't run into each other*/margin-bottom:1em;}

    V at seu arquivo style.css e cole, logo abaixo das tags.

    Amanh, incluiremos os cdigos para gerar a pgina principal. Para adiantar, aproveitee crie vrios posts no seu blog offline. Isso vai ser importante na prxima parte dotutorial.

    No necessrio ficar escrevendo, use um gerador de lorem ipsum para isso. Noesquea de colar no bloco de notas e copiar novamente dali antes de utilizar, pararemover possveis formataes que o site inclua.Gerador de lorem ipsum

    Se voc fez tudo corretamente, tem um arquivo index.php pronto, gerando uma pginasemelhante a essa:

    Compare com o seu para ver o que est errado.

    http://www.ovelho.com/modules/news/article.php?storyid=35859http://www.ovelho.com/modules/news/article.php?storyid=35859http://www.ovelho.com/modules/news/article.php?storyid=35859http://www.lipsum.com/http://www.lipsum.com/http://www.ofimdavarzea.com/wp-content/uploads/2008/07/preview.jpghttp://www.lipsum.com/http://www.ovelho.com/modules/news/article.php?storyid=35859
  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    9/12

    Voc pode at us-lo diretamente, caso queira utilizar o mesmo formato, mas eu noaconselho, j que a idia aqui aprender a fazer um tema, no copi-lo.

    Fatiando o Index

    Agora a hora de criar os arquivos individuais que fazem um tema.

    possvel rodar um blog com apenas o index.php, mas no sbio, j que isso tornamuito mais difcil modificar reas especficas ou mesmo personaliz-las.

    Header

    Copie todo o cdigo marcado como header, desde at o topo da pgina,clique com o boto direito do mouse e escolha recortar. No lugar onde ficava o cdigorecortado, escreva header, apenas para no correr o risco de se perder .

    Cole o arquivo recortado no bloco de notas e salve como header.php, na mesma pastaonde est o index.

    Onde voc escreveu header, substitua por e clique emupdate.

    Visualize seu blog, tudo deve ser exibido exatamente como antes.

    Footer

    Repita o processo anterior, dessa vez copiando tudo desde at o final dapgina. Recorte, cole no bloco de notas e salve como footer.php, sempre na mesmapasta utilizada para o tema.

    No lugar do cdigo recortado, coloque .

    Clique em update e visualize o blog para ter certeza que tudo foi feito corretamente.

    Sidebars

    Agora a vez das barras laterais.

    Copie todo o cdigo identificado como , recorte, escreva rsidebar nolugar onde o cdigo estava, cole no bloco de notas e salve como rsidebar.php.

  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    10/12

    Substitua rsidebar pelo cdigo abaixo:

    Repita o processo para o cdigo marcado como .

    Substitua lsidebar pelo cdigo abaixo:

    Clique em update e visalize o blog para conferir o resultado.

    O que restou o seu index.php, que ser utilizado mais tarde para criar os templatessecundrios.

    Validando o XHTML

    Antes de continuar, vamos ver se o cdigo que temos at agora valida como XHTML.

    Ter um tema com XHTML vlido muito til, j que reduz as chances de voc terproblemas de exibio em diferentes navegadores.

    Adicione esse link para o W3C Markup Validator, ja que vamos utiliz-lofreqentemente.

    Visualize seu blog e, na barra superior do navegador, clique em arquivo > cdigo fonte.

    Selecione todo o cdigo que ser exibido e copie.V at o W3C Validator e escolha a aba validate by direct input, clique em moreoptions e marque a caixa show source.

    Cole o cdigo que voc copiou na caixa de texto e clique em check.

    Se voc fez tudo certo, sero reportados4 erros de XHTML .

    Na verdade, apenas um pequeno trecho de cdigo que gera esses 4 erros. Erros emXHTML costuma ter efeito cascata.

    Tente voc mesmo encontrar o erro e corrigi-lo, guiando-se pelo cdigo fonte que serexibido.

    Antes de continuar, voc deve estar lembrado que havia um erro de XHTL no cdigopara corrigir.

    Se voc no encontrou, aqui vai a dica. Nofooter.php , antes da tag ,acrescente .

    Nem sempre uma tag faltando vai quebrar o template de um blog, mas vai, sim, fazercom que o cdigo deixe de validar.

    http://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/index_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/index_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/index_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/temo_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/temo_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/temo_DisplayType_Ghttp://validator.w3.org/http://validator.w3.org/http://validator.w3.org/http://validator.w3.org/http://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/temo_DisplayType_Ghttp://pmstrk.mercadolivre.com.br/jm/PmsTrk?tool=5616140&word=PMSResseller-MICOXJCG&go=http://lista.mercadolivre.com.br/index_DisplayType_G
  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    11/12

    Corrigida a lio de casa, vamos aula de hoje. Prepare um caf porque hoje a coisa vailonge .

    Antes de estilizar o CSS do nosso tema, vamos criar os subtemplates, que personalizama exibio das pginas fixas, arquivos, categorias etc.

    Pginas Fixas

    O subtemplatepage.php responsvel pela exibio das pginas fixas, como pginasde contato, sobre, poltica de privacidade e outras. So pginas que no entram nacronologia de publicao do blog, da o termo fixas.

    Por sua caracterstica informativa, normalmente dispensam comentrios e no socategorizadas. Por isso, so um pouco diferentes do templateindex.php .

    V at o seuindex.php , copie todo o cdigo e cole no bloco de notas ou no editor detexto de sua preferncia.

    Localize o trecho abaixo:

  • 8/14/2019 Omo Criar Um Tema Matador Para WordPress

    12/12

    Archive for the Category

    Posts Tagged Archive for Archive for Archive for Author ArchiveBlog Archives

    Para evitar a gerao de contedo duplicado, o que no vai ajud-lo em nada naindexao junto aos mecanismos de busca em geral e Google em particular, vamossubstituir o cdigo responsvel pela exibio dos posts.

    Localize esubstitua por .

    Salve comoarchive.php .

    ComentriosOs comentrios que sero exibidos junto aos posts so gerados pelo arquivocomments.php . para cri-lo, copie o cdigo abaixo, cole no editor de textos e salve-ocomocomments.php .

    O cdigo uma verso ligeiramente modificada do encontrado no tema padro doWordPress. Ele exibe os comentrios separados dos trackbacks, que vem abaixo doscomentrios normais.