WP: Quicktags personalizadas no editor

Tutorial Wordpress

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)?

Veja também...

Almoço no Las Nenas Café Bistrô (Goiânia)
Londres: Fim de tarde em Notting Hill e primeira vez na Starbucks
As ilustrações de Renata Soares

5 Comentário(s)

(5 pelo blog e pelo facebook)
  • Ana
    24 . 01 . 2016

    @Aninha, não deu certo mesmo assim! Não sei se com as atualizações mudou alguma coisa, mas tentei até com outros códigos que o próprio wp dá, mas não deu certo! Uma pena!

    Responder

  • Ana
    23 . 01 . 2016

    Oh Ana, fiz tudo da melhor forma possível mas não aparece a quicktag no editor! Será que mudou alguma coisa com as atualizações do WP? Minha versão é a 4.4.1

    Responder

    • Aninha
      Visitar blog
      24 . 01 . 2016

      @Ana, as quicktags aparecem apenas no editor de "texto" e não em visual. Se mesmo assim não aparece, tenta colocar o código diretamente em functions.php, ignorando a primeira e segunda linha do código (que seria <?php e o fechamento dele ?>) e veja se dá certo :)

      Responder

  • Keyko
    Visitar blog
    28 . 03 . 2015

    Aninha, sua linda! Facilitou muito a minha vida aprender esse truque! xD Obrigada por compartilhar. Se eu puder sugerir um tutorial, gostaria de tutoriais pra customizar os comentários, tanto os feitos quanto os formulários. ^_^ Bjos!

    Responder

  • Luanna
    Visitar blog
    15 . 07 . 2014

    O que seria de mim sem Ana, gente? Hahah.
    Adoro seus tutoriais, são sempre tão úteis, poste sempre!!
    Esse é um pouquinho mais difícil de fazer, além de que sempre morro de medo de mexer no function.php e deixar o tal "espacinho" que faz a página ficar toda em branco.

    Beijos Ana! http://luadeoutubro.com

    Responder