pBlog

Uma das grandes novidades do novíssimo WordPress 2.6 é a opção Turbo. Através dela, o WordPress integra-se com o Gears, projeto da Google que traz para o PC local informações guardadas na Internet. No nosso caso, o Gears atua como um cache local do painel administrativo do WordPress (imagens, arquivos e scripts), agilizando o carregamento de páginas de edição e gerenciamento.

Ativar o Turbo é um procedimento simples, mas por tratar-se de algo novo, é bom ter um tutorial detalhado à mão, que não por acaso, é este que você está lendo :-) . Vamos ao modus operandi?

Primeiramente, clique no link Turbo, no canto superior direito da página de administração do WordPress. Uma janela popup aparecerá no meio da tela, a qual diz que o Gears não está instalado, e pergunta se deseja fazer isso (a instalação) neste momento.

Clique em Install Now, e você será levado ao site oficial do Gears. Clique no botão Install Gears, na tela seguinte marque a caixa de seleção e clique em Agree and Download, espere o download do arquivo GoogleGearsSetup.exe terminar, e então execute-o.

Ao término da instalação, a tela abaixo aparece. Clicando no botão Restart Browser Now, o navegador será fechado e reaberto.

Em tese, devem voltar todas as páginas abertas anteriormente, mas há casos em que isso não funciona. Assim sendo, volte ao painel administrativo do seu blog.

Clique novamente no link Turbo, e agora a tela popup surgirá com uma mensagem diferente:

Desta vez, clique no botão Enable Gears. Um aviso de segurança surgirá; marque a opção I trust this site. Allow it to use Google Gears., e em seguida, clique no botão Allow e a cópia dos arquivos, imagens e scripts começará. Espere-a terminar:

Quando acabar, clique no botão Close, e pronto! :D .

Para testar o poder do Gears/Turbo, faça logoff, feche o navegador, e abra-o novamente. Faça login, e navegue nas áreas do painel administrativo, especialmente na área de postagem. A diferença é notável.

O blog NetTuts escreveu um excelente tutorial explicando passo-a-passo como converter um layout criado no Photoshop em um site HMTL/CSS. Apesar de escrito em inglês, os leitores não terão muita dificuldade de compreensão em virtude da utilização de muitas imagens. O autor ainda disponibilizou para download todos os arquivos utilizados no tutorial.

Abaixo você pode ver o layout utilizado no tutorial.

Vale a pena salvar no Del.icio.us! :)

O WordPress é muito amigável e fácil de usar. Mesmo em inglês, a maioria não sente dificuldade em destrinchar seus recursos, e se vira bem no idioma do Tio Sam - mesmo sem conhecê-lo direito. Mas, do outro lado da moeda, o uso do inglês no painel administrativo do WordPress intimida e até assusta muita gente. Felizmente, é possível traduzir o painel administrativo do sistema para o nosso português (ou qualquer outro idioma suportado). Este texto é um mini-tutorial de como fazer isso, baseado no texto original da Codex.

A primeira coisa é baixar o arquivo de tradução. Na Codex, existem algumas opções, incluindo a oficial. O problema é que ela está desatualizada, já que é para a versão 2.1.3… A mais recente é a do site WebMais, a qual pode ser baixada neste link. Mesmo sendo para a versão 2.3.2, ela funciona perfeitamente na atual (2.3.3).

Descompacte o arquivo pt_BR.mo em qualquer lugar, e acesse o servidor via cliente FTP (recomendo o FileZilla para tal tarefa). Estando lá, acesse a pasta /wp-include/, e dentro dela crie uma nova pasta, chamada /languages. Envie o arquivo pt_BR.mo para a pasta recém-criada. A primeira parte está finalizada.

Na raiz do WordPress, baixe o arquivo wp-config.php. Ele é responsável pelo acesso ao banco de dados, e por isso deve ser manipulado com muito cuidado! Localize a linha 16, esta aqui:

define ('WPLANG', '');

Acrescente, entre as últimas aspas simples, o código pt_BR. Deve ficar assim:

define ('WPLANG', 'pt_BR');

Salve, e envie novamente para o servidor, substituindo o que lá se encontra.

Pronto! Se tudo deu certo, o painel administrativo do seu WordPress estará em português do Brasil, como o meu:

Se por qualquer motivo aparecerem erros, simplesmente edite o arquivo wp-config.php, voltando-o às configurações originais - ou seja, sem o “pt_BR” na linha 16. Mas as chances disso ocorrer são mínimas, afinal, como deu para perceber, o passo-a-passo é simples e sem pegadinhas.

Espero que o tutorial lhes seja útil, e até a próxima!

Bom pessoal, estamos chegando a última parte deste tutorial e conforme prometido anteriormente, vou disponibilizar para download o tema que elaboramos durante todo este tempo. Para quem está chegando agora, é bom dar uma olhada nos posts anteriores deste tutorial, parte I, parte II, parte III e parte IV.

Antes de disponibilizar o tema, gostaria de esclarecer para quem acompanhou todo o tutorial, que fiz algumas modificações nos templates e adicionei mais alguns arquivos ao nosso tema, para que o mesmo ficasse completíssimo.

Os arquivos adicionados foram:

• single.php - arquivo cuja função é exibir um único post. A única diferença para o index.php é a inserção da tag comments_template(), que insere o arquivo comments.php;
• comments.php - tem a função de exibir os comentários e o formulário para comentar no arquivo single.php;
• functions.php - torna o tema compatível com widgets.

Tenho certeza que, quem leu todas as partes do tutorial não terá dificuldades em entender os acréscimos que foram feitos. De qualquer maneira se alguém tiver alguma dúvida basta perguntar. Críticas, sugestões e opiniões são muito bem-vindos.

Espero que este tutorial tenha ajudado vocês a elaborar seus próprios temas, pois esse foi meu principal objetivo ao escrevê-lo. Quem quiser informações mais detalhadas sobre como elaborar um tema pode acessar o Wordpress Codex.

• Download do Tema Mighty - 2 colunas, XHTML/CSS válido, compatível com widget e totalmente em português.

[download]

Na etapa de hoje, falaremos sobre o rodapé do nosso tema e como sempre, recomendo a todos que estão chegando agora a leitura dos posts anteriores deste tutorial, parte I, parte II e parte III.
Na imagem abaixo, como vocês podem ver, está o rodapé do nosso template.

Neste template o rodapé é extremamente simples, mas há temas para o Wordpress que adicionam vários recursos, como é o caso do tema Dark (excelente por sinal).
Voltando ao nosso template, vamos dar uma olhada no código fonte.

1. <div id="footer">
2. <ul>
3. <li id="copyright" >&amp;copy; 2007 Mighty</li>
4. <li id="links" >
5. <ul>
6. <li><a href="http://validator.w3.org/check/referer">XHTML</a> |</li>
7. <li><a href="http://jigsaw.w3.org/css-validator/check/referer" >CSS</a> |</li>
8. <li><a href="http://www.kulor.com/?ref=mighty_template">Design by Kulor</a></li>
9. </ul>
10. </li>
11. </ul>
12. </div>
13. </body>
14. </html>

Como de praxe, agora vamos ver o código com as tags do Wordpress, que deverá ser inserido no arquivo footer.php.

1. <div id="footer">
2. <ul>
3. <li id="copyright">&amp;copy; 2007 <?php bloginfo('name'); ?> |</li>
4. <li>Powered by <a href="http://wordpress.org/">WordPress</a> |</li>
5. <li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
6. <li id="links">
7. <ul>
8. <li><a href="http://validator.w3.org/check/referer" >XHTML</a> |</li>
9. <li><a href="http://jigsaw.w3.org/css-validator/check/referer" >CSS</a> |</li>
10. <li><a href="http://www.kulor.com/?ref=mighty_template" >Design by Kulor</a></li>
11. </ul>
12. </li>
13. </ul>
14. </div>
15. <?php wp_footer(); ?>
16. </body>
17. </html>

Como vocês puderam observar, de fato nosso rodapé é muito simples e apenas algumas tags foram inseridas. Vamos explicá-las:

• bloginfo(’name’) - nome do blog;
• bloginfo(’rss2_url’) - link para o feed RSS;
• wp_footer() - é uma tag especial que permite certos plugins inserir códigos no rodapé de seu tema. Quando esta tag não é inserida vários plugins deixam de funcionar, então não esqueça de colocá-la em todos os seus temas.

Terminamos assim mais uma etapa de nosso tutorial e para a próxima, e última parte, teremos o tema completo para download e as considerações finais. Até a próxima.

Pessoal, não esqueci do nosso tutorial, apenas andei sem tempo nas últimas semanas. Para quem está chegando agora, recomendo a leitura da Parte I e Parte II do tutorial. Na primeira parte do tutorial expliquei como funciona um tema WordPress em linhas gerais e sobre os arquivos screenshot.png, style.css e header.php. Na segunda parte expliquei sobre o corpo principal do tema, o index.php. E agora vocês verão como funciona o menu lateral com o arquivo sidebar.php
Na imagem ao lado vocês estão vendo o menu lateral e nele nos temos o formulário de busca, as listas de categorias, arquivo e blogroll. Todas essas listas são geradas automaticamente pelo WordPress, desta forma sempre que você cria uma nova categoria, por exemplo, ela é exibida no menu lateral sem precisar editar arquivo algum.
Primeiro vejamos o código HTML do menu lateral.

1. <div id="secondaryContent">
2. <form action="">
3. <p><input /> <button>procurar</button></p>
4. </form>
5. <h3>Categorias</h3>
6. <ul>
7. <li><a href="#">Sed eros</a></li>
8. <li><a href="#">Condimentum</a></li>
9. <li><a href="#">Feugiat sit</a></li>
10. </ul>
11. <h3>Arquivos</h3>
12. <ul>
13. <li><a href="#">Julho 2007</a></li>
14. <li><a href="#">Junho 2007</a></li>
15. </ul>
16. <h3>Blogroll</h3>
17. <ul>
18. <li><a href="#">Sed eros</a></li>
19. <li><a href="#">Condimentum</a></li>
20. <li><a href="#">Feugiat sit</a></li>
21. </ul>
22. </div>

Agora vamos inserir as tags do WordPress e ver como fica o código do template.

1. <div id="secondaryContent">
2. <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
3. <p><input type="text" name="s" id="s" /><input type="submit" value="Procurar" /></p>
4. </form>
5. <h3>Categorias</h3>
6. <ul>
7. <?php wp_list_categories('show_count=1'); ?>
8. </ul>
9. <h3>Arquivos</h3>
10. <ul>
11. <?php wp_get_archives('type=monthly'); ?>
12. </ul>
13. <h3>Blogroll</h3>
14. <ul>
15. <?php get_links(2, '<li>', '</li>', '', '', 'name'); ?>
16. </ul>
17. </div>

Visto o código com as tags inseridas mostraremos agora o significado de cada uma. Antes porém, é importante explicar que o formulário de busca segue um padrão, e por isto, basta copiar e colar o código na sua template.

• bloginfo(’home’) - insere a URL inicial do blog;
• wp_list_categories(’show_count=1′); - exibe uma lista com todas as categorias com o número de posts existentes em cada categoria;
• wp_get_archives(’type=monthly’) - lista todos os meses do ano em que foram inseridos posts. Se você escreveu 7 posts no mês de maio de 2007, por exemplo, será exibido um link “maio/2007″ que ao ser clicado exibirá todos os 7 posts que você escreveu;
• get_links(2, ‘<li>’, ‘</li>’, ”, ”, ‘name’) - lista todos os links da categoria 2 (no caso blogroll), inserindo antes a tag “<li>”, depois a tag </li> e exibindo o nome do link.

Assim, concluimos mais uma parte de nosso tutorial. Na próxima etapa veremos o rodapé.

Na primeira parte do tutorial expliquei como funciona um tema WordPress em linhas gerais e sobre os arquivos screenshot.png, style.css e header.php. Nesta segunda parte explicarei sobre o corpo principal do tema, o index.php.

Como vocês podem ver na imagem do corpo principal, este trecho está dividido em cinco partes bem distintas, são elas: o título do post, o conteúdo do post, o link para comentar, o autor e a data. Este é o conteúdo que irá se repetir até que não tenha mais posts ou o número de posts configurado para ser exibido na página principal seja alcançado. Esse é o famoso Loop do WordPress.

Vamos dar uma olhada no código HTML do template referente a este trecho.

1. <div id="container">
2. <div id="primaryContent">
3. <h2>Website Kulor on top yet again website Kulor on top yet again</h2>
4. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce condimentum nibh. Sed eros tellus, <strong>semper</strong> vel, dignissim at, feugiat sit amet, leo.</p>
5. <div id="comments">
6. <dl id="status">
7. <dt>Comments (1)</dt>
8. <dd>| <a href="#">Add comment</a></dd>
9. </dl>
10. <dl class="comment">
11. <dt><a href="#">John Doe</a></dt>
12. <dd class="date">on Wed 5 Aug 06</dd>
13. </dl>
14. </div>
15. </div>

E como fica o código com as tags do WordPress.

1. <?php get_header(); ?>
2. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
3. <div id="container">
4. <div id="primaryContent">
5. <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
6. <p><?php the_content(); ?></p>
7. <div id="comments">
8. <dl id="status">
9. <dt><a href="<?php the_permalink(); ?>"><?php comments_number('Nenhum coment&amp;aacute;rio', 'Um coment&amp;aacute;rio', '% coment&amp;aacute;rios' );?></a></dt>
10. </dl>
11. <dl class="comment">
12. <dt><?php the_author(); ?></dt>
13. <dd class="date">dia <?php the_time('j de F de Y'); ?></dd>
14. </dl>
15. <?php endwhile; else: ?>
16. <p><?php _e('Nenhum post encontrado.'); ?></p>
17. <?php endif; ?>
18. <?php posts_nav_link(' &amp;#8212; ', __('&amp;laquo; P&amp;aacute;gina anterior'), __('Pr&amp;oacute;xima p&amp;aacute;gina &amp;raquo;')); ?>
19. </div>
20. </div>
21. <?php get_sidebar(); ?>
22. <?php get_footer(); ?>

Agora o que significa cada uma dessas tags. Antes é importante esclarecer que o index.php é o arquivo base do tema e é por isso que nós vamos inserir nele os demais arquivos do tema, como o cabeçalho, o menu e o rodapé. Vamos lá.

• get_header() - insere o código do header.php, isto é, o cabeçalho do tema;
• if (have_posts()) : while (have_posts()) : the_post() - aqui na verdade nós temos três funções e elas é que dão início ao LOOP. A primeira tag verifica se há posts, a segunda solicita que, enquanto existir post continue no loop e a terceira “pega” todas as informações do post, como o título, conteúdo, data, autor, etc. É comum encontrar tags que só funcionam dentro do loop, isto quer dizer que a tag só irá retornar algum valor se estiver inserida após estas funções e antes de endwhile; e endif;, que terminam o loop.
• the_permalink() - o link do post;
• the_title() - o título do post;
• the_content() - o conteúdo do post;
• comments_number() - insere o número de comentários feitos no post. Além disso adiciona um texto dependendo da quantidade de comentários. Se não houver comentários a tag irá inserir o texto “Nenhum comentário”, se tiver apenas um comentário, irá inserir “Um comentário” e para mais de um comentário irá inserir “N comentários”, onde N é a quantidade de comentários, claro;
• the_author() - o autor do post;
• the_time() - a data em que o post foi postado;
• endwhile; else: - encerra o loop e adiciona a condicional que, se não houver nenhum post insira o conteúdo abaixo;
• _e(’Nenhum post encontrado.’) - este é conteúdo que irá ser inserido caso não exista nenhum post;
• endif; - termina a condicional que verifica se há posts;
• posts_nav_link() - adiciona links de navegação, “próxima página” e “página anterior”;
• get_sidebar() - insere o menu lateral, que veremos na próxima etapa do tutorial;
• get_footer() - e por último, mas não menos importante, insere o rodapé.

Pronto, mais uma parte do nosso tutorial concluída. Até a próxima!