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
:
<script type="text/javascript" src="/script.js">
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="')"><img src="/wp-includes/images/smilies/icon_question.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_razz.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_sad.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_evil.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_exclaim.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_smile.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_redface.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_biggrin.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_surprised.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_eek.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_confused.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_cool.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_lol.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_mad.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_twisted.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_rolleyes.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_wink.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_idea.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_arrow.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_neutral.gif" alt="" /></a> <a href="')"><img src="/wp-includes/images/smilies/icon_cry.gif" alt="" /></a> <a href="')"><img src="/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:
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.
2 comentários sobre "Mostrar emoticons permitidos em comentários"
Myst1010
15.04.2011
Diana
15.04.2011
Comments are closed.