Esta semana hemos instalado el plugin Click to Tweet en varios blogs. Este plugin nos permite introducir un recuadro con un texto para tuitear dentro de una entrada de WordPress.
Se selecciona el texto y pinchando sobre el pájaro de Twitter de la barra de herramientas de edición de nuestro WordPress, se inserta un recuadro con ese texto y la opción de tuitearlo directamente.
Esto por lo que hemos comprobado aumenta bastante la cantidad de tweets lanzados por los lectores de la entrada. Os invitamos a probarlo.
[bctt tweet=»Click to Tweet: Recuadros con texto para tuitear directamente desde #WordPress»]
El problema es que su diseño es estándar y nosotros queríamos modificarlo. Sobre todo el tamaño del texto que para nuestro guesto es muy grande. Aquí os dejamos los estilos CSS que hay que modificar para cambiar el aspecto de Click To Tweet.
Por otro lado lo hemos traducido al castellano, le hemos añadido la opción de tuitear los enlaces acortados de la entrada y cambiar el texto de «Click To Tweet». Si os interesa tenerlo, dejarnos un comentario con vuestro email y os lo haremos llegar.
OJO: Presuponemos que ya tenéis instalado el plugin Click To Tweet en vuestro WordPress. Sino, ahora es un buen momento para instalarlo.
El código CSS hay que pegarlo en el recuadro de vuestro tema para incluir CSS personalizado.
Para editar el color de la fuentede de Click to Tweet:
.tm-click-to-tweet .tm-ctt-text a { color: #5798CD; }
Se cambia #5798CD al color elegido. Si no sabéis como generar el código de color, os puede ayudar www.colorpicker.com que os generará el código de color a poner detrás del la #.
Para editar el tamaño de la fuente de Click to Tweet:
.tm-click-to-tweet .tm-ctt-text a { font-size: 20px; }
Solo hay que cambiar el número al tamaño deseado.
Cambiar color y tamaño de la fuente de Click to Tweet:
Estas dos líneas también se pueden combinar para tener un código más eficiente:
.tm-click-to-tweet .tm-ctt-text a { color: #5798CD; font-size: 20px; }
Para editar el fondo del recuadro de Click to Tweet:
.tm-click-to-tweet { background-color: #eeeeee; }
Otra vez hay que cambiar el código detrás de la # por el color deseado.
Para editar el borde de Click to Tweet:
.tm-click-to-tweet { border: 1px solid #eeeeee; }
Esto nos crea un borde de 1 píxel, de trazo sólido con el color que sigue a la #. Si se incrementa el número, el borde se hará más grueso. Si no queremos un trazo sólido, sino rayado o punteado, hay que sustituir solid por dashed o dotted. Si queremos cambiar el color, al igual que en los ejemplos anteriores, hay que sustituir el código de color detrás de la # por el deseado.
Cambiar fondo y borde de Click to Tweet:
Si cambiamos el fondo y el borde, se puede combinar en una única instrucción:
.tm-click-to-tweet { border: 1px solid #eeeeee; background-color: #eeeeee; }
Esperamos que os haya parecido interesante.
P.D. Si queréis que os pasemos el plugin traducido al español, incluyendo la opción de cambiar el texto de «Click To Tweet» y la opción de tuitear el enlace de la entrada acortado, dejarnos un comentario. Os lo enviaremos al email del mismo.
[ ACTUALIZACIÓN 27/DIC/2014 ] Acabamos de publicar una nueva entrada presentando «Better Click To Tweet», un plugin del repositorio de plugins de WordPress, que tiene la traducción a castellano, además de otras mejoras interesantes. Aquí tenéis toda la información: Better Click to Tweet: Plugin mejorado y publicado. [ /ACTUALIZACIÓN ]