Mostrar emoticons permitidos em comentários

Este é um recurso muito comum em sites populares, veja como fazer sem precisa de plugins.

Arquivo de script

Crie um arquivo de texto puro chamado script.js na pasta do seu tema e adicione o seguinte:

function grin(tag) {
      var myField;
      tag = ' ' + tag + ' ';
        if (document.getElementById('comment') &amp;&amp; document.getElementById('comment').type == 'textarea') {
        myField = document.getElementById('comment');
      } else {
        return false;
      }
      if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = tag;
        myField.focus();
      }
      else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        var cursorPos = startPos;
        myField.value = myField.value.substring(0, startPos)
                + tag
                + myField.value.substring(endPos, myField.value.length);
        cursorPos += tag.length;
        myField.focus();
        myField.selectionStart = cursorPos;
        myField.selectionEnd = cursorPos;
      }
      else {
        myField.value += tag;
        myField.focus();
      }
    }

Emoticons do WordPress

Abra o arquivo header.php do seu tema e adicione o seguinte, logo após a tag /title:

&lt;script type=&quot;text/javascript&quot; src=&quot;/script.js"&gt;

Isso vai fazer com que o arquivo de script só seja carregado quando estiver sivualizando a postagem.
Crie um arquivo chamado emoticons.php na pasta do seu tema e adicione o seguinte:

<div id="emoticons">
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_question.gif"  alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_razz.gif"      alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_sad.gif"       alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_evil.gif"      alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_exclaim.gif"   alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_smile.gif"     alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_redface.gif"   alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_biggrin.gif"   alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_surprised.gif" alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_eek.gif"       alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_confused.gif"  alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_cool.gif"      alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_lol.gif"       alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_mad.gif"       alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_twisted.gif"   alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_rolleyes.gif"  alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_wink.gif"      alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_idea.gif"      alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_arrow.gif"     alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_neutral.gif"   alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_cry.gif"       alt="" /&gt;</a>
<a href="')">&lt;img src=&quot;/wp-includes/images/smilies/icon_mrgreen.gif"   alt="" /&gt;</a>
</div>

Esta lista contém todos os ícones de emoticons do WordPress.

Mostrando os emoticons clicáveis

Agora, temos que mostrar os emoticons junto ao formulário de comentários, então abra o arquivo comments.php e adicione o seguinte, logo após a tag ou comment_form:

Conclusões

Os temas mais modernos podem mostrar apenas o código comment_form para gerar o formulário, isso é um recurso recente do WordPress, então você não vai encontrar campos de texto.

Ao adicionar o código, os emoticons vão ficar ou acima ou abaixo do formulário, o que é meio bagunçado, com CSS, você pode posicionar os emoticons em qualquer lugar próximo da área de texto. No exemplo, atribuindo valores deposição ao identificador da div que criamos:

#emoticons{
 float:left;
width:80px;
top:-390px;left:50px;
position:relative
}

Lembre-se que vamos usar os emoticons do WordPress, então se quiser usar os seus, terá que substituir os arquivos de imagem que ficam em wp-includesimagessmilies. Ao substituir as imagens de lá, as do script também se atualizam.

Sem estresse!

Precisa de ajuda com seu WordPress?

Entre em contato

2 comentários sobre "Mostrar emoticons permitidos em comentários"

Myst1010

Ótima dica que não se acha em qualquer lugar. Só uma sugestão. A chamada do js está sendo feita no header verificando se está na página single, mas como também é possível ter comentários em páginas acho que o mais correto seria chamar o arquivo pelo comments.php logo após a verificação Obrigado por mais este artigo.

15.04.2011

Diana

Olá Myst, obrigada pela visita!

15.04.2011

Comments are closed.