WP: Quicktags personalizadas no editor

As quicktags é o método perfeito para quem tem muitas formatações para se usar em seus posts. Ela vai muito além das formações básicas que vemos na aba "Visual" quando escrevemos um post. Ela já insere códigos prontos em HTML em um só clique, além de abrir e fechar tags. Apesar delas funcionarem apenas na aba "Texto" da edição de um post ou página, garanto que com as quicktags personalizadas você não precisará utilizar a outra aba. ;D

1) O que é uma quicktag?

Uma quicktag não é nada mais, nada menos, do que uma inserção rápida de um código, poupando-o de escreve-lo manualmente. Pode ser códigos completos ou até tags simples, desde que sejam apenas em html. Não funciona com códigos em PHP, pois possui finalidade para personalizar o texto e na diagramação do mesmo, e não na programação.

Como funciona tecnicamente

Há duas formas de usar. Uma é ao selecionar o texto a ser englobado por uma tag e seleciona-la no editor. A outra é apenas adicionar antes do texto, e clica-la novamente para se fechar.

 
E dependendo da tag não precisa ser fechada quando se é um travessão, um atalho de link, uma class etc.

2) O código base das quicktags e onde salva-lo

Como por natureza o wordpress já possui algumas quicktags, nós apenas reutilizaremos o código dele já que ele possui toda a programação base realizada incluindo javascripts já implementados (ou você achava que um clique funciona com um passe de mágica? Hehe). O que faremos será apenas acrescentar mais linhas no código através desta função:

<?php
define("THEME_DIR", get_template_directory_uri()); 

// funcao quicktags - madlyluv.com
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    //adicionar quicktags aqui
    QTags.addButton( 'eg_TAG', 'NOMETAG', '<TAG>', '</TAG>', 'q', 'DESCRICAOTAG', 299 );
    //final quicktags
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
?>

Esta função você salvará com um nome minhas-quicktags.php. Esta função ficará separada para não ocupar muito espaço em seu arquivo de funções do tema, pois nunca se sabe quantas quicktags você usará. Eu uso um monte e gosto de deixar bastante organizado meus arquivos!

Para ativar a base da função que você acabou de salvar, abra a pasta de seu tema e encontre o arquivo function.php. Logo após a primeira linha (que possui o "<?php"), você acrescentará o código abaixo:

include("minhas-quicktags.php");

Se você colocou dentro de alguma pasta em específico, é só especificar o caminho acima. Para ter uma ideia, o começo do meu functions.php começa desta forma:

É muita função junta, né? Imagina isso em um único arquivo? Seria enorme e você poderia se perder. Por isso que indico que coloque apenas códigos simples diretamente pelo functions.php, e faça arquivos separados para quando o código for muito grande ou complexo.

3) Criando as quicktags

As quicktags são acrescentadas através de uma função de script chamada QTags.addButton. Para cada tag você duplicará a linha e adicionar nos campos a tag que deseja:

QTags.addButton( 'eg_TAG', 'NOMETAG', '<TAG>', '</TAG>', 'q', 'DESCRICAOTAG', 299 );

Exemplo:

QTags.addButton( 'eg_h3', 'h3', '<h3>', '</h3>', 'q', 'Subtitulos h3', 299 );
QTags.addButton( 'eg_travessao', '—', '&mdash;', '', 'q', 'Travessão', 300 );

Legenda:

1. eg_TAG: é a id de sua tag. Não pode utilizar espaços nem acentos.
2. NOMETAG: nome da tag que aparecerá no botão em seu editor.
3. <TAG> e </TAG>: início de fim de uma tag. Se for algum código sem fechamento de tag (como um travessão), deixe o local onde está "</TAG>" vazio, deixando apenas as aspas, como no exemplo.
4. DESCRICAOTAG: descrição da tag que aparecerá quando pousar o mouse no botão.
5. 299: Posição da tag. Sempre que for acrescentar uma tag, coloque os número em forma crescente para aparecer na ordem que desejar. Quando tentei utilizar um número menor que 299, a minha quicktag tinha substituído uma quicktag padrão do wordpress… depois desta posição, foi livre.

Uma quicktag pode também envolver um código grande, inclusive com quebra de linhas (a cada \n uma linha é quebrada). Um exemplo disso é uma quicktag que uso para colocar os dados de um livro que quero resenhar. Veja só como é aqui em meu código e como ele fica quando utilizo a quicktag:

 
Legal, não é? Uma mão na roda para quem gosta de incrementar coisas diferentes no posts e deixa-lo mais personalizado. Utilize e me conta o que achou (ou caso tenha dúvida)?