Chapuza: Cómo personalizar el plugin para WordPress “Simple Tags”

18
Abr
5
Escrito a las 01:51:42 por Marina Fornes

Simple tags es un plugin bastante completo que nos permite gestionar las etiquetas (tags) de nuestro blog de forma muy sencilla. No sé la de días que llevaba investigando para cambiar el estilo en que aparecen estas etiquetas y las entradas relacionadas que genera este plugin. El autor dice que se puede personalizar usando la misma sintaxis que en la función st_the_tags() (para las etiquetas), y st_relatedpost () (para las entradas relacionadas). Desistí, ya que no tengo ni idea de PHP y tenía cero ganas de ponerme a aprender, aparte de que si no tienes un programa tipo Espresso (y lo sabes manejar), se convierte en una pesadilla dar con lo que tienes que hacer, por muy maravilloso que sea tu editor de CSS (que por cierto, el mío lo es: CSSEdit)

Entonces fue cuando se alinearon los planetas, y se me ocurrió otra forma para personalizarlo que podría funcionar. Haciendo una métafora, es algo así como que no te funcione el coche, no sepas arreglar el motor, pero pienses: “¡Joer! ¡Puedo ponerle un cohete!“, y tu coche vuelve a andar :P . Vamos pues con una buena ración de cómo ser chapuzas y no morir en el intento :

Nos encontramos en la pantalla de opciones de “Simple Tags”. Pinchamos en la pestaña de Entrada actural para personalizar nuestras etiquetas.

iPhornera › Simple Tags Opciones — WordPress 2.png

Este es el aspecto que tendrá la pantalla con las opciones predeterminadas. Pensé que con mis conocimientos básicos de HTML y CSS, y junto a una de las webs que más cariño he cogido últimamente (w3schools.com), podía sacar alguna cosilla maja. Este fue el resultado:

  • En el espacio número 1, el correspondiente al texto a mostrar antes de la lista de etiquetas, me salió algo tal que así (los comentarios van en rojo, no olvideis quitarlos o cambiarlos por lo que corresponda, sí es que decidís que os mola ser chapuceros como a mí :P ):

<img src=”aquí pondremos la URL de la imagen que queramos que aparezca delante” width=”35″(width será el ancho que queramos que tenga esta imagen, si es que necesitamos reescalarla) height=”20″(con height definiremos la altura deseada) style=”margin:0px 0px -4px” (con style estamos dándole estilo a la imagen. En mi caso, para que quedara bien posicionada, puse esos valores para margin. Puedes consultar más información sobre ésta y otras propiedades de CSS pinchando aquí) /> Con esto acabamos de definir la imagen. Si no quereis poner ninguna, no introduzcais nada del html escrito hasta aquí. Empezamos con el texto en sí:<span style=”font-size:(definimos el tamaño de fuente que queremos, sin olvidar escribir el punto y coma al final, para separar una sentencia CSS de otra) 13px; font-family:(aquí el tipo de fuente que queramos) Helvetica; “><b>(Si no quieres que te aparezca en negrita, a quitar las b) Etiquetas: (o el texto que hayais pensado) </b></span>

¿Qué tal? ¿Fácil, no? ;)

  • Ahora vamos a editar las etiquetas en sí (espacio número 2). Resalto %tagname% porque es a lo que realmente queremos dar estilo, que para los que no esteis mu puestos en pitinglis :P , se refiere al nombre de la etiqueta que aparecerá en nuestro blog en forma de enlace.

<a href=”%tag_link%” title=”%tag_name%” %tag_rel%>Aquí empezamos a editar<span style=”color:(el color que queramos que tengan estos enlaces, si es que preferimos que sea diferente del de los enlaces generales de nuestro blog. Pincha aquí si quieres ver algunas referencias en cuanto a los colores) #b59fb1; font-family: Helvetica; font-size: 13px;”><b>%tag_name%</b></span>Asegúrate de cerrar el estilo con </span> antes de </a>, que es la que termina de definir el enlace.</a>

Pues esta es la idea :) No hay más que seguir estos pasos para personalizar nuestras entradas relacionadas, con las sentencias que vosotros querais :) .

¿Ventaja de este método? El estilo se conserva en los feeds, es decir, vuestros suscriptores verán en sus feeds (si es que así lo teneis configurado en el plugin), exactamente el estilo que habeis definido de esta forma. Quizá me equivoque, pero si lo hubiéramos hecho tocando la hoja de estilos directamente, nuestra personalización no se extendería al canal RSS, o por lo menos eso es lo que he apreciado en mi lector (NetNewsWire).

Espero que le haya resultado útil a alguien :) , y que compartais conmigo si lo habeis probado, los peligros que pueda tener mi “método” (no me cansaré de repetir que soy una profana por estos lares de la programación y diseño web) o si sabeis la forma exacta de retocar mediante la Hoja de estilos sin volverse loco ;)

Sitio oficial del plugin | Simple Tags

¡Comparte esta entrada!:
  • E-mail this story to a friend!
  • Print this article!
  • Turn this article into a PDF!
  • Bitacoras.com
  • Meneame
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Tumblr
  • Technorati
  • Facebook
  • Twitthis

Etiquetas:
votar





Comentarios

5
  1. Pedro dice:
    22 de Abril de 2009 a las 19:50 h.

    Muy buen artículo, me ha servido para modificar el plugin :P

    Reply to this comment
  2. Marina Fornes dice:
    22 de Abril de 2009 a las 21:44 h.

    ¡No sabes la alegría que me das! :grin: Nada, a hacer experimentos ;)

    Reply to this comment
  3. Luna dice:
    25 de Abril de 2009 a las 14:06 h.

    mmmm… buena chapuza!

    Reply to this comment
  4. Pamelaquex dice:
    23 de Mayo de 2009 a las 19:54 h.

    thanks !! very helpful post!

    Reply to this comment
  5. Elias dice:
    3 de Febrero de 2010 a las 23:43 h.

    Muchas gracias por el tuto, se va para Delicious !!

    Reply to this comment

¡Suscríbete a los comentarios de esta entrada! ó pon un enlace a la misma ∞

Comenta lo que quieras ♠ ♣ ♥ ♦

XHTML: Puedes usar éstas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

¡Hola! ¡Espero que tengáis un día estupendo! Sígueme en twitter
  • Publicidad por aquí





Real Time Web Analytics