Emoticonos en los Comentarios de WordPress
¿Te gustaría agregar emoticonos en los comentarios para que tus usuarios los utilizen?
Ahora te mostraré una forma muy simple de agregar estos emoticonos en el area de comentarios.
Para utilizar estos emoticonos tan sólo se debe hacer click sobre ellos.
Este código debes agregarlo en tu archivo comments.php de tu theme activo, normalmente se agregan sobre el area de escritura.
<script type="text/javascript">
function emoticonos(tag) {
var myField;
if (document.getElementById('content') && document.getElementById('content').type == 'textarea') {
myField = document.getElementById('content');
}
else 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 = endPos;
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();
}
}
</script><br><p>Haz click en los emoticonos para usarlos:</p>
<img src="http://tublog.com/wp-includes/images/smilies/icon_smile.gif" alt=":smile:" onclick="emoticonos(':smile: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_biggrin.gif" alt=":grin:" onclick="emoticonos(':grin: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_razz.gif" alt=":razz:" onclick="emoticonos(':razz: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_lol.gif" alt=":lol:" onclick="emoticonos(':lol: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_wink.gif" alt=":wink:" onclick="emoticonos(':wink: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_mrgreen.gif" alt=":mrgreen:" onclick="emoticonos(':mrgreen: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_neutral.gif" alt=":neutral:" onclick="emoticonos(':neutral: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_rolleyes.gif" alt=":roll:" onclick="emoticonos(':roll: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_eek.gif" alt=":shock:" onclick="emoticonos(':shock: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_confused.gif" alt=":???:" onclick="emoticonos(':???: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_cool.gif" alt=":cool:" onclick="emoticonos(':cool: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_redface.gif" alt=":oops:" onclick="emoticonos(':oops: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_twisted.gif" alt=":twisted:" onclick="emoticonos(':twisted: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_evil.gif" alt=":evil:" onclick="emoticonos(':evil: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_surprised.gif" alt=":eek:" onclick="emoticonos(':eek: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_mad.gif" alt=":mad:" onclick="emoticonos(':mad: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_sad.gif" alt=":sad:" onclick="emoticonos(':sad: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_cry.gif" alt=":cry:" onclick="emoticonos(':cry: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_exclaim.gif" alt=":!:" onclick="emoticonos(':!: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_idea.gif" alt=":idea:" onclick="emoticonos(':idea: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_arrow.gif" alt=":arrow:" onclick="emoticonos(':arrow: ');">
<img src="http://tublog.com/wp-includes/images/smilies/icon_arrow.gif" alt=":arrow:" onclick="emoticonos(':arrow: ');">
<br />
<!-- AQUI TERMINA EL CODIGO PARA LOS EMOTICONOS WORDPRESS CON 1 CLICK -->
Debes cambiar el lugar donde dice http://tublog.com por la dirección de tu blog y no hacer ningún otro cambio, ya que los emoticonos vienen por defecto en tu instalación de WordPress, dentro de la carpeta /wp-includes/images/smilies/
Pueden probar los emoticones en este post.
Espero que les sea de utilidad este truco.
18/09/2009
September 20th, 2009 a las 10:03 am
[...] Blooging, JuanK nos explica como colocar emoticonos en los comentarios de WordPress, bastante útil para favorecer los comentarios en tu [...]
September 21st, 2009 a las 3:35 pm
Hola, tengo un problemilla, al agregar los emoticones como por ejemplo el pirata no me sale la carita al mostrar el comnetario ya hecho
Como lo puedo arreglar?
Grax
Te dejo un link de ejemplo: http://reparaciondepc.cl/blog/atajos-de-teclado-en-winzip/#comments
salen todos los normales pero los otros nop.
September 21st, 2009 a las 3:50 pm
Arreglado, habia que modificar el archivo function.php y agregar ahi las rutas de las img.
Gracias de todas maneras
September 21st, 2009 a las 5:56 pm
@DoctorPc: que bueno que arreglaste el problema, espero que te sean utiles los emoticonos
Nos vemos
September 24th, 2009 a las 7:53 pm
muy bueno men gracias, pero una pregunta por que cuando los pongo en mi tema ala hora de publicar un comentario, en ves de aserle clik al emoticon sale el nombre del emoticon pero no la imagen y ala hora de publicarlos recien se muestra la imagen… espero puedas ayudarme! gracias , buen post y buen blog!!
September 24th, 2009 a las 7:56 pm
@DoctorPc: amigo que fue lo que modificaste podrias ayudarme ami , ya que ami me salen solo las letras ,te lo agradeceria:smile:
September 25th, 2009 a las 12:28 pm
@aiTeens: la función del código insertado es que al presionar sobre el emoticon se muestre el código en el area de comentarios, pero al enviarlo se muestra la imáen.
No te preocupes, no es ningún error, debe ser así
Nos vemos!