Entretanto, nem sempre existe um plugin pronto para o que precisamos fazer, principalmente quando se trata de algo aparentemente simples, e quando existe a complicação envolvida é muito grande.

Nestes momentos, saber um mínimo de programação e do funcionamento do WordPress ajuda muito.

Eu tinha uma necessidade muito simples, mas que não encontrava em nenhum plugin pronto uma solução aceitável: eu queria produzir “olhos” (acho que assim que se chama, sou um zero à esquerda em tipografia), ou seja, aquelas caixinhas de texto com um trecho do texto principal em destaque. Tem plugin pra isso, mas usando “custom fields”, um horror de entender a mecânica, nem me animei a implementar. Além disso, eu queria que esses olhos fossem conteúdo adicional, complementar ao post, e não um mero destaque de um excerto. Ou seja, eles precisariam aparecer no feed também!

Escolhi resolver o problema utilizando shortcodes do WordPress, na verdade a mesma técnica já descrita em outro artigo de minha autoria: Monetize seus posts antigos no WordPress.

Assim, criei o shortcode que resolvi chamar de infobox, e que tem o seguinte formato.

[infobox]Texto que vai aparecer destacado[/infobox]

Simples, não?

O efeito visual pode ser conferido “ao vivo” na página Como funciona o GPS do Xperia X1, ou pela imagem abaixo (só da parte que interessa).

Para obter o mesmo resultado em seus posts você só tem que inserir o seguinte código no arquivo style.css do seu tema.

.infobox {
float: right;
font-style: italic;
font-face: Arial;
margin: 12px 0 12px 9px;
border-left: 3px solid #c00;
padding-left: 5px;
width: 240px;
width: 35%;
padding: 4px 0 4px 8px;
font-size: 80%;
clear: right;
background-color: #ffffff;
}

E no arquivo functions.php do tema insira o seguinte código (antes do ?>, naturalmente).

// Meus shortcodes
function janio_infobox($atts, $content=''){
  if (!is_singular())
    return "<em>$content</em>";

  $before = "<div class=\"infobox\">";
  $after = "</div>";

  return $before . $content . $after;
}

add_shortcode('infobox', 'janio_infobox');

O código realmente é muito simples e fala por si.

Primeiro criamos a função que vai interpretar o shortcode, e em seguida a registramos no WordPress.

A nossa funçãozinha então recebe o texto que está no shortcode, e verificamos se estamos numa página singular (um post ou uma página no site), pois não queremos correr o risco de bagunçar o layout da página incial, tampouco queremos deixar o feed bagunçado.

Então, se não for uma página singular, o código apenas o envolve numa tag de itálico (poderia ser um blockquote também), ou poderíamos fazer um return “” para fazer o infobox simplesmente sumir.

Caso seja uma página singular, o código cria a tag DIV com a classe CSS infobox, e retorna a tag inteira, com o conteúdo, para que o WP trate o conteúdo normalmente.

Quais os outros usos que você gostaria de ver para os shortcodes do WordPress? Os comentários são seus!

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

Diferencie seu blog usando recursos do próprio WordPress

Instalando e configurando

1. Acesse a sua conta de hospedagem através do FTP. Na raíz do seu WordPress, você precisa criar um diretório (aquele diretório publicável, lembram?) que servirá para armazenar os arquivos em cache. O nome dele necessariamente precisa ser wp-cache. Além disso, você precisa setar as permissões desse diretório para 777.
2. Descompacte os dois arquivos que vieram no arquivo.zip do plugin. Dentro da pasta wp-content/plugins, você vai subir o arquivo 1blogcacher2.0.php. Já o advanced-cache.php ficará um nível de diretório acima, na raíz do wp-content.
3. Agora vamos editar o arquivo config.php, localizado na raíz do WordPress. É necessário acrescentar a linha define(‘WP_CACHE’, true);
4. Agora você vai acessar o WP-Admin do seu blog (área de administração do WordPress), ir na sessão Plugins (extensões) e ativar o recém instalado 1st Blog Cacher. Feito!

Doeu alguma coisa?

Exibindo alterações imediatamente (ou limpando o cache)

No menu Settings do wp-admin, encontraremos uma opção para o plugin que acabamos de instalar. Lá você vai encontrar um resumo das configurações do arquivo advanced-cache.php, que é o arquivo de configuração do plugin. Logo abaixo, os seguintes botões:

Estes dois botões serão muito importantes no caso de você fazer alguma alteração no tema ou num post. Caso não queira experar os 3600 segundos (1h), estipulados por padrão de “fábrica” no arquivo advanced-cache.php e exibidos acima, você clica em “Remove all files” que quando recarregar a página em questão ela estará alterada. Afinal, o cache consiste nisso, em criar uma versão estática daquilo que é dinâmico, como já disse na sequência da série. Então se houver alguma alteração, até que você limpe o cache do seu WordPress, ou aguarde o tempo de expiração dos arquivos, as alterações não serão exibidas.

Exceções

Nem tudo pode entrar no cache. Por isso, também no arquivo advanced-cache.php você poderá setar quais arquivos que você não quer que fiquem “estáticos”. Por exemplo, os arquivos que fazem o feed funcionar, os comentários etc. Por padrão, temos: wp-atom.php, wp-comments-popup.php, wp-commentsrss2.php, wp-links-opml.php, wp-locations.php, wp-rdf.php, wp-rss.php, wp-rss2.php. Se houver necessidade de acrescentar mais algum, o faça com cuidado, pra não colocar algum arquivo errado e o seu cache ficar subutilizado.

E os robôs de busca, verão meu cache?

Outra preocupação dos usuários é se os motores de busca serão insensíveis às atualizações do blog. Não. Assim como há exceções para arquivos do WordPress, o 1st Blog Cache identifica os spiders e os faz ver a versão dinâmica do seu blog. No arquivo de configuração também é possível remover e adicionar strings para rejeitar as aranhas, na opção OBC_REJECTED_USER_AGENTS.

Usando

Como dizem os gaúchos, “feito o carreto!”. Agora é usar e ser feliz com seu blog muito mais rápido e versátil.

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

1st Blog Cacher: Instalando, configurando e usando

O que é cache? Qual sua função?

Diz a Wikipedia: “Uma definição mais simples de cache poderia ser: uma área de armazenamento temporária onde os dados freqüentemente acedidos são armazenados para acesso rápido.” Simples assim, oras. Não vamos complicar o que é simples. Mas vamos procurar entender…

Por quê deixa o blog mais rápido?

Quando você acessa um site estático, ou seja, aquelas páginas desenvolvidas em HTML puro e com algumas imagens adicionadas, ele logo é disponibilizado na sua tela. São arquivos que já estão prontos, não demandam tanto processamento, não precisa ser gerado. Entretanto, quando você acessa um site dinâmico, desenvolvido com tecnologias como PHP, ASP ou JSP, por exemplo, ele precisa consultar um banco de dados que armazena e gerencia as informações que devem ser exibidas naquele instante. É o caso do seu blog: toda vez que alguém entra nele, ele faz várias consultas na sua base de dados para saber quais os posts mais novos, ou quando entrar num post específico, quais os comentários para aqueles posts, tags, categoria, imagens etc.. Estas operações, apesar de invisíveis, consomem recursos da máquina onde seu blog está hospedado, ela precisa processar todas as informações de acordo com aquilo que você solicitou. Isso pode demorar.

Pra isso existe o cache: ele torna estático o que é dinâmico, grosso modo. Quando alguém entra no seu blog e procura aquele seu post famoso por conter fotos da Mulher Melancia, por exemplo, ele processa todas as informações, diz onde estão as imagens, quais são as tags adicionadas, qual categoria ele pertence e gera um arquivo HTML desse resultado e armazena em um diretório específico. Junto com ele, um outro arquivo que funciona como uma chave também é criado. Quando o próximo leitor entrar no seu blog e procurar pelo mesmo post, o sistema de cache verifica se o que ele procura já está gravado e exibe o HTML, texto puro, mais rápido. Poupa tempo do leitor, poupa tempo de processamento do servidor, libera memória para operações mais importantes. O seu visitante fica feliz, você fica feliz, seu administrador fica feliz.

Certo, mas quais são os plugins indicados para fazer cache e como eu faço?

Isso nós vamos ver na sequência dessa pequena série que inicia agora. Assine o fide do Viamão Lotado e acompanhe de camarote!

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

Como deixar seu blog mais rápido com Cache

Já com o WordPress isso não é possível. A gama é infinina: 1, 2, 3 colunas, com ou sem widgets, já otimizados para SEO, com espaços criados pensando em programas de monetização como AdSense, enfim, temas para as mais diversas utilidades.

Entretanto, nem sempre o mais “bonitinho” ou o mais elegante é o que você deva usar. Existem por aí muitos temas que são verdadeiras bombas, e tomar alguns cuidados pode fazer a diferença entre você gastar 10 ou 100gb de transferência mensal, sem contar o fato de ter um blog com difícil carregamento, pesado e pouco prático e usável para o leitor. Personalização é importante, mas muito mais que isso, respeito pelo seu visitante na hora de ele conseguir o conteúdo que precisa é primordial.

Algumas sugestões para escolher um tema:

• Temas com mais de 300kb compactados deveriam carregar uma placa de “fuja enquanto pode”. Um bom tema livre, leve, solto e elegante não deve passar desse tamanho em disco. Do contrário, ele provavelmente traz consigo imagens pesadíssimas que tornarão seu blog muito lento. Nem todo mundo tem banda larga, nem todo mundo tem saco de esperar 1 minuto e meio para seu blog carregar pela primeira vez (verifique o diretório images dele).
• Outros temas, ainda, já trazem alguns plugins pré-instalados, ou seja, para que ele funcione são necessários alguns adicionais de fábrica. A não ser que você esteja instalando um tema estilo revista, tente evitá-los. Não que sejam ruins, mas um BOM tema te permite a personalização de suas funções e os widgets DEVEM ser opção SUA (mais pra frente trataremos deles). Pinduricalhos demais prejudicam o desempenho do blog.
• JavaScript também deve ser evitado. A não ser que seu tema traga alguma função extraordinária que foi justamente o ponto que te fez optar por ele, pense duas vezes antes de instalá-lo. Primeiro porque se você está lendo estas minhas recomendações, provavelmente você não entende de JavaScript. Que diabos está escrito lá? Segundo porque o excesso dessa tecnologia dentro de um tema só também vai te trazer transtornos de performance.

Outra dica muito importante é verificar se o tema está inserido no repositório oficial de temas do WordPress. Assim como acontecem com os plugins, escolhendo um tema revistado a chance de você se incomodar com um deles diminui geometricamente.

Se você precisar de uma sugestão, veja nossa lista de Temas de WordPress para Download.

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

Temas para WordPress: Qual usar?

Muito embora, também acredito que perder tempo demais com o visual do blog é contraproducente. De nada nos adianta apresentar um visual ma-ra-vi-lho-so sem oferecer aquilo que o dito cujo procurar. A não ser que você tenha um blog sobre artesanato artes plásticas e você o utilize como galeria, acredito que um tema deva ser o mais sóbrio possível contendo, sim, uma temática condizente com o contexto, porém leve e sem ofuscar o restante.

O fato é que é que de uma forma ou de outra, seu blog precisa estar muito bem azeitado. Querer fazer temas mirabolantes, com botões coloridinhos piscando e reluzentes, com ferramentas de grande utilidade como traduzir seu texto para o Chinês Tradicional e Javanês para encher linguiça e completar os espaços vagos e acaba repelindo visitante igual mosca.

Nesta série que começa, não trato sobre design, mas da performance de um todo. Quero deixar algumas dicas do que você pode fazer não para deixar seu blog mais limpo somente no âmbito visual, mas quero pegar pesado em cima de fatores que fazem a diferença como por exemlo o tempo que ele leva pra carregar — ou quantos cafés seu leitor toma desde o momento em que ele manda abrí-lo — e do que o torna, de fato, produtivo ou inútil.

E se você acha que eu estou querendo pegar um Viamão Lotado, você acertou em cheio. Parabéns!

Créditos da imagem

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

Série Performance em blogs: você pode melhorá-la

Entretanto, continuava a mensagem de que uma nova versão do WordPress estava disponível pedindo para baixá-la com o link para a mesma. Como tirar essa mensagem chata? Simples:

Procure a pasta wp-includes dentro do seu host e nela o arquivo version.php. A função que faz o painél de administração do blog exibir esse aviso chama este arquivo e nele está o uma chamada para a versão atual do seu WordPress. Como você não atualizou os demais arquivos, incluindo o version.php, é como se o WordPress ainda não estivesse atualizado. Então, basta você alterar a linha 5, onde está:

$wp_version = ’2.3.2′;

altere para:

$wp_version = ’2.3.3′;

Simples assim.

NOTA IMPORTANTE: Não precisaria dizer isso aqui, mas o seguro morreu de velho. Esta função APENAS e tão SOMENTE APENAS retira a mensagem de que necessita uma atualização. Se você não atualizou o seu WordPress, o faça, como toda e qualquer atualização de segurança nova que é disponibilizada.

NOTA IMPORTANTE 2: Não somente neste caso, mas sempre que for alterar um arquivo dentro do seu host, conte sempre com uma cópia de segurança que deve ser feita antes mesmo de qualquer alteração.

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

A new version of WordPress is available! Please update now.

Saiba escolher o formato da imagem

PNG, GIF e, céus, TIFF são excelentes formatos que permitem oferecer poderio gráfico para algum trabalho mais específico. Aqui estamos falando de banda escassa ou racionalizada e de imagens que vão apenas ilustrar e ajudar a transmitir uma idéia. Você não vai ganhar nenhum concurso de photoshopeiro funboy com seu blog, a menos que ele se proponha a isso. Use imagens em formato JPEG que te permite uma compactação maior sem perder tanta qualidade. Uma boa imagem otimizada pode passar de seus absurdos 150kb para otimizados e ecologicamente corretos 20, 25 kilobytes.

O tamanho em pixels da sua imagem precisa condizer com o tamanho do seu blog

Nada de pegar imagens em 1024×728 e sair postando no seu blog. Não preciso lembrar você que nos propusemos a usar imagens somente (e tão somente) para ilustrar e completar idéias para o seu texto. Se não há necessidade de explicar o que você está escrevendo com uma imagem grande em resolução, então elimine aquele link maravilhoso de “clique aqui para ampliar“. Se você economizar no tamanho, economize. O mais importante é o texto, não esqueça disso.

Tenha um bom editor de imagens instalados no seu PC

Um editor de imagens prático e ágil instalado no computador é pré-requisito para qualquer blogueiro que se preze. Você pode se virar com softwares como o Picasa, por exemplo. Mas se tiver a oportunidade, instale um Photoshop, um Fireworks ou até mesmo o simplório Paint Shop Pro.

Ferramentas ONLINE para otimização de imagens

Se você não quiser instalar um software freeware ou quiser economizar numa licença de softwares como Photoshop ou Fireworks, pode usar duas ferramentas online que fazem o serviço parecido:

Online Image Optimizer – Limite de 300kb para “subir” a imagem a ser otimizada e só mexe na “qualidade” da imagem e não nas dimensões dela (o que, vendo abaixo, vai ajudar na otimização).

Image Optimizer .Net – Sem limites de upload e permite fazer o redimensionamento.

Um exemplo prático

Para dar um exemplo prático, achei um blogueiro que reclamou em um post que sua banda no PhotoBucket chegou ao limite. Ele provavelmente não sabe, mas aqui no metablog ele vai ganhar uma consultoria na faixa. Vamos aos fatos.

Como ia dizendo, ele reclamou que sua banda chegou ao limite. Não importa se é no PhotoBucket ou no seu próprio blog que as imagens são hospedadas, se há um limite ele deve otimizar. Mas vendo as suas imagens postadas, notei que quase nenhuma está abaixo dos 100kb. Como já disse na série, o ideal é que uma imagem nunca ultrapasse os 20kb. Uma delas, com 150kb:

Nota: outro erro muito grave que um blogueiro comete ao postar uma foto é não alterar a resolução dela em pixels. Não somente a resolução de pontos por pixels (DPI), mas o tamanho dela, horizontal e vertical. Vemos que a foto original do post dele estava redimensionada para 490px x 328px. Salvando a foto no PC, notei que ela tinha 748px x 500px. Ou seja, ela foi redimensionada para exibição, mas ela carregava o tamanho original.

Salvei a imagem no meu computador, editei no Macromedia Fireworks 8 e exportei em JPG, diminui a qualidade dela e um pouco da resolução para “caber” no post sem sobrar para os lados. Vejam o resultado:

Agora a imagem tem 450px x 301px, com a “qualidade” menor e 10x mais “leve”. O resultado é uma imagem de 16kb.

Fazendo uma pequena continha de matemática básica, na foto original do blog dele, 500 pessoas por dia visualizando aquela foto consumiriam mensalmente um total de banda de 2,15gb. A MINHA imagem otimizada consumiria 0,22gb no mesmo período. Uma economia de mais de 85%.

Exemplo prático usando os serviços online de otimização de imagens

O mesmo resultado de otimização, porém mais rápido, gratuito e online.

Conclusão da série

Usem essas dicas e não terão dores de cabeça com banda no blog. Ou pelo menos não por causa de falta de planejamento.

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

Otimizando imagens: como reduzir o tamanho das imagens

Resta-nos duas opções: a primeira é a mais fácil, usarmos a própria conta de hospedagem para isso. A segunda seria usar um serviço externo, um disco virtual ou um álbum de fotos terceirizado.

Usar a nossa própria banda, ou seja, hospedar nossas imagens no próprio servidor do blog implica em racionalizá-las de modo que elas não nos causem prejuízos ou surpresas desagradáveis.

Usar um serviço terceirizado pode ser a saída se você não quer se preocupar com o tamanho das imagens (o que eu particularmente não aconselho). Alguns desses serviços, ainda, têm APIs públicas que já foram exploradas e desenvolvidas plugins para o WordPress em cima delas a fim de facilitar o trabalho sujo. Cito alguns:

PhotoBucket – Tem limite de banda mensal, limite do tamanho (em pixels, não em kb) das imagens e não limite de armazenamento.

DivShare – Compatível com o DivShare,  sem o limite de pixels e o limite de banda tão precário e ainda possui plugin para WordPress próprio.

Flickr – Serviço muito bom da Yahoo!, mas a conta gratuita tem limite para exibição (interna e externa, pois sua principal função é de rede social) das 200 últimas imagens. Outra limitação é que você só pode subir 100mb por mês. Por 45 reais anuais você consegue uma conta sem qualquer tipo de limitação. Existem alguns plugins para WordPress que facilitam a inserção das imagens.

PicasaWeb – Serviço da Google. A limitação da conta gratuita é de 1gb, dependendo o número de imagens hospedadas apenas o tamanho delas pois quanto menores, mais caberão. Não existe limite de banda nem de uploads mensais. É possível upgrade pago. Também possui plugins disponíveis.

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

Otimizando imagens: sites que hospedam fotos gratuitamente

Essa preocupação se dá por dois motivos:

1. Banda. Quando você contrata um provedor de hospedagem você tem a opção de escolher a quantidade de banda a ser usada por mês, ou seja, quanto o seu blog como um todo vai trafegar de dados pelo link desse provedor. As imagens ganham um peso maior nesta escolha, pois uma imagem só num post é mais “pesada”, geralmente, que um texto com 1000 palavras.
2. Velocidade. Independente se o seu blog for monetizado ou não, quanto mais rápido ele abrir melhor para o visitante e há menor probabilidade de ele cansar dessa navegabilidade pesada e fechá-lo sem mesmo ler algum parágrafo. Mais uma vez as imagens fazem diferença, quanto maiores em tamanho (kbytes) elas forem, mais demorado será o carregamento do seu blog.

Por quê planejar o esquema de imagens antes de começar o blog?

Simples. Digamos que você escolheu um plano de hospedagem básico que permite 2 gigabytes de transferência mensal de dados. Você até então está hospedando as imagens no seu próprio servidor. Sua visitação é baixa, suponhamos que você tenha 500 visitas por dia e suas imagens são pesadas – 150 kbytes, em média. Somente com as imagens, nestas condições, você já ultrapassaria o limite de banda do servidor.

Porque: 150kb (tamanho da imagem) * 500 (visitas diárias) = 75.000kb ou 73,5mb diários. Em um mês, 73,5mb * 30, você chegaria aos absurdos 2.205 megabytes (2,15gb) de banda consumida SOMENTE pelas imagens, sem considerarmos os textos e demais recursos do seu blog.

Mas você já criou as imagens, postou-as e o blog está tendo visitação. Para resolver este problema sem que a saída seja BANCAR financeiramente esta “extravagância”, você teria que pegar imagem por imagem (e aqui supomos que para você ter em média 500 visitantes por dia, você esteja mantendo seu blog há uns 6 meses e isso dá um bocado de posts com outro bocado de imagens) e ajustá-las. Depois desse tempo todo e dessa quantidade estrondosa de imagens uploadeadas no seu blog, você vai preferir, por conta da mão de obra, dobrar o plano e a bola de neve aumenta na próxima crise de banda.

Vai por mim, eu deveria vender este conselho: planeje o seu esquema imagens antes mesmo de escrever o primeiro post.

Mas peraí, o que é um esquema de imagens?

Você não necessariamente precisa hospedá-las no seu próprio blog, existem sistemas gratuitos e pagos que fazem este serviço pra você sem que a banda saia do seu bolso. Mas isso é um assunto que abordarei nos próximos artigos desta série.

Este post foi publicado no blog Viamão Lotado. Se você está lendo a partir de outro local, é bem provável que ele tenha sido plagiado. Por gentileza, nos avise.

Otimizando imagens: a banda e o desempenho agradecem