Your SlideShare is downloading. ×
Como desenvolver um tema wordpress de A a Z
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Como desenvolver um tema wordpress de A a Z

1,813
views

Published on

Como desenvolver um tema wordpress de A a Z. Criação de zonas de conteúdo, header, footer, widgets e configurações avançadas para o tema.

Como desenvolver um tema wordpress de A a Z. Criação de zonas de conteúdo, header, footer, widgets e configurações avançadas para o tema.

Published in: Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,813
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Parte 1FERRAMENTAS DE DESENVOLVIMENTOAntes de começar a construir nosso template WordPress, é necessário que tenhamos todas as nossasferramentas à mão. Neste primeiro artigo, iremos analisar e recomendar as melhores ferramentas paraconstruir um ambiente de trabalho e de testes do qual você ficará orgulhoso.SERVIDOR DE TESTES LOCAIS: XAMP OU MAMPA melhor forma de desenvolver seu novo template WordPress é fora da internet, a partir do seu própriocomputador. No entanto, para o fazer você precisa tornar seu computador num “servidor local”,aproximando-o ao máximo a um servidor de internet (Apache, MySQL e PHP). Isto significa que vocêpoderá instalar o WordPress em seu próprio computador.Instalar estes softwares de servidor pode ser uma tarefa relativamente complicada, mas felizmenteexistem alguns softwares automáticos que realizam essas tarefas automaticamente por nós. Se você tiverum computador com Windows, instale o XAMP. Se por ventura tiver um computador Mac instale o MAMP.WORDPRESSObviamente, iremos necessitar de descarregar a última versão do WordPress e instalá-la corretamente emnosso servidor de testes. Se instalou o XAMP e por ventura tiver dúvidas a instalar o WordPresslocalmente, siga estas instruções. Se estiver a usar o MAMP siga estas instruções.CONTEÚDO DE TESTESA sua instalação do WordPress irá necessitar de conteúdo para testes. No seu painel de administração, váno menu Ferramentas > Importar e escolha a opção WordPress da listagem. Agora apenas iremosnecessitar de informação em formato WXR.Eis algumas opções do mercado:The Theme Development Checklist test dataThe Sandbox Dummy ContentObviamente que estas opções de conteúdo de testes têm os seus prós e contras. Obviamente que quantomais conteúdo você conseguir importar melhor. Dessa forma você garante que nenhuma dasfuncionalidades é esquecida. Se desejar, poderá também criar o seu próprio conteúdo de testes. Quandoachar que está tudo OK, use a navegação por postagens para pesquisar através de cada um dos posts queacabou de importar/criar. Verifique também os arquivos mensais e anuais, bem como os arquivos decategoria. Se faltar alguma coisa, poderá sempre tentar adicionar.UM EDITOR DE TEXTOVocê não necessita de nenhum software visualmente atrativo e com gráficos para criar um templateWordPress. Você precisa apenas de um Editor de Texto. Mas como em tudo na vida, uns são melhores queos outros. Para Windows, você pode experimentar o Notepad++. É grátis e open-source. Para Mac,recomendo vivamente o Text Wrangler que é o editor que uso, embora o Smultron seja muito bomtambém. Se necessitar de um cliente de FTP de qualidade, tem à escolha entre o FileZilla e o Cyberduck.
  • 2. FIREFOXObviamente, você pode usar qualquer browser para desenvolvimento web, mas aquele querecomendamos vivamente é sem dúvida o Firefox. Especial com dois plugins que tornam a sua vida bemmais fácil quando se pretende desenvolver templates WordPress. O plugin Web Developer adiciona umatoolbar que lhe oferece uma série de funcionalidades para inspeccionar e remover erros de código do seutemplate, desde desabilitar todos os estilos CSS à validação local do HTML. O plugin Firebug é também eleindispensável. Com o Firebug ligado você pode clicar em qualquer elemento da janela de seu browser e vercomo ele se parece ao nível de código fonte e a forma como está sendo afectado pelo CSS.HTML E CSSSe você dominar relativamente bem ou pelo menos tiver conhecimentos de HTML e CSS, tanto melhor.Recomendo-lhe também a leitura deste tutorial para aprender HTML5. Embora o Tutorial não lhe ensinetudo aquilo que irá precisar, tanto a nível de HTML como de CSS, é sempre uma boa primeira abordagemPHPRelativamente ao PHP, é também ele importante no desenvolvimento de um template wordpress. Noentanto iremos criando a nossa série de artigos de forma didática para que não tenha qualquer tipo deproblema no desenvolvimento de seu template WordPress. Para conseguir realizar esta série de artigoscom eficiência, você apenas necessita do básico do PHP, embora estejamos cá para ajudá-lo em tudo o quefor necessário.Parte 2CRIANDO A ESTRUTURA HTML DO TEMPLATE WORDPRESSA estrutura HTML do seu Template WordPress é fundamental para o trabalho que iremos desenvolver aolongo das próximas sessões. Tendo em conta que consideramos que já tem o seu ambiente de trabalhocriado e pronto a trabalhar, vamos iniciar-nos no desenvolvimento da estrutura HTML do TemplateWordPress.OS OBJETIVOS DE QUALQUER ESTRUTURA HTMLQuando você pretende criar/codar um determinado website você deverá ter em mente 2 objetivos: poucocódigo e código significativo. Isso é, usando o mínimo de marcações (HTML tags) possível e ao mesmotempo ter a certeza de que essas marcações são significativas, usando classes semânticas e nomes de IDque apontam para o conteúdo (class=”widget-area” ao invés de class=”sidebar-left”).Agora, quando iniciarmos a programação do Template WordPress (ou qualquer outro template para outroCMS) é necessário existir um equilíbrio entre pouco código, com muito pouca estrutura, incluindoelementos div desnecessários, e código que seja significativo e importante.Você provavelmente já viu a tag div no passado se por ventura olhou para o código de um site ou de umtemplate WordPress. Pense nelas como recipientes para o código HTML — recipientes que são fáceis demanusear para manipular código HTML com CSS. Obviamente, iremos ter algumas também. Mas nãoqueremos muitas ou que não façam sentido. E queremos estrutura suficiente — usando a tag div — deforma a podermos reutilizar o nosso código para múltiplos blogs e layouts. Nós queremos programar algoque nos possa ser útil no futuro também.
  • 3. ESTRUTURA HTML PARA O SEU TEMPLATE WORDPRESSVamos dar uma vista de olhos à estrutura HTML que iremos utilizar para o corpo (body) do nosso TemplateWordPress.<html><head></head><body><div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> </div> <!– #branding –> <div id="access"> </div> <!– #access –> </div> <!– #masthead –> </div> <!– #header –> <div id="main"> <div id="container"> <div id="content"> </div> <!– #content –> </div> <!– #container –> <div id="primary" class="widget-area"> </div> <!– #primary .widget-area –> <div id="secondary" class="widget-area"> </div> <!– #secondary –> </div>
  • 4. <!– #main –> <div id="footer"> <div id="colophon"> <div id="site-info"> </div> <!– #site-info –> </div> <!– #colophon –> </div> <!– #footer –></div><!– #wrapper –></body></html>Copie e cole este código para o seu editor de texto e guarde-o num local seguro e onde saiba que o volta aencontrar. Iremos utilizá-lo mais tarde quando construir o ficheiro de estrutura do nosso TemplateWordPress. Mas antes de o fazermos, existem algumas coisas importantes a analisar primeiro.UM PEQUENO GUIA SOBRE O HTML DO SEU TEMPLATE WORDPRESSPrimeiro, o atributo de classe no wrapper (invólucro) intitulado hfeed. A classe hfeed faz parte do esquemade microformato. Em linguagem simples, isto significa que adicionando a classe hfeed à nossa página, elairá dizer a qualquer máquina que leia o nosso site (como por exemplo os robots dos motores de busca ououtros serviços) que o nosso site publica conteúdo sindicado, como por exemplo artigos/postagens. Vocêirá ver uma série de classes deste género à medida que formos avançando.Na área central do nosso HTML irá reparar que temos duas áreas para widgets que surgem depois da nossaárea de conteúdos. E provavelmente também reparou que o nosso conteúdo está envolvido numa divcontainer (invólucro). Estes pontos são chave. Isto faz com que o nosso conteúdo seja carregado antes dasbarras laterais aos olhos dos motores de busca (e dos leitores) mas usando uma técnica de CSS commargens negativas poderemos tornar este template num template de 1, 2, ou 3 colunas com pouco códigoCSS. Interessante?Esta estrutura HTML poderá ser utilizada para os seus Templates WordPress futuros e dá-lhe aoportunidade de criar coisas bem interessantes com CSS.
  • 5. Parte 3ESTRUTURA DO TEMPLATE E DIRETÓRIOEnquanto a grande maioria dos templates minimalistas para WordPress apenas necessitam de um ficheiroindex.php e um ficheiro style.css, a grande maioria dos Templates WordPress necessitam de algo umpouco mais sólido.O nosso template minimalista irá incluir um total de 6 ficheiros. Comece por criar uma pasta do tipo wp-content/themes/ para o seu template — neste tutorial iremos utilizar a nomenclatura “seu-template” masele pode tomar o nome que você desejar — e crie também os seguintes ficheiros no seu diretório (não sepreocupe que eles ficarão em branco até aos próximos passos). • index.php • header.php • sidebar.php • footer.php • functions.php • style.cssAgora, vamos abrir o último ficheiro que criámos, o style.css, num editor de texto. A primeira coisa quenecessitamos fazer é adicionar uma secção no topo do ficheiro na qual iremos colocar os comentários doCSS (algo do tipo: /* e */). É aqui que necessitamos de colocar a informação que diz ao WordPress ondeestá seu ficheiro de estilos do seu template. Sem isso, seu template também não irá aparecer no painel deadministração do seu blog WordPress./*Theme Name: Seu TemplateTheme URI: http://exemplo.com/exemplo/Description: Um Template WordPress otimizado para buscadores.Author: Escola WordPressAuthor URI: http://www.escolawp.com/Version: 1.0Tags: separadas por vírgulas para identificar seu template.Your theme can be your copyrighted work.
  • 6. Like WordPress, this work is released under GNU General Public License, version 2 (GPL).http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.*/Algo a notar: uma grande parte disto é opcional. Sério, você precisa apenas do nome do Template. Mas sealguma vez tiver como intenção lançar seu template ao público, ou está a desenvolver um template paraalguém, você provavelmente irá desejar ter toda a informação. Assim que tiver isso realizado, poderáativar seu template e começar a correr a versão de testes. E tcharam, um template branquinho! Agora éque as coisas vão começar a aquecer!CONSTRUINDO A SUA ESTRUTURA HTMLAgora é a altura em que vamos utilizar a nossa estrutura HTML criada na segunda parte deste tutorial. Masprimeiro uma mini-lição sobre WordPress e Templates. O WordPress necessita apenas de 1 ficheiro detemplate, o index.php. Nós podemos, e iremos adicionar uma série de templates que podem ser usadasalém do index.php em determinadas situações (artigos singulares, páginas de categorias, etc.), mas noinício, o index.php é tudo o que precisamos.Agora, o index.php e todas as suas irmãs e irmãos (que iremos usar também) criam as páginas que vemosem nosso browser. Estes são ficheiros com HTML e PHP mas no final de contas servem para criar páginasvisuais.Vamos imaginar as páginas web como histórias, algo com um princípio, um meio, e um fim. Quandoescrevemos o nosso ficheiro index.php (e mais tarde o single.php, category.php, etc.) iremos concentrar-nos apenas no meio. Mas! Iremos chamá-lo tanto no princípio como no fim. É provável que estejamosconstantemente refazendo o nosso meio mas ao mesmo tempo estaremos criando o princípio e fim emsimultâneo.HEADER.PHP E FOOTER.PHPAgarre na estrutura HTML que construímos na aula anterior e copie tudo incluindo a div <div id="main">no seu header.php e guarde-o. No final deverá ficar algo deste tipo:<html><head></head><body><div id="wrapper" class="hfeed"><div id="header"> <div id="masthead">
  • 7. <div id="branding"> </div> <!– #branding –> <div id="access"> </div> <!– #access –> </div> <!– #masthead –></div><!– #header –><div id="main">Agora, copie tudo o que está depois, incluindo a div </div><!-- #main --> para o seu ficheiro footer.php. Eledeverá ficar algo deste género: </div><!– #main –><div id="footer"> <div id="colophon"> <div id="site-info"> </div> <!– #site-info –> </div> <!– #colophon –></div><!– #footer –></div><!– #wrapper –></body></html>INDEX.PHPAposto que entretanto já sabe o que vamos fazer de seguida. Copie toda a estrutura HTML do meio ondeestá incluída a div #main para o seu ficheiro index.php. Ele deverá ficar algo deste género: <div id="container">
  • 8. <div id="content"> </div> <!– #content –></div><!– #container –><div id="primary" class="widget-area"> </div><!– #primary .widget-area –><div id="secondary" class="widget-area"> </div><!– #secondary –>Com apenas duas adições pequenas teremos um Template WordPress perfeitamente inválido mas estamoscertamente no bom caminho. Temos também de chamar o cabeçalho (header.php) e o rodapé(footer.php) no nosso template.No topo do ficheiro index.php, antes de todo o código lá existente, adiciona a seguinte tag de template.<?php get_header(); ?>Parece-nos perfeitamente óbvio o que esta tag faz. Ela puxa e carrega o cabeçalho do site. Mas já queestamos aqui, aproveite para olhar melhor para esta tag PHP. Gostava que percebesse algumas coisas.Primeiro, a nossa função PHP é a chamada — get_header()— e começa com <?php e termina com ?>.Segundo, embora a nossa chamada seja muito curta (apenas uma linha) ela termina com um ponto evírgula. Pequeno, mas muito importante.Quer adivinhar qual a função que vamos colocar agora no fundo do nosso ficheiro index.php?<?php get_footer(); ?>Isso mesmo! Agora temos o nosso ficheiro principal que o WordPress estava procurando, o nossoindex.php. Ele contém todos miolos do meio, e também um princípio e um fim. Recarregue sua página nobrowser e verifique o código fonte (Ver > Código-Fonte da Página, no Firefox). Aí está o seu código!Estamos cada vez mais próximos de criar nosso Template WordPress! Fique connosco e participe!Parte 4CONSTRUINDO O CABEÇALHO (HEADER.PHP) DO TEMPLATE WORDPRESSNesta lição iremos abordar a construção de nosso ficheiro header.php e encontrar a forma correta devalidar nosso template com um Doctype HTML. Esta lição está recheada de código PHP mas não se assusteque iremos explicar tudo passo-a-passo para que possa compreender todas as funcionalidades. Iremosintroduzir também dois truques de otimização para buscadores ao mesmo tempo que vamos procurandoconstruir e melhor nosso ficheiro functions.php.
  • 9. A SECÇÃO “HEAD”Neste momento seu template WordPress em branco é inválido. Isso acontece porque ele não tem umDoctype definido, dizendo ao browser como interpretar o HTML que ele está lendo. Iremos usar umXHTML Transitional Doctype para validar nosso template. Existem outras opções disponíveis, mas umXHTML transitional é certamente o melhor para um template WordPress.Abra seu ficheiro header.php criado na lição anterior e cole lá dentro o seguinte código, antes de todo ocódigo que já lá se encontra.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Vamos adicionar também alguns atributos à nossa tag HTML que irão tornar o nosso tipo de página maisaparente e concreto para os browsers. Troque a tag <html> no seu ficheiro header.php com a seguintelinha de código.<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>Agora vamos avançar para dentro da nossa secção <head> de nosso template WordPress. A secção <head>contém a meta-informação sobre nossa página web. Informação típica como o título do documento que seconsegue ver e ler no cabeçalho de nosso browser (e nos resultados de buscadores), e ainda links parafolhas de estilos e RSS feeds.Mas primeiro abra seu ficheiro functions.php. Vamos-lhe adicionar uma função para nos ajudar em algunsaspectos, especialmente quando estivermos para criar nosso título de documento. Ela vai-nos dar umnúmero de página que poderemos adicionar ao título.Inicie seu ficheiro functions.php com:<?phpe 2 linhas abaixo (gostamos de deixar algumas linhas de separação nas funções) cole as seguintes 2 funçõesPHP:// Tornar o template disponível para tradução// A tradução pode ser feita em /languages/load_theme_textdomain( your-theme, TEMPLATEPATH . /languages );$locale = get_locale();$locale_file = TEMPLATEPATH . "/languages/$locale.php";if ( is_readable($locale_file) ) require_once($locale_file);// Puxar o número de páginafunction get_page_number() {
  • 10. if ( get_query_var(paged) ) { print | . __( Page , seu-template) . get_query_var(paged); }} // end get_page_numberA primeira função diz ao WordPress que queremos que nosso template esteja disponível para tradução eque os ficheiros de tradução podem ser encontrados na diretoria do template, na pasta “languages”. Sevocê vai criar um template WordPress, é importante que você torne seu template aberto a traduções.Você nunca sabe quando é que alguém irá necessitar de traduzir seu template para outra linguagem.Na nossa função seguinte, get_the_page_number(), você irá ver algum texto que pode ser traduzido. Algodeste género:__( Page , your-theme)O texto preparado para tradução é o “Page “ seguido do nome de diretório do nosso template; neste caso,“seu-template”. Esta opção de tradução é relativamente simples de implementar, mas existem muitasoutras formas de o fazer. Iremos analisar isso mais à frente nesta série de artigos.Consegue adivinhar o que a função get_page_number() está ali fazendo? Se você analisar bem essa função,você irá perceber que estamos a usar um “if” para verificar se estamos numa página numerada ou não.Isso acontece quando clicamos em “older posts” ou postagens mais antigas, em templates WordPress. Seestivermos numa página numerada, esta função mostra uma barra separadora e o número de página.Se você está começando a tentar compreender PHP pelas primeiras vezes, então queremos chamá-lo àatenção para um outro aspecto importante. Tudo aquilo que está depois do duplo travessão “//” éignorado no código e usado apenas como comentário, ou seja, usando dois travessões desse tipo, vocêpode deixar imensos comentários em seu código para perceber o que está programando e o que faz cadafunção. Você irá ver isso muitas vezes.Bem, voltando à nossa secção <head> de nosso ficheiro header.php. Troque as tags <head></head> peloseguinte código: <head profile="http://gmpg.org/xfn/11"> <title><?php if ( is_single() ) { single_post_title(); } elseif ( is_home() || is_front_page() ) { bloginfo(name); print | ; bloginfo(description);get_page_number(); } elseif ( is_page() ) { single_post_title(); } elseif ( is_search() ) { bloginfo(name); print | Search results for . wp_specialchars($s);get_page_number(); } elseif ( is_404() ) { bloginfo(name); print | Not Found; } else { bloginfo(name); wp_title(|); get_page_number(); }
  • 11. ?></title> <meta http-equiv="content-type" content="<?php bloginfo(html_type); ?>; charset=<?phpbloginfo(charset); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo(stylesheet_url); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( comment-reply ); ?> <?php wp_head(); ?> <link rel="alternate" type="application/rss+xml" href="<?php bloginfo(rss2_url); ?>" title="<?phpprintf( __( %s latest posts, your-theme ), wp_specialchars( get_bloginfo(name), 1 ) ); ?>" /> <link rel="alternate" type="application/rss+xml" href="<?php bloginfo(comments_rss2_url) ?>"title="<?php printf( __( %s latest comments, your-theme ), wp_specialchars( get_bloginfo(name), 1 )); ?>" /> <link rel="pingback" href="<?php bloginfo(pingback_url); ?>" /> </head>Neste código realizamos uma série de tarefas, nomeadamente meta-informação sobre o conteúdo denossa página, seguido de um link para a nossa folha de estilos, depois uma chamada de um script parausarmos comentários em forma de árvore quando criarmos o nosso sistemas de comentários, um truquepara plugins e outras coisas relacionadas com o WordPress e por fim um link para nossos RSS feeds epingbacks.Incluímos também uma title tag otimizada para motores de busca que mostra apenas o título da postagemem postagens simples e páginas.A SECÇÃO “HEADER”Agora iremos acrescentar informação sobre o título de nosso blog, que irá funcionar como um link para anossa homepage, uma descrição de nosso blog, e por fim um menu.No ficheiro header.php desça até à div #branding. É aqui que iremos acrescentar nosso título e descriçãodo blog. Mas iremos fazer algo um pouco diferente da maioria dos templates wordpress.Você encontra em muitos templates wordpress código que diz aos buscadores que o mais importante detudo é o título do blog em cada uma das páginas e postagens desse mesmo blog. Essas templates fazemisso usando tags h1; uma tag que diz “isto é o que esta página tem de importante”. No entanto, aquilo queé mais importante nesta página de nosso blog, por exemplo, não é “Escola WordPress” mas sim “Comocriar um Template WordPress – Parte IV”. Esta é a razão desta postagem e o que ela realmente trata.Iremos usar as tags condicionais do WordPress e algum código HTML para criar nosso título e descrição doblog, com o intuito de fazermos aquilo que são as boas práticas. Vejamos então como esse código seapresenta:
  • 12. <div id="branding"> <div id="blog-title"><span><a href="<?php bloginfo( url ) ?>/" title="<?php bloginfo( name ) ?>"rel="home"><?php bloginfo( name ) ?></a></span></div><?php if ( is_home() || is_front_page() ) { ?> <h1 id="blog-description"><?php bloginfo( description ) ?></h1><?php } else { ?> <div id="blog-description"><?php bloginfo( description ) ?></div><?php } ?> </div><!– #branding –>Portanto, o texto âncora do título de nosso blog é definido usando uma tag div. A descrição de nosso blogé criada usando uma declaração “if” em PHP e algumas tags condicionais do WordPress.Para iniciantes, esta é uma boa altura para olhar um pouco para trás e tentar compreender como as coisasestão sendo criadas e funcionando. No código anterior, estamos usando uma tag WordPress chamadabloginfo(). Poderá ver que a estamos usando para puxar o URL de nosso blog WordPress, o nome de nossoblog, e a descrição do mesmo. Ele puxa essa informação e a mostra em seu template. Compreendendoisto, você compreende todos os templates WordPress. Nós pegamos uma estrutura HTML e chamamosuma tag WordPress com PHP para realizar essa tarefa. Simples. É tudo uma questão de você se habituar aver tags de templates WordPress juntamente com declarações “if” e alguns ciclos de PHP.Agora desça para sua div #access. Iremos colocar um link para pular para que os usuários não tenha deestar visualizando o nosso menu ou cabeçalho e possam pular diretamente para os conteúdos.<div class="skip-link"><a href="#content" title="<?php _e( Skip to content, seu-template ) ?>"><?php_e( Skip to content, seu-template ) ?></a></div>e iremos adicionar o nosso menu de página, usando apenas uma tag wordpress, com apenas 1 argumento:<?php wp_page_menu( sort_column=menu_order ); ?>Fácil, correto? Portanto, sua div #access deverá parecer-se com isto:<div id="access"> <div class="skip-link"><a href="#content" title="<?php _e( Skip to content, seu-template )?>"><?php _e( Skip to content, seu-template ) ?></a></div> <?php wp_page_menu( sort_column=menu_order ); ?> </div><!– #access –>Está feito! O seu template de cabeçalho WordPress está programado e otimizado corretamente parabuscadores!
  • 13. Parte 5CONSTRUINDO O INDEX (INDEX.PHP) DO TEMPLATE WORDPRESSO ficheiro Index.php é provavelmente o ficheiro mais crucial de todo o seu template WordPress. Nãoapenas porque o WordPress necessita dele no caso de você não estar usando nenhuma página irmã (comoas páginas, category.php ou tag.php) mas porque tendo em conta o trabalho que estamos desenvolvendo,conseguir criar este ficheiro da forma mais correta, irá ajudar-nos a construir todos os outros ficheiros maisrapidamente (excepto o ficheiro de comentários que é sempre muito complicado de programar).O CICLOEmbora o ciclo esteja a meio do seu ficheiro, de uma forma metafórica, o index.php inicia e termina com OCiclo. Sem ele você não tem nada. Vejamos como ele se parece.<?php while ( have_posts() ) : the_post() ?><?php endwhile; ?>Muito simples mesmo. Embora você tenha postagens em seu banco de dados, o seu template irá correrum ciclo por entre eles e por cada um, realizar uma determinada tarefa. A parte do “realizar uma tarefa” ésem dúvida a mais complexa de todas. Mas ainda assim, poderemos torná-la simples e acessível.Experimente este ciclo para começar e ao longo dos artigos iremos trabalhar em cima dele. Coloque essecódigo dentro da sua div #content em seu ficheiro index.php.<?php while ( have_posts() ) : the_post() ?><?php the_content(); ?><?php endwhile; ?>O que é que você obtém com esse código? Todas as suas postagens numa grande pilha. Mas poderemostornar isso diferente.<ul><?php while ( have_posts() ) : the_post() ?><li> <?php the_excerpt(); ?></li><?php endwhile; ?></ul>Conseguiu perceber o que fizemos aqui? Agora você ficou com uma lista não ordenada de todos osexcertos de suas postagens. (Agora também já consegue perceber o que as funções the_content() ethe_excerpt() fazem!)
  • 14. Basicamente, você cria um ciclo (inicia com while e termina com endwhile) e coloca algumas coisas dentrodele — coisas como por exemplo tags de template WordPress que puxam informação de suas postagensque se encontram dentro do ciclo, tal como a tag de template bloginfo() puxa a informação das suasopções do WordPress, como vimos no último artigo.Agora, vamos criar um ciclo realmente fantástico! Vamos iniciar com a nossa versão básica. Mas iremosfazer com que ela seja compatível com a Tag More e a Tag Next Page. Iremos colocá-lo também numa Divprópria e fazer com que o browser saiba que isso é o conteúdo de suas postagens usando a classe demicro-formato “entry-content”. <div class="entry-content"> <?php the_content( __( Continue reading <span class="meta-nav">»</span>, your-theme ) ); ?> <?php wp_link_pages(before=<div class="page-link"> . __( Pages:, your-theme ) . &after=</div>) ?> </div><!– .entry-content –>E o título da postagem? Isso é muito simples também. Iremos usar a tag the_title() para puxar o título dapostagem e envolvê-lo numa tag <a> que linke diretamente para o the_permalink() (esse é o linkpermanente para qualquer postagem). Iremos adicionar também um atributo para títulos e outro micro-formato (bookmark) que diz ao browser ou ao buscador (ex.: Google) que isto é um link permanente paraum artigo. Tente colocar este código por baixo de sua div .entry-content.<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(Permalink to %s,your-theme), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>Agora é necessário puxar a informação adicional sobre a sua postagem: quem escreveu o artigo, a data emque foi publicado, a categoria onde foi inserido, tags, links para comentários, etc. Gostaria de quebrar estafase em duas fases: as coisas relacionadas com meta dados (autor e data de publicação) que colocamosantes do conteúdo da postagem, e as coisas relacionadas com utilidade (categorias, tags e link paracomentários) que colocamos depois do conteúdo. E ambas as fases irão colocar a sua postagem dentro desua própria div junto com o título.Vamos dar uma olhada a todo o ciclo já programado. Inseri alguns comentários no PHP para o ajudar acompreender melhor o código.<?php /* O Ciclo — com comentários! */ ?><?php while ( have_posts() ) : the_post() ?><?php /* Criando uma div com um ID único graças ao the_ID() e classes semânticas com o post_class() */?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>><?php /* um título h2 */ ?> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(Permalink to %s,your-theme), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  • 15. <?php /* Meta dados da postagem com possibilidade de tradução */ ?> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , your-theme); ?></span> <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false,$authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( View all posts by %s,your-theme ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , your-theme); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?phpthe_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!– .entry-meta –><?php /* O conteúdo da postagem */ ?> <div class="entry-content"><?php the_content( __( Continue reading <span class="meta-nav">»</span>, your-theme ) ); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, your-theme ) . &after=</div>) ?> </div><!– .entry-content –><?php /* Categoria micro-formatada e links para tags junto com link para comentários */ ?> <div class="entry-utility"> <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e(Posted in , your-theme ); ?></span><?php echo get_the_category_list(, ); ?></span> <span class="meta-sep"> | </span> <?php the_tags( <span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links"> . __(Tagged , your-theme ) . </span>, ", ", "</span>ntttttt<span class="meta-sep">|</span>n" ) ?> <span class="comments-link"><?php comments_popup_link( __( Leave a comment, your-theme ),__( 1 Comment, your-theme ), __( % Comments, your-theme ) ) ?></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?> </div><!– #entry-utility –> </div><!– #post-<?php the_ID(); ?> –>
  • 16. <?php /* Encerrar a div e terminar o ciclo com endwhile */ ?><?php endwhile; ?>NAVEGAÇÃOAgora necessitamos de criar uma forma de navegarmos para outras postagens. Iremos criar isto usando 2tags do WordPress: next_posts_link() e previous_posts_link(). Estas duas funções … não fazem aquilo quevocê julga que fazem.Tal como tudo o que está no index.php, a navegação de postagens tem de ser criada com alguns cuidadosporque é um código que iremos usar em praticamente todas as páginas de nosso template.Uma coisa que também gostamos, é colocar a navegação no topo e no final de cada postagem.Uma coisa que queremos fazer também é esconder a navegação caso não existam outros conteúdos paranavegar. Ou seja, se você não tiver postagens antigas em seu blog, nós não queremos enviar o código denavegação para o browser. Para o fazer, envolvemos o nosso código da seguinte forma:<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?><?php } ?>O que estamos fazendo é indicando que queremos verificar num dado ciclo, se o número de postagens ésuperior a 1. Caso seja afirmativo, a navegação aparece em seu blog.Eis o código final que você irá necessitar na sua navegação, para o topo e fundo da postagem, ou seja,antes e depois do ciclo.<?php /* Navegação para o Topo */ ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Olderposts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <span class="meta-nav">»</span>, your-theme )) ?></div> </div><!– #nav-above –><?php } ?><?php /* Navegação para o Fundo */ ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Olderposts, your-theme )) ?></div>
  • 17. <div class="nav-next"><?php previous_posts_link(__( Newer posts <span class="meta-nav">»</span>, your-theme )) ?></div> </div><!– #nav-below –><?php } ?>E agora uma última coisa que vamos fazer em nosso index.php. Nas próximas postagens iremos analisarcomo trabalhar com ele, mas para já vamos apenas colocar esta nova função antes da nossa get_footer().<?php get_sidebar(); ?>Parte 6CONSTRUINDO O SINGLE POST, ANEXOS E PÁGINA DE ERRO 404Depois de termos criado um template para nosso index.php onde aparecem todas as postagens de nossoblog, é altura de começarmos a criar as páginas individuais para cada tipo de conteúdo. O index é apenas ahomepage de seu blog, pelo que é necessário criarmos também as páginas individuais das postagens(single post), os anexos de postagens (post attachments) e também a página de erro 404 que surge quandoseus usuários não encontram os seus conteúdos.O TEMPLATE PARA OS TEMPLATESA estrutura do ficheiro single.php (e praticamente todos os outros templates de páginas que iremos criar)é muito parecido com o ficheiro index.php. De facto, você poderá olhar para ele como o template para ostemplates. <?php get_header(); ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> </div><!– #nav-above –> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> </div><!– #post-<?php the_ID(); ?> –> <div id="nav-below" class="navigation"> </div><!– #nav-below –> </div><!– #content –> </div><!– #container –> <?php get_sidebar(); ?> <?php get_footer(); ?>
  • 18. No entanto irão existir diferenças bastante notáveis. Começando com as funções the_post() ecomments_template().Iremos chamar a função the_post() perto do topo de nossa página logo após a abertura da “div content” eantes da navegação. Não iremos necessitar de um ciclo neste template, uma vez que o WordPress sabequal a postagem que estamos procurando através da função the_permalink().E tendo em consideração que este é um single post, iremos necessitar também da funçãocomments_template(). E porque iremos separar nossos comentários dos trackbacks quandoprogramarmos nosso ficheiro comments.php, iremos necessitar do seguinte código: <?php comments_template(, true); ?>A função comments_template() deverá ficar antes de encerrarmos nossa div #content logo depois danavegação.NAVEGAÇÃO DO SINGLE POSTAo invés de usarmos as funções next_posts_link() e previous_posts_link() iremos usar as funçõesprevious_post_link() e next_post_link(). Elas fazem precisamente aquilo que você está pensando quefazem.<div id="nav-above" class="navigation"> <div class="nav-previous"><?php previous_post_link( %link, <span class="meta-nav">«</span>%title ) ?></div> <div class="nav-next"><?php next_post_link( %link, %title <span class="meta-nav">»</span> )?></div> </div><!– #nav-above –><div id="nav-below" class="navigation"> <div class="nav-previous"><?php previous_post_link( %link, <span class="meta-nav">«</span>%title ) ?></div> <div class="nav-next"><?php next_post_link( %link, %title <span class="meta-nav">»</span> )?></div> </div><!– #nav-below –>TÍTULO DO SINGLE POSTSe por ventura se lembrar de nossa aula de programação do ficheiro header.php, nós usámos umadeclaração IF para termos caminho livre para definirmos o título de nossos Single Posts. Para tirarmosvantagem disso neste template e em todos os templates de páginas que iremos criar, vamos envolvernosso título em tags h1.<h1 class="entry-title"><?php the_title(); ?></h1>Você provavelmente reparou que o código de nossos títulos é também ele muito simples. Isso é obenefício de não termos de linkar para nada ainda.
  • 19. LINKS ÚTEIS DE ENTRADA DO SINGLE POSTOs links úteis de entrada são…complicados. Antes de darmos uma vista de olhos no código, deveremoscomeçar por pensar porque razão são complicados. Por causa da forma como os comentários funcionamno WordPress iremos necessitar de ter em conta diversos cenários: comentários e trackbacks ligados;apenas os trackbacks ligados; apenas os comentários ligados; comentários e trackbacks encerrados. E issosignifica…uma verdadeira confusão de declarações IF.O código está documentado mas lembre-se de olhar para os blocos de declarações IF e ELSEIF ecertamente que não será complicado para si compreendê-lo.Da mesma forma, desejamos mostrar o link permanente de nossa postagem aqui para propósitos debookmarking e também o RSS Feed para esta postagem singular (single post) — ideal para seus usuáriosseguirem conversas específicas.<div class="entry-utility"> <?php printf( __( This entry was posted in %1$s%2$s. Bookmark the <a href="%3$s" title="Permalinkto %4$s" rel="bookmark">permalink</a>. Follow any comments here with the <a href="%5$s"title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feed for this post</a>.,seu-template ), get_the_category_list(, ), get_the_tag_list( __( and tagged , seu-template ), , , ), get_permalink(), the_title_attribute(echo=0), comments_rss() ) ?><?php if ( (open == $post->comment_status) && (open == $post->ping_status) ) : // Comments andtrackbacks open ?> <?php printf( __( <a class="comment-link" href="#respond" title="Post a comment">Post acomment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for yourpost" rel="trackback">Trackback URL</a>., seu-template ), get_trackback_url() ) ?><?php elseif ( !(open == $post->comment_status) && (open == $post->ping_status) ) : // Onlytrackbacks open ?> <?php printf( __( Comments are closed, but you can leave a trackback: <a class="trackback-link"href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>., seu-template ),get_trackback_url() ) ?><?php elseif ( (open == $post->comment_status) && !(open == $post->ping_status) ) : // Onlycomments open ?> <?php _e( Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post acomment">post a comment</a>., seu-template ) ?>
  • 20. <?php elseif ( !(open == $post->comment_status) && !(open == $post->ping_status) ) : // Commentsand trackbacks closed ?> <?php _e( Both comments and trackbacks are currently closed., seu-template ) ?><?php endif; ?><?php edit_post_link( __( Edit, seu-template ), "nttttt<span class="edit-link">", "</span>" ) ?> </div><!– .entry-utility –>Não foi assim tão difícil, foi?CONTEÚDO DO SINGLE POSTAo contrário do que acontece com o ficheiro index.php, o conteúdo do seu ficheiro single.php é muitosimples de obter. Apenas necessitamos de chamar uma função seguida da função wp_link_pages(). <?php the_content(); ?> <?php wp_link_pages(before=<div class="page-link"> . __( Pages:, your-theme ) . &after=</div>)?>ANEXOS DA POSTAGEMNem todos os blogueiros usam os anexos de postagem, mas eles são na verdade muito interessantes.Quando você adiciona uma imagem a um artigo seu, você está na verdade a anexá-la ao seu artigo. E,obviamente, você pode anexar muito mais do que apenas imagens. Iremos agora criar um templateattachment.php, mas se você desejar, poderá customizá-lo para suportar vídeos, audio, e aplicações,criando os templates video.php, audio.php, e application.php por exemplo. Existem muitas formas de vocêlevar sua criatividade a seus anexos com WordPress.A forma mais rápida de procedermos aqui é copiando o seu ficheiro single.php, renomeá-lo deattachment.php, e realizando as seguintes alterações.Primeiro que tudo, elimine a navegação de topo. Não iremos necessitar dela. Substitua-a pelo título dapágina que linka diretamente para o seu artigo parente.<h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>" title="<?php printf(__( Return to %s, seu-template ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>"rev="attachment"><span class="meta-nav">« </span><?php echo get_the_title($post->post_parent)?></a></h1>Agora que nosso título de página está envolvido em tags h1, isso significa que o título de nossa postagemdeverá estar envolvido em tags h2.<h2 class="entry-title"><?php the_title(); ?></h2>Agora, porque o nosso template de anexos precisa mesmo de mostrar esses anexos, nosso conteúdodeverá reflectir isso mesmo. E dado que a maioria dos anexos serão imagens, teremos de verificar isso egarantir que usamos uma declaração IF para esse cenário.<div class="entry-content">
  • 21. <div class="entry-attachment"><?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?> <p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?phpthe_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo$att_image[1];?>" height="<?php echo $att_image[2];?>" class="attachment-medium" alt="<?php$post->post_excerpt; ?>" /></a> </p><?php else : ?> <a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars(get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a><?php endif; ?> </div> <div class="entry-caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt() ?></div><?php the_content( __( Continue reading <span class="meta-nav">»</span>, seu-template ) ); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, seu-template ) . &after=</div>)?> </div><!– .entry-content –>Elimine a navegação do fundo que se encontrava no código que você copiou de seu ficheiro single.php, eseu template attachment.php está pronto!O TEMPLATE DE ERRO 404O erro 404 é o código de servidor para “Não consigo encontrar essa página” e é algo que você não deverádescurar em seu template WordPress. O que acontece quando um link para o seu blog foi mal copiado eenvia usuários para uma página que não existe em seu blog? Isso dá origem a um erro 404. Existem formasmuito criativas de lidar com páginas de erro 404. Se desejar apimentar sua página, veja essas incríveis 45páginas de erro 404 incríveis e criativas.Felizmente, o WordPress tem um template para gerir esse erro também. Ele chama-se 404.php. A técnicaque usamos em templates de páginas de erro 404 é muito simples e funcional. Ela simplesmente pededesculpa e deixa uma caixa de pesquisa para seus usuários poderem procurar por conteúdo em seu blog.Se desejar um pouco mais de criatividade, veja o exemplo que deixámos em cima.Agora volte para o seu template dos templates, elimine a navegação e adicione algo como isto aoconteúdo.<div id="post-0" class="post error404 not-found"> <h1 class="entry-title"><?php _e( Not Found, seu-template ); ?></h1>
  • 22. <div class="entry-content"> <p><?php _e( Apologies, but we were unable to find what you were looking for. Perhaps searchingwill help., seu-template ); ?></p><?php get_search_form(); ?> </div><!– .entry-content –> </div><!– #post-0 –>Parte 7CONSTRUINDO O FICHEIRO COMMENTS.PHPQualquer desenvolvedor que se preze odeia programar o template de comentários do WordPress. Naverdade ele poderá tornar-se uma verdadeira confusão. Na versão 2.7, o WordPress introduziu felizmenteuma forma mais fácil de criar templates para comentários — o que na verdade não foi grande ajuda sevocê desejar separar seus comentários e trackbacks ou desejar introduzir algumas funcionalidadescustomizadas. Continua sendo confuso.Felizmente para você, tentámos recriar um template de forma mais fácil. Continua confuso, mas aindaassim mais simples, presumo. Para este tutorial sobre o desenvolvimento do template de comentários,vamos tentar guiá-lo sobre o que vai acontecer, mostrar-lhe algumas porções de código interessantes eque você vai necessitar de adicionar ao ficheiro functions.php, e depois então apresentar o códigocompleto e final. Se tudo correr bem, no final fará sentido.Vejamos o que irá acontecer neste template.Prevenir o carregamento de páginas por robotsVerificar se há comentáriosContar o número de comentários e trackbacks (ou pings)Se existirem comentários, mostrar esses comentários — com navegação para paginação de comentáriosSe existirem trackbacks, mostrar os trackbacksSe os comentários estiverem ligados, mostrar o formulário de “resposta”Na verdade é muita coisa para um template só, mas penso que conseguiremos explicar-lhe como tudo issofunciona.CHAMANDO OS COMENTÁRIOS E TRACKBACKS DE FORMA CUSTOMIZADAAgora, com o WordPress 2.7 foi lançada a função wp_list_comments() que apresenta uma listadesordenada de comentários e trackbacks para os seus artigos (em árvore também). Pode ser convenientese você assim o desejar. Mas para nós não. Nós queremos comentários em árvore separados dostrackbacks, e customizados à nossa maneira.
  • 23. Para criar o código do template de comentários vamos dar-lhe algum trabalho. Você irá necessitar de criarchamadas customizadas para a sua lista de Comentários e Trackbacks. Adicione as seguintes 2 funções aoseu ficheiro functions.php. // Chamada customizada de comentários function custom_comments($comment, $args, $depth) { $GLOBALS[comment] = $comment; $GLOBALS[comment_depth] = $depth; ?> <li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>> <div class="comment-author vcard"><?php commenter_link() ?></div> <div class="comment-meta"><?php printf(__(Posted %1$s at %2$s <span class="meta-sep">|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>, seu-template), get_comment_date(), get_comment_time(), #comment- . get_comment_ID() ); edit_comment_link(__(Edit, seu-template), <span class="meta-sep">|</span> <spanclass="edit-link">, </span>); ?></div> <?php if ($comment->comment_approved == 0) _e("ttttt<span class=unapproved>Yourcomment is awaiting moderation.</span>n", seu-template) ?> <div class="comment-content"> <?php comment_text() ?> </div> <?php // echo the comment reply link if($args[type] == all || get_comment_type() == comment) : comment_reply_link(array_merge($args, array( reply_text => __(Reply,seu-template), login_text => __(Log in to reply.,seu-template), depth => $depth, before => <div class="comment-reply-link">, after => </div>
  • 24. ))); endif; ?> <?php } // end custom_comments // Chamada customizada para listar trackbacks function custom_pings($comment, $args, $depth) { $GLOBALS[comment] = $comment; ?> <li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>> <div class="comment-author"><?php printf(__(By %1$s on %2$s at %3$s, seu-template), get_comment_author_link(), get_comment_date(), get_comment_time() ); edit_comment_link(__(Edit, seu-template), <span class="meta-sep">|</span> <spanclass="edit-link">, </span>); ?></div> <?php if ($comment->comment_approved == 0) _e(ttttt<span class="unapproved">Yourtrackback is awaiting moderation.</span>n, seu-template) ?> <div class="comment-content"> <?php comment_text() ?> </div> <?php } // end custom_pingsIremos necessitar também de uma função customizada que o custom_comments() está chamando. Estafunção irá fazer a marcação do gravatar que estamos a usar, mas que ele se enquadre no esquema demicroformato para hcard. // Produz um avatar compatível com hCard function commenter_link() { $commenter = get_comment_author_link(); if ( ereg( <a[^>]* class=[^>]+>, $commenter ) ) { $commenter = ereg_replace( (<a[^>]* class=["]?), 1url , $commenter ); } else {
  • 25. $commenter = ereg_replace( (<a )/, 1class="url " , $commenter ); } $avatar_email = get_comment_author_email(); $avatar = str_replace( "class=avatar", "class=photo avatar", get_avatar( $avatar_email, 80 ) ); echo $avatar . <span class="fn n"> . $commenter . </span>; } // end commenter_linkSe você pretende mudar a dimensão original do seu gravatar, troque o valor de 80 na função get_avatar($avatar_email, 80 ) ). O valor 80 é a dimensão em pixeis para o seu gravatar.O TEMPLATE DE COMENTÁRIOSVejamos então o template de comentários com algums comentários PHP que o vão ajudar a compreendermelhor as funcionalidades presentes no template. <?php /* O template de comentários! */ ?> <div id="comments"> <?php /* Correr algumas verificações para robots artigos protegidos com password */ ?> <?php $req = get_option(require_name_email); // Verifica se os campos são obrigatórios. if ( comments.php == basename($_SERVER[SCRIPT_FILENAME]) ) die ( Please do not load this page directly. Thanks! ); if ( ! empty($post->post_password) ) : if ( $_COOKIE[wp-postpass_ . COOKIEHASH] != $post->post_password ) : ?> <div class="nopassword"><?php _e(This post is password protected. Enter the password to viewany comments., seu-template) ?></div> </div><!– .comments –> <?php return; endif; endif; ?>
  • 26. <?php /* Verificar se há comentários e fazer coisas! */ ?> <?php if ( have_comments() ) : ?> <?php /* Contar o número de comentários e trackbacks (ou pings) */ $ping_count = $comment_count = 0; foreach ( $comments as $comment ) get_comment_type() == "comment" ? ++$comment_count : ++$ping_count; ?> <?php /* Se existire comentários, mostrar os comentários */ ?> <?php if ( ! empty($comments_by_type[comment]) ) : ?> <div id="comments-list" class="comments"> <h3><?php printf($comment_count > 1 ? __(<span>%d</span> Comments, seu-template) :__(<span>One</span> Comment, seu-template), $comment_count) ?></h3> <?php /* Se existirem comentários suficientes, construir a paginação de comentários */ ?> <?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?> <div id="comments-nav-above" class="comments-navigation"> <div class="paginated-comments-links"><?php paginate_comments_links(); ?></div> </div><!– #comments-nav-above –> <?php endif; ?> <?php /* Uma lista ordenada de comentários, custom_comments(), in functions.php */ ?> <ol> <?php wp_list_comments(type=comment&callback=custom_comments); ?> </ol> <?php /* Se existirem comentários suficientes, construir a navegação */ ?> <?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?> <div id="comments-nav-below" class="comments-navigation"> <div class="paginated-comments-links"><?php paginate_comments_links(); ?></div> </div><!– #comments-nav-below –> <?php endif; ?>
  • 27. </div><!– #comments-list .comments –> <?php endif; /* if ( $comment_count ) */ ?> <?php /* Se existirem trackbacks(pings), mostrar os trackbacks */ ?> <?php if ( ! empty($comments_by_type[pings]) ) : ?> <div id="trackbacks-list" class="comments"> <h3><?php printf($ping_count > 1 ? __(<span>%d</span> Trackbacks, seu-template) :__(<span>One</span> Trackback, seu-template), $ping_count) ?></h3> <?php /* Uma lista ordenada de trackbacks, custom_pings(), in functions.php */ ?> <ol> <?php wp_list_comments(type=pings&callback=custom_pings); ?> </ol> </div><!– #trackbacks-list .comments –> <?php endif /* if ( $ping_count ) */ ?> <?php endif /* if ( $comments ) */ ?> <?php /* Se os comentários estiverem ligados, criar o formulário de resposta */ ?> <?php if ( open == $post->comment_status ) : ?> <div id="respond"> <h3><?php comment_form_title( __(Post a Comment, seu-template), __(Post a Reply to %s,your-theme) ); ?></h3> <div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div> <?php if ( get_option(comment_registration) && !$user_ID ) : ?> <p id="login-req"><?php printf(__(You must be <a href="%s" title="Log in">logged in</a> to posta comment., seu-template), get_option(siteurl) . /wp-login.php?redirect_to= . get_permalink() ) ?></p> <?php else : ?> <div class="formcontainer"> <form id="commentform" action="<?php echo get_option(siteurl); ?>/wp-comments-post.php"method="post"> <?php if ( $user_ID ) : ?>
  • 28. <p id="login"><?php printf(__(<span class="loggedin">Logged in as <a href="%1$s" title="Loggedin as %2$s">%2$s</a>.</span> <span class="logout"><a href="%3$s" title="Log out of this account">Logout?</a></span>, seu-template), get_option(siteurl) . /wp-admin/profile.php, wp_specialchars($user_identity, true), wp_logout_url(get_permalink()) ) ?></p> <?php else : ?> <p id="comment-notes"><?php _e(Your email is <em>never</em> published nor shared., your-theme) ?> <?php if ($req) _e(Required fields are marked <span class="required">*</span>, seu-template) ?></p> <div id="form-section-author" class="form-section"> <div class="form-label"><label for="author"><?php _e(Name, seu-template) ?></label> <?phpif ($req) _e(<span class="required">*</span>, seu-template) ?></div> <div class="form-input"><input id="author" name="author" type="text" value="<?php echo$comment_author ?>" size="30" maxlength="20" tabindex="3" /></div> </div><!– #form-section-author .form-section –> <div id="form-section-email" class="form-section"> <div class="form-label"><label for="email"><?php _e(Email, seu-template) ?></label> <?php if($req) _e(<span class="required">*</span>, seu-template) ?></div> <div class="form-input"><input id="email" name="email" type="text" value="<?php echo$comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div> </div><!– #form-section-email .form-section –> <div id="form-section-url" class="form-section"> <div class="form-label"><label for="url"><?php _e(Website, seu-template) ?></label></div> <div class="form-input"><input id="url" name="url" type="text" value="<?php echo$comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div> </div><!– #form-section-url .form-section –> <?php endif /* if ( $user_ID ) */ ?> <div id="form-section-comment" class="form-section"> <div class="form-label"><label for="comment"><?php _e(Comment, seu-template)?></label></div> <div class="form-textarea"><textarea id="comment" name="comment" cols="45" rows="8"tabindex="6"></textarea></div>
  • 29. </div><!– #form-section-comment .form-section –> <div id="form-allowed-tags" class="form-section"> <p><span><?php _e(You may use these <abbr title="HyperText MarkupLanguage">HTML</abbr> tags and attributes:, seu-template) ?></span> <code><?php echoallowed_tags(); ?></code></p> </div> <?php do_action(comment_form, $post->ID); ?> <div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php_e(Post Comment, seu-template) ?>" tabindex="7" /><input type="hidden"name="comment_post_ID" value="<?php echo $id; ?>" /></div> <?php comment_id_fields(); ?> <?php /* O código termina aqui. Está feito. Vamos encerrá-lo. */ ?> </form><!– #commentform –> </div><!– .formcontainer –> <?php endif /* if ( get_option(comment_registration) && !$user_ID ) */ ?> </div><!– #respond –> <?php endif /* if ( open == $post->comment_status ) */ ?> </div><!– #comments –>E está feito! Acaba de criar o seu template de comentários com estilo e alguns pormenores beminteressantes.Parte 8CONSTRUINDO O FICHEIRO DE PESQUISA E DE PÁGINA ESTÁTICAOs ficheiros de pesquisa e de páginas estáticas são fundamentais em qualquer Template WordPress. E omelhor de tudo é que são ambos bastante simples de programar. Para ambos estes Templates iremoscomeçar de novo usando novo template para templates (pode ir buscá-lo a nosso artigo da parte 6).<?php get_header(); ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> </div><!– #nav-above –>
  • 30. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> </div><!– #post-<?php the_ID(); ?> –> <div id="nav-below" class="navigation"> </div><!– #nav-below –> </div><!– #content –> </div><!– #container –><?php get_sidebar(); ?><?php get_footer(); ?>Mas obviamente, cada um dos ficheiros irá tomar um caminho diferente.O TEMPLATE DE PESQUISANo ficheiro search.php iremos reintroduzir o ciclo novamente no nosso Template. Desta vez com umadeclaração IF — para o caso de não termos nenhuma postagem para puxar a partir do ciclo.Vejamos como este ficheiro irá trabalhar: Se tivermos artigos (IF), ou por outras palavras, se existemartigos que correspondem ao termo pesquisado, então corremos o ciclo, algo parecido com o queacontece no index.php, mas se não tivermos artigos (IF) para correr o ciclo, ou, se não tivermos artigos quecorrespondam aos termos pesquisados, iremos dar a possibilidade ao usuário de voltar a pesquisarnovamente.Em termos de código, será algo deste tipo:<?php get_header(); ?> <div id="container"> <div id="content"><?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post() ?><!– this is our loop –><?php endwhile; ?><?php else : ?><!– aqui iremos colocar uma caixa de pesquisa caso não existam artigos –><?php endif; ?> </div><!– #content –></div><!– #container –>
  • 31. <?php get_sidebar(); ?><?php get_footer(); ?>Muito simples e direto, certo? Praticamente.Gostamos de colocar todos os ficheiros indexáveis mais ou menos com a mesma estrutura: Título doArtigo, Meta, Conteúdo (ou excerto), Links Úteis. Mas quando o WordPress pesquisa por artigos eletambém pesquisa por Páginas, que não necessitam de informações de meta ou links úteis. Portanto, nonosso ciclo, iremos verificar se estamos a lidar com um artigo ou uma página.<?php if ( $post->post_type == post ) { ?><?php } ?>Envolva o código nessa declaração IF e ele apenas mostrará conteúdo se estivermos a lidar com um artigo.Agora que já compreendemos como tudo funciona, aqui está a div #content do nosso template depesquisa:<?php if ( have_posts() ) : ?> <h1 class="page-title"><?php _e( Search Results for: , seu-template ); ?><span><?phpthe_search_query(); ?></span></h1><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Olderposts, seu-template )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <span class="meta-nav">»</span>, seu-template )) ?></div> </div><!– #nav-above –><?php } ?><?php while ( have_posts() ) : the_post() ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(Permalink to %s,your-theme), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2><?php if ( $post->post_type == post ) { ?> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , seu-template); ?></span> <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false,$authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( View all posts by %s, seu-
  • 32. template ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , seu-template); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?phpthe_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, seu-template ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!– .entry-meta –><?php } ?> <div class="entry-summary"><?php the_excerpt( __( Continue reading <span class="meta-nav">»</span>, seu-template ) ); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, seu-template ) . &after=</div>)?> </div><!– .entry-summary –><?php if ( $post->post_type == post ) { ?> <div class="entry-utility"> <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e(Posted in , seu-template ); ?></span><?php echo get_the_category_list(, ); ?></span> <span class="meta-sep"> | </span> <?php the_tags( <span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links"> . __(Tagged , seu-template ) . </span>, ", ", "</span>ntttttt<span class="meta-sep">|</span>n" ) ?> <span class="comments-link"><?php comments_popup_link( __( Leave a comment, seu-template ),__( 1 Comment, seu-template ), __( % Comments, seu-template ) ) ?></span> <?php edit_post_link( __( Edit, seu-template ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?> </div><!– #entry-utility –><?php } ?> </div><!– #post-<?php the_ID(); ?> –><?php endwhile; ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  • 33. <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Olderposts, seu-template )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <span class="meta-nav">»</span>, seu-template )) ?></div> </div><!– #nav-below –><?php } ?><?php else : ?> <div id="post-0" class="post no-results not-found"> <h2 class="entry-title"><?php _e( Nothing Found, seu-template ) ?></h2> <div class="entry-content"> <p><?php _e( Sorry, but nothing matched your search criteria. Please try again with some differentkeywords., your-theme ); ?></p><?php get_search_form(); ?> </div><!– .entry-content –> </div><?php endif; ?>O TEMPLATE DE PÁGINAVocê certamente sabe para que serve um template de página. O WordPress olha para ele como um artigonão organizado de forma cronológica. E nós pensamos nele como uma página, simples. Masmaioritariamente, é definido pelas coisas que não tem: todas as tralhas e panóplias que um artigonormalmente tem (links úteis, meta, etc.).Exceptuando os comentários. Por vezes certas páginas têm comentários. Nós não gostamos decomentários em páginas. Se quiser colocar comentários numa página, pode adicionar um campopersonalizado (custom field) com nome e valor “comments”. Muito simples mesmo.Eis o que você precisa para criar um template de página perfeito:<?php get_header(); ?> <div id="container"> <div id="content"><?php the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  • 34. <h1 class="entry-title"><?php the_title(); ?></h1> <div class="entry-content"><?php the_content(); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, seu-template ) . &after=</div>)?><?php edit_post_link( __( Edit, seu-template ), <span class="edit-link">, </span> ) ?> </div><!– .entry-content –> </div><!– #post-<?php the_ID(); ?> –><?php if ( get_post_custom_values(comments) ) comments_template() // Adiciona um custom fieldcom Nome e Valor "comments" para que possa usar comentários numa página ?> </div><!– #content –> </div><!-- #container –><?php get_sidebar(); ?><?php get_footer(); ?>Parte 9CONSTRUINDO O FICHEIRO DE ARQUIVO, AUTOR, CATEGORIA E TAGTal como fizemos com o ficheiro index.php, vamos aproveitar o novo template dos templates e usá-lo paraconstruir os templates que nos faltam, nomeadamente o template de arquivo, autor, categoria e tag. Onosso template mestre neste caso será o template de Arquivo.O que o ficheiro archive.php faz (e todos os seus templates relacionados) é mostrar artigos baseados numdeterminado critério. Um intervalo de datas, postagens por autor, uma categoria, ou uma tag. Portanto,basicamente, é muito parecido com o ficheiro index.php. Vamos então começar novamente com o nossotemplate dos templates (pode ir buscá-lo a nosso artigo da parte 6) que construímos num das liçõesanteriores e começar a trabalhar em cima dele. <?php get_header(); ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> </div><!– #nav-above –> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> </div><!– #post-<?php the_ID(); ?> –>
  • 35. <div id="nav-below" class="navigation"> </div><!– #nav-below –> </div><!– #content –> </div><!– #container –> <?php get_sidebar(); ?> <?php get_footer(); ?>O TEMPLATE DE ARQUIVOEis o esquema de um template de arquivo:Chamar a função the_post()Verificar que tipo de template é esteProduzir um template apropriadoRebobinar as postagens com a função rewind_posts()Correr o clico normal do WordPressEis então o conteúdo (#content) do seu ficheiro archive.php. Tome nota de que as Tags Condicionais quese encontram no topo, servem para verificar que tipo de template estamos a usar. <?php the_post(); ?> <?php if ( is_day() ) : ?> <h1 class="page-title"><?php printf( __( Daily Archives: <span>%s</span>, seu-template ),get_the_time(get_option(date_format)) ) ?></h1> <?php elseif ( is_month() ) : ?> <h1 class="page-title"><?php printf( __( Monthly Archives: <span>%s</span>, seu-template ),get_the_time(F Y) ) ?></h1> <?php elseif ( is_year() ) : ?> <h1 class="page-title"><?php printf( __( Yearly Archives: <span>%s</span>, seu-template ),get_the_time(Y) ) ?></h1> <?php elseif ( isset($_GET[paged]) && !empty($_GET[paged]) ) : ?> <h1 class="page-title"><?php _e( Blog Archives, seu-template ) ?></h1> <?php endif; ?> <?php rewind_posts(); ?> <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  • 36. <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Olderposts, seu-template )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <span class="meta-nav">»</span>, seu-template )) ?></div> </div><!– #nav-above –> <?php } ?> <?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(Permalink to%s, seu-template), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , seu-template); ?></span> <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false,$authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( View all posts by %s, seu-template ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , seu-template); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO)?>"><?php the_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, seu-template ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!– .entry-meta –> <div class="entry-summary"> <?php the_excerpt( __( Continue reading <span class="meta-nav">»</span>, seu-template ) ); ?> </div><!– .entry-summary –> <div class="entry-utility"> <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e(Posted in , seu-template ); ?></span><?php echo get_the_category_list(, ); ?></span> <span class="meta-sep"> | </span>
  • 37. <?php the_tags( <span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links"> . __(Tagged , seu-template ) . </span>, ", ", "</span>ntttttt<span class="meta-sep">|</span>n" ) ?> <span class="comments-link"><?php comments_popup_link( __( Leave a comment, seu-template ), __( 1 Comment, seu-template ), __( % Comments, seu-template ) ) ?></span> <?php edit_post_link( __( Edit, seu-template ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?> </div><!– #entry-utility –> </div><!– #post-<?php the_ID(); ?> –> <?php endwhile; ?> <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Olderposts, seu-template )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <span class="meta-nav">»</span>, seu-template )) ?></div> </div><!– #nav-below –> <?php } ?>O TEMPLATE DE AUTORO seu template de autor não será muito diferente. Você certamente vai gostar deste. Copie o código doficheiro archive.php e atribua-lhe o nome author.php. A única coisa que necessita trocar é o título dasecção.<h1 class="page-title author"><?php printf( __( Author Archives: <span class="vcard">%s</span>, seu-template ), "<a class=url fn n href=$authordata->user_url title=$authordata->display_namerel=me>$authordata->display_name</a>" ) ?></h1> <?php $authordesc = $authordata->user_description; if ( !empty($authordesc) ) echo apply_filters(archive_meta, <div class="archive-meta"> . $authordesc . </div> ); ?>Simples, hein?O TEMPLATE DE CATEGORIAO template de categoria é outro template que pode ser criado facilmente a partir do template de arquivo.Copie o código do ficheiro archive.php e atribua-lhe o nome category.php.Agora abra o ficheiro functions.php. Iremos introduzir uma função customizada que irá tornar o nossotemplate de categoria mais simples de usar.
  • 38. // Retorna outras categorias excepto a atual (redundante) function cats_meow($glue) { $current_cat = single_cat_title( , false ); $separator = "n"; $cats = explode( $separator, get_the_category_list($separator) ); foreach ( $cats as $i => $str ) { if ( strstr( $str, ">$current_cat<" ) ) { unset($cats[$i]); break; } } if ( empty($cats) ) return false; return trim(join( $glue, $cats )); } // end cats_meowA nossa função customizada cats_meow() remove a categoria corrente das páginas de categorias. Poroutras palavras, ela simplesmente livra-se de categorias redundantes quando pretende apresentar umalista de categorias.Agora, volte ao ficheiro category.php, e substitua a secção de título de página pelo seguinte código:<h1 class="page-title"><?php _e( Category Archives:, seu-template ) ?> <span><?php single_cat_title()?></span></span></h1> <?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo apply_filters(archive_meta, <div class="archive-meta"> . $categorydesc . </div> ); ?>E na div “.entry-utility” troque: <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e(Posted in , seu-template ); ?></span><?php echo get_the_category_list(, ); ?></span>com o seguinte código modificado: <?php if ( $cats_meow = cats_meow(, ) ) : // Retorna categorias que não aquela pesquisada ?> <span class="cat-links"><?php printf( __( Also posted in %s, seu-template ), $cats_meow )?></span> <span class="meta-sep"> | </span>
  • 39. <?php endif ?>O TEMPLATE DE TAGO template de tag é basicamente idêntico ao template de categoria, excepto no facto de ser para tags.Você já sabe como fazer: copie o conteúdo do ficheiro archive.php e altere o nome para tag.php.E temos novamente uma função customizad para incluir no ficheiro functions.php intitulada tag_ur_it(). Elafunciona de forma parecida à função cats_meow() excepto o facto de que remove tags redundantes. // Retorna outras tags excepto a atual (redundante) function tag_ur_it($glue) { $current_tag = single_tag_title( , , false ); $separator = "n"; $tags = explode( $separator, get_the_tag_list( "", "$separator", "" ) ); foreach ( $tags as $i => $str ) { if ( strstr( $str, ">$current_tag<" ) ) { unset($tags[$i]); break; } } if ( empty($tags) ) return false; return trim(join( $glue, $tags )); } // end tag_ur_itAgora, no ficheiro tag.php, substitua o título da página por: <h1 class="page-title"><?php _e( Tag Archives:, seu-template ) ?> <span><?php single_tag_title()?></span></h1>e na div “.entry-utility” substitua: <?php the_tags( <span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links"> . __(Tagged , seu-template ) . </span>, ", ", "</span>ntttttt<span class="meta-sep">|</span>n" ) ?>pela versão modificada:
  • 40. <?php if ( $tag_ur_it = tag_ur_it(, ) ) : // Retorna tags excepto a pesquisada ?> <span class="tag-links"><?php printf( __( Also tagged %s, seu-template ), $tag_ur_it ) ?></span> <?php endif; ?>Está feito!Parte 10CONSTRUINDO A BARRA LATERAL (SIDEBAR.PHP)Sabemos que você tem esperado pacientemente por este artigo. Toda a gente adora a barra lateral de umTemplate WordPress. Mas para não variar, iremos criar uma barra lateral um pouco diferente do que éhabitual em Templates WordPress. A nossa vai ser melhor e mais funcional!FUNÇÕES CUSTOMIZADAS NA BARRA LATERALPrimeiro as coisas mais importantes. Criando uma barra lateral em WordPress, uma das primeiras coisas ater em consideração é que essa barra suporte widgets. A nossa barra lateral vai ter duas secções dewidgets. Desta forma poderemos adaptar mais facilmente o código a templates de 2-colunas ou 3-colunas.Isto é bastante simples e direto. No nosso ficheiro functions.php vamos registrar as nossas áreas dewidgets com o seguinte código. // Registrar áreas de widgets function theme_widgets_init() { // Área 1 register_sidebar( array ( name => Primary Widget Area, id => primary_widget_area, before_widget => <li id="%1$s" class="widget-container %2$s">, after_widget => "</li>", before_title => <h3 class="widget-title">, after_title => </h3>, ) ); // Área 2 register_sidebar( array ( name => Secondary Widget Area, id => secondary_widget_area,
  • 41. before_widget => <li id="%1$s" class="widget-container %2$s">, after_widget => "</li>", before_title => <h3 class="widget-title">, after_title => </h3>, ) ); } // end theme_widgets_init add_action( init, theme_widgets_init );Agora temos duas áreas de widgets: A área de widget primária (Primary) e a área de widget secundária(Secondary). Não existe interesse em estar a chamar-lhes barra lateral primária e barra lateral secundária.Em alguns templates nem barra lateral existe, mas no entanto existem zonas compatíveis com widgets.Agora, ainda no ficheiro functions.php iremos adicionar mais duas customizações super interessantes eengraçadas.Primeiro, vamos definir os widgets pré-definidos: A pesquisa, páginas, categorias, arquivos, links e meta.Não iremos programar esses conteúdos manualmente no ficheiro sidebar.php. Iremos simplesmente dizerao WordPress para os adicionar como widgets automaticamente na nossa área de widgets através dasopções. $preset_widgets = array ( primary_widget_area => array( search, pages, categories, archives ), secondary_widget_area => array( links, meta ) ); if ( isset( $_GET[activated] ) ) { update_option( sidebars_widgets, $preset_widgets ); } // update_option( sidebars_widgets, NULL );Agora, na nossa área de widgets primária (primary_widget_area) temos então o widget de pesquisa, owidget de páginas, o widget de categorias, e o widget de arquivos. A área de widgets secundária(secondary_widget_area) tem os widgets para links e meta. Todos eles são carregados automaticamentecom o template através das opções.Consegue ver o código // update_option( sidebars_widgets, NULL ); na última linha? Se por alguma razãoquiser zerar seus widgets, remova esse código. Como provavelmente perceberá, NULL significa semwidgets.Agora, iremos criar uma nova condicional que irá verificar se existem widgets em alguma das nossas áreasde widgets. Isto será incrivelmente útil quando desenvolvemos a nossa barra lateral.
  • 42. // Verificar widgets nas áreas de widgets function is_sidebar_active( $index ){ global $wp_registered_sidebars; $widgetcolums = wp_get_sidebars_widgets(); if ($widgetcolums[$index]) return true; return false; } // end is_sidebar_activeAgora temos de colocar estes códigos a funcionar corretamente.PROGRAMANDO A BARRA LATERALCom as nossas áreas de widgets dinâmicas registradas e os nossos widgets pré-definidos, o nosso Templateda Barra Lateral será um dos mais simples que alguma vez viu. Mas lembre-se, iremos também envolver asnossas barras laterais numa declaração IF usando a nossa condicional is_sidebar_active().Eis então como o código irá se parecer: <?php if ( is_sidebar_active(primary_widget_area) ) : ?> <div id="primary" class="widget-area"> <ul class="xoxo"> <?php dynamic_sidebar(primary_widget_area); ?> </ul> </div><!– #primary .widget-area –> <?php endif; ?> <?php if ( is_sidebar_active(secondary_widget_area) ) : ?> <div id="secondary" class="widget-area"> <ul class="xoxo"> <?php dynamic_sidebar(secondary_widget_area); ?> </ul> </div><!– #secondary .widget-area –> <?php endif; ?>Agora, se for na página de administração dos widgets e retirar todos os widgets das suas áreas de widgetirá verificar que a nossa condicional dá erro. Isso significa que terão de existir widgets nas áreas para que oseu template funcione corretamente.
  • 43. Essa a forma como gostamos que as coisas funcionem. Como reparou também, estamos muito pertinho dofinal, portanto, fique atento que a nossa série está quase terminando!Parte 11COMO CRIAR O CSS DO TEMPLATEA programação CSS pode ser bastante complicado, como também pode ser bastante simples. Uma dasmelhores formas de conseguir aprender bem sobre CSS é pedindo ajuda a outros usuários que já dominema linguagem, bem como procurando tutoriais na internet que o ajudem a melhorar as suas competênciastécnicas com a linguagem.Para lhe facilitar um pouco o trabalho, trazemos até si um arsenal de folhas de estilo CSS para que possamoldar corretamente o seu template às suas necessidades:Uma folha de estilos que reinicia o CSS padrão em todos os web browsers e que cria um standard com oqual podemos trabalhar mais facilmenteUma folha de estilos que recria as nossas fundações tipográficas de uma forma simplesUma folha de estilos apenas para as classes do WordPressUma série de 6 folhas de estilo que irão criar todos os layouts do blog ou site que você deseja.Antes de começarmos com a estilização, você deverá criar uma diretoria “style” na pasta do seu template.É lá que iremos colocar todas as nossas folhas de estilo.REINICIAR O CSSA nossa folha de estilos Reset CSS é adaptada a partir de uma folha de estilo do Eric Meyer com pequenasalterações. Basicamente o que ela faz é criar um standard com o qual possamos trabalhar de conveniente.Usar esta folha de estilo é muito simples. Adicione as seguintes linhas ao seu ficheiro style.css, no topo, eantes da secção de comentários./* Reset default browser styles */@import url(styles/reset.css);No entanto, para que tudo funcione corretamente, você deverá criar um ficheiro reset.css, com o códigoque temos para si. Copie e cole esse código para criar o seu ficheiro:/* -------------------------------------------------------------- Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html------------------------------------------------------------- *//* v1.0 | 20080212 */
  • 44. 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, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,
  • 45. q:before, q:after { content: ; content: none;}/* remember to define focus styles! */:focus { outline: 0;}/* remember to highlight inserts somehow! */ins { text-decoration: none;}del { text-decoration: line-through;}/* tables still need cellspacing="0" in the markup */table { border-collapse: collapse; border-spacing: 0;}a img { border: none; }RECRIAR O CSSO nosso ficheiro Rebuild CSS é um ficheiro que trabalha toda a tipografia do nosso template de uma formainteligente e prática. O que esta folha de estilos faz é criar uma relação ritmada entre a tipografia utilizadano template e todos os elementos do mesmo, de forma a que você possa alterar convenientemente adimensão das fontes e todo o layout mantenha uma estrutura equilibrada e funcional.
  • 46. Usar o ficheiro rebuild.css é muito simples. Adicione as seguintes linhas de código imediatamente depoisda importação do seu ficheiro reset.css no seu style.css./* Rebuild default browser styles */@import url(styles/rebuild.css);No entanto, para que tudo funcione corretamente, você deverá criar um ficheiro rebuild.css, com o códigoque temos para si. Copie e cole esse código para criar o seu ficheiro:/* -------------------------------------------------------------- Rebuild the default browser styles Based on work by Blueprint CSS http://code.google.com/p/blueprintcss/-------------------------------------------------------------- */body { background: #fff;}body, input, textarea { color: #111; font: 12px Arial,sans-serif; line-height: 1.5;}/* Headings------------------------------------------------------------- */h1,h2,h3,h4,h5,h6 { font-weight: normal; clear: both;}hr { background-color: #999; border:0; height: 1px;
  • 47. margin-bottom: 1.5em;}/* Text elements-------------------------------------------------------------- */p{ margin-bottom: 1.5em;}ul { margin: 0 0 1.5em 2.5em;}ol { margin: 0 0 1.5em 2.5em;}ul { list-style:disc;}ol { list-style-type: decimal;}ol ol { list-style:upper-alpha;}ol ol ol { list-style:lower-roman;}ol ol ol ol { list-style:lower-alpha;}
  • 48. ul ul, ol ol, ul ol, ol ul { margin-bottom:0;}dl { margin:0 1.5em;}dt { font-weight: bold;}dd { margin-bottom: 1.5em;}strong { font-weight: bold;}cite, em, i { font-style: italic;}blockquote { margin: 0 3em;}blockquote em, blockquote i, blockquote cite { font-style: normal;}pre { font: 11px Monaco, monospace; line-height: 1.5; margin-bottom: 1.5em;
  • 49. }code { font: 11px Monaco, monospace;}abbr, acronym { border-bottom: 1px dotted #666; cursor: help;}ins { text-decoration: none;}sup,sub { height: 0; line-height: 1; vertical-align: baseline; position: relative;}sup { bottom: 1ex;}sub { top: .5ex;}/*Adapt the following for use in your Child Themes when usingdifferent font-sizes and line-heightsbody, input, textarea {
  • 50. font: --px Arial,sans-serif; line-height:--;}p, ul, ol, dd, pre { margin-bottom:--em;}pre, code { font:--px Monaco, monospace; line-height:--;}All other styles can be overridden--or ignored!--in Child Theme stylesheets*/ESTILOS BÁSICOS DO WORDPRESSExistem alguns elementos no WordPress para os quais você terá de ter um estilo. O que fizemos com estafolha de estilos foi usar esses mesmos estilos e colocá-los todos num ficheiro chamado wp.css. Nestemomento, esse ficheiro inclui estilos para fluatações de imagens — incluindo captações manuais e galeriasde imagens. E ainda estilos para citações.Usar o ficheiro wp.css é muito simples. Adicione as seguintes linhas de código no seu style.css./* Basic WordPress Styles */@import url(styles/wp.css);TODOS OS LAYOUTS QUE VOCÊ IRÁ NECESSITARPara o seu novo template, criámos alguns layouts que podem ser facilmente adaptados à estrutura HTMLdo seu template. No total são 6 layouts diferentes. Cada layout é fluído (estica ou encolhe conforme adimensão do seu browser) mas todos eles são fáceis de adaptar a uma largura fixa.Usar qualquer um destes layouts é muito simples. Depois da importação dos estilos básicos do WordPress,importe um desses layouts. Veja um exemplo do código que deverá usar:/* Import a basic layout */@import url(styles/3c-b.css);LAYOUT DE UMA COLUNAPara usar um layout de uma coluna, crie um ficheiro com o nome 1c-b.css e copie lá para dentro o seguintecódigo de CSS:
  • 51. /*LAYOUT: One-ColumnDESCRIPTION: One-column fluid layout with sidebars stacked in two columns below content*/#primary, #secondary { float: left; overflow: hidden; padding: 10px 1.9%; width: 46%;}#primary { clear: both;}#footer { clear: left; width: 100%;}LAYOUT DE DUAS COLUNAS (ESQUERDA)Para usar um layout de duas colunas com uma delas à esquerda, crie um ficheiro com o nome 2c-l.css ecopie lá para dentro o seguinte código de CSS:/*LAYOUT: Two-Column (Left)DESCRIPTION: Two-column fluid layout with one sidebars left of content*/#container { float: right;
  • 52. margin: 0 0 0 -200px; width: 100%;}#content { margin: 0 0 0 200px;}#primary, #secondary { float: left; overflow: hidden; width: 180px;}#secondary { clear: left;}#footer { clear: both; width: 100%;}LAYOUT DE DUAS COLUNAS (DIREITA)Para usar um layout de duas colunas com uma delas àdireita, crie um ficheiro com o nome 2c-r.css e copielá para dentro o seguinte código de CSS:/*LAYOUT: Two-Column (Right)DESCRIPTION: Two-column fluid layout with one sidebars right of content*/#container { float: left;
  • 53. margin: 0 -200px 0 0; width: 100%;}#content { margin: 0 200px 0 0;}#primary, #secondary { float: right; overflow: hidden; width: 180px;}#secondary { clear: right;}#footer { clear: both; width: 100%;}LAYOUT DE TRÊS COLUNASPara usar um layout de três colunas, crie um ficheiro com o nome 3c-b.css e copie lá para dentro oseguinte código de CSS:/*LAYOUT: Three-ColumnDESCRIPTION: Three-column fluid layout with two sidebars on both sides of content*/#container { float: left; width: 100%;
  • 54. }#content { margin: 0 200px;}#primary, #secondary { float: left; overflow: hidden; width: 180px;}#primary { margin: 0 0 0 -100%;}* html #primary { left: 20px; position: relative;}#secondary { margin: 0 0 0 -180px;}#footer { clear: left; width: 100%;}LAYOUT DE TRÊS COLUNAS (ESQUERDA)Para usar um layout de três colunas com uma delas à esquerda, crie um ficheiro com o nome 3c-l.css ecopie lá para dentro o seguinte código de CSS:/*LAYOUT: Three-Column (Left)
  • 55. DESCRIPTION: Three-column fluid layout with two sidebars left of content*/#container { float: right; margin: 0 0 0 -400px; width: 100%;}#content { margin: 0 0 0 400px;}#primary, #secondary { float: left; overflow: hidden; width: 180px;}#primary { margin: 0 20px 0 0;}#footer { clear: both; width: 100%;}LAYOUT DE TRÊS COLUNAS (DIREITA)Para usar um layout de três colunas com uma delas à direita, crie um ficheiro com o nome 3c-r.css e copielá para dentro o seguinte código de CSS:/*LAYOUT: Three-Column (Right)DESCRIPTION: Three-column fluid layout with two sidebars right of content
  • 56. */#container { float: left; width: 100%;}#content { margin: 0 400px 0 0;}#primary, #secondary { float: left; overflow: hidden; width: 180px;}#primary { margin: 0 0 0 -380px;}#secondary { margin: 0 0 0 -180px;}#footer { clear: left; width: 100%;}ESTILIZAR O MENUSe por ventura nunca estilizou um menu com items desordenados provavelmente irá sentir uma grandefrustração quando o tentar fazer. Como bónus, eis o CSS que usamos para criar menus em templateswordpress:#access {
  • 57. margin: 0 0 1.5em 0;overflow: auto;}.skip-link {position:absolute; left:-9000px;}.menu ul {list-style: none;margin: 0;}.menu ul ul {display: none;}.menu li {display: inline;}.menu a {display: block;float: left;}É muito simples de usar e bastante prático até!Parte 12GUIA COMPLETO PARA CRIAR UM TEMPLATE WORDPRESSAo longo dos últimos dois meses, escrevemos um total de 12 artigos sobre como criar um templatewordpress, numa série que consideramos essencial a todos aqueles que pretendem arriscar nodesenvolvimento de templates wordpress e/ou todos aqueles que pretendem perceber melhor comofuncionam os templates wordpress. Consideramos que estes tutoriais servem o propósito de ajudar não sóFreelancers e Desenvolvedores, como também blogueiros, amadores e meros curiosos.
  • 58. Este último artigo é o guia completo para criar um template wordpress. Em cima colocámos todos osartigos desenvolvidos ao longo desta série, e em baixo colocamos o código final para cada uma das páginasque fomos ensinando a desenvolver. Se por ventura se sentiu perdido no desenvolvimento, o código quedeixamos no final poderá ajudá-lo a retificar mais facilmente o seu template e a encontrar novamente ocaminho para o sucesso. Esperamos que tenha gostado, e obviamente que agradecemos caso seja possíveldeixar o seu comentário!TEMPLATES DE PÁGINAS CRIADOS404.PHP<?php get_header(); ?> <div id="container"> <div id="content"> <div id="post-0" class="post error404 not-found"> <h1 class="entry-title"><?php _e( Not Found, your-theme ); ?></h1> <div class="entry-content"> <p><?php _e( Apologies, but we were unable to find what you were lookingfor. Perhaps searching will help., your-theme ); ?></p> <?php get_search_form(); ?> </div><!-- .entry-content --> </div><!-- #post-0 --> </div><!-- #content --> </div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>ARCHIVE.PHP<?php get_header(); ?> <div id="container">
  • 59. <div id="content"><?php the_post(); ?><?php if ( is_day() ) : ?> <h1 class="page-title"><?php printf( __( Daily Archives: <span>%s</span>, your-theme ), get_the_time(get_option(date_format)) ) ?></h1><?php elseif ( is_month() ) : ?> <h1 class="page-title"><?php printf( __( Monthly Archives: <span>%s</span>, your-theme ), get_the_time(F Y) ) ?></h1><?php elseif ( is_year() ) : ?> <h1 class="page-title"><?php printf( __( Yearly Archives: <span>%s</span>, your-theme ), get_the_time(Y) ) ?></h1><?php elseif ( isset($_GET[paged]) && !empty($_GET[paged]) ) : ?> <h1 class="page-title"><?php _e( Blog Archives, your-theme ) ?></h1><?php endif; ?><?php rewind_posts(); ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-above --><?php } ?><?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf(__(Permalink to %s, your-theme), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?phpthe_title(); ?></a></h2> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , your-theme);?></span> <span class="author vcard"><a class="url fn n" href="<?php echo
  • 60. get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __(View all posts by %s, your-theme ), $authordata->display_name ); ?>"><?php the_author();?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , your-theme); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?php the_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!-- .entry-meta --> <div class="entry-summary"><?php the_excerpt( __( Continue reading <span class="meta-nav">»</span>, your-theme ) ); ?> </div><!-- .entry-summary --> <div class="entry-utility"> <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( Posted in , your-theme ); ?></span><?php echo get_the_category_list(, ); ?></span> <span class="meta-sep"> | </span> <?php the_tags( <span class="tag-links"><span class="entry-utility-prepentry-utility-prep-tag-links"> . __(Tagged , your-theme ) . </span>, ", ", "</span>ntttttt<spanclass="meta-sep">|</span>n" ) ?> <span class="comments-link"><?php comments_popup_link( __( Leave acomment, your-theme ), __( 1 Comment, your-theme ), __( % Comments, your-theme ) )?></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?> </div><!-- #entry-utility --> </div><!-- #post-<?php the_ID(); ?> --><?php endwhile; ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div>
  • 61. <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-below --><?php } ?> </div><!-- #content --> </div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>ATTACHMENT.PHP<?php get_header(); ?> <div id="container"> <div id="content"><?php the_post(); ?> <h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>"title="<?php printf( __( Return to %s, your-theme ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>" rev="attachment"><span class="meta-nav">« </span><?php echoget_the_title($post->post_parent) ?></a></h1> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><?php the_title(); ?></h2> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , your-theme);?></span> <span class="author vcard"><a class="url fn n" href="<?php echoget_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __(View all posts by %s, your-theme ), $authordata->display_name ); ?>"><?php the_author();?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , your-theme); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?php the_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-
  • 62. sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!-- .entry-meta --> <div class="entry-content"> <div class="entry-attachment"><?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?> <p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>"width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" class="attachment-medium" alt="<?php $post->post_excerpt; ?>" /></a> </p><?php else : ?> <a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?phpecho wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a><?php endif; ?> </div> <div class="entry-caption"><?php if ( !empty($post->post_excerpt) )the_excerpt() ?></div><?php the_content( __( Continue reading <span class="meta-nav">»</span>, your-theme ) ); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, your-theme ) . &after=</div>) ?> </div><!-- .entry-content --> <div class="entry-utility"> <?php printf( __( This entry was posted in %1$s%2$s. Bookmark the <ahref="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here withthe <a href="%5$s" title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feedfor this post</a>., your-theme ), get_the_category_list(, ), get_the_tag_list( __( and tagged , your-theme ), , , ), get_permalink(), the_title_attribute(echo=0), comments_rss() ) ?>
  • 63. <?php if ( (open == $post->comment_status) && (open == $post->ping_status) ) : // Comments andtrackbacks open ?> <?php printf( __( <a class="comment-link" href="#respond" title="Post acomment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s"title="Trackback URL for your post" rel="trackback">Trackback URL</a>., your-theme ),get_trackback_url() ) ?><?php elseif ( !(open == $post->comment_status) && (open == $post->ping_status) ) : // Onlytrackbacks open ?> <?php printf( __( Comments are closed, but you can leave a trackback: <aclass="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">TrackbackURL</a>., your-theme ), get_trackback_url() ) ?><?php elseif ( (open == $post->comment_status) && !(open == $post->ping_status) ) : // Onlycomments open ?> <?php _e( Trackbacks are closed, but you can <a class="comment-link"href="#respond" title="Post a comment">post a comment</a>., your-theme ) ?><?php elseif ( !(open == $post->comment_status) && !(open == $post->ping_status) ) : // Commentsand trackbacks closed ?> <?php _e( Both comments and trackbacks are currently closed., your-theme) ?><?php endif; ?><?php edit_post_link( __( Edit, your-theme ), "nttttt<span class="edit-link">", "</span>" ) ?> </div><!-- .entry-utility --> </div><!-- #post-<?php the_ID(); ?> --><?php comments_template(); ?> </div><!-- #content --> </div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>AUTHOR.PHP<?php get_header(); ?> <div id="container"> <div id="content">
  • 64. <?php the_post(); ?> <h1 class="page-title author"><?php printf( __( Author Archives: <spanclass="vcard">%s</span>, your-theme ), "<a class=url fn n href=$authordata->user_urltitle=$authordata->display_name rel=me>$authordata->display_name</a>" ) ?></h1> <?php $authordesc = $authordata->user_description; if ( !empty($authordesc) ) echoapply_filters( archive_meta, <div class="archive-meta"> . $authordesc . </div> ); ?><?php rewind_posts(); ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-above --><?php } ?><?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf(__(Permalink to %s, your-theme), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?phpthe_title(); ?></a></h2> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , your-theme);?></span> <span class="author vcard"><a class="url fn n" href="<?php echoget_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __(View all posts by %s, your-theme ), $authordata->display_name ); ?>"><?php the_author();?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , your-theme); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?php the_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-
  • 65. sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!-- .entry-meta --> <div class="entry-summary"><?php the_excerpt( __( Continue reading <span class="meta-nav">»</span>, your-theme ) ); ?> </div><!-- .entry-summary --> <div class="entry-utility"> <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( Posted in , your-theme ); ?></span><?php echo get_the_category_list(, ); ?></span> <span class="meta-sep"> | </span> <?php the_tags( <span class="tag-links"><span class="entry-utility-prepentry-utility-prep-tag-links"> . __(Tagged , your-theme ) . </span>, ", ", "</span>ntttttt<spanclass="meta-sep">|</span>n" ) ?> <span class="comments-link"><?php comments_popup_link( __( Leave acomment, your-theme ), __( 1 Comment, your-theme ), __( % Comments, your-theme ) )?></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?> </div><!-- #entry-utility --> </div><!-- #post-<?php the_ID(); ?> --><?php endwhile; ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-below --><?php } ?> </div><!-- #content --> </div><!-- #container --><?php get_sidebar(); ?>
  • 66. <?php get_footer(); ?>CATEGORY.PHP<?php get_header(); ?> <div id="container"> <div id="content"><?php the_post(); ?> <h1 class="page-title"><?php _e( Category Archives:, your-theme ) ?> <span><?phpsingle_cat_title() ?></span></span></h1> <?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echoapply_filters( archive_meta, <div class="archive-meta"> . $categorydesc . </div> ); ?><?php rewind_posts(); ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-above --><?php } ?><?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf(__(Permalink to %s, your-theme), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?phpthe_title(); ?></a></h2> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , your-theme);?></span> <span class="author vcard"><a class="url fn n" href="<?php echoget_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __(View all posts by %s, your-theme ), $authordata->display_name ); ?>"><?php the_author();?></a></span> <span class="meta-sep"> | </span>
  • 67. <span class="meta-prep meta-prep-entry-date"><?php _e(Published , your-theme); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?php the_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!-- .entry-meta --> <div class="entry-summary"><?php the_excerpt( __( Continue reading <span class="meta-nav">»</span>, your-theme ) ); ?> </div><!-- .entry-summary --> <div class="entry-utility"><?php if ( $cats_meow = cats_meow(, ) ) : // Returns categories other than the one queried ?> <span class="cat-links"><?php printf( __( Also posted in %s, your-theme ),$cats_meow ) ?></span> <span class="meta-sep"> | </span><?php endif ?> <?php the_tags( <span class="tag-links"><span class="entry-utility-prepentry-utility-prep-tag-links"> . __(Tagged , your-theme ) . </span>, ", ", "</span>ntttttt<spanclass="meta-sep">|</span>n" ) ?> <span class="comments-link"><?php comments_popup_link( __( Leave acomment, your-theme ), __( 1 Comment, your-theme ), __( % Comments, your-theme ) )?></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?> </div><!-- #entry-utility --> </div><!-- #post-<?php the_ID(); ?> --><?php endwhile; ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <span
  • 68. class="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-below --><?php } ?> </div><!-- #content --> </div><!-- #container <?php get_sidebar(); ?><?php get_footer(); ?>COMMENTS.PHP<?php /* The Comments Template — with, er, comments! */ ?> <div id="comments"><?php /* Run some checks for bots and password protected posts */ ?><?php $req = get_option(require_name_email); // Checks if fields are required. if ( comments.php == basename($_SERVER[SCRIPT_FILENAME]) ) die ( Please do not load this page directly. Thanks! ); if ( ! empty($post->post_password) ) : if ( $_COOKIE[wp-postpass_ . COOKIEHASH] != $post->post_password ) :?> <div class="nopassword"><?php _e(This post is password protected. Enter thepassword to view any comments., your-theme) ?></div> </div><!-- .comments --><?php return; endif;endif;?><?php /* See IF there are comments and do the comments stuff! */ ?><?php if ( have_comments() ) : ?>
  • 69. <?php /* Count the number of comments and trackbacks (or pings) */$ping_count = $comment_count = 0;foreach ( $comments as $comment ) get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;?><?php /* IF there are comments, show the comments */ ?><?php if ( ! empty($comments_by_type[comment]) ) : ?> <div id="comments-list" class="comments"> <h3><?php printf($comment_count > 1 ? __(<span>%d</span> Comments, your-theme) : __(<span>One</span> Comment, your-theme), $comment_count) ?></h3><?php /* If there are enough comments, build the comment navigation */ ?><?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?> <div id="comments-nav-above" class="comments-navigation"> <div class="paginated-comments-links"><?phppaginate_comments_links(); ?></div> </div><!-- #comments-nav-above --><?php endif; ?><?php /* An ordered list of our custom comments callback, custom_comments(), in functions.php */ ?> <ol><?php wp_list_comments(type=comment&callback=custom_comments); ?> </ol><?php /* If there are enough comments, build the comment navigation */ ?><?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?> <div id="comments-nav-below" class="comments-navigation"> <div class="paginated-comments-links"><?php paginate_comments_links();?></div> </div><!-- #comments-nav-below --><?php endif; ?> </div><!-- #comments-list .comments -->
  • 70. <?php endif; /* if ( $comment_count ) */ ?><?php /* If there are trackbacks(pings), show the trackbacks */ ?><?php if ( ! empty($comments_by_type[pings]) ) : ?> <div id="trackbacks-list" class="comments"> <h3><?php printf($ping_count > 1 ? __(<span>%d</span> Trackbacks, your-theme) : __(<span>One</span> Trackback, your-theme), $ping_count) ?></h3><?php /* An ordered list of our custom trackbacks callback, custom_pings(), in functions.php */ ?> <ol><?php wp_list_comments(type=pings&callback=custom_pings); ?> </ol> </div><!-- #trackbacks-list .comments --><?php endif /* if ( $ping_count ) */ ?><?php endif /* if ( $comments ) */ ?><?php /* If comments are open, build the respond form */ ?><?php if ( open == $post->comment_status ) : ?> <div id="respond"> <h3><?php comment_form_title( __(Post a Comment, your-theme), __(Post a Replyto %s, your-theme) ); ?></h3> <div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div><?php if ( get_option(comment_registration) && !$user_ID ) : ?> <p id="login-req"><?php printf(__(You must be <a href="%s" title="Log in">loggedin</a> to post a comment., your-theme), get_option(siteurl) . /wp-login.php?redirect_to= . get_permalink() ) ?></p><?php else : ?> <div class="formcontainer"> <form id="commentform" action="<?php echo get_option(siteurl); ?>/wp-comments-post.php" method="post"><?php if ( $user_ID ) : ?> <p id="login"><?php printf(__(<span class="loggedin">Logged in as <ahref="%1$s" title="Logged in as %2$s">%2$s</a>.</span> <span class="logout"><a href="%3$s"
  • 71. title="Log out of this account">Log out?</a></span>, your-theme), get_option(siteurl) . /wp-admin/profile.php, wp_specialchars($user_identity, true), wp_logout_url(get_permalink()) ) ?></p><?php else : ?> <p id="comment-notes"><?php _e(Your email is <em>never</em>published nor shared., your-theme) ?> <?php if ($req) _e(Required fields are marked <spanclass="required">*</span>, your-theme) ?></p> <div id="form-section-author" class="form-section"> <div class="form-label"><label for="author"><?php _e(Name, your-theme) ?></label> <?php if ($req) _e(<span class="required">*</span>, your-theme) ?></div> <div class="form-input"><input id="author" name="author"type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div> </div><!-- #form-section-author .form-section --> <div id="form-section-email" class="form-section"> <div class="form-label"><label for="email"><?php _e(Email, your-theme) ?></label> <?php if ($req) _e(<span class="required">*</span>, your-theme) ?></div> <div class="form-input"><input id="email" name="email" type="text"value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div> </div><!-- #form-section-email .form-section --> <div id="form-section-url" class="form-section"> <div class="form-label"><label for="url"><?php _e(Website, your-theme) ?></label></div> <div class="form-input"><input id="url" name="url" type="text"value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div> </div><!-- #form-section-url .form-section --><?php endif /* if ( $user_ID ) */ ?> <div id="form-section-comment" class="form-section"> <div class="form-label"><label for="comment"><?php _e(Comment,your-theme) ?></label></div> <div class="form-textarea"><textarea id="comment"
  • 72. name="comment" cols="45" rows="8" tabindex="6"></textarea></div> </div><!-- #form-section-comment .form-section --> <div id="form-allowed-tags" class="form-section"> <p><span><?php _e(You may use these <abbr title="HyperText MarkupLanguage">HTML</abbr> tags and attributes:, your-theme) ?></span> <code><?php echoallowed_tags(); ?></code></p> </div><?php do_action(comment_form, $post->ID); ?> <div class="form-submit"><input id="submit" name="submit"type="submit" value="<?php _e(Post Comment, your-theme) ?>" tabindex="7" /><inputtype="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div><?php comment_id_fields(); ?><?php /* Just … end everything. Were done here. Close it up. */ ?> </form><!-- #commentform --> </div><!-- .formcontainer --><?php endif /* if ( get_option(comment_registration) && !$user_ID ) */ ?> </div><!-- #respond --><?php endif /* if ( open == $post->comment_status ) */ ?> </div><!-- #comments -->FOOTER.PHP</div><!-- #main --> <div id="footer"> <div id="colophon"> <div id="site-info"> <p>Powered by <span id="generator-link"><a href="http://wordpress.org/"title="<?php _e( WordPress, your-theme ) ?>" rel="generator"><?php _e( WordPress, your-theme )?></a></span> and <span id="theme-link"><a href="http://example.com/" title="<?php _e( YourTheme for WordPress, your-theme ) ?>" rel="designer"><?php _e( Your Theme, your-theme )?></a></span>.</p> </div><!-- #site-info --> </div><!-- #colophon -->
  • 73. </div><!-- #footer --></div><!-- #wrapper --><?php wp_footer(); ?></body></html>FUNCTIONS.PHP<?php// Make theme available for translation// Translations can be filed in the /languages/ directoryload_theme_textdomain( your-theme, TEMPLATEPATH . /languages );$locale = get_locale();$locale_file = TEMPLATEPATH . "/languages/$locale.php";if ( is_readable($locale_file) ) require_once($locale_file);// Get the page numberfunction get_page_number() { if (get_query_var(paged)) { print | . __( Page , your-theme) . get_query_var(paged); }} // end get_page_number// For category lists on category archives: Returns other categories except the current one (redundant)function cats_meow($glue) { $current_cat = single_cat_title( , false ); $separator = "n"; $cats = explode( $separator, get_the_category_list($separator) ); foreach ( $cats as $i => $str ) { if ( strstr( $str, ">$current_cat<" ) ) {
  • 74. unset($cats[$i]); break; } } if ( empty($cats) ) return false; return trim(join( $glue, $cats ));} // end cats_meow// For tag lists on tag archives: Returns other tags except the current one (redundant)function tag_ur_it($glue) { $current_tag = single_tag_title( , , false ); $separator = "n"; $tags = explode( $separator, get_the_tag_list( "", "$separator", "" ) ); foreach ( $tags as $i => $str ) { if ( strstr( $str, ">$current_tag<" ) ) { unset($tags[$i]); break; } } if ( empty($tags) ) return false; return trim(join( $glue, $tags ));} // end tag_ur_it// Register widgetized areasfunction theme_widgets_init() { // Area 1 register_sidebar( array ( name => Primary Widget Area,
  • 75. id => primary_widget_area, before_widget => <li id="%1$s" class="widget-container %2$s">, after_widget => "</li>", before_title => <h3 class="widget-title">, after_title => </h3>, ) ); // Area 2 register_sidebar( array ( name => Secondary Widget Area, id => secondary_widget_area, before_widget => <li id="%1$s" class="widget-container %2$s">, after_widget => "</li>", before_title => <h3 class="widget-title">, after_title => </h3>, ) );} // end theme_widgets_initadd_action( init, theme_widgets_init );// Pre-set Widgets$preset_widgets = array ( primary_widget_area => array( search, pages, categories, archives ), secondary_widget_area => array( links, meta ));if ( !isset( $_GET[activated] ) ) { update_option( sidebars_widgets, $preset_widgets );}// update_option( sidebars_widgets, NULL );// Check for static widgets in widget-ready areasfunction is_sidebar_active( $index ){
  • 76. global $wp_registered_sidebars; $widgetcolums = wp_get_sidebars_widgets(); if ($widgetcolums[$index]) return true; return false;} // end is_sidebar_active// Produces an avatar image with the hCard-compliant photo classfunction commenter_link() { $commenter = get_comment_author_link(); if ( ereg( <a[^>]* class=[^>]+>, $commenter ) ) { $commenter = ereg_replace( (<a[^>]* class=["]?), 1url , $commenter ); } else { $commenter = ereg_replace( (<a )/, 1class="url " , $commenter ); } $avatar_email = get_comment_author_email(); $avatar = str_replace( "class=avatar", "class=photo avatar", get_avatar( $avatar_email, 80 ) ); echo $avatar . <span class="fn n"> . $commenter . </span>;} // end commenter_link// Custom callback to list comments in the your-theme stylefunction custom_comments($comment, $args, $depth) { $GLOBALS[comment] = $comment; $GLOBALS[comment_depth] = $depth; ?> <li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>> <div class="comment-author vcard"><?php commenter_link() ?></div> <div class="comment-meta"><?php printf(__(Posted %1$s at %2$s <span class="meta-sep">|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>, your-theme), get_comment_date(), get_comment_time(), #comment- . get_comment_ID() );
  • 77. edit_comment_link(__(Edit, your-theme), <span class="meta-sep">|</span><span class="edit-link">, </span>); ?></div> <?php if ($comment->comment_approved == 0) _e("ttttt<span class=unapproved>Yourcomment is awaiting moderation.</span>n", your-theme) ?> <div class="comment-content"> <?php comment_text() ?> </div> <?php // echo the comment reply link if($args[type] == all || get_comment_type() == comment) : comment_reply_link(array_merge($args, array( reply_text => __(Reply,your-theme), login_text => __(Log in to reply.,your-theme), depth => $depth, before => <div class="comment-reply-link">, after => </div> ))); endif; ?><?php } // end custom_comments// Custom callback to list pingsfunction custom_pings($comment, $args, $depth) { $GLOBALS[comment] = $comment; ?> <li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>> <div class="comment-author"><?php printf(__(By %1$s on %2$s at %3$s, your-theme), get_comment_author_link(), get_comment_date(), get_comment_time() ); edit_comment_link(__(Edit, your-theme), <span class="meta-sep">|</span>
  • 78. <span class="edit-link">, </span>); ?></div> <?php if ($comment->comment_approved == 0) _e(ttttt<span class="unapproved">Yourtrackback is awaiting moderation.</span>n, your-theme) ?> <div class="comment-content"> <?php comment_text() ?> </div><?php } // end custom_pingsHEADER.PHP<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><head profile="http://gmpg.org/xfn/11"> <title><?php if ( is_single() ) { single_post_title(); } elseif ( is_home() || is_front_page() ) { bloginfo(name); print | ; bloginfo(description);get_page_number(); } elseif ( is_page() ) { single_post_title(); } elseif ( is_search() ) { bloginfo(name); print | Search results for . wp_specialchars($s);get_page_number(); } elseif ( is_404() ) { bloginfo(name); print | Not Found; } else { bloginfo(name); wp_title(|); get_page_number(); } ?></title> <meta http-equiv="content-type" content="<?php bloginfo(html_type); ?>; charset=<?phpbloginfo(charset); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo(stylesheet_url); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( comment-reply ); ?> <?php wp_head(); ?> <link rel="alternate" type="application/rss+xml" href="<?php bloginfo(rss2_url); ?>" title="<?phpprintf( __( %s latest posts, your-theme ), wp_specialchars( get_bloginfo(name), 1 ) ); ?>" /> <link rel="alternate" type="application/rss+xml" href="<?php bloginfo(comments_rss2_url) ?>"title="<?php printf( __( %s latest comments, your-theme ), wp_specialchars( get_bloginfo(name), 1 )
  • 79. ); ?>" /> <link rel="pingback" href="<?php bloginfo(pingback_url); ?>" /></head><body <?php body_class(); ?>><div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> <div id="blog-title"><span><a href="<?php bloginfo( url ) ?>/" title="<?php bloginfo(name ) ?>" rel="home"><?php bloginfo( name ) ?></a></span></div><?php if ( is_home() || is_front_page() ) { ?> <h1 id="blog-description"><?php bloginfo( description ) ?></h1><?php } else { ?> <div id="blog-description"><?php bloginfo( description ) ?></div><?php } ?> </div><!-- #branding --> <div id="access"> <div class="skip-link"><a href="#content" title="<?php _e( Skip to content, your-theme ) ?>"><?php _e( Skip to content, your-theme ) ?></a></div> <?php wp_page_menu( sort_column=menu_order ); ?> </div><!-- #access --> </div><!-- #masthead --> </div><!-- #header --> <div id="main">INDEX.PHP<?php get_header(); ?> <div id="container"> <div id="content"><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  • 80. <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-above --><?php } ?><?php /* The Loop — with comments! */ ?><?php while ( have_posts() ) : the_post() ?><?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>><?php /* an h2 title */ ?> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf(__(Permalink to %s, your-theme), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?phpthe_title(); ?></a></h2><?php /* Microformatted, translatable post meta */ ?> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , your-theme);?></span> <span class="author vcard"><a class="url fn n" href="<?php echoget_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __(View all posts by %s, your-theme ), $authordata->display_name ); ?>"><?php the_author();?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , your-theme); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?php the_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!-- .entry-meta --><?php /* The entry content */ ?>
  • 81. <div class="entry-content"><?php the_content( __( Continue reading <span class="meta-nav">»</span>, your-theme ) ); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, your-theme ) . &after=</div>) ?> </div><!-- .entry-content --><?php /* Microformatted category and tag links along with a comments link */ ?> <div class="entry-utility"> <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( Posted in , your-theme ); ?></span><?php echo get_the_category_list(, ); ?></span> <span class="meta-sep"> | </span> <?php the_tags( <span class="tag-links"><span class="entry-utility-prepentry-utility-prep-tag-links"> . __(Tagged , your-theme ) . </span>, ", ", "</span>ntttttt<spanclass="meta-sep">|</span>n" ) ?> <span class="comments-link"><?php comments_popup_link( __( Leave acomment, your-theme ), __( 1 Comment, your-theme ), __( % Comments, your-theme ) )?></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?> </div><!-- #entry-utility --> </div><!-- #post-<?php the_ID(); ?> --><?php /* Close up the post div */ ?><?php endwhile; ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-below --><?php } ?> </div><!-- #content --> </div><!-- #container -->
  • 82. <?php get_sidebar(); ?><?php get_footer(); ?>PAGE.PHP<?php get_header(); ?> <div id="container"> <div id="content"><?php the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h1 class="entry-title"><?php the_title(); ?></h1> <div class="entry-content"><?php the_content(); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, your-theme ) . &after=</div>) ?><?php edit_post_link( __( Edit, your-theme ), <span class="edit-link">, </span> ) ?> </div><!-- .entry-content --> </div><!-- #post-<?php the_ID(); ?> --><?php if ( get_post_custom_values(comments) ) comments_template() // Add a custom field withName and Value of "comments" to enable comments on this page ?> </div><!-- #content --> </div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>SEARCH.PHP<?php get_header(); ?> <div id="container"> <div id="content"><?php if ( have_posts() ) : ?> <h1 class="page-title"><?php _e( Search Results for: , your-theme ); ?><span><?phpthe_search_query(); ?></span></h1><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  • 83. <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-above --><?php } ?><?php while ( have_posts() ) : the_post() ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf(__(Permalink to %s, your-theme), the_title_attribute(echo=0) ); ?>" rel="bookmark"><?phpthe_title(); ?></a></h2><?php if ( $post->post_type == post ) { ?> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , your-theme);?></span> <span class="author vcard"><a class="url fn n" href="<?php echoget_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __(View all posts by %s, your-theme ), $authordata->display_name ); ?>"><?php the_author();?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , your-theme); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?php the_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!-- .entry-meta --><?php } ?> <div class="entry-summary"><?php the_excerpt( __( Continue reading <span class="meta-nav">»</span>, your-theme ) ); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, your-theme ) . &after=</div>) ?>
  • 84. </div><!-- .entry-summary --><?php if ( $post->post_type == post ) { ?> <div class="entry-utility"> <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( Posted in , your-theme ); ?></span><?php echo get_the_category_list(, ); ?></span> <span class="meta-sep"> | </span> <?php the_tags( <span class="tag-links"><span class="entry-utility-prepentry-utility-prep-tag-links"> . __(Tagged , your-theme ) . </span>, ", ", "</span>ntttttt<spanclass="meta-sep">|</span>n" ) ?> <span class="comments-link"><?php comments_popup_link( __( Leave acomment, your-theme ), __( 1 Comment, your-theme ), __( % Comments, your-theme ) )?></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?> </div><!-- #entry-utility --><?php } ?> </div><!-- #post-<?php the_ID(); ?> --><?php endwhile; ?><?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( <span class="meta-nav">«</span> Older posts, your-theme )) ?></div> <div class="nav-next"><?php previous_posts_link(__( Newer posts <spanclass="meta-nav">»</span>, your-theme )) ?></div> </div><!-- #nav-below --><?php } ?><?php else : ?> <div id="post-0" class="post no-results not-found"> <h2 class="entry-title"><?php _e( Nothing Found, your-theme ) ?></h2> <div class="entry-content"> <p><?php _e( Sorry, but nothing matched your search criteria. Please tryagain with some different keywords., your-theme ); ?></p>
  • 85. <?php get_search_form(); ?> </div><!-- .entry-content --> </div><?php endif; ?> </div><!-- #content --> </div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>SIDEBAR.PHP<?php if ( is_sidebar_active(primary_widget_area) ) : ?> <div id="primary" class="widget-area"> <ul class="xoxo"> <?php dynamic_sidebar(primary_widget_area); ?> </ul> </div><!-- #primary .widget-area --><?php endif; ?><?php if ( is_sidebar_active(secondary_widget_area) ) : ?> <div id="secondary" class="widget-area"> <ul class="xoxo"> <?php dynamic_sidebar(secondary_widget_area); ?> </ul> </div><!-- #secondary .widget-area --><?php endif; ?>SINGLE.PHP<?php get_header(); ?> <div id="container"> <div id="content"><?php the_post(); ?>
  • 86. <div id="nav-above" class="navigation"> <div class="nav-previous"><?php previous_post_link( %link, <span class="meta-nav">«</span> %title ) ?></div> <div class="nav-next"><?php next_post_link( %link, %title <span class="meta-nav">»</span> ) ?></div> </div><!-- #nav-above --> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h1 class="entry-title"><?php the_title(); ?></h1> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(By , your-theme);?></span> <span class="author vcard"><a class="url fn n" href="<?php echoget_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __(View all posts by %s, your-theme ), $authordata->display_name ); ?>"><?php the_author();?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(Published , your-theme); ?></span> <span class="entry-date"><abbr class="published" title="<?php the_time(Y-m-dTH:i:sO) ?>"><?php the_time( get_option( date_format ) ); ?></abbr></span> <?php edit_post_link( __( Edit, your-theme ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?> </div><!-- .entry-meta --> <div class="entry-content"><?php the_content(); ?><?php wp_link_pages(before=<div class="page-link"> . __( Pages:, your-theme ) . &after=</div>) ?> </div><!-- .entry-content --> <div class="entry-utility"> <?php printf( __( This entry was posted in %1$s%2$s. Bookmark the <ahref="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here withthe <a href="%5$s" title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feedfor this post</a>., your-theme ), get_the_category_list(, ),
  • 87. get_the_tag_list( __( and tagged , your-theme ), , , ), get_permalink(), the_title_attribute(echo=0), comments_rss() ) ?> <?php if ( (open == $post->comment_status) && (open == $post->ping_status) ) : // Comments andtrackbacks open ?> <?php printf( __( <a class="comment-link" href="#respond" title="Post acomment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s"title="Trackback URL for your post" rel="trackback">Trackback URL</a>., your-theme ),get_trackback_url() ) ?><?php elseif ( !(open == $post->comment_status) && (open == $post->ping_status) ) : // Onlytrackbacks open ?> <?php printf( __( Comments are closed, but you can leave a trackback: <aclass="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">TrackbackURL</a>., your-theme ), get_trackback_url() ) ?><?php elseif ( (open == $post->comment_status) && !(open == $post->ping_status) ) : // Onlycomments open ?> <?php _e( Trackbacks are closed, but you can <a class="comment-link"href="#respond" title="Post a comment">post a comment</a>., your-theme ) ?><?php elseif ( !(open == $post->comment_status) && !(open == $post->ping_status) ) : // Commentsand trackbacks closed ?> <?php _e( Both comments and trackbacks are currently closed., your-theme) ?><?php endif; ?><?php edit_post_link( __( Edit, your-theme ), "nttttt<span class="edit-link">", "</span>" ) ?> </div><!-- .entry-utility --> </div><!-- #post-<?php the_ID(); ?> --> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php previous_post_link( %link, <span class="meta-nav">«</span> %title ) ?></div> <div class="nav-next"><?php next_post_link( %link, %title <span class="meta-nav">»</span> ) ?></div> </div><!-- #nav-below -->
  • 88. <?php comments_template(, true); ?> </div><!-- #content --> </div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>STYLE.CSS/*Theme Name: Your ThemeTheme URI: http://example.com/example/Description: A search engine optimized website framework for WordPress.Author: YouAuthor URI: http://example.com/Version: 1.0.Your theme will be your copyrighted work.Like WordPress, this work is released under GNU General Public License, version 2 (GPL).http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.*//* Reset default browser styles */@import url(styles/reset.css);/* Rebuild default browser styles */@import url(styles/rebuild.css);/* Import a basic layout */@import url(styles/2c-r.css);/* Basic WordPress Styles */@import url(styles/wp.css);body {
  • 89. margin: 1.5em 15%;}/* =Header-------------------------------------------------------------- */#branding { margin: 0 0 1.5em 0;}/* =Menu-------------------------------------------------------------- */#access { margin: 0 0 1.5em 0; overflow: auto;}.skip-link { display: none;}.menu ul { list-style: none; margin: 0;}.menu ul ul { display: none;}.menu li { display: inline;}.menu a { display: block; float: left;}
  • 90. /* =Content-------------------------------------------------------------- */.post { margin: 0 0 3em 0;}.entry-content, .entry-summary { margin: 1.5em 0 0 0;}/* =Navigation -------------------------------------------------------------- */.navigation { margin: 0 0 1.5em 0; overflow: auto;}/* =Widget Areas -------------------------------------------------------------- */.widget-area ul { list-style: none; margin-left: 0;}.widget-area ul ul { list-style: disc; margin-left: 1.1em;}.widget-area ul ul ul { margin-left: 2.5em;}.widget-container { margin: 0 0 1.5em 0;}