Back-End

28 fev, 2011

Melhore seu editor de textos do WordPress

Publicidade

Para quem produz conteúdo para a web, o editor de textos é uma das principais ferramentas de trabalho. No WordPress esse editor é bastante completo, mas é possível deixá-lo ainda mais personalizado e adaptado às suas necessidades. Os colegas do blog Cats Who Code reuniram algumas dicas interessantes e eu reuni as 7 de que mais gostei aqui.

01. Permitir mais tags HTML no editor

Por padrão, o editor do WordPress não
permite tags html que não sejam compatíveis com o standard XHTML 1.0.
Por exemplo, os iframes não são reconhecidos e aceitos pelo editor. Se você deseja adicionar um iframe dentro do artigo ou de uma
página, é provável que acabe por se frustrar pelo caminho.

O código abaixo irá forçar o seu editor a aceitar mais tags HTML. Apenas copie e cole o seguinte código para o arquivo functions.php do seu template, salve e está feito!

function fb_change_mce_options($initArray) {
$ext = 'pre[id|name|class|style],iframe[align|longdesc| name|width|height|frameborder|scrolling|marginheight| marginwidth|src]';

if ( isset( $initArray['extended_valid_elements'] ) ) {
$initArray['extended_valid_elements'] .= ',' . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}

return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

02. Definir o editor HTML como padrão

A grande maioria dos webdesigners e dos desenvolvedores
não gosta do editor visual do WordPress. Pessoalmente usamos tanto o
editor visual quanto o HTML, mas verdade seja dita, o editor visual tem
muito mais probabilidade de gerar código não válido e/ou confusões em
termos de organização.

Se você é um daqueles usuários que
prefere usar o editor HTML, então por que não torná-lo no padrão? Copie e
cole a seguinte linha de código para o arquivo functions.php do seu template e está feito.

add_filter('wp_default_editor', create_function('', 'return "html";'));

03. Definir o texto padrão no seu editor

Se você sempre inicia seus artigos com o mesmo texto, por exemplo indicando a
seus usuários que podem assinar seus feeds ou a newsletter, então
você certamente deveria tornar esse texto um padrão do seu editor do WordPress. Dessa forma, o texto aparecerá automaticamente sempre
que você vai escrever um novo artigo.

Abra o seu arquivo functions.php e cole lá dentro o seguinte código. Não se esqueça de editar o texto conforme a sua necessidade.

add_filter( 'default_content', 'my_editor_content' );

function my_editor_content( $content ) {
$content = "Se gostou desta postagem, não esqueça de subscrever o nosso rss feed.";
return $content;
}

4. Adicionar a sua língua à verificação ortográfica

Por padrão, o WordPress tem um
verificador de ortografia em Inglês para verificar os seus erros de
escrita em seus artigos e páginas. Mas, o que acontece se você escrever
textos em várias línguas e/ou escrever textos numa outra língua além
daquela que está na raiz do seu WordPress?

Se pretender adicionar uma outra língua à
verificação ortográfica do seu WordPress, isso é bastante fácil de
fazer na verdade. Copie e cole o seguinte código dentro do seu arquivo functions.php para adicionar o Português ao seu verificador ortográfico.

function fb_mce_external_languages($initArray){
$initArray['spellchecker_languages'] = '+Portuguese=pt, English=en';

return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

Você pode ver a tabela de prefixos completa no Codex do WordPress.

05. Adicionar botões ao editor

O TinyMCE (o nome do editor WYSIWYG
usado no WordPress) tem diversos botões que permitem colocar texto em
negrito, inserir parágrafos, e por aí adiante.

Se você gosta da ideia de inserir botões personalizados, o código seguinte irá
ajudá-lo com essa tarefa. Copie e cole-o no arquivo functions.php do seu template, e um botão “YouTube” será apresentado no
seu editor. Tenha em mente que este código adiciona o botão ao
seu editor, mas ele não faz qualquer tipo de ação. Cabe a você explorar um pouco as opções disponíveis para criar ações que deseje e customizar o editor do jeito que você mais precisa.

function add_youtube_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', 'add_youtube_tinymce_plugin');
add_filter('mce_buttons', 'register_youtube_button');
}
}

add_action('init', 'add_youtube_button');

function register_youtube_button($buttons) {
array_push($buttons, "|", "brettsyoutube");
return $buttons;
}

function add_youtube_tinymce_plugin($plugin_array) {
$plugin_array['brettsyoutube'] = get_bloginfo('template_url').'/custom/editor_plugin.js';
return $plugin_array;
}

06. Definir diferentes folhas de estilos para diferentes artigos

Os Custom post types
é provavelmente uma das melhores funcionalidades adicionadas ao
WordPress nos últimos anos. Se já os experimentou, provavelmente já
criou alguns custom post types para o seu portfólio ou simplesmente para
outro tipo de atividade específica. E que tal definir diferentes folhas
de estilo no seu editor HTML para os diferentes tipos de artigos que
você vai criar?

Copie e cole o seguinte código no arquivo functions.php
do seu template. Você vai precisar fazer algumas adaptações, dependendo do
tipo de artigos. Não se esqueça também de mudar o nome das folhas de
estilo.

function my_editor_style() {
global $current_screen;
switch ($current_screen->post_type) {
case 'post':
add_editor_style('editor-style-post.css');
break;
case 'page':
add_editor_style('editor-style-page.css');
break;
case 'portfolio':
add_editor_style('editor-style-portfolio.css');
break;
}
}
add_action( 'admin_head', 'my_editor_style' );

07. Mostrar botões escondidos do editor

Por padrão, o editor TinyMCE do
WordPress tem botões para tarefas comuns como negrito, itálico,
títulos, etc, mas que estão escondidos. É necessário clicar num botão
para que essas opções sejam mostradas.

Para mostrar sempre os botões escondidos do seu editor, copie e cole o seguinte código no arquivo functions.php do seu template:

function enable_more_buttons($buttons) {
$buttons[] = 'hr';
$buttons[] = 'fontselect';
$buttons[] = 'sup';

// etc, etc...

return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons");

É tudo por hoje! Até a próxima!