1. Crie uma função no arquivo de funções do tema, o functions.php
2. Evoque a função registrada dentro do post/página envolvida por [] (colchetes)
3. O WordPress substituirá o shortcode pelo retorno da função

Um problema: criar uma shortcode que exibe a data e hora atual do servidor.

function datahora() {
   return date('d/m/Y HH:ii');
}
add_shortcode('Datahora', 'datahora');

A nossa função não poderia ser mais simples. Mas ela precisa ser registrada para que o WordPress a reconheça. Quem faz isso é a função add_shortcode(nome_da_shorttag, nome_da_funcao_php).

Pronto, agora basta criar um post com o conteúdo:

[Datahora]

Inserindo parâmetros

Parâmetros podem ser usados para refinar um shortcode.

Um problema: inserir um mapa navegável, do Google Maps diretamente em nosso post.

Vamos escrever a função preparada para receber os parâmetros latitude/longitude, altura e largura do mapa.

function mapa($atributos) {
	extract(
	shortcode_atts(array(
		'll'  => '-15.570624,-56.087179',
		'altura'    => 452,
		'largura'   => 350
		), $atributos));
	return "<iframe width="'.$largura.'" height="'.$altura.'" frameborder="0" scrolling="no"
 marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;
 ll='.$ll.'&amp;spn=0.014469,0.018239
 &amp;z=15&amp;output=embed"></iframe>";
}
add_shortcode('Gmap', 'mapa');

A nossa função mapa receberá um parâmetro que equivale a um array com os valores vindos do post. Perceba que a primeira coisa que fazemos é tratar os parâmetros com as funções extract e shortcode_atts. A primeira é uma função PHP que converte as chaves de um array em nome de varável. Ex:

$arr = Array('nome' => 'Thiago', 'pais'=>'Brasil');
extract($arr);
echo $nome // Thiago
echo $pais; // Brasil

E shortcode_atts garante que os parâmetros não declarados no post terão um valor padrão, sendo assim, nenhum parâmetro é obrigatório. Vamos aplicar nosso mapa no post pra entender melhor.

[Gmap largura=650 altura=400]

Nosso mapa será renderizado no post com altura = 400 e largura = 650. Como não declaramos latitude/longitude (ll), o valor padrão a ser asumido será a coordenada -15.570624,-56.087179.

Partes do post como parâmetro

Nos exemplos acima usamos shortcodes auto-encapsuladas. Pense como tags XHTML (<br />, <img />). Podemos usar o próprio texto do post como parâmetro. Pra isso precisamos apenas encapsular esse texto com a shortcode, abrindo e fechando. Em nossa função PHP corresponderá ao nosso segundo parâmetro.

Um problema: converter pedaços do nosso post em maíusculo.

function upper($atts, $conteudo) {
return strtoupper($conteudo);
}
add_shortcode('upper-case', 'upper');

No post:

Quero somente [upper-case]esse pedaço do texto[/upper-case] em maíusculo

É bom saber que:

• shortcode_atts converte os atributos em minúsculo, então é melhor padronizar;
• usar sempre return e não echo na função PHP. Evite que coisas estranhas aconteçam;
• existe um terceiro parâmetro para as funções, usado para chamadas calbacks.

Referências:

• Arquivo de exemplo
• Shortcode API – Documentação WordPress

sIRF

Bastante conhecida, desenvolvida por Mike Davidson e Mark Wubben, sIRF (Scalable Inman Flash Replacement) usa javascript para indentificar se o usuário tem o flash plugin instalado (se não tiver, exibe uma fonte comum) e flash para substituir o texto pela fonte personalizada.

Além de ser bastante compatível (IE5+, Safari, Firefox, Opera7+) não há prejuízo na acessibilidade e não prejudica as técnicas de SEO já que o código não é alterado. Veja um exemplo.

Como funciona

A primeira coisa, é baixar a última versão no site da documentação. Eu usei a versão 3 r436, a versão 2 não abre no Flash CS4 e você vai precisar pelo menos da versão 8 Pro (ou superior).

Flash: Abra o arquivo sifr.fla (pasta flash) e edite o MovieClip principal (identificado como holder),  remova o texto padrão e configure os atributos da fonte (bold, italic e regular, sublinhado não). Selecione a fonte e os caracteres extras em Charactere Embidding (acentos, pontuação).  Exporte o filme pra swf configurando os seguintes parâmetros:

• Flash 8 (AS2),
• Load Order  para BottomUp
• Protect the movie from import
• Compress Movie

HTML: Faça as chamadas para o CSS e Javascript do sIFR

<link rel="stylesheet" href="sIFR/sifr.css" type="text/css">
<script src="sIFR/sifr.js" type="text/javascript"></script>
<script src="sIFR/sifr-config.js" type="text/javascript"></script>

Abra na pasta js, o arquivo sifr-config.js e:

• Configure o caminho do swf exportado
• Ative o objeto
• Diga quem você quer substituir (e por quem)

var fonteVirtual = { src: '../sifr3-r436/flash/sifr.swf', transparent: true };
sIFR.activate(fonteVirtual);
sIFR.replace(fonteVirtual, {
selector: 'h1',
css: '.sIFR-root { background-color: #F9F9F9; color: #FF0000; }'
});

Claro que você tem muitas outras opções para configurar, veja aqui.

CSS: Agora basta configurar a classe referente ao sIFR

.sIFR-active h1 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 18px;
}

Apartir de agora atodo elemento h1 será substituída pela fonte configurada.

Realizando alguns testes, o custo disso será o seguinte:

• sifr.css (1kb)
• sifr.js (28kb)
• sifr-config.js (1kb)
• sifr.swf (8kb)

38kb no total e alguns arquivos podem variar.

Veja o sIFR funcionando

FontBurner

Fontburner é open-source e utiliza sIFR, mas sua implementação é bem mais simples. Dispensa o Flash, configuração de javascript e css, conversão de fonte. Não prejudica o site nas ferramentas de busca.

Como funciona

Praticamente todos os recursos ficam no servidor do FontBurner e o que você precisa fazer é apenas escolher a sua fonte no repositório do site e colar o código gerado em sua página.

Por padrão, elementos H[1...6] já aparecem com a fonte substituída. Mas outros elementos também podem ser alterados atribuindo à classe css do ememento o nome da fonte. Ex,:

<span class="babelsans_bold" style="font-size:11px;">Forcei a barra com esse span que também usa a fonte BabelSans</span>

Com FontBurner  você deve escolher entra as mais de 1000 fontes disponíveis no site que fornece também um plugin para wordpress e o próprio arquivo .swf pra usar com o sIFR se necessário.

Veja funcionando

TypefaceJS

TypefaceJS é uma biblioteca javascript open-source, cross-browser (Firefox 1.5+, Safari 2+ e Internet Explorer 6+) . Utiliza o recursos do próprio navegador para desenho de vetor (<canvas> e SVG para Firefox, Safari e Opera e VML para IE). Aceita seleção de texto e copiar-colar.

Como funciona

Converta a fonte escolhida (OpenType ou TrueType) para o formato typeface javascript. Nele está as coordenadas do desenho da fonte. Use o próprio conversor do site.

Em seguida, importe  a biblioteca do typeface e o script da fonte convertida, nesta sequência. Se houver uma folha de estilo, deve vir antes dos scripts.

<link rel="stylesheet" type="text/css" href="css/estilo.css">
<script src="js/typeface-0.13.js"></script>
<script src="js/gentilis_bold.typeface.js"></script>

Aplique a classe typeface-js nos elementos que deseja aplicar a fonte. Recomendo que procure aplicar apenas em título já que existe uma tempo de processamento.

Limitações

TypefaceJS funcionou muito bem. A sua biblioteca nem é tão pesada (25kb na versão 0.13). Os scripts convertidos variam de acordo com a fonte escolhida. O problema encontrado foi durante a conversão das fontes. O conversor online, respeita os direitos de distribuição das fontes identificando e bloqueando se preciso. Se a fonte escolhida não se enquadrar, esqueça. Talvez haja uma solução aqui.

Veja o Typeface funcionando

Cufón

Consiste em duas partes, o gerador e sua renderização por javascript. Cufón é uma mistura de SVG, VML, JSON. Dispõe de cache pra acelerar a renderização da fonte. O arquivo da fonte convertido pra javscript é bem pequeno, de um teste que fiz deu 15kb e sua biblioteca principal 18kb (versão comprimida). Sua API bem documentada e cheio de exemplos

Como funciona

Use o generator do Cufón pra adquirir a versão SVG/JS da fonte. Faça o download da última versão da biblioteca e coloque os dois (ou mais, se houver outra fonte) script na sua página e use o comando Cufon.replace para apontar o elemento que irá receber a fonte. O parâmetro também pode ser uma querie de bibliotecas JS como Prototype, JQuery.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="wanta_500.font.js" type="text/javascript"></script>
<script type="text/javascript">
  Cufon.replace('h1');
</script>

Veja o Cufón funcionando

Facelift

“Uma alternativa ao  sIFR”. Esse é o slogan do FLIR (Facelift Image Replacement). Funciona com PHP com a biblioteca GD (para criação de imagens) gerando imagens dinamicamente.

Como funciona

A primeira coisa a fazer (depois de efetuar o download, claro!) é configurar o arquivo config-flir.php.  Diretórios, fontes, cache entre outros parâmetros. Elementos h1…h5 já são aplicados automaticamente pela função js FLIR.auto().  Importando o javascript (33kb) e definindo os elementos que serão substituídos, a nova fonte já será aplicada. Também é possível usar queries para elementos mais específicos

<script language="javascript" src="/path-to/facelift/flir.js"></script>
<script type="text/javascript">
  FLIR.init( { path: '/path-to/facelift/' } );
  // automatico para h1 e h3.special
  FLIR.auto( [ 'h1',  'h3.special'] );
  // O emelento H3 terá uma fonte 'tribal'
  FLIR.replace( 'h3' , new FLIRStyle({ cFont:'tribal' }) );
</script>

A documentaçao deixa a desejar, mas os parâmetros do config-flir.php e pelos exemplos vai tranquilo.

Como grande parte do processamento fica por conta do PHP, há uma certa demora que pode causar um comportamento estranho mas o cache ta pra tentar resolver. O interessante é que há mais flexibilidade nas conversões de fontes, além de ser mais fácil substituí-las.

Veja FLIR funcionando

Mais

• Web Typography: Font Embedding Services
• Rich Typography On The Web: Techniques and Tools
• Arquivos de exemplo

A maneira que consegui fazer isso foi instalar várias versões numa mesma máquina. Usei:

• Windows 7 (beta);
• PHP 5.2 (instalado em C:\PHP5);
• Apache 2.2

Se você quer resolver esse problema no Linux, siga esse tutorial

Instalando Symfony 1.0

Seguindo o procedimento de instalação pelo PEAR pelo comando pear install

pear install symfony/symfony-1.0.21

Instalação do Symfony 1.0 - OK

Pronto, agora vamos renomear as pastas e redirecionar os apontamentos para receber a outra versão.

Na instalação o Symfony criou duas pastas no diretório de instalação do PHP, uma em %PHP_DIR%\data\symfony (esqueletos, forma dos módulos, etc) e %PHP_DIR%\PEAR\symfony (as classes da framework). Renomeie essas pastas de symfony para symfony10 (de symfon 1.0). Renomeie também os dois arquivos criados no diretório de instalação do PHP, symfony e symfony.bat para symfony10 e symfony10.bat.

Abra o arquivo symfony10 e altere as seguintes linhas

// PEAR
$sf_symfony_lib_dir  = 'C:\PHP5\pear/symfony';
$sf_symfony_data_dir = 'C:\PHP5\data/symfony';

para:

// PEAR
$sf_symfony_lib_dir = 'C:\PHP5\pear/symfony10';
$sf_symfony_data_dir = 'C:\PHP5\data/symfony10';

Em seguida, abra o arquivo symfony10.bat e modifique o seguinte trecho:

IF EXIST ".\symfony" (
%PHP_COMMAND% -d html_errors=off -d open_basedir= -q ".\symfony" %1 %2 %3 %4 %5 %6 %7 %8 %9
) ELSE (
%PHP_COMMAND% -d html_errors=off -d open_basedir= -q "%SCRIPT_DIR%\symfony" %1 %2 %3 %4 %5 %6 %7 %8 %9
)

para:

IF EXIST ".\symfony10" (
%PHP_COMMAND% -d html_errors=off -d open_basedir= -q ".\symfony10" %1 %2 %3 %4 %5 %6 %7 %8 %9
) ELSE (
%PHP_COMMAND% -d html_errors=off -d open_basedir= -q "%SCRIPT_DIR%\symfony10" %1 %2 %3 %4 %5 %6 %7 %8 %9
)

Obs: Se o projeto foi criado anteriormente, altere as variáveis do arquivo config.php, dentro do projeto:

$sf_symfony_lib_dir  = 'C:\PHP5\pear\symfony10';
$sf_symfony_data_dir = 'C:\PHP5\data\symfony10';

Instalando o Symfony 1.2

Agora vamos instalar a outra versão do symfony, através do pear. Escolhi a 1.2, mas poderia ser qualquer outra.

$ pear install symfony/symfony-1.2.9

Perceba que o symfony voltou a criar as mesmas pastas (symfony) nos diretórios PEAR e data no diretório do PHP, além dos arquivos symfony e symfony.bat. Vamos repetir o procedimento de renomear as pastas e os arquivos, de symfony para symfony12. Faça o mesmo procedimento dentro dos arquivos symfony e symfony.bat.

Criando as Aplicações

A partir de agora, os comandos do console são de acordo com a versão desejada. Por exemplo, para criar um projeto que antes era symfony init-project, você vai usar symfony10 init-project (para usar a versão 1.0 da framework) ou symfony12 generate:project (para versão 1.2).

Como exemplo, crie um projeto para cada versão no diretório C:\Apps\PHPApps

Configurando o Host

O Symfony já está preparado, agora vamos configurar o arquivo de host e o Apache.

Abra o arquivo hosts em C:\Windows\System32\drivers\etc e adicione um hostname para cada aplicação. Ex:

127.0.0.1    app10
127.0.0.1    app12

Ambos apontando para a própria máquina.

Abra o arquivo de configuração do host do Apache. Geralmente está em C:\Arquivos de Programas\Apache Software Foundation\Apache2.2\extras\httpd-vhosts.conf. No Windows 7 o diretório padrão é Program Files (x86) e não Arquivos de Programas.

Configure os hosts, um pra cada aplicação. Ficaria assim:

NameVirtualHost *:80
# app10 - Host para aplicação symfony 1.0
<VirtualHost *:80>
  DocumentRoot "C:\Apps\PHPApps\Proj10\web"
  ServerName app10
  DirectoryIndex index.php
  Alias /sf C:\PHP5\data\symfony10\web\sf
  <Directory "C:\Apps\PHPApps\Proj10\web">
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
  <Directory "C:\PHP5\data\symfony10\web\sf">
    AllowOverride All
    Order allow,deny
    Allow from all
    </Directory>
</VirtualHost>
 
# app12 - Aplicação para Symfony 1.2
<VirtualHost *:80>
  DocumentRoot "C:\Apps\PHPApps\Proj12\web"
  ServerName app12
  DirectoryIndex index.php
  Alias /sf C:\PHP5\data\symfony12\web\sf
  <Directory "C:\Apps\PHPApps\Proj12\web">
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
  <Directory "C:\PHP5\data\symfony12\web\sf">
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

Depis de criar o projeto e a aplicação, basta acessar http://app10 ou http://app12

Capa do Livro

Uma nova publicação, nacional está tratando de um assunto como nenhum outro livro fez. Flex 3 + Flash Media Server 3.5 acabou de sair do forno escrito por ninguém menos que Carlos Eduardo, da e-Genial e um dos pioneiros em Flex+RoR no Brasil e criador da ferramenta de EaD Treina Tom.

O livro é recomendado para aqueles que se aventuram a trabalhar com exibição de vídeos para web utilizando Flex. Distribuido pela Brasport, já encomendei o meu. Veja o índice do livro:

• Iniciando com Flex, Adobe AIR e Flash Media Server 3
• Formatos e Protocolos de Comunicação
• Publicando seu Microfone e Vídeo
• Persistindo Objetos Remotos e não Remotos
• Streaming de Vídeo e Áudio
• Comunicações Um para Um e Um para Muitos
• Gravações
• Customizações
• Segurança
• Arquivos server-side
• Administração e Deploy
• Finalizando Sites, Referências e Documentações

Mais informações e pedidos: Editora Brasport

Blog oficial do livro e diversos posts sobre o assunto: FMSGuru