Na versão 4.2 do WordPress foi adicionado o suporte a emojis e sem a opção de desligá-lo, o que causou uma boa chiadeira na comunidade. Obviamente já apareceu um plugin que se propõe a remover o maldito suporte, até que não ser oficializada uma opção de desligar essa droga facilmente pela própria interface administrativa.

O plugin, de fato consegue desregistrar o código css dos emoji, que é o trecho de código abaixo:

<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>

Porem, ainda removendo essa formatação, resta um bug, pois contrariando a boa prática fizeram o favor de inserir uma regra de formatação diretamente no código (css inline, hardcoded) :

<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />

Note o height e max-height direto no código, e o resultado patético é este, mesmo com o plugin instalado:

Como pode se ver, os emoticons são redimensionados para a altura de 1 linha de texto, o que é ruim, principalmente com o set de emoticons que uso, o kolobok.

Então, como resolver este problema de formatação inline? Vamos usar a declaração !important na folha de estilos do tema, que pelas regras do CSS, vai passar por cima de qualquer outra formatação definida inline.

Pra isso, basta adicionar este pequeno trecho de código em seu arquivo de estilo de seu tema (geralmente style.css):

img.wp-smiley {
  border-width: 0px !important;
  vertical-align: -5px !important;
  height: inherit !important;
  max-height: inherit !important;
}

O resultado será este:

Os parametros border-width e vertical-align são opcionais e podem ser removidos, a função deles é de centralizar o emoticon a linha de texto, logo esse valor também pode ser alterado para se adequar ao tamanho de seu texto.

Lembrando que você deve instalar o plugin que desabilita o suporte aos emoji, e aplicar o patch CSS acima no style.css de seu tema.

O Jefferson fez este post com um script (que ele encontrou) que ajuda a matar uma boa parte do SPAM no WordPress.

Porem como o próprio Jefferson notou, ele tem uma falha que confunde palavras, como o bem citado exemplo dele, onde “especialista” é confundido com “cialis”.

Nisso resolvi dar uma ajeitada no script de forma que ele não confunda mais as palavras, fazendo o uso de expressões regulares para “pescar” somente as frases (ou blocos) exatos dentro do texto do comentário.

O novo código ficou assim:

//Acrescente isso no final de functions.php (é um arquivo do tema, não do wordpress)
//pode ser imediatamente antes da linha final com um "?>".

function in_comment_post_like($string, $array) {
      foreach ( $array as $key => $value ) {
          if (preg_match("/\b".$value."\b/i", $string)) { return true; }
      }
      return false;
}

function drop_bad_comments() {
    if (!empty($_POST['comment'])) {
        $post_comment_content = $_POST['comment'];
        $lower_case_comment = strtolower($_POST['comment']);

        // Lista de palavras banidas.
        // Comentários com essas palavras serão automaticamente deletados
        // e quem postou, se não for um bot, verá um alerta.
        // Mas caso seja um bot, receberá o erro http 503.

        // Coloque somente palavras na lista, não coloque símbolos como: [ { ( *

        $bad_comment_content = array(
            'viagra',
            'hydrocodone',
            'xanax',
            'tramadol',
            'lorazepam',
            'adderall',
            'dexadrine',
            'no prescription',
            'oxycontin',
            'without a prescription',
            'sex pics',
            'family incest',
            'online casinos',
            'online dating',
            'cialis',
            'amoxicillin',
            'ecadastro.com.br',
            'seomaster.com',
            'divulgaemail.com',
            'listadeemails.com',
            'casaemail.com.br',
            'acertemail.com',
            'maladiretasegmentada.com.br',
            'busquemail.com.br',
            'boliche.com.br',
            'kitsucesso.com',
            'emailsvip.com.br',
            'kitdeemail.com',
            'rocket attacks',
            'blue spoon'
        );

        if (in_comment_post_like($lower_case_comment, $bad_comment_content)) {
            wp_die( __('<b>Seu comentário contém palavras ou expressões banidas.</b><br><br><i>'.$post_comment_content.'</i>'),('Erro'),array( 'response' => 503, 'back_link' => true ) );
        }
    }
}

add_action('init', 'drop_bad_comments');

Isto deve ser adicionado dentro do arquivo functions.php do seu tema. Com isso, a lista de palavras presentes no array será verificada uma a uma com o conteúdo do comentário e caso uma delas esteja presente, o comentário é automaticamente bloqueado e não é postado.

De quebra, adicionei para o script já enviar um header http com erro para os robots, já dando um legitimo chute na bunda deles, se e quando é claro, eles lerem o header http.

Tenho planos de transformar esse script em um plugin, que poderá ser instalado facilmente no WordPress, e o banco de palavras ficará armazenado no mysql, e com isso não será mais necessário editar diretamente o código para inserir novas palavras, isso será feito diretamente pela pagina de configuração do plugin.

Edit: Existe um pequeno conflito com a mensagem de alerta quando usado o plugin AEC (Ajax Edit Comments) e a função wp_die. Quando é postado o primeiro comentário e existir uma palavra proibida, a mensagem é exibida corretamente. Porem quando for o segundo comentário ou posteriores, a mensagem será exibida em um popup do tipo alert (javascript) e neste caso a formatação do texto será perdida, melhor dizendo, será impressa na mensagem as tags html.

Por mim esta de bom tamanho, posso conviver com isso, visto que essa mensagem de erro só deverá se vista por spammer mesmo.

E estou tentado a desligar o reCaptcha, só pra ver o que acontece.

Ou… traduzindo, Quinquilharia personalizada que pega o numero de assinantes do FeedBurner e pendura em algum lugar no seu blog, sem ser aquela coisinha horrível já disponibilizada pelo próprio FeedBurner.

O lugar onde prestei atenção nesse tipo de GadGet foi no Blog do Jefferson Ryan. Perguntei a ele se aquilo era algum plugin do WordPress, e a resposta foi que era uma solução própria.

Como eu sou daqueles que até certo ponto gosta de bater testa e arrumar as próprias soluções, fui a caça de como fazer isso funcionar.

Bom, primeiramente, você precisa usar o FeedBurner para publicar os feeds do seu blog. Pra isso eu recomendo o plugin FD Feedburner Plugin. Tendo ele instalado, crie seus feeds de postagens e comentários no FeedBurner, e adicione as urls do FeedBurner no plugin. Salve e pronto. A partir de agora, seu blog estará usando o FeedBurner como publicador de seus feeds e não aquela coisinha pobre original do WordPress. O FeedBurner é legal porque te dá várias estatísticas interessantes, além, claro de lhe mostrar quantos assinantes você tem em seus Feeds.

Com os feeds prontos, você precisa ativar o Publicize. Entre em sua conta no FeedBurner, clique sobre o nome de seu feed, na tela que vai abrir clique em Publicize e no menu lateral que vai abrir, clique em FeedCount. Ative esta opção. Não precisa se preocupar com estilo, cor, etc… não usaremos nada daquilo.

Feito isso para o Feed de postagens e comentários, vamos a parte “home made”.

Primeiramente edite o arquivo functions.php de seu tema e adicione a seguinte função:

function show_count($feedname) {
  $url = "http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$feedname;

  $ch = curl_init();

  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_URL, $url);

  $data = curl_exec($ch);

  curl_close($ch);

  $xml = new SimpleXMLElement($data);
  $count = $xml->feed->entry['circulation'];

  return $count;
}

Peguei esta função acima pronta no google. Tem tantas ocorrências pra este código que fica difícil saber quem é o seu autor.

Salve seu arquivo functions.php

Agora edite seu arquivo style.css de seu tema e adicione o seguinte código CSS:

/* FeedBurner WidGet */

#fb {
  width: 185px;
  height: 64px;
  background-color: #191919;
  border: solid 1px #292929;
}

#fbtxt {
  height: 64px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  color: #CCC;
  display: table-cell;
  vertical-align:middle;
  text-align: center;
}

#fbimg {
  float: left;
  margin: 3px 5px 3px 3px;
}

#fbcount {
  color: #FF7F3F;
  font-weight: bold;
}

Salve seu arquivo style.css e estamos quase no final.

Agora acrescente o seguinte código no arquivo sidebar.php ou onde melhor convier:

<div id="fb">
  <img id="fbimg" border="0" src="<?php bloginfo('template_directory'); ?>/images/feed_readers.gif" width="60" height="59" />
  <div id="fbtxt">Leitores assinando:<br />
    postagens: <span id="fbcount"><?php echo show_count(my_posts_feed); ?></span><br />
    comentários: <span id="fbcount"><?php echo show_count(my_comments_feed); ?></span>
  </div>
</div>

Antes de salvar o código, altere my_posts_feed para o nome de seu feed de postagens (o nome que escolheu para seu feed) e my_comments_feed para o nome de seu feed de comentários.

Escolha uma imagem para usar com seu GadGet. O tamanho máximo fica a seu critério.  Uma boa pedida na minha opinião é um ícone de 60 x 60 pixels. Pode usar inclusive o ícone clássico do Feed, tem ele aos montes no google imagens.

O nome da imagem é o “feed_readers.gif” que esta na segunda linha do código acima. A imagem deve ficar na pasta images de seu tema.

Agora é só salvar o código e pronto.

O WidGet já deverá funcionar. E claro, obviamente você pode e deve alterar as cores no código do CSS para compatibilizar com seu tema.

[ Ouvindo: ‘Tom Tom Club – Under The Boardwalk (1981)‘ ]

Usando um calendário com CARA de calendário!

Depois de muito apanhar com a função get_calendar(); do WordPress, consegui chegar muito perto do que eu queria.

Veja na imagem ao lado como era o  calendário interno do WordPress antes e depois do banho de CSS.

O difícil foi apurar os parâmetros do CSS!   Foi preciso muito hack em alguns temas prontos do WordPress pra entender como a coisa era feita, e uma boa estudada em algumas técnicas que eu nunca tinha usado em CSS.

Bom, inicialmente, você precisa entender como funciona a função get_calendar();

Ela aceita unicamente um parâmetro: False ou True

Este parâmetro dita como ele vai exibir os dias da semana, se com apenas uma letra ou com abreviatura de 3 letras.

Então para exibir com a abreviatura de três letras, é preciso passar o parâmetro False.

get_calendar(false);

O get_calendar(); em geral deve estar dentro do arquivo sidebar.php mas também nada impede de você colocá-lo em outro local.

Com isso já temos os dias da semana com abreviatura de 3 letras. O restante é puramente CSS. Para isso edite o arquivo style.css de seu tema, localize as entradas iniciadas com #wp-calendar e remova todas,  e acrescente o seguinte código em seu lugar:

/* Calendar Widget */

#wp-calendar {
  text-transform: capitalize;
  text-align: center;
  empty-cells: show;
  margin: 0;
  border-spacing: 0;
  width: 98%;
  padding: 3px;
}

#wp-calendar caption {
  font-size: 1.2em;
  font-weight: bold;
  color: #BBBB00;
  padding: 5px 0 3px 0;
}

#wp-calendar th {
  background: #252525;
  font-family : Arial, Helvetica, Sans-Serif;
  font-size : 0.9em;
  font-weight: bold;
  color: #CCC;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

#wp-calendar td {
  font-size: 0.8em;
  color: #CCC;
  text-align: center;
  letter-spacing: normal;
  padding: 2px 0;
  border-bottom: 0px;
}

#wp-calendar thead tr th:first-child {
  color: #FF0000;
}

#wp-calendar tbody tr td:first-child {
  background: #521;
}

#wp-calendar tfoot td {
  background: #252525;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

#wp-calendar a {
  display: block;
  text-decoration: none;
  border-bottom: 0px;
}

#wp-calendar #today, #wp-calendar #today a {
  background: #221;
  font-size: 1.1em;
  font-weight: bold;
  color: #BBBB00 !important;
  border: 1px solid #442;
}

#wp-calendar #next a {
  text-align: right;
  font-weight: bold;
  padding-right: 12px;
}

#wp-calendar #prev a {
  text-align: left;
  font-weight: bold;
  padding-left: 12px;
}

E com isso, voilá! Seu calendário estará 99% igual ao da imagem. A única coisa que não estará igual, é o Domingo em vermelho, porque isso por enquanto depende de um pequeno hack no general-template.php do WordPress, e  mexer diretamente no “core” do WordPress não é algo recomendado. Para contornar isso, estou estudando algumas funções para tentar fazer isso de uma forma mais limpa, através do functions.php do tema.

Já era! Perguntar as coisas pra professor é outro papo! Dá pra pintar o domingo de vermelho na moleza via CSS também.  Olhe o código inserido das linhas 39 a 41, isso resolve o problema.  Pequeno detalhe, não funciona (não pinta o Domingo de vermelho) em IE6. Mas… quem se importa? Quem ainda usa essa coisa horrenda? Migra pra algo decente.

Ah! Obviamente, você pode e DEVE alterar as cores no CSS para que fique compatível com seu tema.

Eu e um amigo (Lip*.*)  estamos atolados, infectados, contaminados a uns 20 dias com um “vírus”… estamos construindo um site do ZERO! É o site da PiclistBR. A lista já tem 11 anos (completados dia 15 deste mês) e nunca teve um site decente. Até tivemos duas “tentativas”…

A primeira naufragou a 2 anos atras quando a pessoa que estava hospedando a lista em seu servidor, resolveu tomar a bola das mãos os fundadores e se achou o dono da casa. Houve um bafafá desgraçado, e a lista acabou migrando para o GoogleGroups. Qualquer dia eu falo dessa história, que com certeza vai render um post macarrônico…

A segunda tentativa ocorreu em novembro do ano passado e naufragou cerca de 9 meses depois, rende outra história macarrônica.

Depois das duas tentativas de termos um site, resolvi eu mesmo meter as mãos a massa e criar algo do zero. O layout inicial eu mesmo bolei, a disposição dos elementos, aquela coisa básica e chata de se fazer. Quanto já tinha o layout pronto e o CSS já meio que ajeitado, chamei os outros administradores e um dos moderadores para ajudar desse ponto em diante. O grosso da coisa já foi feito por mim e pelo Lip. O resultado já pode ser visto na imagem ai mais pra baixo.

O motivo deste post? Simples, o site é basicamente formatado em CSS, funciona LINDAMENTE no Firefox, Opera, Chrome e outros, acredite se quiser até mesmo no Netscape 9. Mas tem um MALDITO navegador que o site dá xiliques brabros de formatação. Adivinha??? Que gritou Internet Explorer, acertou na mosca!

É inacreditável como a Dona Micro$oft, já esta para lançar o beta do IE9 e até agora no IE8 não implementou corretamente o CSS! Tem algumas propriedades do CSS2 que simplesmente NÃO FUNCIONAM no IE. Coisas básicas como larguras de elementos, bordas, etc.

Isso já me botou em estado de loucura na ultima semana, de tanto “jeitinho” e “gambiarra” que eu tive que fazer no código HTML e no CSS pra que o site fique minimamente usável no IE. Tive que recorrer até ao velho truque de enfiar figuras com 1 pixel de espessura e largura definida na cacetada pra manter os frames abertos no tamanho certo, independente do usuário querer encolher a janela mais do que deve, para não destruir um minimo de formatação.

Clica ai que “aumentelha”

E isso tudo me levou a: Instalar um ECA-BLERGH-XP numa VM, pra poder instalar uma pá de navegadores diferentes pra analisar como o site se comporta em cada um deles. É a figurinha que esta ali no topo do post. Olha que fofura!

Até o fossilizado Netscape Communicator 4.79 eu instalei, obviamente que esse foi de sacanagem e saudosismo, eu comecei na internet com o bom (para a epoca) Netscpape Navigator 3! Apesar que ele não suporta nada de CSS, nem sabe o que é imagem PNG, mas não é que o velho 4.79 até que abriu o site de uma forma “usável”?

O site tem um layout que eu nunca tinha usado e foi a fonte maior de dores de cabeça: Layout Elástico.

Ele aceita uma largura minima de 800 pixels e pode abrir o frame principal até 1200 pixels. O frame principal, tem uma relação de 90% de largura da tela até que o frame principal atinja os 1200 pixels de largura. Acima disso ele trava o frame e aumenta as bordas.

Tudo foi muito bem no Firefox, só que o MALDITO IE, não reconhece as tags min-width e max-width no CSS. Dai, só com a velha gambiarra que eu já disse acima, figuras transparentes.

É claro que eu não deixei “barato” pra quem usa IE, na HOME terá um “lembretinho” pra quem entrar usando o maldito IE.

Bem o AcidX levantou esta hipotese:

Na verdade, por increça que parível, não é bug do IE! É que só pode ter um elemento com o mesmo ID. Nesse caso, você pode usar o “class” (div class=”menu”), e usar o “.” ao invés do “#” para definir a classe.
acidx | 11.07.05 – 1:02 am | #

Tá… mas acontece que se eu trocar o <div id=”menu”> por <div class=”menu”> e trocar o “#” por “.” dá caca… no IE fica a mesma porcaria, já no firefox, o <div> não troca de cor ao ser focado pelo mouse. E ai?

O suporte a CSS no IE é uma bomba mesmo… talvez seja caca do browser
Cesar Cardoso | Homepage | 10.07.05 – 2:41 pm | #

Bem… mas mesmo no IE6 a Dna M$ ainda não criou vergonha na cara e deu um suporte decente a CSS? ECCCAAA!!!

Sorte minha que eu apesar de usar windows, nunca usei o browser na M$, eu venho desde lá do win3.11 usando netscape (na epoca era o 4.0), depois 4.5en, dai parti pro Mozilla e agora pro Firefox.

Tem mais uma parte que eu não disse, mas quem usa o IE deve ter percebido. No caso nosso que usamos Firefox, se você já focar só o <div> (bloco cinza) o browser já reconheçe como link. Logo não precisa focar no texto especificamente.

Já com o IE, a unica coisa que ele reconhece como link ai no menu são os textos, pro <div> ele nem olha.

To apostando mais mesmo é no caso do suporte a CSS do IE ser ruim.

E olha que esses dias eu tava pensando em ‘n’-maneiras de fazer uma página que só funcionasse no Firefox/Mozilla eheheh… já é um passo nesse sentido. Ia ser muito interessante uma pagina “Firefox only” só pra ver a cara do povo que só usa IE.

Como você devem ter percebido estou dando uma mexidinhas no template do blog, mas nada muito radical, apenas umas “florzinhas” daqui e umas “frescurinhas dali”.

Até ai tudo normal, até que eu resolvi fazer uma pequena mudança no menu ai do lado. Resolvi fazer uma aplicaçãozinha localizada de CSS e fazer com que o “botão” troque de cor ao passar o cursor do mouse sobre ele. Se você estiver usando o FireFox, beleza, vai ver a modificação, agora se for o IE6, não vai ver.

O interessante de tudo é que no FireFox funcionou maravilhosamente bem, mas no IE não!!! Sera que é algum bug no IE ou bug no meu código? Vamos lá.

O porque de “botão” é que na verdade eles são <div> pintados. E para que eles se comportem como hyperlink foram inseridos dentro de uma tag <a>. Até ai tudo bonitinho, funfa no FireFox e no IE.

O código pra gerar esses “botões” é esse:

<div id=”menu”>
<a target=”_blank” href=”http://kibeloco.blogspot.com/” title=”Kibe Loco”>
<div><font color=”#FFFFFF” size=”3″>»</font><font color=”#00FFFF”> Kibe Loco</font></div>
</a>
</div>

Beleza, e o código CSS que eu formato o “botão” e pinto o fundo deles é:

#menu
{
background:#666666;
margin:0px 0px 0px 0px;
width:130px;
height:18px;
padding:0px 0px 0px 3px;
font-family: Verdana, Arial, Helvetica;
font-weight: normal;
font-size: 12px;
font-style: normal;
text-align:left;
border-top:3px solid #000000
}

#menu:hover
{
background:#777777
}

Até ai pra mim nada demais. Mas agora a pergunta que não quer calar. É alguma gambiarra ou caca que eu fiz que não funciona no IE, ou é mesmo um bug? Alguém ai se habilita a dizer alguma coisa?

[ Ouvindo: ‘Benny Mardonez – Into the Night‘ ]