MayPlanet

Cambiar y mostrar smilies en los comentarios

He recibido algunos mails preguntandome sobre como cambiar las smilies de wordpress y de paso como hacer que aparescan en la parte de comentarios y que al hacerles click se escriba el atajo de dicha smiley. Llevo un tiempo posponiendo este tutorial pero al fin aqui se los dejo . La verdad desconosco si existe o no un plugin que haga esto pero yo lo hago de esta forma y me funka .

(click para ver el resto)

1- Subir las nuevas Smilies

Lo primero que deben hacer es subir sus smileys al directorio wp-includes/images/smilies, esto lo hacen por ftp (en este tutorial supondré que sabes como hacer esto, si no lee algo de aqui) . Recomiendo que elimines las smilies por defecto de wordpress pero si se quiere se pueden dejar en caso que quieras tenerlas tambien.

2- Cambiar el archivo Functions.php

Luego que hayas subido las nuevas smilies debes cambiar el archivo functions.php que se encuentra en wp-include, para esto lo puedes hacer desde wordpad (no es necesario que uses algún editor de php ), luego en wordpad o el editor de texto que hayas elegido buscas la funcion function smilies_init() y ahi debes reemplazar los atajos que quieras darle a cada smiley y el nombre de la imagen tal cual la subiste por ftp (con la extensión que en este caso es .gif), debe quedarte algo asi:

if (!isset($wpsmiliestrans)) {
$wpsmiliestrans = array(
‘atajo’ => ‘nombre_de_smiley.gif’,
‘:)’ => ‘nombre_de_smiley2.gif’,
);
)

luego de haber cambiado el archivo functions.php, debes subirlo con el mismo nombre y al mismo directorio (wp-includes) y reemplazar el anterior archivo functions.php.

Hasta ahora debes poder usar las smilies nuevas en tu blog, escribiendo el atajo que le has dado en una entrada o comentario.

3- Cambiar el archivo de comentarios

Este paso es para poder mostrar las smilies en los comentarios y que al hacer click en ellas se escriba el atajo en el área de texto de los comments.

Debes ir a tu panel de admin en wordpress, y entrar en el editor de theme, ahí seleccionas para editar el archivo de comentarios, y en el debes ubicar donde empieza el area para comentar, por lo general una linea de code asi:

<p><textarea name=”comment” id=”comment” cols=”100%” rows=”10″ tabindex=”4″></textarea></p>

Antes de esa línea debes pegar esta función.

<script type=”text/javascript”>

function grin(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>

Luego que hallas pegado esa funcion seguido debes poner esto, por cada smiley que quieras mostrar:

<img src=”http://url_de_la_imagen.gif” onclick=”grin(’ atajo_de_la_smiley ‘);”>

Haré un ejemplo para el caso de :

<img src=”http://mayplanet.net/wp-includes/images/smilies/aa.gif” onclick=”grin(’aa.’);”>

donde http://mayplanet.net/wp-includes/images/smilies/aa.gif es el directorio donde se encuentra la imagen, y ‘aa.’ es el atajo de la smiley (en tu code debes dejar un espacio entre el atajo y la comilla ‘ ).

cuando hallas echo esto para todas las smileys le das update file y debe quedar algo asi