Transforme o seu formulário de comentários num editor HTML como o editor nativo do WordPress 3.3. Coloque o editor em qualquer página ou post no front-end do seu site com o plugin que fornecemos. Com o advento do novo WordPress 3.3 para final deste ano, foram muitas as novas funcionalidades criadas que tornam a vida dos developers e bloggers mais fácil.
No entanto, a grande novidade a meu ver, é a espetacular possibilidade de colocar o editor dos posts nativo que encontramos na administração, no front-end do site de maneira fácil, rápida e segura. Graças ao trabalho incondicional dos developers do WordPress, esta funcionalidade, que foi muitas vezes pedida pelos usuários ao longo dos tempos, é agora uma realidade que podemos usar, usufruir e até abusar dela!
POSSIBILIDADES DE APLICAÇÃO
Esta novidade por si só é um óptimo avanço para os developers e designers uma vez que, possibilitando ter um editor de conteúdo completamente integrado no WordPress no seu site, as possibilidades de aplicação não têm barreiras.
Seguem alguns exemplos de possibilidade de aplicação:
- Lançador de notícias comunitário em que qualquer usuário do site possa submeter uma noticias a partir do site;
- Um site de classificados com formulário de registo e editor de conteúdo dos classificados, com possibilidade de upload de imagens;
- Site de atualização de status à lá Facebook;
- Formulário de comentários com o editor HTML;
- etc…
Como viu são imensas as possibilidades e dão aos seus usuários uma ótima ferramenta para embutir em seus sites.
A API DO EDITOR
O editor tem uma API (Application Programming Interface) bastante fácil e intuitiva, possibilitando a introdução rápida do editor em qualquer lugar do seu site.
Para instanciar um novo editor você deverá chamar a função wp_editor() passando como parâmetros o conteúdo, o ID que você quer colocar no editor e um array de opções de configuração:
<?php wp_editor( $content, $editor_id, $settings = array() ); ?>
Poderá, opcionalmente passar novas configurações ao editor de forma a adaptar-se ao o que você necessita. Com isto poderá obter desde um pequeno editor de HTML ao editor completo igual ao da administração.
Download da versão em PDF desta referência
COMO EMBUTIR O EDITOR NUM TEMA
É fácil embutir o editor num template do nosso tema. Basta passar a função wp_editor() no sitio onde queremos que apareça o editor ou simplesmente usar uma Action Hook para fazê-lo por nós:
<?php
echo '<form action="" method="post">';
wp_editor('<p>Adicione aqui o seu conteúdo!</p>', 'conteudo_submetido' );
echo '<p><input type="submit" value="Submeter Conteúdo" /></p></form>'
?>
Este snippet incorpora no lugar onde você o colocar o editor com o ID conteudo_submetido e um botão para submeter o conteúdo que foi escrito no editor. Você poderá depois passar uma acção no functions.php do seu tema para usar este conteúdo submetido como você quiser.
Por exemplo, você pode querer guardar todas as submissões por este formulário como um post de rascunho. Para isso poderá colocar o seguinte snippet no seu functions.php:
add_action( 'init', 'ewp_frontend_editor_process_submit' );
function ewp_frontend_editor_process_submit() {
if ( ! isset( $_POST['conteudo_submetido'] ) ) return;
wp_insert_post( array(
'post_title' => substr( strip_tags( $_POST['conteudo_submetido'] ), 0, 20 ),
'post_content' => $_POST['conteudo_submetido'],
'post_author' => 1,
'post_status' => 'draft',
)
);
}
Este snippet é trigado quando o WordPress está a iniciar. Isto é feito com a função add_action( $hook, $nome_da_função ) adicionando a função que irá ser “corrida”.
Dentro da função nós temos a condição que se não for submetido nenhum conteúdo então a função não continuará garantindo que não estaremos a guardar posts de cada vez que um usuário aparece no site.
Para inserirmos o post propriamente dito usamos a função wp_insert_post() que, nos seus parâmetros mínimos, deverá conter o título, o conteúdo do post, o autor do post (número de usuário, neste caso garantimos que é o administrador o dono destes posts) e o estado do post que neste caso é rascunho.
COMO ADICIONAR O EDITOR AO FORMULÁRIO DE COMENTÁRIOS
É possível substituir o campo da mensagem do formulário de comentários pelo editor. Para isso basta colocar o seguinte snippet no functions.php do seu tema:
add_filter( 'comment_form_field_comment', 'editor_to_comments' );
function editor_to_comments() {
$settings = array(
'wpautop' => false,
'media_buttons' => false,
'textarea_name' => 'comment',
'textarea_rows' => 5,
'tabindex' => '',
'editor_css' => '',
'editor_class' => '',
'teeny' => false,
'dfw' => false,
'tinymce' => array(
'theme_advanced_buttons1' => 'bold,italic,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,link,unlink,|,fullscreen',
),
'quicktags' => true
);
echo '<div class="comment-form-comment"><label for="comment">Comment</label><div>';
wp_editor( '', 'comment', $settings );
echo '</div></div>';
return false;
}
Esta função é trigada quando o o formulário de comentários é impresso na tela. Com esta hook podemos substituir o campo da mensagem pelo editor.
Na função usamos novamente a função wp_editor() para fazer o display do nosso editor, passando-lhe os parâmetros que se adequam melhor a este caso.
Use como referência para os settings a cheatsheet que fornecemos no início deste artigo.
O PLUGIN FRONT-END EDITOR E COMMENTS WYSIWYG
Como já é de esperar, preparámos um plugin especial com estes dois snippets, totalmente integrados e prontos a usar.
Com este plugin você poderá usar o editor em qualquer página ou post do seu site usando a shortcode [wpeditor], possibilitando aos seus usuários submeterem posts que poderá posteriormente moderar.
Download do Plugin EW Front-End Editor!
Descarregado 291 vezes
Veja o screenshot em baixo de como ficou esta funcionalidade integrada no tema oficial TwentyElevent:
Além de poder colocar o seu editor em páginas ou posts, poderá também ativar a funcionalidade do editor no formulário de comentários. Para isso, após ativação do plugin, dirija-se a Opções e selecione Discussão.
Dependendo da sua instalação, irá algures encontrar as seguintes opções que poderá usar para controlar a forma como o seu editor aparece no sistema de comentários:
E aqui está uma screenshot de como é que o editor aparece com todas as opções acima ativas. Repare na forma como ele se encontra completamente integrado no tema TwentyEleven:
Este plugin já vem com pack de lingua completamente traduzido para português!
Gostou deste artigo? Não se esqueça de comentar aí e de divulgar a Escola WordPress junto dos seus colegas e amigos.
Até breve e um abraço a todos,
Vitor
Jose Correia
Muito Bom Vitor.
Não quero desiludir o Paulo mas o Vitor tem mais jeito para escrever e está mais dentro da matéria de códigos do wp.
Vitor Carvalho
Olá José.
Não me leves a mal este comentário que te vou escrever.
Nós não podemos esquecer que o Paulo é o elemento central aqui! Ele escreve vários artigos por dia em vários blogues e por isso, por vezes não consegue fazer artigos tão longos.
Eu e o Paulo, assim como outros elementos aqui da Escola, formamos todos uma equipa e cada um tem uma posição concreta. No meu caso, escrevo artigos técnicos semanais, porém isso não quer dizer que o Paulo não esteja também por dentro do assunto.
Obrigado pelo apoio e incentivo que tens sido José.
Um abraço para ti!
Rick
Muito legal Vitor!
É possível retirar alguns recursos, como upload e links?
Vitor Carvalho
É possivel sim Rick,
Para retirar o recurso do upload você só tem que passar nos settings o parâmetro ‘media_buttons’ => false.
Os link é só retirar as chamadas aos botões no parâmetro ‘tiny_mce’. se retirar ‘link,unlink’ esses botões já não vão mais aparecer.
Caso você esteja a usar o plugin, basta desmarcar a opção ‘Enable Media Button’
Um abraço.
Rick
Obrigado Vitor!
Eu gostei muito desse plugin, mas não é legal deixar algumas opções, principalmente os links, pois muitos serão considerados Spam.
Excelente post!
Vitor Carvalho
Pois é, tem razão. Temos que ver aqui eu e o Paulo como vamos fazer com isso. Provavelmente o melhor é criar mais opções no painel, ou então uma UI para selecionar os botões que se quiser.
Jose
Olá Vitor. O que eu quis dizer é que como o Paulo dedica mais a outros blogs como o escola dinheiro por vezes nao tem tempo de escrever artigo bombásticos, eu só disse isto porque acho que os artigos do Vitor tem mais interesse porque eu estou aqui para aprender mais sbre php, html, css, código wp. Mas o Paulo nao deixa de ser muito bom e actualiza diariamente os blogs. Os dois são muito bons. Continuem assim.
Jose
Hoje em dia anda por aí muitos hackers, isto não pode facilitar a vida aos hackers? o html nos comentários?
Vitor Carvalho
Bem, o HTML por si só não faz mal nenhum
A função wp_insert_post() retira quaisquer elementos style, script, entre outros que possam ser malaciosos ou prejudiciais.
A meu ver, o maior problema são as chamadas SQL e PHP que possam ser embutidos nesse HTML, mas mesmo isso já está implementado na função.
Um abraço
Jose
Vitor desculpe estar a comentar tantas vezes mas é quesó agora li o conteúdo e tenho a seguinte duvida:
Onde diz “A API DO EDITOR” onde eu coloco esse código?
Vitor Carvalho
Olá José.
Aquele código é genérico e mostra a API da funcionalidade.
O que precisas de fazer é colocar a função wp_editor no sitio do template do teu tema onde queres que ele apareça e passar-lhe os parâmetros necesários.
Jose
Fiz download do plugin, instalei e nada. Qundo fui aos comentarios nao apareceu nada disso porque?
Jose
Onde coloco o [wpeditor] ?
Vitor Carvalho
Essa shotcode [wpeditor] é para colocar na página ou post onde queres que apareça.
Atenção José, este plugin só funciona no novo WordPress 3.3 que ainda está em Beta
Jose Correia
Obrigado Vitor,claro não funcionava porque não estou a usar os betas, mas quando sair o worpress 3.3 vou logo aplicar. Ao colocar este plugin automaticamente desaparece os comentários do meu blog?
Vitor Carvalho
Ao instalares este plugin, o que acontece é que te dá a oportunidade de selecionares as opções na página discussão para, em vez de um campo simples no formulário de contactos, aparecer um campo com o editor.
abraço.
Jose Correia
Estou mesmo burro.
É assim no titulo diz que é para formulário de comentarios e voce diz que e para formolario de contacto, afinal qual é?
É possivel tornar este plugin funcional na versao da actualidade do worpress 2.2? O que devo editar no código?
Vitor Carvalho
Ups! Fui eu que me enganei José.
É o formulário de comentários que ele altera.
Não é possível criar uma versão para o WordPress versão anterior à 3.3, pois esta API só está disponível nessa versão.
Mais cedo ou mais tardes vais ter que atualizar o teu blog para essa versão, uma vez que está previsto o lançamento para final deste mês ou início de Dezembro.
Abraço.
K
http://www.fenixdown.com.br/wp-content/casts/Bloco2EditadoTrilhado.mp3
Marcos Silva
Me ajudaram mto essas dicas, criei meu blog com a Inter.net Hosting, ficou mto bom, to usando o plugin FRONT-END EDITOR E COMMENTS WYSIWYG, recomendo.
Vitor Carvalho
Muito obrigado Marcos Silva.
Abraço aí
Jose Correia
Estou a ser abusivo mas tive a ver no google e nada tinha mesmo de perguntar aqui.
Então o que faz a api e o que é?
E porque a api deste plugin não dá para esta versão.
É o meu ultimo comentario juro nao quero ser chato…
Vitor Carvalho
Olá José, não chateias!
Vê este artigo da Wikipedia http://pt.wikipedia.org/wiki/API
Podes sempre perguntar se não perceberes alguma coisa.
A API é um conjunto de funções de uma aplicação que são usados pelos plugins para poderem aceder à aplicação principal. Para isso, as APIs têm que ser desenvolvidas primeiro.
Foi o caso desta API, que só terminou de ser desenvolvida para esta versão do WordPress, e por isso só pode ser usada com ela.
Abraço.
Jose Correia
Obriga e um grande abrraço.
Percebi tudo.
Haa
http://www.fenixdown.com.br/wp-content/gravac/EMAILSFC1.mp3
Jose Correia
Olá queria fazer uma coisa deste género.
Se, post = excerpt, mostre o excerpt e mostre o botão reade more. Na prática, uma div com read more é chamada quando post > 250 e uma div sem o read more quando o post <= excerpt.
Alguem sabe como fazer isso em código para o wordpress?
Vitor Carvalho
Hmm… não é dificil fazer isso José, no entanto vai requerer mais conhecimento em PHP.
A melhor maneira de se fazer isso é a seguinte:
1. Chama-se o conteúdo com a função get_the_content()
2. Verifica-se qual é o tamanho do conteúdo
3. Se for menor ou igual imprime-se the_content() senão imprime-se the_excerpt()
ou seja:
if( strlen( get_the_content() ) > 250 )
the_excerpt();
else
the_content();
Isso deve funcionar.
Abraço.
Jose Correia
Muito Obrigado Vitor. Funcionou na perfeição e ainda assim coloquei que só aparece o botão ler artigo comleto quando tiver mais artigos que o máximo do excerto. Muito obrigado pela tua ajuda.
E desculpa lá não ter haver com o artigo.
Vitor Carvalho
Obrigado José,
Queres partilhar a tua modificação do código?
Felipe
Ola meu nome é Felipe e quero tirar uma dividar preciso saber uma coisa. Eu tenho um wordpress sem dominio e hospedagem. Tem jeito de instalar template de loja virtual no meu wordpress mesmo sem dominio e hospedagem? E tambem na admin do meu wordpress não tem plugin e não sei instala-lo então explicar com fazer isso tambem.
Vitor Carvalho
Se não tem domínio e hospedagem como é que tem WordPress a correr?
Se me explicar melhor talvez consigamos ajudar.
Avelino FV
Os felicito por el plugin, realmente útil.
Acabo de enviaros por e-mail vuestro estupendo plugin EWP Frontend Editor con la traducción al español (es_ES).
Vitor Carvalho
Muchas gracias Avelino
Jorge
Como puedo hacer para que en el editor me aparezca la opción de Agregar Categorías, Tags y algun que otro campo personalizado?, alguna forma de integrarlo con Recaptcha ?
Saludos!
Vitor Carvalho
Olá Jorge,
Neste momento não temos essa funcionalidade no plugin, no entanto é um proposta que poderá aparecer numa nova versão
Obrigado!
Jorge
La estaré esperando ansiosamente.
Gracias por tu respuesta.
Saludos!
Matheus M.
Sou novo com WP e instalei o 3.3 e o plugin dado pelo site.. a parte do comentários eu fiz certinho.. mais gostaria de implementar uma pagina onde qualquer vizitante podesse escrever um post e eu aprovar depois… não entendi a parada de como add apenas colocando a Shordcode.. poderia explicar detalhadamente como fazer isso ? qual pasta devo modificar..etc..
Matheus M.
Ainda não fui respondido no meu primeiro comentário.. espero que possam me responder nesse…O problema de cima eu já resolvi.. mais agora estou com outro problema, o editor só envia os post pros meus rascunhos quando estou logado na minha conta de administrador.. como faço para que qualquer pessoa possa postar seja usuário ou não? Ps: Usuários também não conseguem também… só mesmo minha conta de admin
Jefferson
Funcionou direitinho, muito bom mesmo, utilizei apenas o Editor nos comentários. Valeu Vitor.
Juan
Olá, gostaria de saber se alguem sabe como faço para desabilitar links nos comentarios do wordpress? Estou procurando há um bom tempo e não acho nada que funcione. se alguem souber posta um link!
marcus loren lopes
boa tarde, como faço para colocar um titulo para o post antes de submeter o post?
ex:
<?php
echo '’;
wp_editor(‘Adicione aqui o seu conteúdo!’, ‘conteudo_submetido’ );
echo ”
?>
preciso por um campo de titulo para o post, antes do editor do wp para passar esses dados para o painel como rascunho. obrigado!