Posts Tagged ‘ tema

Crie um Portfolio usando o WordPress 25 junho 2009 às 10:35 pm por Érico Oliveira

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?

View Results

Loading ... Loading ...

Troque as cores do seu tema Por Érico Oliveira dia 19 de abril de 2009 às 2:50 am | Imprimir este post

Com o plugin Theme Tweaker é possível trocar todas as cores de uma tema sem precisar editar uma única linha de código. Com ele é possível também inverter as cores ou mudar para tons de cinza, tudo isso através de uma página de configuração.

Você poderá visualizar o resultado antes de efetuar as mudanças e caso se arrependa posteriormente é possível voltar as cores originais do tema.

Sua instalação é simples e não necessita de nenhuma configuração. Faça o download, depois envie para a pasta wp-content/plugins no seu servidor e ative-o na página Plugins dentro da administração do WordPress. Feito isso basta acessar a página Configurações/Theme Tweaker e começar a trocar as cores! :)

Mude as cores do seu tema com o plugin Theme Tweaker

Mude as cores do seu tema com o plugin Theme Tweaker


Personalizando o Prologue Por Rodrigo Ghedin dia 01 de abril de 2009 às 4:16 pm | Imprimir este post

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:

<label for="cat">Categories</label> <?php wp_dropdown_categories('hide_empty=0&name=post_category[]'); ?>

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:

<?php the_tags( __( 'Tags: ' ), ', ', ' ' ); ?>

Substitua-a por essa linha:

Categoria: <?php the_category(', ') ?>. <?php the_tags( __( 'Tags:&nbsp;' ), ', ', '.' ); ?>

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:

<?php get_useronline(); ?>: <?php echo get_users_browsing_site(); ?>

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:

<?php if (function_exists('src_simple_recent_comments')) { src_simple_recent_comments(7,120,'<li><h2>Ultimos Comentarios</h2>','</li>'); } ?>

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.

Os temas Revolution Two deixaram de ser gratuitos!!?!?!?! Por Érico Oliveira dia 21 de fevereiro de 2009 às 12:19 pm | Imprimir este post

Em outubro do ano passado publiquei aqui no blog sobre os novos temas, batizados de Revolution Two, que Brian Gardner lançou gratuitamente. Foram 10 belos temas, Code Blue, Code Gray, Code Red, Church, Lifestyle, Charred, Chrome, Black Canvas, Office e TV.

Recentemente notei que vários leitores estavam comentando neste mesmo post sobre dificuldade para fazer o download dos temas, fui averiguar e descobri que simplesmente sumiram, pelo visto o autor não obteve um bom resultado em seu novo modelo de negócios baseado em suporte e resolveu “silenciosamente” não disponibilizar mais os temas. O leitor Eduardo descobriu inclusive que os temas agora se chamam StudioPress e o domínio anterior está sendo redirecionado para este site.

O Brian Gardner possui plenamente o direito de mudar as licenças de uso dos seus temas, mas achei uma sacanagem divulgar que seriam gratuitos, toda a comunidade escrever sobre isso ganhando uma enorme repercussão e agora na surdina retirar os links para download e mudar o nome dos temas. Por isso resolvi fazer campanha para disponibilizar novamente todos os temas Revolution Two (afinal eles são gratuitos) e para isso precisarei da ajuda de todos, pois na época só baixei o tema Church (que já está disponível para download abaixo), enviando os demais temas para qualquer site de armazenamento online, como o MegaUpload, RapidShare ou outro qualquer, e disponibilizando o link nos comentários deste post. Conto com a ajuda de todos!

Tema Revolution Two Church

Tema Revolution Two Church


Download: link1, link2 | Configuração

Framework para temas Wordpress Por Érico Oliveira dia 16 de janeiro de 2009 às 4:23 pm | Imprimir este post

WP Framework

WP Framework

O WP Framework é um tema para WordPress em branco, isto é, possui todos os templates com seus respectivos códigos HTML e tags do WordPress, tudo isso seguindo rigorosamente os padrões adotados pela própria equipe de desenvolvimento do WordPress. A grande vantagem de se utilizar esta framework é o ganho de tempo gerado para elaborar um novo tema, sendo necessário “apenas” a implementação do CSS. Acredito que ajudará muitos os designers!

Fiz o download do framework, abri cada arquivo e posso dizer que fiquei bastante impressionado com o que vi, código limpo, bem estruturado e seguindo os padrões web. Com certeza irei utilizá-lo para criação de um novo tema que pretendo lançar este ano, é uma das metas do pBlog para 2009.

Tradução do Tema Masinop Por Érico Oliveira dia 21 de dezembro de 2008 às 10:14 pm | Imprimir este post

Tema Masinop

Tema Masinop

Hoje eu trago para vocês a tradução do tema Masinop. Utilizei-o no recém criado Blog do Leão do qual participo com vários amigos torcedores do Sport Club do Recife (o projeto ainda está engatinhando, mas o blog já está no online). :)

Conheça algumas características do tema:

  • Duas colunas com largura fixa;
  • HTML e CSS válidos;
  • Menu lateral com abas em ajax;
  • Suporte a widgets;
  • Local para publicidade pré-definido;
  • Compatível com IE, FF, Opera, Flock & Safari;

Demo | Download

Tema para WordPress baseado no Plurk Por Rodrigo Ghedin dia 09 de dezembro de 2008 às 6:51 am | Imprimir este post

Conhece o Plurk? É, talvez, o concorrente mais forte do Twitter na briga dos microblogs. Surgiu na metade do ano (mais ou menos), ganhou alguns users do Twitter, e se consolidou como uma alternativa real e viável. O grande diferencial do Plurk é a apresentação dos updates, numa linha do tempo, e a possibilidade de criar threads, como uma entrada de blog convencional, com respostas diretas dos seus contatos.

Um maluco cara, cujo apelido no Plurk é @kupy, deicidiu que queria o mesmo visual do serviço de microblog em seu blog. Detalhe: blog este movido a WordPress. Mostrando (mais uma vez) o quão nosso sistema de blogs favorito é versátil, ele puxou as mangas pra cima e fez um tema rigorosamente igual ao Plurk, inclusive com a linha do tempo, que no caso, exibe os posts. Muito JavaScript e CSS, e no final, ficou bastante parecido. Confira:

Tema do Plurk para WordPress.

Tema do Plurk para WordPress.

Três detalhes:

  • Fonte azul em fundo preto? Vou te contar…;
  • Momento FAIL! do tema: o box que deveria exibir a última “plurkada” do autor está com problemas técnicos nesse momento;
  • Não, o tema não está disponível para download (ainda).

Via Microblink.

Como configurar um tema estilo magazine Por Érico Oliveira dia 27 de novembro de 2008 às 7:00 am | Imprimir este post

Depois de alguns pedidos resolvi escrever um pequeno tutorial explicando como configurar um tema estilo magazine. Para exemplificar usarei um tema recém lançado, o Revolution Two – Church. É claro que as configurações variam de tema para tema, mas este passo-a-passo ajudará a compreender como funciona a configuração.

O primeiro passo é fazer o download do tema, enviá-lo para a pasta themes do seu servidor e ativá-lo. Notem que junto com os arquivos do tema existe uma pasta chamada plugins, nela estão contidas os plugins Breadcrumb NavXT e Featured Content Gallery, envie-os para a pasta plugins do seu servidor e ative-os.

Agora se você visualizar a página inicial do blog verá que nenhum post é exibido, algo semelhante a imagem abaixo.

Tema Church desconfigurado

Tema Church desconfigurado

Para que tudo funcione como na página de demonstração do tema teremos que configurar muitas coisas. Podemos começar a configurando o SlideShow, para isto o plugin Featured Content Gallery já deve estar ativado. Acesse a página de configuração do plugin, através do menu Configurações na administração do seu WordPress, e preencha os campos da seguinte forma:

  • Gallery Width in Pixels: 590
  • Gallery Height in Pixels: 400
  • Text Overlay Height in Pixels: 100
  • Category Name: Destaques
  • Number of Items to Display: 3

Agora deveremos criar 3 posts na categoria Destaques (claro que você pode alterar a quantidade de posts e o nome da categoria) e em cada post terá um campo personalizado (custom field) cuja chave será articleimg e o valor será a URL da imagem de 590×400 pixels.

Upload da imagem

Copie a URL da imagem

[caption id="attachment_1271" align="alignleft" width="100" caption="Crie um campo personalizado"]Campo personalizado[/caption]
Adicione na categoria Destaques

Crie a categoria Destaques

[caption id="attachment_1277" align="alignleft" width="100" caption="Slideshow funcionando :) "]Slideshow funcionando :)[/caption]

Em seguida iremos configurar as três áreas localizadas logo abaixo do slideshow. Para isso devemos abrir o arquivo home.php do tema e alterar as linhas 28, 58 e 87. Nestas linhas procure pela tag WP_Query(”cat=10&showposts=3″), substitua o valor de cat pelo ID da categoria que será exibido e em showposts escolha o número de posts que serão exibidos desta categoria. Ao lado do conteúdo do post também é possível adicionar um thumbnail e sua configuração é semelhante a imagem do slideshow. Ao criar um post, faça o upload de uam imagem (70×70 pixels), crie um campo personalizado (custom field) cuja chave será thumbnail e o valor será a URL da imagem.

Como saber o ID da categoria

Como saber o ID da categoria

[caption id="attachment_1281" align="alignleft" width="100" caption="Copie a URL do thumbnail"]Copie a URL da imagem[/caption]
Crie um campo personalizado

Crie um campo personalizado

[caption id="attachment_1286" align="alignleft" width="100" caption="Thumbnail adicionado"]Thumbnail adicionado[/caption]

Note que se o post não possuir nenhum campo personalizado chamado thumbnail e este for exibido na página principal, no lugar do thumbnail será exibido uma imagem default (que você poderá trocar substituindo o arquivo thumbnail.png que existe dentro da pasta images do tema).

Por último iremos configurar as áreas pré-estabelecidas para publicidade do tema e como este possui uma página de opções, você verá que é bastante simples a inserção de banners. Na administração do blog, clique no menu Design e em seguida no submenu Revolution Church Options, nesta página insira os códigos da publicidade correspondentes às dimensões descritas ao lado de cada campo. Nesta mesma página ainda é possível informar o FeedBurner ID para que seus leitores possam se cadastrar e receber seus post por email (como acontece aqui no pBlog) e também adicionar um código de vídeo (embedded) para ser exibido na barra lateral.

Tema Church configurado!

Tema configurado!

[caption id="attachment_1289" align="alignright" width="100" caption="Códigos dos banners"]Códigos dos banners[/caption]

Depois que terminei este tutorial foi que me dei conta da dificuldade que os usuários poucos experientes com WordPress sentem ao tentar configurar um tema estilo magazine e a frustração ao ver a demonstração do tema funcionando perfeitamente e não conseguir utilizá-lo no próprio blog. Por isso continuem mandando suas sugestões pelo formulário de contato e suas dúvidas para nosso fórum, pois através deles é que surgem posts como este.