WordPress

Inscreva-se em nosso canal no Youtube Daviwp

Melhore seu editor de textos do WordPress

18/04/2011 WordPress (1) comentário

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");

Até a próxima!

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.