BlogAjuda
Dicas, temas e informações sobre WordPress, blogosfera brasileira e monetização.
Barra de ferramentas do WordPress personalizada
Quem conhece um mínimo que seja de HTML dispensa o nojento editor WYSIWYG do WordPress. Não que ele seja ruim, pelo contrário: comparado com outros sistemas, é até bom. O problema é que nem o melhor editor do tipo lhe dá a liberdade que ter e trabalhar diretamente com o código-fonte proporciona.
Nesta primeira imagem, vemos a barra de ferramentas do editor WYSIWYG:
A mesma imagem, mas usando o editor não-visual:
As vantagens do editor não-visual, quando se sabe trabalhar com ele, são muitas: maior controle sobre o código, mais leveza no editor, inclusão de códigos embedded, como os dos vídeos do YouTube, e, claro, conhecimento. Afinal, dessa maneira você sabe que, para negritar uma parte do texto, deve escrever o trecho entre as tags <strong> e </strong>, em vez de só apertar um botão.
Em tempo: para usar o editor não-visual, no painel administrativo, clique em Users, e no final da página, desmarque a opção Use the visual rich editor when writing, clicando, em seguida, no botão Update Profile ».
Além dessas vantagens, há mais uma, que descobri recentemente, mas que é extremamente útil: personalização da barra de ferramentas. Note, na segunda imagem, que apesar de ser um editor visual, há alguns botões na parte superior. Esta é a barra de ferramentas, e os botões são espécies de atalhos de códigos HTML. Selecione um texto, clique no botão b, e as tags <strong> e </strong> serão colocadas automaticamente, nos locais corretos, sem que seja necessário escrever nada. Incrível, não?
A personalização desta barra consiste em agregar mais códigos a ela. Usarei, a nível de exemplo, um dos meus sites, o WinAjuda. Nele, quando publico links, os classifico em quatro tipos: download, sobre, interno e link. São classes de CSS, que incluo nos parágrafos, gerando este efeito:
O código do exemplo acima é o seguinte:
<p class=”not_about”>Exemplo <strong>sobre</strong>.</p>
<p class=”not_interno”>Exemplo <strong>interno</strong>.</p>
<p class=”not_link”>Exemplo <strong>link</strong>.</p>
Imagine, agora, o trabalho que dá escrever estas classes toda vez que preciso incluir um link num post… Meio desumano, não? Mas, e se fosse possível criar botões na barra de ferramentas que, quando clicados, produzissem o código da classe automaticamente!? Sim, isso é possível (aliás, é exatamente isso que estou ensinando neste artigo, se ainda não ficou claro). Veja como é a barra de ferramentas do WordPress do WinAjuda:
Notou os botões avermelhados? Então, foram criados por mim, para facilitar o trabalho de redação. Explicada a finalidade do artigo (acho que preciso aprender a ser mais sucinto), vamos pôr a mão na massa.
O arquivo que guarda as configurações da barra de ferramentas é o quicktags.js, que por sua vez fica na pasta /wp-includes/js/. Baixe o referido arquivo, e abra-o no seu editor web (recomendo o Notepad++).
A partir da linha 36 estão os códigos dos botões. Eles seguem uma estrutura parecida, com uma ou outra exceção (como o botão link). Regra geral, funciona assim:
new edButton(’ed_em’
,’i’
,’<em>’
,’</em>’
,’i’
);
Vamos entender este código?
A primeira linha não tem nada de especial. A segunda, deve ter, mas não consegui identificar sua utilidade… A única coisa relevante nela é o código que surge após o edButton(ed_. Enfim, imagino que seja algum identificador. Na terceira, temos o texto que aparecerá no botão. Na quarta e na quinta há, respectivamente, o que aparecerá antes e depois da seleção do texto, ou quando não houver nada selecionado, o que aparecerá no primeiro clique, e o que aparecerá no segundo, também respectivamente. A sexta linha define a tecla de atalho do comando, que no editor deve ser sempre pressionada simultaneamente com a tecla Alt. No exemplo acima, o atalho é Alt + i . A sétima linha simplesmente encerra o código.
Os códigos dos botões vão até a linha 133. Entre a 134 e a 143, há um outro botão comentado (a propósito, este botão é “usável”; trata-se do que cria novas páginas dentro de um post/página). Ele está aí para mostrar justamente o que estou mostrando aqui: que é possível criar novos botões. Ah, se quiser habilitar o botão <!--nextpage--> no seu editor, descomente o trecho (em outras palavras, apague as linhas 134 e a 143).
Explicado tudo isso, façamos um novo botão. Por ser simples e bastante usado (pelo menos por mim), criaremos um botão da tag <h2>. Acompanhe:
new edButton(’ed_h2′
,’h2′
,’<h2>’
,’</h2>’
,’h’
);
O código pode ser colocado em qualquer lugar, dentro dos limites (que, no caso, se dá entre as linhas 36 e 143). Resolvi colocá-lo como o terceiro botão, logo após o i. Para tal, inclua o código acima a partir da linha 52.
Salve as alterações feitas no quicktags.js, e envie-o para o servidor (relembrando, ele fica na pasta /wp-includes/js/). Não é preciso fazer mais nada! Veja como fica:
Interessante, não? Adeqüe o arquivo quicktags.js às suas necessidades, e conseguirá uma melhoria considerável na sua produtividade.
Novamente, espero que o artigo lhe seja útil, e até a próxima!
19 comments
Realmente, pra mim o editor não-visual é beeeem melhor, por você ter controle sobre o código, mas pra quem não entende o mínimo de HTML, o jeito é usar o editor WYSIWYG mesmo. E gostei da parte de criar os próprios botões na barra de ferramentas, vou ler o artigo com calma para adicionar algumas “funções extras” no painel. :)
eu achei interessante,talvez vou fazer aki no meu site tbm!
mas eu instalei um plugin de WYSIWYG mais avançado, é op Chennpress,dá suporte a novos botões tbm igual ao que o ghedin mostrou….
muito bom o tuto!
Eu já fiz isso no meu Wordpress uma vez, tinha pego um tutorial em um outro lugar, mas a idéia é bem interessante e válida, com certeza, com o tempo vou implementar mais coisas no meu wordpress também. Valeu pelas dicas!!!!
Posted by Pedro Rogério
September 28th, 2006, às 12:55 pm. #.
EXCELENTE ARTIGO…..
Isso vai me ajudar bastante…. pois uso diversas tags na publicação de minhas matérias, como e …. vou configurar um também que vai facilitar muito minha vida……. Obrigado pela ajuda!
Abraços
Posted by Rael B. Riolino
September 28th, 2006, às 4:33 pm. #.
Esse blog esta sendo uma grande ajuda, mesmo! Parabens
Posted by Thalis Valle
September 29th, 2006, às 12:16 pm. #.
[…] O problema acontecia com o arquivo quicktags.js, do WordPress, sistema que uso aqui no site para administrá-lo. Este arquivo é o responsávei por criar a barra de ferramentas da área de postagem, e visando facilitar meu trabalho, incluí alguns links (conforme explico neste artigo). Infelizmente, e não sei o porquê, a alteração teve efeitos colaterais aqui, e gerou todo esse problema. Entre sexta e ontem estava viajando, o que impossibilitou a correção dele anteriormente. […]
Posted by WinAjuda » Problemas de instabilidade no site resolvidos
October 2nd, 2006, às 8:35 am. #.
Realmente, o editor é um peq fardo que é possivel de joga-lo num canto da sala, digo, de desabilita-lo. Mas esta dica dos botões, foi o maximo, usarei-a em meu brog!
a proposito: poderia falar sobre plugins? desde alguns bons (como a instalação do captcha) até a criação de um… :D
PS: Este seu blog foi para meu G-reader. (o rodrigoghedin.net já estava! :) )
PPS: espero que lembre de mim, conversamos certa vez por conta do buscador do winajuda para o firefox!
[]s, vida longa e prosperidade!
PPS: existe um plugin de comentários em ajax, é muito interessante :P
Então, Rinaldi, lembro de você sim!
Sobre plugins, sempre que possível publico análises e explicações sobre alguns. Para ler esses textos, dê uma navegada na seção Plugins. Já como fazer plugins… Aí fico devendo, porque não sei como fazê-lo.
Por fim, a qual plugin de comentários em AJAX está se referindo?
[]’s!
Posted by Rodrigo P. Ghedin
October 4th, 2006, às 11:10 am. #.
hauhauha, esse que ce tem! :D
opa, peço desculpas… nao vi essa sessao! :)
[…] Quando estava redigindo o artigo da barra de ferramentas personalizada, deparei-me com um valor, no código dos botões, estranho. Não sei se li em algum lugar, ou foi por pura sorte, mas não tardou muito para eu descobrir que tratavam-se de teclas de atalho. Da descoberta para o uso no dia-a-dia, foi um pulo! […]
Posted by Atalhos no teclado at BlogAjuda
October 4th, 2006, às 2:19 pm. #.
Rinaldi, acredite ou não, este recurso, pelo menos aqui no BlogAjuda, é feito sem o uso de plugin, graças ao tema, o k2.
A propósito, qual o nome do plugin que gera esse efeito AJAX na publicação de comentários?
[]’s!
Posted by Rodrigo P. Ghedin
October 4th, 2006, às 2:25 pm. #.
[…] Também atualizei o painel de escrita dos textos do blog, que apesar de não ser visível a nenhum visitante, é parte essencial do Blog pois torna mais fácil a escrita dos textos aqui do Blog, o painel de escrita do Blog é personalizado, e aprendi a fazer isso no blog do Rodrigo Guedin, o Blog Ajuda. Para ver essa matéria clique aqui. […]
Posted by Bruno Godoi » Atualizações
November 16th, 2006, às 2:34 pm. #.
Muito bom seu blog, parabens!
Posted by Diogo
November 24th, 2006, às 10:32 pm. #.
Excelente artigo!!! Vai economizar boa parte do meu tempo =)
[…] Hoje perdia preguiça e fui perguntar para o Oráculo como Adicionar botões no editor do wordpress, e ele me respondeu com esta excelente entrada do Blog Ajuda do Rodrigo Ghedi, e solucionou meus problemas com um só parágrafo: Em tempo: para usar o editor não-visual, no painel administrativo, clique em Users, e no final da página, desmarque a opção Use the visual rich editor when writing, clicando, em seguida, no botão Update Profile ». […]
Posted by Editor rico ? Sou mais codigo puro com limão ! --Milhouse Blog
December 27th, 2006, às 8:31 pm. #.
Olá, eu achei o seu blog porque eu estava pesquisando no google sobre como inserir códigos direto no Html do site (wordpress), pois fiz minha inscricao no google analytics e preciso colar um código direto no html do blog, mas nao entendo disso,e nao encontrei no wordpress uma opcao de editar o blog no html, caso vc saiba como pode ser feito será que vc poderia meajudar por favor?
Achei muito legal o blogajuda!
Obrigada
[…] estava redigindo o artigo da barra de ferramentas personalizada, deparei-me com um valor, no código dos botões, estranho. Não sei se li em algum lugar, ou foi […]
Posted by Blog Way » Blog Archive » Atalhos no teclado - Wordpress
April 2nd, 2007, às 7:19 pm. #.
Simplesmente perfeito esse tutorial!
Me ajudou muito na hora de colocar determinadas tags no blog.
Parabéns e Obrigado!
