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:

tinyMCE - popup padrão inserção de link wordpress

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

advlink Aba Geral

Aba - Popup

advlink Aba popup

Aba - Eventos

advlink Aba eventos

Aba - Avançado

advlink 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