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

[...] Continuar lendo...

Desenvolvimento | View blog reactions

advlink | tinyMCE | Wordpress