Mais uma vez surge uma necessidade ao escrever artigos para este blog e resolvi compartilhar com vocês.

Eu uso o plugin SyntaxHighlighter Evolved para dar colorido aos códigos postados neste blog mas estava tendo um problema com o tema que estou usando. O tema coloca o atributo box-shadow no css para a tag <code> que também é usada pelo SyntaxHighlighter e dai já viu a bagunça.

A correção é simples: editar o css do SyntaxHighlighter Evolved e colocar box-shadow: none; para a tag <code>.

Até ai tudo bem. Tranquilo. Só que é uma mudança rápida e simples e eu não queria ter que abrir um programa de ftp, baixar o arquivo, alterar e enviar novamente. Para pequenas alterações em arquivos assim é bem prático ter um gerenciador de arquivos web a mão.

Na minha época do Joomla eu usava o eXtplorer, um ótimo gerenciador de arquivos escrito em PHP com frontend em ExtJS. Temos um post dedicado exclusivamente a ele:

Procurando mais alternativas encontrei um plugin chamado wp-FileManagerque só de olhar o screenshot já me fez recusá-lo. Me desculpem o preconceito mas a minha experiência diz que, salvo excessões, programas com interface “tosca” como a deste plugin, não são atualizados com frequência ou é muito amador.

wp-FileManager, você instalaria?

elFinder
Despois de descartar o wp-FileManager, sem ao menos instalar ele para testar, finalmente encontrei um ótimo substituto ao eXtplorer. O elFinder inclusive possui praticamente as mesmas features do outro, que são:

Alguns Screenshots

Visão de Ícones

Visão de Lista

Upload de arquivos

Redimensionamento de imagens

Preview de arquivo

Edição de arquivo de texto

Menu de contexto

Os arquivos de localização do WordPress utilizam o GetText, uma biblioteca do projeto GNU para fazer internacionalização de software. Os arquivos do GetText tem a extensão .po e .mo.

Para editar estes arquivos é necessário um editor especial. Existem alguns editores para este tipo de arquivo. O GTed é um plugin do Eclipse e me parece ser muito completo apesar de que não o conheço.

Para este tutorial vamos usar o Poedit, um pequeno editor dedicado para este fim. Existem versões para MAC OS X, Windows e Linux. Caso você não use linux faça o download do editor no site: http://www.poedit.net.

Caso use Linux execute os seguintes comandos no shell:

$ sudo apt-get update
$ sudo apt-get install poedit
$ poedit

O último comando abrirá o poedit:

Internacionalização usando o Poedit

wp-content/themes/twentyeleven/languages/pt_BR.po.

Leve em consideração que o twentyeleven é o nome do template que estou usando e que ele já vem em português.

Após encontrado o arquivo crie uma cópia do mesmo renomeando usando o código da língua e pais da tradução. Para português brasileiro pt_BR, para português de portugual pt_PT, para inglês, en_US.

Abra o arquivo que você criou com o poedit e agora é só traduzir. A coluna original string está a string na sua versão original que também é exibida na primeira caixa de texto abaixo da tabela. Na segunda coluna da tabela estão as strings traduzidas que você insere na caixa de texto mais abaixo da tela.

Depois é só salvar e pronto!

Configurações Gerais do WordPress.

Após a alteração o site apareceu corretamente mas as imagens nos posts não. Procurando na internet verifiquei que é uma característica do WordPress para SEO e facilitar a vida de alguns plugins. O problema que veja é imagine se um dia eu resolver mudar de domínio? Imagina o problema que seria depois de anos de publicação ter que alterar todos os posts? Bom é isso mesmo que teremos que fazer mas de uma forma mais facil: rodando um pequeno comando sql no banco do WordPress.

Você pode abrir o phpMyAdmin, o MySQL Workbench ou via linha de comando. Execute a seguinte sentença SQL:

update wp_posts set post_content = replace(post_content,'','')

É isso!

Inserir imagem em post do wordpress

Estava eu aqui escrevendo um post no blog e ao inserir uma imagem o wordpress, assim como outros CMS, me pediu um título e um texto alternativo para a imagem. No caso o título será preenchido no atributo title e texto alternativo no atributo alt. Como quero deixar o blog o mais correto e “search engine friendly” possível fui pesquisar qual a diferença entre title e alt em uma tag do html.

Eu já tinha lido sobre o assunto e sabia que uma delas era para descrever a imagem para pessoas com deficiência visual, mas não tinha certeza qual e se realmente era isso. Por isso pesquisei e respondo aqui. Na verdade a coisa é um pouco mais complexa como explico abaixo:

Confesso que nos meus tempos de Joomla sempre preenchi o mesmo valor para ambos. Acho até que alguns editores html wysiwyg (what you see is what you get), ou seja, editores visuais, já preenchiam automaticamente title e alt iguais. Isso obviamente quando não se tinha tanta preocupação com web standards como se tem hoje.

Uma imagem sem o atributo alt

O atributo title deve fornecer uma informação adicional e seguir as regras de um titulo comum: ser relevante, curto, de facil memorização e conciso. O título “Download do Linux Mint Debian Edition” é exibido na maioria dos browsers como uma “tooltip” quando você passa o mouse sobre a imagem.

Já o atributo alt serve para ser uma informação alternativa ou substituta que é renderizado quando o elemento html, ao qual é aplicado, não é renderizado. Isto pode ocorrer tanto para pessoas que escolheram desabilitar as imagens no seu browser ou para outros “user agents” ou navegadores que simplesmente não podem ver as imagens. Um exemplo é um “leitor de tela” ou “screen reader”, um software que lê o conteúdo de uma página web para pessoas com deficiência visual.

Imagem com atributo alt

Equívocos Comuns

O atributo alt nem sempre tem que descrever literalmente os conteúdos de uma imagem. Tenha em mente o que deve ser útil para uma pessoa que não pode ver a imagem. O atributo alt deve ser uma alternativa à imagem, normalmente exprimindo seu propósito. Por exemplo, uma imagem de um sinal de alerta não deveria ter como texto alternativo “um triângulo com fundo amarelo, bordas pretas e um ponto de exclamação no centro”, mas simplesmente “Alerta!”.

O Internet Explorer 7 (sempre o ie) e browsers mais antigos renderizavam o atributo alt como uma tooltip o que levou muitos desenvolvedores web usarem o alt quando queriam exibir tooltips contendo informações adicionais a imagem (por isso o meu erro em preencher sempre o alt e o title com a mesma informação). O Internet Explorer 8 corrigiu este erro.

O atributo alt é frequentemente chamado incorretamente de “alt tag”.

Imagem com atributo title