Temos grandes browsers no mercado, infelizmente um dos mais utilizados é uma verdadeira pedra no sapato de quem tem que desenvolver para a web. Ainda mais quando falamos de cantos arredondados ou rounded corners
Existe um fato e existe uma solução!
Vamos adicionar filtros aos artigos do WordPress. Por exemplo: eu tive um caso onde importei diversos arquivos e alguns continham tags HTML antigas como <b> e <i>. Quero troca-las por strong e em, respectivamente.
A rotina é simples, vamos ao exemplo:
function filtrarArtigo($content) { // (...) return $contentFiltrado; } add_filter('the_content', 'filtrarArtigo');
Eu utilizo o método add_filter que vai chamar o outro método filtrarArtigo. Este, por sua vez, recebe como parâmetro o conteúdo do artigo. Esse filtro vai acontecer cada vez que o artigo for exibido na página.
Sabe quando escrevemos um artigo no WordPress e vai rolando um auto save ou quando alteramos o artigo e gravando a cada alteração? Já percebeu que o WordPress vai criando diversas versões para o artigo?
Claro que isso é muito útil em alguns casos. Podemos nos arrepender de alguma alteração ou querer recuperar uma cagada qualquer.
Mesmo assim, podemos limitar ou desababilitar essas revisões de arquivo (ou post revisions em inglês).
Para conseguir isso, basta alterarmos o arquivo wp-config.php que fica localizado na pasta raiz do WordPress.
Para desabilitar, após a linha que contém o comentário Happy Blogging! basta inserir:
/* desabilitar revisões de artigo */ define('WP_POST_REVISIONS', FALSE);
Da mesma forma que para limitar as revisões de post, devemos trocar o valor false para o número que queremos usar como limite:
/* limitar revisões de artigo em no máximo 2 */ define('WP_POST_REVISIONS', 2);
Pronto, isso irá limitar as revisões de artigo em no máximo 2. Um número bom que não vai mais inchar nosso banco de dados desnecessariamente.
Lembre-se que você vai alterar um arquivo muito importante do seu WordPress, faça com toda a cautela necessária.
Quem utiliza WordPress pode verificar que normalmente ele cria na tag head do seu site uma tag similar à seguinte:
<meta name="generator" content="WordPress" />
Isso normalmente não é legal, remover isso é cuidar ligeiramente da segurança do próprio site. De qualquer forma, é desnecessário em nosso site.
Logo, vou passar a dica para remover esse meta generator que indica (para robôs etc) que o site foi desenvolvido em WordPress.
A dica é simples, basta incluirmos a seguinte linha no arquivo functions.php de nosso tema ativo:
remove_action('wp_head', 'wp_generator');
Se quiser pode fazer isso dentro do próprio admin de seu site. No menu, vá em "Aparência" > "Editor" e lá selecione o arquivo functions.php. Lembre-se de inserir essa linha antes do fechamento da tag ?>
Vou listar algumas das melhores IDEs para desenvolvimento em evidência no mercado. Não apenas para montar HTML 5 e CSS 3, mas também para códigos e algorítmos em diversas tecnologias, como Javascript, jQuery e até podemos arriscar algumas linguagens "server side".
JSBin é uma ferramenta excelente para teste colaborativo de html e javascript. Facilitando a integração algumas das mais populares bibliotecas e frameworks JS, ele permite que o usuário insira rapidamente o seu código e grave com um controle de versão muito simples. JSBin definitivamente não é apenas um marcador de código.
Característica que vale ressaltar: JSBin é open source, 100% free.
PHP, Ruby on Rails, Django, Perl, SVN, Git, etc? Você ainda achava que era impossível ter uma IDE pra tudo isso que fosse também browser based? Kodingen é o nome dessa poderosa ferramenta que oferece uma boa parte de seu sistema de forma gratuita e está conquistando muitos fãs pela web.
O teste é simples, vamos em quase todos os testes utilizar o método document.createElement() do javascript para elementos do HTML 5. Logo em seguida vamos testar atributos e/ou propriedades dos mesmos elementos. Assim vamos verificar se o elemento é ou não suportado em determinado browser.
Com a chegada - bem devagar - do HTML 5 e a exigência cada vez maior para criação de interfaces crossbrowsers, precisamos adequar e adaptar nossos projetos a situações diversas.
Não podemos, por outro lado, deixar de inovar. É interessante podermos utilizar uma tag <video>, por exemplo. Canvas é também muito interessante, mas o suporte ainda não é tão amplo.
Vamos aos testes:
var teste = document.createElement("canvas"); var checar = ( teste.getContext ) ? true : false; alert(checar);
O teste foi simples: criamos um elemento canvas, já deixamos ele apontado em uma variável que indica o teste, logo em seguida vemos se ele da suporte ao método getContext, suportado pelo elemento Canvas do HTML5. Você pode ver um resultado no link: http://jsbin.com/ogizo3/2/edit
var testeAudio = document.createElement("audio"); var testeVideo = document.createElement("video"); alert( testeAudio.play ); alert( testeVideo.play );
Agora fizemos o mesmo tipo de teste, porém testamos com um método que há nos 2 elementos - audio e video - em html 5: play(). Pra ver como está ficando nossa página de testes: http://jsbin.com/ogizo3/3/edit
O html 5 tem vários novos inputs bem interessantes. Temos uma lista de vários novos tipos como date, datetime, range e number, por exemplo.
Independente do tipo de input o teste é simples:
var testeInputDate = document.createElement("input"); testeInputDate.setAttribute("type", "date"); alert( testeInputDate.type == "date" );
var testeInputDatetime = document.createElement("input"); testeInputDatetime.setAttribute("type", "datetime"); alert( testeInputDatetime.type == "datetime" );
var testeInputRange = document.createElement("input"); testeInputRange.setAttribute("type", "range"); alert( testeInputRange.type == "range" );
var testeInputNumber = document.createElement("input"); testeInputNumber.setAttribute("type", "number"); alert( testeInputNumber.type == "number" );
Se o navegador não aceitar o tipo apontado no método setAttribute, o retorno de seu tipo será normalmente text.
Enquanto isso temos mais informações na nossa página de testes: http://jsbin.com/ogizo3/4/edit
Agora um pequeno truque já bastante utilizado na web (inclusive nesse site).
Podemos utilizar o .createElement() para criar elementos com várias tags diferentes em nossas páginas, entre elas, elementos de bloco como nav, header, footer, section, article, aside etc.
Pra isso vamos fazer uma pequena chamada no Javascript e no CSS, considerando cada tag que vamos criar:
document.createElement('nav');
E no CSS uma pequena declaração:
nav { display: block; }
Pronto. Com esse hack super simples temos um elemento nav funcionando inclusive em Internet Explorer 6!
Claro que já existem códigos robustamente preparados, então indico usar, por exemplo, o que o próprio JSBin.com indica:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
e no início de nosso css:
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
Não vamos ter nenhum recurso expecial, mas já vamos poder usar essas novas tags do HTML 5 em nossos documentos bem menos preocupados - nem frustrados - com o suporte crossbrowser.
Quero falar sobre o processo de criação de plugin em WordPress, vou aproveitar o contexto e fazer aqui um que recebe (ou não) um link e retorna um link encurtado pelo site Bit.ly.
O plugin adiciona uma página na área de administração com um pequeno form onde podem ser informados o login e a API key do bit.ly.
O plugin poderá ser chamado no wordpress via outro plugin ou no código do tema utilizado, através de um ou mais métodos que vamos fornecer. Também poderemos chamar o plugin através de um <em>shortcode</em> que vamos criar.
Se não fornecermos um link para encurtamento, o plugin deverá verificar se ele está sendo executando durante um loop e assim retorna o permalink do artigo em questão.
Ler mais »