Já vi muitas pessoas tendo problemas para, por exemplo em Blogs, fazer thumbnail de imagens para ilustrar o artigo, e esta imagem deve ter um tamanho fixo.

Bom este é um problema sério, porque se em um blog o usuário que normalmente não é uma das mentes mais brilhantes, então podemos imaginar que ele não deve saber mexer com imagens e provavelmente vai colocar imagens em tamanhos esdrúxulos, que vão acabar com o design que você havia desenvolvido.

Para acabar com este problema basta você tem que usar PHP, e desta vez iremos usar um script feito pelo Tim McDaniels o TimThumb. Ele suporta imagens em .gif, .png e .jpg, sendo assim vou explicar como esse simples código pode ser usado.

Então primeiramente você deve verificar se o seu o seu servidor permite que você faça tais modificações com PHP, alguns servidores não permitem algumas funções da linguagem pois elas consomem muita Memória do servidor, para que isso não aconteça entre em contato com o suporte do seu e peça para que liberem o uso da livraria GD, de manipulação de imagens. Se não funcionar apenas peça para que liberem o uso do timthumb.php pois você gostaria de usá-lo. Lembre-se de pedir para que façam isso apenas na sua conta, se não eles não irão fazer.

Agora que nosso acesso foi liberado, siga até o seu FTP e crie uma pasta e re-nomeie-a para cache após feito isso você deve mudar as permissões desta pasta para 777, onde você permite que sejam gravados dados dentro da pasta.

Após feito isso coloque na pasta raiz desta que você acabou de criar, o arquivo timthumb.php.Mude agora as permissões desta pasta raiz para 777.

Agora vamos para parte onde iremos usar este arquivo para redimensionar imagens.

É muito simples, ao invés de usar o link comum da imagem iremos trocar por um parecido com este:

timthumb.php?src=/imagem/qualquer.jpg&h=150&w=150&zc=1&q=100

No link acima estamos passando alguns parâmetros para o arquivo PHP, eles são:

• src : URL
• h : Altura
• w : Largura
• zc : Aumentar e Cortar [0 ou 1]
• q : Qualidade [0 até 100]

Dessa forma podemos passar para o script algumas informações como se você deseja que ele aumente sua imagem e corte para cortar exatamente nas proporções desejadas, caso contrário ele apenas irá redimensionar e você terá uma imagem desfigurada quando esta mudar de proporção.

Dicas ao usar o Timthumb.php

Para fazer um melhor uso do script é importante fazer algumas coisas, como por exemplo, habilitar o cache colocando em seu .htaccess:

RewriteEngine on
RewriteRule .* - [E=HTTP_IF_MODIFIED_SINCE:%{HTTP:If-Modified-Since}]
RewriteRule .* - [E=HTTP_IF_NONE_MATCH:%{HTTP:If-None-Match}]

Não tente usar imagens de outros sites, porque não irá funcionar. Apenas imagens em seu servidor serão redimensionadas corretamente e não coloque o arquivo timthumb.php na raiz do seu site, coloque-o dentro de uma outra pasta, pois a necessidade de usar o nível de permissão 777 torna seu servidor vulnerável.

Ola galera, mais uma vez estou aqui trazendo um artigo que pode ser interessante para a maioria dos desenvolvedores, pois é uma maneira de rotacionar textos em todos os navegadores sem ter que fazer uso de nenhum tipo de imagem, o que torna o site bem mais leve.

Quando eu falo todos os navegadores é porque existe uma maneira de fazer funcionar no Internet Explorer também.

Para rotacionar textos no Firefox e em outros navegadores que tem os padrões de CSS atualizados é muito simples rotacionar qualquer tipo de objeto na tela (Webkit e Firefox 3.5), basta utilizar uma propriedade e falar quantos graus devem ser modificados, da seguinte forma:

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);

Bem simples, porém como sempre temos um problema, chamado IE.

Que no meu ver não é tão ruim assim se você você estiver disposto em aprender como solucionar os seus problemas. São muitos mas boa parte deles já tem um bom Hack para concertar, basta ter interesse.

Para que rotacionar elementos funcione no Interent Explorer basta você usar os filtros que são fornecidos pelo MSDN no seu banco de dados para desenvolvedores.

No caso iremos usar o BasicImage, que é um filtro que te permite fazer vários tipo de manipulações com elemento, tipo transformá-lo em Preto e Branco.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Bom estermos usando a propriedade rotation do filtro, que nos permite girar o elemento em 4 ângulos diferentes com 4 inteiros diferentes, sendo eles: 0, 1, 2 e 3 e rotacionando em 0, 90, 180 e 270 graus respectivamente.

Essas propriedades só irão funcionar em elementos que tenham a propriedade de bloco, ou seja, para elementos de texto, como um span será necessário adiconar a seguinte propriedade ao elemento em CSS:

display:block;

Colocando em Prática os conhecimentos novos

Eu estava lendo um pouco do CSS-Tricks, um maravilhoso site sobre CSS, e me deparei com a dica de usar sprites para fazer as data dos artigos colocados no blog, para aqueles temas que usam um tipo de pequeno calendário para exibir a data.

Fiquei intrigado com a idéia, porém achei que era meio ruim para um site de longo prazo, que tem sei la uns 8 ou 9 anos de existencia, pensei que seria melhor apenas rotacionar os elementos. Mas ai me veio a idéia de que teria o Internet Explorer para me atrapalhar, e dias depois descobri o banco de dados para desenvolvedores da MSDN, e este tornou a idéia possível.

Então como fazer é bem simples, vamos aplicar o que aprendemos mais acima, vamos criar um código da seguinte forma:

<div class="data">
  <span class="dia">07</span>
  <span class="mes">Dez</span>
  <span class="ano">2009</span>
</div>

Após feito isso iremos adicionar um pequeno código CSS para que fique na posição que desejamos, e é claro adicionar a rotação:

<style type="text/css" media="screen">
	* { margin: 0; padding: 0px; outline:none; border:none; }
	body { padding:20px; font-family: Arial, Helvetica, sans-serif; }

	.data { background-color:#dedede; color:#3e3e3e; float:left; position:relative; padding:40px 5px 0px; }
	.data .mes { text-transform: uppercase; font-size:25px; }
	.data .dia { font-size:36px; line-height:45px; position:absolute; left:5px; top:0px; }
	.data .ano { display:block; font-size:12px; position:absolute; right:-5px; top:15px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }

	div.footer { position: absolute; bottom:0px; width: 95%; height:30px; padding: 15px 2%; border-top:1px solid #e1e1e1;}
</style>
<!--[if IE]>
	<style>
		.data .ano { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); right:2px!important; top:8px!important; }
	</style>
<![endif]-->

Após adicionado este CSS deve ficar como na imagem abaixo:

Você pode dar uma olhada se funciona no seu navegador, caso não funcione da maneira que deveria, por favor deixe um comentário com as informações do seu navegador

Bom galera como vocês já devem saber o WordPress está chegando em sua versão 2.9, que irá trazer algumas funcionalidades que irão facilitar a vida dos desenvolvedores, dos usuários e visitantes.

Uma destas funcionalidades é a possibilidade de criar thumbnail[Miniatura] sem ter que fazer nenhum tipo de campo personalizado, facilitando para o seu cliente, que não tem prática com o sistema, para os desenvolvedores, só isso que realmente irá mudar.

Não são apenas miniaturas, a funcionalidade engloba 4 tipos de tamanhos, sendo assim fica bem melhor para que você possa fazer a coisa da melhor maneira possível. Sendo eles:

• Miniatura ou em inglês ,Thumbnail
• Tamanho médio
• Grande
• Completo, a imagem que você subiu

Mas tem uma maneira correta de se fazer isso, e é importante que todos já saibam antes do lançamento da versão para que tenhamos temas bem desenvolvidos.

Para começar você deve acessar o arquivo functions.php do seu tema, e adicionar o seguinte código:

add_theme_support( 'post-thumbnails' );

Bom esta nova função do WordPress, que possibilita o desenvolvedor ativar alguma funcionalidade do tema para seus usuários ou clientes. Não conheço nenhuma outro uso dela até agora, contudo provavelmente teremos algumas possibilidades no futuro.

No código iremos usar a função e ativa o suporte de Miniaturas nos artigos. Após feito a ativação precisamos saber como exibir no tema a imagem.

Da seguinte maneira iremos ter um resultado já com a tag da imagem em html pronta:

<?php the_post_image( 'thumbnail' ); ?>

Usando o código acima iremos ter como resultado a imagem miniatura, porém também podemos ter a imagem em diferentes tamanhos para diferentes usos.

<?php the_post_image( 'medium' ); ?>
<?php the_post_image( 'large' ); ?>
<?php the_post_image( 'full' ); ?>

O básico de como usar a função de exibição de miniaturas do WordPress 2.9 acaba aqui, agora vou explicar e dissecar mais algumas opções.

Como verificar se tem thumbnail ou não

Bom muitas vezes os usuários podem esquecer de colocar o thumbnail e teremos problemas com a função, então é mais interessante definirmos uma verificação para que não tenhamos problemas com isto.

Para fazer a verificação iremos usar a função has_post_image() que retorna true ou false quando tem imagem ou não.

Então faremos a verificação, e para ficar mais legal iremos definir uma imagem padrão para quando não houver imagem.

<?php
	if ( has_post_image() )
		the_post_image( 'thumbnail' );
	else
		echo '<img src="sem_thumbnail.jpg" alt="Este artigo não tem miniatura" title="Este artigo não tem miniatura" />';
?>

Retornar a URL da imagem

Bom galera normalmente os desenvolvedores precisam retornar apenas o link para poder usar em plugins e outras funções do próprio WordPress, para faze-lo é necessário a seguinte função:

$image = get_the_post_image( $post->ID, 'thumbnail' );

Mudando a saída HTML da função

Adicione o seguinte código no seu arquivo function.php, para podermos fazer uma mudança do HTML de saída da função:

add_filter( 'post_image_html', 'theme_post_image_html', 10, 3 );

function theme_post_image_html( $html, $post_id, $post_image_id );

	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';

	return $html;
}

Plugin para não perder as imagens do seu tema atual

Vários temas usam Custom Fields[Campos Personalizados] e outras formas de fazer miniaturas, porém imagine um blog com milhares de artigos e seria necessário definir as miniaturas dos artigos uma a uma, isso seria um inferno. Então temos um plugin para fazer isso, acesse o site do WordPress.org e baixe o plugin e seja feliz.

Estes dias eu comecei a desenvolver um tema chamado de DevStart, o qual vou disponibilizar aqui no blog, e me deparei com um problema ao usar esta função maravilhosa do WordPress.

A função body_class(); é muito útil quando você tem que desenvolver um tema e gostaria de fazer um pouco de dinamismo nas cores, por exemplo, pois colocando-a dentro da tag <body> adicionamos classes à tag que dizem algumas informações sobre que página o usuário está visitando, e desta forma podemos aplicar o devido CSS.

O problema que eu me deparei ontem quando comecei a implementar esta função, foi que ela adiciona todo o texto class="classes", e isso é ruim, mesmo que a função nos permita adicionar nossas classes, não me permite usar um plugin em jQuery para descobrir qual navegador o sujeito usa. Então fiz um pequeno hack para fazer a função apenas adicionar as classes.

Bom primeiro vou explicar como é o uso normal da função. A função, como eu já citei anteriormente deve ser colocado dentro da tag <body>, da seguinte forma:

<!--Cabeçalho acima-->
<body <?php body_class(); ?>>
<!--Corpo da página abaixo-->

Se for usado desta forma teremos o seguinte resultado quando estivermos na home do nosso blog e logados no sistema:

<!--Cabeçalho acima-->
<body class="home blog logged-in">
<!--Corpo da página abaixo-->

O que eu fiz foi bem simples, utilizando uma função chamada get_body_class();, que é a função que faz todas as verificações e define em uma variável todas as classes que devem ser adicionadas e retorna um array, eu usando o implode(); do PHP eu criei uma função no arquivo function.php para solucionar o nosso problema e apenas escrever as classes.

Então vamos abrir o arquivo functions.php e vamos adicionar o seguinte código:

function echo_body_class() {
	echo implode(" ", get_body_class());
}

Este código cria a função echo_body_class(); e transforma o array retornado em apenas uma string separando cada um dos resultados com um espaço.

Bom agora acesse seu arquivo que contém a tag <body> e substitua-a pelo seguinte:

<!--Cabeçalho acima-->
<body class="<?php echo_body_class(); ?>>">
<!--Corpo da página abaixo-->

Então teremos o mesmo resultado que com a função body_class(); porém agora poderemos adicionar todas as classes que nos forem interessantes. Problema resolvido.

Ahh e sobre este tema que estou desenvolvendo, ele vai ser colocado aqui no blog para download, e sua principal função é servir como tema base para o desenvolvimento de outros.

Bom acho que todos sabem o que é o Cache do Browser, porém a maioria dos desenvolvedores Web de hoje não sabe realmente usa-los para otimizar o site da maneira correta. Com o WordPress este trabalho fica bem mais fácil, devido a uma função interna.

Abaixo vou explicar como funciona, porém não tem como sanar todas as dúvidas, então seria muito legal se vocês colocassem em discussão algo que tiverem com problemas, ai talvez eu possa te ajudar.

Na versão 2.3 do WordPress que veio a primeira função de Cache do wordpress, e era opcional seu uso, então deveria ser usado um pequeno código para ativar o seu uso: define ( 'ENABLE_CACHE', true);

Mas só na versão 2.6 que as funções para Cache receberam um tratamento interessante, ele se tornou orientado a objeto e então trouxe várias oportunidades para seu uso. Nesta versão o uso do Cache já entra como padrão então nada de ativação.

Porém com esta introdução é importante para seu uso um mínimo de memória do servidor, então o WordPress começou a requerer que os servidores tivessem ao menso 32MBytes de RAM.

Mas vamos ao tópico principal, como usar as funções de Cache do WordPress. As mesmas podem ser encontradas no arquivo wp-includes/cache.php, ou no Codex do WordPress.org

De começo temos que saber como inserir informações no Cache do usuário, usando a função abaixo podemos faze-lo:

/**
 * @Parâmetro - int|string $key - ID do item para ser identificado depois
 * @Parâmetro - mixed $data - A informação que deve ser guardada
 * @Parâmetro - string $flag - O grupo que a informação deve ser guardada
 * @Parâmetro - int $expire - Quanto tempo leva para a informação expirar
 */
wp_cache_add($key, $data, $flag = '', $expire = 0)

Para deletar é quase a mesma coisa, apenas devemos identificar o grupo e a ID.

/**
 * @Parâmetro - int|string $id - ID do item que foi dita na outra função
 * @Parâmetro - string $flag - O grupo que a informação foi guardada
 * @Retorna - bool - Verdadeiro quando completa a ação e falso quando não consegue
 */
wp_cache_delete($id, $flag = '')

Como recuperar a informação salva em Cache, usando o grupo e a ID:

/**
 * @Parâmetro - int|string $id - ID do item que foi dita na outra função
 * @Parâmetro - string $flag - O grupo que a informação foi guardada
 * @Retorna - bool|mixed - Falso quando não consegue e quando ver
 */
wp_cache_get($id, $flag = '')

Se for necessário modificar algo em uma informação:

/**
 * @Parâmetro - int|string $key - ID do item para ser identificado depois
 * @Parâmetro - mixed $data - A informação que deve ser guardada
 * @Parâmetro - string $flag - O grupo que a informação deve ser guardada
 * @Parâmetro - int $expire - Quanto tempo leva para a informação expirar
 * @Retorna - bool - Falso se o ID e o Grupo já existirem e verdadeiro quando completa a ação
 */
wp_cache_replace($key, $data, $flag = '', $expire = 0)

Agora vamos a um pequeno exemplo. Usaremos uma URL como dado a ser salvo:

$v_webord_cache = wp_cache_get( 'webord_cache ' ); // Pega a informação com a id "webord_cache "
if ($v_webord_cache == false) { // Se a informação não estiver disponível
	$v_webord_cache = "http://webord.net/"; // Salva na variável a informação
	wp_cache_set( 'webord_cache', $v_webord_cache ); // Salva o cache para a chave "webord_cache "
}
var_dump( $v_webord_cache ); // Exibe o Conteúdo

Bom é basicamente isso, quando eu comecei a estudar Web eu me assustava quando falavam de Cache mas hoje percebo que não é um Monstro, é bem simples até, basta você ter empenho e estudar.

Mais um artigo sobre WordPress, dessa vez vou falar um pouco sobre um tópico muito recorrente em relação a criação de Temas para o WordPress.

Bom todos devem estar cientes que é possível adicionar complementos a sua barra lateral com uma ferramenta chamada Widget, porém para que você ou o cliente possa usufruir de tal facilidade você deve preparar seu Tema para aceitar o dito cujo.

Contudo normalmente a galera não sabe realmente como Implementar da maneira correta nos Temas, e o artigo tem este propósito, explicar como fazer seu tema aceitar os Widgets da maneira correta.

Vamos começar acessando o arquivo functions.php do tema que desejamos implementar, e devemos acessar este arquivo pois nele iremos encontrar todas as funções que o nosso tema vai abrir antes de ser interpretado pelo sistema, assim sendo podemos declarar funções ali e usar em uma página qualquer por exemplo. Leia Mais

Bom galera como você já sabem quando rola algum evento aqui no Rio de Janeiro e eu tenho a possibilidade de ir, vai ter uma cobertura no estilo M/M aqui no Webord. Basta o evento ter disponível uma rede Wi-Fi e uma tomada para a energia do LapTop!

Então para os que tem interesse, vocês podem ver qual é a programação do evento, na página inicial do site do evento. Abaixo vocês vão encontrar as atualizações do que está rolando no evento neste momento. Leia Mais

Galera, tenho uma notícia boa e uma ruim…

Começando com a boa, a equipe de desenvolvimento do WordPress vai lançar uma nova versão do sistema ainda este ano, e esta virá com novidades interessantes. A notícia ruim é, ao meu ponto de vista, que estão implementando coisas que não deveriam estar no core do WordPress, e sim em plugins “oficiais”.

Os desenvolvedores deveriam se focar mais em segurança e velocidade do sistema, que no momento são dois pontos críticos do WordPress.

Com relação a uma das novidades que estão vindo para a nova versão do sistema, temos um pequeno editor de imagens implementado, vejam as imagens abaixo! Leia Mais