Plugin advlink: Ensira atributos rel, hreflang, class, ID, nos links dos seus posts sem precisar ir no código
Por: Diego Franco - [ November 3rd, 2008 ]
Primeiro você deve estar se perguntando: Porque esse cara sumido resurgiu da luz (das trevas é fria) e começou a escrever sem parar? A respota é simples estou de mini-férias(1 semaninha só pra respirar) e estou me disciplando a escrever periodicamente, com o lançamento do novo design do blog, o segundo, que será lançado no dia 13/10/2008.
Mas vamos lá. Antes de iniciar a leitura deste post leia este primeiro http://diegofranco.net/archives/tinymce-o-editor-do-wordpress .
Conforme prometido vou falar sobre o ADVLINK um plugin para o editor tinyMCE usado no popular Wordpress, suas funcionalidades e como instalá-lo.
Como eu disse no parágrafo acima o ADVLINK é um plugin para o tinyMCE, que simplesmente te poupa o tempo de ir até o código inserir atributos nos seus links, simplesmente alterando o popup padrão de inserção de links do Wordpress por uma popup avançada, que te possibilita inserir praticamente todos os atributos que a tag <a> possui.
Abaixo um exemplo do popup padrão do wordpress quando você clica no botão de inserção de links da barra de ferramentas do editor:
Botão de inserção de link do editor:
Popup padrão de inserção de links do editor:
E logo abaixo o exemplo de como ficará a popup após a instalação do plugin.
Basicamente a popup ganhará 4 abas, são elas:
- Geral;
- Popup;
- Eventos;
- Avançada.
Aba - Geral
Aba - Popup
Aba - Eventos
Aba - Avançado
Nem precisa comentar os recursos que você irá ganhar não é? Além da facilidade de personalizar as abas como você queira.
Mini guia de instalação do plugin ADVLINK:
Algumas coisas que você precisa saber antes de instalar:
- As mudanças nos arquivos que irei sugerir são por sua conta e risco, por isso se você não tem muita prática com php e javascript, chame aquele amigão seu pra te dar uma força;
- Testei em uma versão do Wordpress 2.3 local e não funcionou;
- A instalação funcionou perfeitamente no Wordpress 2.6 com as modificações que eu fiz;
- FAÇA BACKUP DE TUDO QUE VOCÊ FOR ALTERAR;
- Eu não tenho tempo pra te ajudar por isso vou tentar ser bem didático pra que não ocorra dúvidas;
- No final deste post estarão todas as referências que usei para a instalação do plugin e o que não tinha na documentação eu deixarei muito bem explicado;
- Não irei entrar em detalhes sobre a funcionalidade dos arquivos, afinal de contas alguma coisa você deverá estudar não é;
- Fique tranquilo o mínimo que irá acontecer será os botões do seu editor sumir, e o máximo nem eu quero saber;
O que você precisa baixar?
Baixe a pasta do plugin advlink: http://diegofranco.net/files/advlink.rar
Estou disponibilizando está pasta aqui no meu site com algumas modificações necessárias já feitas, caso você queira pegar um atalho este é o caminho;
Se quiser baixar a pasta original você terá primeiro que baixar o editor tinyMCE completo no site do desenvolvedor: http://tinymce.moxiecode.com/download.php;
Após baixar a pasta completa do tinyMCE, descompacte-a vá até a pasta:
tinymce_3_2_0_2\tinymce\jscripts\tiny_mce\plugins
lá você encontrará a pasta de do plugin “advlink”.
Quais arquivos você terá que subir que você não tenha no Wordpress?
Você deverá subir a pasta do plugin para o seguinte diretório:
wp-includes/js/tinymce/plugins/
Quais arquivos você irá alterar?
Serão quatro, são eles:
wp-includes/js/tinymce/tiny_mce_config.php
wp-includes/js/tinymce/langs/wp-langs.php
wp-includes/js/tinymce/plugins/advlink/link.htm - (Somente se tiver baixado do site do desenvolvedor)
wp-includes/js/tinymce/plugins/advlink/js/advlink.js - (Somente se tiver baixado do site do desenvolvedor)
Alteração no arquivo - tiny_mce_config.php ( wp-includes/js/tinymce/tiny_mce_config.php )
Entre as linhas 60 e 80 você encontrará a seguinte linha de código:
$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen' );
Os nome acima entre as aspas talvez não sejam os mesmos que estão na sua linha de código, não se preocupe a única coisa que você deverá fazer aqui é acrescentar a palavra “advlink”, no caso acima ficaria da seguinte forma:
$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'advlink' );
Alteração no arquivo - wp-langs.php ( wp-includes/js/tinymce/langs/wp-langs.php )
Logo abaixo deste trecho:
$strings = 'tinyMCE.addI18n({' . $language . ':{
common:{
Acrescente as seguintes linhas:
general_tab:"' . mce_escape( __('General') ) . '",
popup_tab:"' . mce_escape( __('Popup') ) . '",
events_tab:"' . mce_escape( __('Events') ) . '",
advanced_tab:"' . mce_escape( __('Advanced') ) . '",
title:"' . mce_escape( __('Insert/edit link') ) . '",
url:"' . mce_escape( __('Link URL') ) . '",
target:"' . mce_escape( __('Target') ) . '",
titlefield:"' . mce_escape( __('Title') ) . '",
is_email:"' . mce_escape( __('The URL you entered seems to be an email address, do you want to add the required mailto: prefix?') ) . '",
is_external:"' . mce_escape( __('The URL you entered seems to external link, do you want to add the required http:// prefix?') ) . '",
list:"' . mce_escape( __('Link list') ) . '",
general_tab:"' . mce_escape( __('General') ) . '",
popup_tab:"' . mce_escape( __('Popup') ) . '",
events_tab:"' . mce_escape( __('Events') ) . '",
advanced_tab:"' . mce_escape( __('Advanced') ) . '",
general_props:"' . mce_escape( __('General properties') ) . '",
popup_props:"' . mce_escape( __('Popup properties') ) . '",
event_props:"' . mce_escape( __('Events') ) . '",
advanced_props:"' . mce_escape( __('Advanced properties') ) . '",
popup_opts:"' . mce_escape( __('Options') ) . '",
anchor_names:"' . mce_escape( __('Anchors') ) . '",
target_same:"' . mce_escape( __('Open in this window / frame') ) . '",
target_parent:"' . mce_escape( __('Open in parent window / frame') ) . '",
target_top:"' . mce_escape( __('Open in top frame (replaces all frames)') ) . '",
target_blank:"' . mce_escape( __('Open in new window') ) . '",
popup:"' . mce_escape( __('Javascript popup') ) . '",
popup_url:"' . mce_escape( __('Popup URL') ) . '",
popup_name:"' . mce_escape( __('Window name') ) . '",
popup_scrollbars:"' . mce_escape( __('Show scrollbars') ) . '",
popup_statusbar:"' . mce_escape( __('Show status bar') ) . '",
popup_toolbar:"' . mce_escape( __('Show toolbars') ) . '",
popup_menubar:"' . mce_escape( __('Show menu bar') ) . '",
popup_location:"' . mce_escape( __('Show location bar') ) . '",
popup_resizable:"' . mce_escape( __('Make window resizable') ) . '",
popup_dependent:"' . mce_escape( __('Dependent (Mozilla/Firefox only)') ) . '",
popup_size:"' . mce_escape( __('Size') ) . '",
popup_position:"' . mce_escape( __('Position (X/Y)') ) . '",
id:"' . mce_escape( __('Id') ) . '",
style:"' . mce_escape( __('Style') ) . '",
classes:"' . mce_escape( __('Classes') ) . '",
target_name:"' . mce_escape( __('Target name') ) . '",
langdir:"' . mce_escape( __('Language direction') ) . '",
target_langcode:"' . mce_escape( __('Target language') ) . '",
langcode:"' . mce_escape( __('Language code') ) . '",
encoding:"' . mce_escape( __('Target character encoding') ) . '",
mime:"' . mce_escape( __('Target MIME type') ) . '",
rel:"' . mce_escape( __('Relationship page to target') ) . '",
rev:"' . mce_escape( __('Relationship target to page') ) . '",
tabindex:"' . mce_escape( __('Tabindex') ) . '",
accesskey:"' . mce_escape( __('Accesskey') ) . '",
ltr:"' . mce_escape( __('Left to right') ) . '",
rtl:"' . mce_escape( __('Right to left') ) . '",
link_list:"' . mce_escape( __('Link list') ) . '",
popup_return:"' . mce_escape( __('Insert - return false') ) . '",
Alteração no arquivo - link.htm ( wp-includes/js/tinymce/plugins/advlink/link.htm )
Retire o seguinte trecho “advlink_dlg.” inclusive o ponto de todas as variáveis de tradução. Abaixo um exemplo antes e depois da modificação.
Antes:
{#advlink_dlg.title}
{#advlink_dlg.general_tab}
{#advlink_dlg.popup_tab}
{#advlink_dlg.events_tab}
{#advlink_dlg.advanced_tab}
Depois:
{#title}
{#general_tab}
{#popup_tab}
{#events_tab}
{#advanced_tab}
Alteração no arquivo - advlink.js ( wp-includes/js/tinymce/plugins/advlink/js/advlink.js )
Altere o seguinte trecho de código:
html += '<option value="_self">' + tinyMCEPopup.getLang('advlink_dlg.target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('advlink_dlg.target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('advlink_dlg.target_top') + ' (_top)</option>';
Para este:
html += '<option value="_self">' + tinyMCEPopup.getLang('target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('target_top') + ' (_top)</option>';
Está quase pronto, logicamente depois de ter feito backup de tudo e logicamente de ter salvo as modificações suba todos os arquivos para os seus respectivos diretórios.
O que você irá excluir?
EXCLUA um arquivo compactado em gzip que estiver no diretório:
wp-content/uploads/js_cache/
que deve ser algo parecido com isto: tinymce_0aag3dg84fr6c7dgf532b9t5a277g4d0497.gz ( Se tudo der certo outro será gerado no lugar ).
Prontinho! Vá até o Wordpress na página “Escrever um novo post” ou “Write new post”, adicione qualquer palavra no editor, selecione-a e clique no botão adicionar link na barra de ferramentas do próprio editor, a popup avançada será carregada.
É isso pessoal espero ter colaborado, e logicamente espero que dê tudo certo, se você encontrar um caminho mais curto para a instalação me avise para colocar um update aqui, ou, mesmo que eu não tenha tempo para ajudar não deixe de comentar aqui qualquer problema, pode ser que seja simples, e por meio do próprio comentário eu responda a sua questão.
Referências
- Site do desenvolvedor: http://tinymce.moxiecode.com/
- Documentação: http://tinymce.moxiecode.com/documentation.php
- Wiki própria: http://wiki.moxiecode.com/index.php/TinyMCE:Index
- Plugins: http://tinymce.moxiecode.com/plugins.php
- Mais plugins: http://wiki.moxiecode.com/index.php/TinyMCE:Plugins
Procure por: MP3, iPod, celulares, notebooks, câmeras
O Modelando é o site pessoal do Diego Franco Miguel que, atualmente, trabalha como Designer e lidera uma equipe de Agência Web na 
Assine o Feed do Modelando
