Revisando algunos temas para WordPress, me encontré un par que me llamo la atención (Shantia y Audyasha), mas específicamente en la parte de los comentarios, ya que tenían la opción de insertar las típicas caritas (más conocidas como smilies o emoticonos) de una forma visual en los comentarios, con solo hacer click en ellas.

Así que me puse a observar un poco el código y luego de un rato encontré que parte hacia eso, así que aquí les dejo la explicación de como implementarlo en otros temas 😎

Las instrucciones:

1. Primero haz una copia de seguridad del archivo de tu tema.

2. Entra en el panel de administración del blog, ve a Presentación, luego en editor de temas selecciona el tema a modificar y escoge Comentarios o (comments.php)

3. Busca en el código una linea parecida a:

4. Antes de esa linea (o alguna similar) añade este trozo de código:





function caras(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();
	}
}


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

5. Guarda el archivo modificado y a probar si funciona. En el caso de que no funcione prueba reemplazando la parte de en cada linea que aparece por la dirección de tu blog, por ejemplo http://www.micuenta.com/blog/

6. Si aun no logras que funcione, restaura el archivo con la copia de seguridad que hiciste en un comienzo.

Nuevamente digo que el código no es mio sino que lo obtuve de los temas Audyasha y Shantia.

Anuncios