Mostrar emoticons permitidos em comentários

Arquivos: comments.php, header.php, single.php

Funções: comment_form

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') && 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:

<?php if ( is_single() ): ?><script type="text/javascript" src="<?php get_template_directory_uri(); ?>/script.js"> </script><?php endif; ?>

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="javascript:grin(':?:')"      ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_question.gif"  alt="" /></a>
<a href="javascript:grin(':razz:')"   ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_razz.gif"      alt="" /></a>
<a href="javascript:grin(':sad:')"    ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_sad.gif"       alt="" /></a>
<a href="javascript:grin(':evil:')"   ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_evil.gif"      alt="" /></a>
<a href="javascript:grin(':!:')"      ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_exclaim.gif"   alt="" /></a>
<a href="javascript:grin(':smile:')"  ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_smile.gif"     alt="" /></a>
<a href="javascript:grin(':oops:')"   ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_redface.gif"   alt="" /></a>
<a href="javascript:grin(':grin:')"   ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_biggrin.gif"   alt="" /></a>
<a href="javascript:grin(':eek:')"    ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_surprised.gif" alt="" /></a>
<a href="javascript:grin(':shock:')"  ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_eek.gif"       alt="" /></a>
<a href="javascript:grin(':???:')"    ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_confused.gif"  alt="" /></a>
<a href="javascript:grin(':cool:')"   ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_cool.gif"      alt="" /></a>
<a href="javascript:grin(':lol:')"    ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_lol.gif"       alt="" /></a>
<a href="javascript:grin(':mad:')"    ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_mad.gif"       alt="" /></a>
<a href="javascript:grin(':twisted:')"><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_twisted.gif"   alt="" /></a>
<a href="javascript:grin(':roll:')"   ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_rolleyes.gif"  alt="" /></a>
<a href="javascript:grin(':wink:')"   ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_wink.gif"      alt="" /></a>
<a href="javascript:grin(':idea:')"   ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_idea.gif"      alt="" /></a>
<a href="javascript:grin(':arrow:')"  ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_arrow.gif"     alt="" /></a>
<a href="javascript:grin(':neutral:')"><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_neutral.gif"   alt="" /></a>
<a href="javascript:grin(':cry:')"    ><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_cry.gif"       alt="" /></a>
<a href="javascript:grin(':mrgreen:')"><img src="<?php echo home_url(); ?>/wp-includes/images/smilies/icon_mrgreen.gif"   alt="" /></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:

<?php get_template_part( 'emoticons', 'post' );?>

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.

Mostrar emoticons permitidos em comentários é um artigo sobre emoticons, scripts Como mostrar todos os emoticons permitidos no formulário de comentários através de script emoticons, scripts Códigos http://dianakcury.com/wordpress-pt/codigos-pt/inserir-script-com-emoticons-em-comentarios#commentsDiana K. Cury http://dianakcury.com/wordpress/wp-content/themes/di3554/img/card.png

2 ideias sobre “Mostrar emoticons permitidos em comentários

  1. 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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *