O nunca suficientemente amaldiçoado IE 6 não entende uma coisa simples como largura mínima definida no CSS.

Isso é um problema em templates fluídos, já que, conforme o tamanho da tela e a resolução utilizados, o site pode ficar completamente desfigurado.

Explico:

Template fluído ou elástico é aquele que se adapta a qualquer definição utilizada, preenchendo sempre a tela.

Por que é preciso uma largura mínima?

Porque ao exibir imagens, elas não vão se adaptar à qualquer largura, então é interessante definir até onde o template pode encolher.

No Firefox e outros, isso é feito de forma fácil, adicionando o seguinte código ao div em questão:

#div em questão {min-width: 500px;}

Simples assim, quando uma resolução menor é utilizada, essa div vaii manter sempre um mínimo de 500px de largura.

O problema é que o IE 6 não entende isso e não obedece, o mal-criado, literalmente.

Porém, existe uma definição que só ele entende, mas não conta para ninguém. Ela se chama "expression", e resolve definitivamente o problema.

Utilizando o exemplo anterior como base:

#div em questão { width:100%; min-width: 700px; }

#div em questão { width:100%; width: expression( document.body.clientWidth < 701 ? "700px" : "auto" ); min-width:700px; }

Problema resolvido.

Traduzindo o código:

Se o navegador utilizado pelo visitante for o IE, quando o espaço for menor do que 701px, ele definirá 700px fixos.

Qualquer outro navegador vai ignorar esse trecho e ir direto para o final, onde é definido min-width:700px;

De nada .

Quem já editou o CSS de algum tema do WordPress, ou mesmo de qualquer template html, sabe que às vezes se perde horas para resolver detalhes de posicionamento, cor etc.

Depois de quebrar a cabeça inúmeras vezes, acho que é hora de compartilhar um pouco do que aprendi.

Muitos dos problemas de exibição acontecem em função da maneira como diferentes navegadores "rendem" a página.

Antes de mais nada, o melhor mesmo é escolher um tema que funcione perfeitamente nos principais navegadores, leia-se Firefox, IE 6 e IE 7, direto "de fábrica".

Mas, e tem sempre um mas, às vezes o tema é exatamente aquilo que procuramos, e os detalhes a resolver pequenos.

O negócio, então, é por a mão na massa.

Imagens Pisca-Pisca (IE 6)

O título não diz muito, mas é difícil descrever o problema em poucas palavras.

Você já deve ter visto links em barras laterais decorados com imagens que, ao passarmos o mouse, somem e reaparecem. Esse problema é característico do Internet Explorer 6 e pode ser solucionado de uma forma muito simples.

Antes de mais nada, a causa:

O IE 6 recarrega as imagens com link como se fosse uma nova visita à página, por isso o "flickering".

Solução:

No CSS, remova a imagem de background do li a e li a:hover:

li a { color: #cor; background: url (images/imagem.gif); }

li a:hover { color: #cor; background: url (images/imagem.gif); }

Acrescente a imagem ao ul:

ul { list-style: none; list-style-image: url(images/imagem.gif); margin: 0; }

O problema deixa de acontecer porque a imagem passa a ser associada à lista de links, não ao link em si.

Claro que o código vai mudar de tema para tema, esses exemplos são apenas para ajudar na localização.

Imagens Pisca-Pisca 2 (IE 6)

Imagens grandes podem ser muito mais problemáticas na questão do pisca-pisca. Um logo que some e desaparece aumenta até o consumo de banda, já que vai ser recarregado várias vezes.

A solução é semelhante à anterior, talvez apenas um pouco mais difícil de localizar no CSS.

Se seu logo usa uma imagem como background, o código deve ser algo como:

a.logo { display: block; width: 400px; height: 90px; background: url(images/logo.gif) no-repeat; }

Observe se há um outro div que englobe esse, se não for o caso, crie um. O importante é que carregue as mesmas informações do link.

#logo { display: block; width: 400px; height: 90px; background: url(images/logo.gif) no-repeat; }

No header, vai ficar mais ou menos assim:

<div id="logo">

<a href="seublog.com"/><img src="seublog.com/images/logo.gif" class="logo"></a>

</div>

O que foi feito aqui?

A imagem continua associada ao link, já que ela substitui um texto. O que acontece é que, ao envolver o link em um div, sem link, com a mesma imagem de fundo, o problema desaparece, já que há uma imagem fixa no local.

Por que não usar um link comum com imagem?

Na questão do logo, que substitui informações como o nome do blog e descrição, é importante utilizar códigos que ajudem ao máximo no SEO da página. Dê uma lida nesse artigo, que mostra porque um método é melhor que outro.

Cores "Teimosas"

Às vezes você quer que as cores dos links dos títulos, por exemplo, sejam diferentes das cores dos outros links.

À princípio, é fácil mudar, já que a maioria dos temas traz uma tag para isso, geralmente h2 a. Você vai lá, muda e… nada. As cores continuam iguais.

Isso acontece porque o navegador aplica os seletores do CSS em ordem de importância e nem sempre essa é a ordem que você imagina.

No exemplo acima, o navegador está associando ao título as cores definidas em a e a:hover, responsáveis pelos links de modo geral. E ignora o h2 a.

Resolver é simples, localize ou crie você mesmo um código semelhante ao abaixo:

h2 a { color: #cor; text-decoration: none !important; }

h2 a:hover { color: #outra cor; text-decoration:none !important;}

Quando se acrescenta !important ao final do seletor, dizemos ao navegador que aquele código deve ser utilizado em primeiro lugar para aquela tag, no caso, h2 a.

Cada parâmetro que influenciar no caso deve receber o acréscimo, senão não funciona, ou funciona de maneira estranha.

Eu devo ter mais uma dúzia de dicas do tipo, mas encerro por aqui antes que esse post fique maior ainda.

Se você tiver alguma dúvida, use os comentários, no que puder, eu ajudarei.

Semana passada criei coragem e atualizei todos os blogs para a nova versão.

À primeira vista, o painel de controle ficou mais limpo, mas continua com o mesmo problema das outras versões: para quem não está acostumado, pode ser difícil encontrar algumas funções.

Mas a grande mudança se encontra no editor de postagens que, na minha às vezes modesta opinião, mudou para pior.

1. Imagens

O upload de imagens antes permitia que se subisse apenas uma foto de cada vez. Mas isso era facilmente solucionado com plugins simples e leves como o Multi Uploader.

A versão 2.5 promete o múltiplo upload nativo de imagens. Onde? Procurei nos 4 cantos da rede e não encontrei UMA linha sobre como fazer essa bagaça funcionar.

Para piorar, a quantidade de javascript usada torna subir imagens um exercício de paciência.

O ponto positivo é que agora os atributos de altura e largura são aplicados automaticamente.

1.1. Galerias

Agora é possível inserir galerias de imagens automaticamente, com a tag [ gallery ]. Há vários códigos que podem ser utilizados para personalizar a aparência.

Porém, é necessário adaptar o tema para uma exibição satisfatória.

2. Mídia

Permite "embebedar" um vídeo diretamente, sem plugins e sem quebra do layout. Esqueça a função "add video". Tudo que consegui com ela foi adicionar um link para a página em questão.

Utilize a função "embed media", marcada em vermelho na imagem abaixo. Se ela não aparece no seu painel, clique em "kitchen sink", marcada em azul.

Mas antes que você se anime muito, já vou avisando que para mim, ao menos, funcionou apenas com o Youtube.

Não testei a função "adicionar áudio", espero que funcione melhor do que as relacionadas à vídeo.

3. Outras Funções

Com exceção de salvar e publicar, todas as outras opções foram jogadas para a parte inferior do painel de publicação.

Isso gera um trabalho a mais, já que você precisa conferir uma série de fatores, rolando a página, antes de publicar.

O bug que desabilita os comentários sem que você escolha a opção persiste, principalmente quando se edita um post já publicado. É bom conferir sempre se está tudo OK antes de publicar ou salvar o post editado.

4. Widgets

O gerenciamento das widgets da barra lateral piorou, e muito. Antes você podia visualizar todas as sidebars e deslocar os blocos conforme sua vontade.

Agora, é preciso selecionar cada barra de um menu dropdown, remover a widget, salvar, acessar a outra barra do menu, adicionar, salvar etc etc.

Outra mudança infeliz é que widgets de texto não guardam mais a informação depois de removidas, o que só dificulta mais ainda o processo.

Cuidado também ao editá-las, um bug infeliz faz desaparecer o conteúdo quando é visualizado, caso você não clique em "change" e salve as modificações.

Não acontece sempre, mas é deveras irritante.

O único ponto positivo é que agora é possível utilizar um número ilimitado de cada widget, o que não justifica estragar todo o resto.

Conclusões

Melhorou em 2 ou 3 aspectos e piorou no restante. Resta esperar que as questões de segurança tão alardeadas tenham sido mesmo resolvidas.

Esperemos que a versão 2.5.1 saia logo, resolvendo ao menos alguns dos problemas mais críticos.

Alguns plugins para WordPress trazem falhas graves de segurança, que permitem a um hacker mal-intencionado fazer o que bem entender com seu blog.

Hoje à noite, o blog do Leo Baiano foi invadido por um japonês pervertido que alterou o texto da mensagem de boas-vindas, gerada pelo plugin Oi Visitante.

Felizmente, o Jonny fez isso apenas para demonstrar a fragilidade do código. Alguém realmente mal-intencionado poderia fazer miséria.

Cuidado com plugins que pedem modificações nas permissões de seus diretórios, o risco pode ser grande.

Uma maneira de evitar essa situação é não exibir anúncios do Adsense em páginas potencialmente perigosas. Porém, não vale a pena manter no ar uma página bem visitada sem faturar com ela.

Procurando uma maneira simples de resolver isso, fiz uma pequena modificação em um código que o Bruno Alves postou no Br Point:

<?php if (get_post_meta($post->ID,'noadsense',true)!=1) { ?>
Anúncio Adsense
<?php } else { ?>
Anúncio Alternativo
<?php } ?>

Ele permite que você determine em quais posts os anúncios do Adsense não devem ser exibidos. No lugar deles é exibido um anúncio alternativo que você pode escolher em outros programas de afiliados.

Esse código usa os Custom Fields do Wordpress para determinar qual código deve ser inserido na hora em que o post é exibido.

O passo-a-passo:

1. Substitua as linhas em vermelho pelos respectivos códigos dos anúncios.

2. Copie e cole todo o código onde quer que os anúncios sejam exibidos. Se você quiser exibir anúncios diferentes em cada local, crie uma cópia com os códigos desejados.

3. Edite os posts onde não quer que o Adsense seja exibido. No campo Custom Fields do Editor do Wordpress, use noadsense no campo "Key" e 1 no campo "Value". A imagem abaixo mostra como vai ficar. Clique em "Add Custom Field".

4. Salve e observe a diferença. Os posts onde não foi usado o campo continuam exibindo anúncios do Google, os outros passarão a exibir o anúncio escolhido por você no passo 2.

5. Você só precisa criar o campo uma vez, nas próximas, basta clicar em "select" e a opção noadsense estará disponível, daí basta acrescentar o valor 1.

Obs.:

1. Esse código funciona apenas para anúncios exibidos no single.php, já que utiliza dados do post para funcionar. Testei em vários locais, desde o início do "content" até o "post meta" e funcionou perfeitamente.

2. Tenha em mente que se você não vai exibir anúncios do Google em um determinado post, eles não devem aparecer em local algum da página. Não adianta você usar esse código e continuar exibindo anúncios na barra lateral, por exemplo.

Adicionando um pequeno código ao seu tema, são exibidos botões que permitem aos seus leitores enviar seus artigos para o Rec6, Ueba, Dihitt, Linkto e del.icio.us.

O resultado você vê no final desse post. Os botões enviam o link e o título, facilitando a vida do leitor.

Instalação

Descompacte e envie o arquivo socialize.php para a pasta plugins do Wordpress.

Utilize os códigos abaixo onde você quiser exibir os botões. Um bom local é após o conteúdo dos posts, antes dos comentários. Escolha os que quiser exibir, você pode escolher apenas aqueles que se encaixam melhor no perfil do seu site.

Rec6: <?php rec6();?>

Uêba: <?php ueba();?>

Linkto: <?php linkto();?>

Dihitt: <?php dihitt();?>

del.icio.us: <?php delicious();?>

Se você for utilizar o botão do Uêba, é necessário alterar uma pequena parte do código, já que o mesmo usa o nome do blog no envio do artigo. Abra o arquivo socialize.php em um editor de texto e procure pela linha 32. Onde se lê NOME+SEU+SITE, substitua (dahh) pelo nome do seu blog, no mesmo formato utilizando o símbolo + para separar as palavras.

Ative o plugin e está feito.

As imagens utilizadas são as fornecidas pelos sites, se você quiser, pode hospedá-las em seu servidor. Para facilitar, elas estão na mesma pasta do plugin.

Qualquer bug ou problema, deixe um comentário.

Download Socialize

Resolvi a questão com um plugin pequeno e simples de utilizar, apesar de dar algum trabalho quando se tem muitos artigos para modificar.

O Page Links To faz uso daquele campo que você nunca lembra que existe no painel do Wordpress, o Custom Fields.

A parte do plugin é a mais fácil, basta descompactar o arquivo e mandá-lo para a pasta plugins, ativá-lo e era isso.

O procedimento que vou descrever foi utilizado para redirecionar permanentemente (redirect 301) as páginas fixas para artigos na estrutura normal do blog, mas pode ser utilizado com qualquer post, inclusive com endereços externos ao blog.

Crie um post com o mesmo conteúdo da página a ser redirecionada (copie e cole) e publique normalmente, atribuindo categorias, tags e o que mais você utilizar.

Vá até o Painel de Controle, em Manage > Pages, clique em editar na página que deseja redirecionar. Role a página até o campo Custom Fields, clique em + para visualizar, se for o caso.

Ao lado do campo Key, marcado em vermelho, adicione links_to, em Value, marcado em azul, adicione a URL do post que você criou. Clique em Add Custom Field.

Para fazer com que esse redirecionamento seja permanente, adicione agora links_to_type no campo marcado em vermelho e "301", sem as aspas, em Value. Clique novamente em Add Custom Field.

Salve a página e está pronto. Para testar, volte até Manage > Pages e clique em View na página que foi modificada, ela será automaticamente redirecionada para o post que você criou.

Você pode utilizar esse processo para quantas páginas ou posts quiser, as Keys que você criou já estarão disponíveis, bastando selecionar no dropdown do campo Key. Claro que a parte de criar um post para cada página que quiser ver redirecionada não tem como evitar.

A vantagem do redirecionamento 301 é que ele "avisa" aos buscadores, como O Google, que aquela página mudou-se permanentemente de lugar, guiando os bots para o novo endereço, que com o tempo é indexado, substituindo o antigo, que poderá então ser até deletado.

Com o Wordpress Theme Generator você pode criar um desenho exclusivo, sem conhecer uma linha de codificação; pode escolher entre duas ou três colunas, com ou sem imagem no header, cores, layout fixo ou elástico etc etc.

A estrutura resultante é simples, apenas com os arquivos básicos, sem opção de página de postagens individual ou pages diferenciadas, o que pode fazer muita diferença na hora de distribuir os anúncios, mas vale uma olhada, principalmente se você não usa mais do que dois ou três programas de monetização.

Brinquei um pouco com o dispositivo e é possível conseguir um bom resultado em poucos minutos; o preview atualiza automaticamente a cada modificação e é possível esconder a barra de tarefas lateral para ver melhor o resultado.

Pode-se baixar os arquivos em separado ou o pacote completo em um arquivo .zip.

Update: depois de publicar o texto descobri que o Becher também havia escrito a respeito, aqui vai o link.

Paralelo a isso, comecei a acompanhar uma discussão que têm crescido na blogosfera gringa nas últimas semanas, que é intimamente relacionada à questão.

Quem procurou por um tema novo deve ter percebido a crescente leva de "sponsored themes", temas que são patrocinados por sites que desejam ter seu link divulgado e encontram nesse expediente uma maneira barata de aumentar seus pageranks.

Até aí tudo bem, mas a questão vai além. Matt Mullenweg levantou a questão, no Web Log Tools Collection, da prática pouco ética de incluir, além dos links propriamente ditos, geralmente no rodapé, links escondidos e até mesmo anúncios escondidos, difíceis de serem descobertos e eliminados pelos usuários menos experientes.

Também está se tornando comum, e isso eu já vi em vários sites que disponibilizam temas, um anúncio dizendo que é contra os termos da licença Creative Commons remover tais links.

Abaixo uma citação do WTC, sobre essa prática em particular:

This is almost funny, because these themes are on shaky legal ground themselves. WordPress is Free, meaning you’re free to do pretty much anything you like with it. It’s under a license that encourages user freedom called the GPL, which says if you distribute something that links internal functions and data structures of a GPL program (like themes do with WordPress) that also needs to be Free.

Ou seja, Wordpress é um sistema de gerenciamento de conteúdo grátis, e tudo que for criado linkando sua estrutura interna, como os temas, deve ser grátis também. Ninguém tem respaldo legal para obrigar o usuário a manter qualquer link em um tema.

Eu normalmente mantenho o link para o site do criador o tema, em sinal de reconhecimento pelo trabalho, mas removo sem dó nem piedade qualquer link de patrocinador, geralmente sites obscuros que provavelmente nem Deus gosta.

Mas a verdade é que você pode modificar inteiramente qualquer tema que encontrar, remover o que bem entender e, se achar que mudou o suficiente para se transformar em algo completamente diferente do original, pode até lançá-lo como criação sua. Não é ético? Obrigar a manter um link também não é.

Os temas disponíveis na rede nada mais são, e isso é uma conclusão óbvia, do que "peles", criadas em CSS, para uma estrutura pronta. Praticamente tudo que é lançado como novo em termos de funcionalidade, tem a receita prontinha no Codex; e mesmo que não tenha, quem cria para esse sistema deve saber a que licença está sujeito.

Por via das dúvidas, é bom checar com uma lupa todo o código de um tema recém baixado e, na dúvida, descartar.

Alguns criadores são reconhecidos pela qualidade e segurança de seus temas, então às vezes é melhor adaptar algo existente do que pegar aquele tema recém-lançado em sites suspeitos:

Frederick Fahlstad
Thought Mechanics
WPDesigner
Beng Hafner
Gail Villanueva
Solostream Webstudio
Isnaini
Sadish

São temas no geral feitos com cuidado, ao contrário de muitos que tenho visto por aí, feitos às pressas apenas para faturar em cima.

Daí, você pega uma bela imagem, acrescenta o nome do seu blog no Photoshop, com a fonte que sempre sonhou. Então vem o primeiro problema, como se livrar do título que insiste em aparecer?

Você faz uma busca e encontra a resposta, "display: none;" logo abaixo do CSS que define o header. Problema resolvido e você não pensa mais no assunto.

Porém, ah porém, O Google, assim como qualquer site de busca, não vê imagens. Mesmo que você acrescente as tags alt e title, como manda o figurino, seu site nunca será visto da mesma maneira que um utilizando o método tradicional.

Por que isso acontece? Simples, tags alt e title não têm o mesmo peso que o título entre as tags <h1></h1>.

Sem contar os navegadores configurados para não mostrar imagens, navegadores modo texto etc. Poucas pessoas usam esses navegadores, mas Deus gosta de sites que sejam de fácil acesso, leia-se que funcionem em qualquer dispositivo. E "display:none" esconde realmente o que está por trás dele, inclusive dos buscadores.

A melhor maneira de lidar com isso é mostrar tanto a imagem quanto o título original, dentro das tags <h1></h1>.

Mãos a obra:

A primeira coisa é localizar, no CSS do seu blog, o código responsável por gerar o link do título. Ele é mais ou menos assim:

#header h1 a{
text-decoration: none;
color: #006600;
}

Substitua pelo código abaixo:

#header h1 a {
display: block;
width: X% or Xpx;
height: Xpx;
outline: none;
text-indent: -9000px;
text-decoration: none;
background: url(YOUR IMAGE ADRESS) no-repeat left top;
border-bottom: Xpx solid #006000;
}

"Width" pode ser em porcentagem ou píxels, dependendo do seu tema, "height" é a altura da sua imagem;

"border-bottom" é com você, dependendo se quer ou não uma linha abaixo da imagem, remova ou mude a configuração, se for o caso;

O pulo do gato é o "text-indent: -9000px", o que ele faz é dizer ao navegador para jogar seu título para bem longe da página visível, 9000px de distância, para ser mais exato. Porém, e agora o porém é legal, seu site será visto perfeitamente em qualquer navegador e, o que é melhor, pelos mecanismos de busca.