Crie um Portfolio usando o WordPress

Uma das muitas possibilidades do WordPress é sua utilização como portfolio, principalmente para designers e fotógrafos. Para isso existem diversos temas gratuitos cujo foco principal é a exibição de imagens. Vamos conhecer alguns deles:

Tema Fotofolio | Demo | Download
Fotofolio

Tema Gallery | Demo | Download
tema-portfolio-gallery

Tema Irresistible | Demo | Download
tema-portfolio-irresistible

Tema Linquist | Demo | Download
tema-portfolio-linquist

Tema Monotone | Demo | Download
tema-portfolio-monotone

Tema Sharpfolio | Demo | Download
tema-portfolio-sharpfoliodemo

Tema Viewport | Demo | Download
tema-portfolio-viewport

Tema WPESP | Demo | Download
tema-portfolio-WPESP

Mas como alguns de vocês devem saber, nem tudo são flores e em geral estes tipos de temas são mais complicados para configurar, exigindo configuração de campos personalizados etc e tal. Acompanhando o fórum percebo que muitos novatos tem dificuldade em configurar este tipo de tema. Por isso pensei em escolher um dos temas acima (a princípio seria o Gallery) e criar um passo-a-passo junto com este post. Mas enquanto pesquisava e escrevia tive a idéia de vocês escolherem o tema com o qual deveria criar o tutorial. Sendo assim votem na enquete abaixo no tema de sua preferência e o mais votado terá sua instalação/configuração detalhada minuciosamente na próxima semana, ok?

Qual tema deverá ser o escolhido para elaboração do tutorial?

  • Gallery (35%, 36 Votes)
  • WPESP (30%, 31 Votes)
  • Fotofolio (9%, 9 Votes)
  • Irresistible (8%, 8 Votes)
  • Viewport (8%, 8 Votes)
  • Monotone (1%, 1 Votes)
  • Sharpfolio (1%, 1 Votes)
  • Linquist (8%, 0 Votes)

Total Voters: 104

Loading ... Loading ...

Como Integrar a Busca do Google a um Tema WordPress

Integrar a busca do Google ao WordPress é uma opção bastante interessante por dois motivos. Primeiro, pode render uma grana extra, pois aparece alguns anúncios do Adsense junto com os resultados. Segundo, exibe resultados por relevância utilizando o melhor algoritimo de busca da internet. Diante dos fatos vamos à prática.

O primeiro passo é criar a página no WordPress onde serão exibidos os resultados da pesquisa. Entre na administração do blog, clique em “adicionar nova” página e por enquanto apenas adicione um título, por exemplo Resultados da Pesquisa, e publique a página. O importante neste momento é sabermos qual o permalink dela, provavelmente será algo do tipo www.meublog.com.br/resultados-da-pesquisa, pois será necessário para configurar o Adsense para Pesquisas.

Agora acesse sua conta do adsense para copiar o código do formulário de busca e o código da página de resultado. Faça o login, clique na aba “Configuração do AdSense” e em seguida “AdSense para pesquisas“. Selecione a opção “Apenas os sites que eu selecionar” para o campo “Tipo de pesquisa“, adicione a URL do seu site no campo “Sites selecionados“, escolha as demais opções de acordo com sua preferência e clique em continuar. Na página seguinte escolha o modelo do formulário de busca que melhor se adequa ao seu blog e novamente clique em continuar. Agora você deverá colar a URL da página criada, neste exemplo foi www.meublog.com.br/resultados-da-pesquisa, e colar no campo “Abertura da página de resultados de pesquisa“, configurar a paleta de acordo com as cores do blog e continuar clicando em continuar. Na próxima página ative a opção “Salvar o mecanismo de pesquisa“, dê um nome à pesquisa e clique no botão “Enviar e obter código“. Por último você deverá copiar os dois códigos fornecidos pelo Adsense, um para o formulário de busca e o outra para a página de resultado. Veja abaixo as capturas de tela desta etapa.

Adsense parte 1

Adsense parte 1

[caption id="attachment_1962" align="alignleft" width="100" caption="Adsense parte 2"]Adsense parte 2[/caption]
Adsense parte 3

Adsense parte 3

[caption id="attachment_1964" align="alignleft" width="100" caption="Adsense parte 4"]Adsense parte 4[/caption]
Adsense parte 5

Adsense parte 5


De mãos dos códigos iremos agora substituir o formulário de busca do tema. Para isso basta abrir o arquivo searchform.php, que encontra-se localizado dentro da pasta do tema, e substituir todo o código existente pelo fornecido no Adsense (ver imagem Adsense parte 5 – Código da caixa de pesquisa). Feito isso é hora de adicionar o código da página de resultado (ver imagem Adsense parte 5 – Código dos resultados de pesquisa) na página Resultado da Pesquisa que criamos no início deste tutorial. Lembre-se de mudar para a aba HTML no momento em que for colar o código.

Adicionando o código na página de resultado

Adicionando o código na página de resultado

Pronto!! De agora em diante sempre que alguém fizer uma pesquisa em seu site o Google irá exibir os resultados. Espero que este tutorial seja útil para vocês e que eu arrume mais tempo para escrever no pBlog (o que está parecendo ser uma missão quase impossível). :)

p.s. Recebi esta semana um pendrive da IBM, enviado pela agência Riot, com a plataforma para gerenciamento de projetos IBM Rational. Este software utiliza metodologia de desenvolvimento bem mais simples, chamadas de Ágeis. Para quem trabalha com desenvolvimento de softwares vale a pena conferir, existe inclusive uma versão gratuita com suporte para até 3 usuários, visite www.viagemdosrping.com.br.

Pen drive IBM

Pen drive IBM


Como exibir o número de seguidores do Twitter no blog

Encontrei esta dica no WpRecipes.com e achei interessante compartilhar com vocês, afinal o número de seguidores do Twitter está tão importante quanto o número de assinantes do feed, será??!?!!?! Discussões a parte, se você possui um bom número de seguidores e quiser exibir a quantidade no seu blog, siga os passos:

1. Copie o código abaixo para o arquivo functions.php do seu tema. Caso o arquivo não exista basta criá-lo e copiar o código.

function string_getInsertedString($long_string,$short_string,$is_html=false){
if($short_string>=strlen($long_string))return false;
$insertion_length=strlen($long_string)-strlen($short_string);
for($i=0;$i<strlen($short_string);++$i){
if($long_string[$i]!=$short_string[$i])break;
}
$inserted_string=substr($long_string,$i,$insertion_length);
if($is_html && $inserted_string[$insertion_length-1]=='<'){
$inserted_string='<'.substr($inserted_string,0,$insertion_length-1);
}
return $inserted_string;
}
function DOMElement_getOuterHTML($document,$element){
$html=$document->saveHTML();
$element->parentNode->removeChild($element);
$html2=$document->saveHTML();
return string_getInsertedString($html,$html2,true);
}
function getFollowers($username){
$x = file_get_contents("http://twitter.com/".$username);
$doc = new DomDocument;
@$doc->loadHTML($x);
$ele = $doc->getElementById('follower_count');
$innerHTML=preg_replace('/^<[^>]*>(.*)<[^>]*>$/',"\\1",DOMElement_getOuterHTML($doc,$ele));
return $innerHTML;
}

2. Agora copie o código abaixo substituindo o texto “USERNAME” pelo seu nome de usuário no Twitter e cole-o no seu tema onde desejar, no cabeçalho (header.php), no menu lateral (sidebar.php) ou até mesmo no rodapé (footer.php).

<?php echo getFollowers("USERNAME")." seguidores"; ?>

Simples assim.

Adicione automaticamente conteúdo no editor de posts

Este é uma boa dica para quem sempre adiciona um mesmo conteúdo em todos posts. Por exemplo, se eu tivesse um blog que fizesse análise de produtos e que no final do post eu sempre escrevesse:

  • Modelo: ABC | Fabricante: XYZ | Site: www.xyz.com

Para que este conteúdo sempre seja adicionado ao post quando clicar na opção Adicionar novo post no WordPress, basta incluir o código abaixo dentro do arquivo functions.php do tema em uso.

  1. add_filter( 'default_content', 'my_editor_content' );
  2. function my_editor_content( $content ) {
  3. $content = "Modelo: | Fabricante: | Site: ";
  4. return $content;
  5. }
  6. ?>

Desta forma, sempre que você for escrever um novo post já estará escrito "Modelo: | Fabricante: | Site: ". É claro que existe outras formas automatizadas para realizar tal função, mas não acredito que nenhuma delas seja tão simples como esta.

Personalizando o Prologue

O tema Prologue é totalmente baseado no modelo do Twitter. Desenvolvido pela Automattic, traz o look and feel do mais famoso serviço de microblogging da atualidade para o WordPress de maneira exemplar.

Recentemente, precisei utilizar o Prologue num projeto pessoal, e ao por a mão na massa, senti falta de alguns detalhes. Com um pouco de pesquisa, e alguns plugins e códigos, consegui deixá-lo do jeito que eu queria. E como WordPress é compartilhamento de informações, este post explicará, em detalhes, como turbinar o Prologue.

Minha primeira necessidade era restringir o acesso a pouquíssimas pessoas, todas com poder de publicação. Num primeiro momento, pensei em tascar uma senha no diretório em que o WordPress foi instalado, via servidor. Mas depois, pesquisando um pouco, descobri o plugin Login Configurator. Além de permitir personalizar o formulário de login do sistema, ele consegue restringir a leitura do blog inteiro (ou de partes dele) a membros, ou seja, pessoas cadastradas no WordPress. Exatamente o que eu precisava. O Juarez gravou uma vídeoaula sobre esse plugin; vale a pena assisti-la.

Diretório protegido, chegou a hora de instalar o Prologue. Nesse ponto, nenhuma novidade: a instalação é exatamente idêntica à de qualquer outro tema, e graças à forma como esse tema foi escrito, ele é ready to use, dispensa quaisquer configurações/edições posteriores. Só que, novamente, faltam alguns detalhes relacionados às categorias. Dois, para ser mais exato:

  • Seletor de categorias de posts no formulário da home;
  • Indicação das categorias às quais os posts pertencem, nos mesmos.

O primeiro ponto demanda algum trabalho, pois é preciso editar dois arquivos do tema: index.php. post-form.php e style.css. Felizmente, uma alma caridosa fez o “serviço sujo” de fazer essas modificações e compartilhar o caminho das pedras com o mundo (“WordPress é compartilhamento de informações”, lembrem-se sempre). Para quem manja inglês, a receita de bolo está aqui. Para quem prefere o bom e velho novo português, siga os passos abaixo:

Abra o arquivo post-form.php, e acrescente o código abaixo no local onde deseja inserir o menu dropdown das categorias:


Agora, abra o index.php, vamos trabalhar nele. Identifique a seguinte linha:

$tags = $_POST['tags'];

Imediatamente abaixo dessa, copie a seguinte linha:

$category = $_POST['post_category'];

Ainda no mesmo arquivo, encontre essa linha:

'post_content' => $post_content,

E imediatamente após ela, copie essa:

'post_category' => $category,

Por fim, abra o style.css. No final do arquivo, copie isso:

#postbox select {
font-size: 1.2em;
padding: 2px;
border: 1px solid #c6d9e9;
margin-left: 70px;
}

Pronto, agora temos categorias no formulário da home page. Aproveite que está com o style.css aberto, e aumente um pouquinho a altura da textarea do post. Para tal, basta editar o valor height: 50px; do ID #postbox textarea#posttext. Particularmente, uso 150px nessa área. O resultado final é esse:

Prologue (com categoria).

Prologue (com categoria).

Falta ainda a questão da indicação das categorias nos posts. Por padrão, o Prologue só trabalha com tags, mas não é nada que possa ser mudado.

As alterações abaixo devem ser feitas nos arquivos index.php e single.php. Localize essa parte em ambos:

Substitua-a por essa linha:

Categoria: .

Muito bem! Agora temos categorias e tags indicadas em cada post.

Para finalizar, dois plugins que considero muito úteis nesse tipo de blog/microblog: um que mostra usuários ativos no momento, e outro que lista os últimos comentários.

O plugin que mostra os usuários online no momento é o WP-UserOnline, do Lester Chan. Após ativá-lo e traduzi-lo na área administrativa, o código invocatório que utilizo é o seguinte:

:

Ele retorna a quantidade de membros online, e dá os nomes de cada um.

O outro plugin é o Simple Recent Comments, que mostra os últimos comentários de maneira bem simples, numa lista. Após a ativação, o código invocatório é o seguinte:

Ultimos Comentarios

','

'); } ?>

Traduzindo-o: o número 7 é a quantidade de comentários que aparecerá; o 120, o limite de caracteres de cada comentário; o trecho longo que inclui o título (“Últimos Comentários”), é o que vem antes da lista de comentários, que por sua vez é gerada automaticamente, e depois disso, vem o fechamento do bloco.

Essas dicas deixam o Prologue mais esperto e completo, mas não é nada que chegue perto do P2, nova versão do Prologue em desenvolvimento (veja a demo em ação). Em poucas palavras? Está ficando fenomenal. Dê uma olhada no vídeo demonstrativo liberado pela Automattic:

O anúncio foi feito no início de março, mas até agora o novo tema não foi lançado. Caso queira aguardá-lo, é uma boa pedida. Se a utilização do Prologue é urgente, as modificações mostradas neste post ajudarão bastante.

WordPress usado para fins nãotradicionais (sugestões e exemplos)

Que o WordPress é versátil, não há dúvidas. Mas até onde o poder de adaptação do sistema pode ir? Dois bloggers gringos fizeram sessões pesadas de pesquisa e brainstorms, e compilaram listas interessantíssimas com exemplos, sugestões e dicas de sites nãotradicionais baseados em WordPress:

muita coisa boa, ideias inusitadas e úteis, as quais nem com muito esforço conseguira imaginar. Exemplos? Log de bugs de software, catalogador de CDs, DVDs e outras coisas do tipo, clone do Delicious, só para citar alguns. Há, também, usos nãotradicionais mas, por outro lado, mais ortodoxos, como lista de contatos, wiki e quadro de empregos.

Ótimas listas para iniciar novos projetos ou turbinar os já existentes.