Contenido

Sandbox: Clases dinámicas para pulir el CSS

8 ago

+ 9

Hace unos días comentabamos que Sandbox era el theme semántico por excelencia, pero…

¿por que es tan semántico?

Sandbox, usa el atributo class de los elementos para informar una cantidad de datos referentes a una página y/o entrada concreta. Esto nos da lugar a elementos HTML similares a este.

<body class="wordpress y2007 m08 d06 h06 home">

Como podemos ver, todas esta información está cargando una cantidad de información semántica no visible al usuario bastante importante, pero…

¿Como podemos hacer que el usuario la vea?

Evidentemente podemos aprovecharnos de nuestros CSS para hacer que cada elementos concreto se vea de una forma determinada, para ello usaremos definiciones de todas las clases. Que como es obvio, deberemos conocer :D

¿Como se generan las clases?

Dependiendo del lugar que mostramos, las clases se generan mediante una función u otra determinada. Estas funciones definen una serie de nombres de clases basadas en algunas estáticas y otras dinámicas que van cambiando dependiendo de la fecha, el autor, la categoría,…

Actualmente son 3 las que se encargan de esta misión:

sandbox_body_class() | Clases del elemento <body>

Esta clase nos devuelve una serie de clases dependiendo de la página que estamos mostrando, todas las clases están relacionadas con la página y la fecha actual. 

<body class="<?php sandbox_body_class() ?>"> 
wordpress Está clase indica la aplicación
home Indica que estamos en la home
search Indica que estamos en busqueda
four04 Indica que estamos en una página “404 no encontrado”.
loggedin Cuando el usuario está logueado
y[current year] El año actual
m00–12 El mes actual (00-12)
d01–31 El día actual (01-31)
h00–24 La hora actual (00-24)
page Indica que estamos en una página
page-author-[name] Indica que estamos en la página de autor [name]
page-paged-[n] Indica que se trata de una entrada paginada y estamos en la página [n]
archive Indica que estamos en una página de archivo (categorias, archives,…)
date Indica que estamos filtrando por date
date-paged-[n] Indica que se trata de una entrada paginada basada en fechas, estamos en la página [n]
author Indica que estamos en la página autor
author-[name] Indica que estamos en la página del autor [name] determinado
author-paged-[n] Indica que estamos en la página del autor paginada
category Indica que estamos en una categoría
category-[name] Para una categoría determinada
category-paged-[n] Paginación de categorias
single Se trata de una entrada single
s-author-[name] Una entrada simple de un autor determinado
s-category-[name] Una entrada simple de una cateogoría determinada
s-y[current year] Una entrada simple de un año determinad
s-m00–12 Una entrada simple de un mes determinado
s-d01–31 Una entrada simple de un día determinado
s-h00–24 Una entrada simple de una hora determinada
paged Está paginada
paged-[n] Mostramos la página [n]
pageid-[n] Mostramos la página con ID [n]
postid-[n] Mostramos el post con ID[n]

sandbox_post_class() | Clases del elemento <div /> de Posts

Esta función nos carga todas las clases referentes al post en concreto, las fechas hacen referencia las de publicación, al igual que las categorías y autor.

 <div id="post-<?php the_ID() ?>" class="<?php sandbox_post_class() ?>">
hentry Para la especificación hAtom 0.1, se aplica a cada post.
page Clase general, se aplica a cada página
post Clase general, se aplica a cada post
private Para un post en estado privado
protected Para un post en estado protegido
publish Para un post en estado publicado
draft Para un post en estado borrador
y[post year] Para un post publicado en un año concreto
m00–12 Para un post publicado en un mes concreto
d01–31 Para un post publicado en día concreto
h00–24 Para un post publicado en una concreta
author-[name] El nombre del autor
category-[name] La categoría del post
alt Para los posts impares (posibilita hacer efecto zebra)
p[n] Numero de post relativo a la página

sandbox_comment_class() | Clases para los comentarios <li />

Esta función nos mostrará todas las clases referentes al comentario concreto, las fechas estarán condicionadas a la de publicación, al igual que el autor.

<li id="comment-<?php comment_ID() ?>" class="<?php sandbox_comment_class() ?>">
comment Clase general, indica que es un comentario
trackback Clase general, indica que es un track/pingback
byuser Para cada comentario de un usuario registrado
bypostauthor Comentario del autor del post
comment-author-[name] Para un comentario concreto de un usuario registrado
alt Para los comentarios impares (posibilita hacer efecto zebra)
c-y2007 Para un comentario en año concreto
c-m00–12 Para un comentario en un mes concreto
c-d01–31 Para un comentario en  un día concreto
c-h00–24 Para un comentario en una hora concreta
c[n] Numero de comentario relativo a la página
t[n] Numero de track/pingback, relativo a la página
  • Se agradece, ya que pensaba utilizar este theme para mi nuevo blog. Un saludo!

  • Excelente, actualmente estoy modificando el theme de sandbox y esto me es de muchísima ayuda.

    Gracias.

  • Lo del “alt” que pones ¿¿?? es para asignar una clase alternativa a los comentarios impares y así poder por ejemplo poner un comentario con un color y el siguiente con otro color y así…

  • Buenas Hector, eso suponía, pero el odd-number…. (O.o) me ha despistado :D Thx.

  • Necesito hacerte una consulta, tengo que armar un blog que segun la categoria a la que accedas, la cabezera cambie con una imagen alusiva a la categoria, busque y busque y no encontre nada, y me acorde de vos que por ahi me podrias dar una mano.

  • Algunas ideas de lo que se puede hacer con todas estas clases:

    -Enlaces vs. Posts: Posts en cierta categoria pueden tener su propio estilo diferente, ocultando con “visibility: hidden” cosas como la fecha, título o comentarios quedando sólo el cuerpo del mensaje.

    -Posts especiales: Hay mucha gente que tiene ciertos tipos de posts que no son tradicionales mezclados entre los que si. Por ejemplo un photopost con una sola entrada y un comentario, una cita, un vídeo. Estos al igual que el de enlaces pueden tener su propio estilo.

    -Estacionales y eventos: Un matiz de color para cada estación, un color específico para los posts de tu día de cumpleaños, un estilo especial para aquellos escritos en el aniversario del blog. Colores o adornos navideños, de halloween o sanfermines. Poner a Ben-Hur de encabezado en semana santa.

    -Imágenes y fotos de los autores en sus páginas específicas cuando se esté en ellas y en sus entradas cuando se esté en la vista general.

    Con muchas de estas cosas las modificaciones al theme son mínimas y en muchos casos innecesarias.

  • Creo que para dar semántica y aportar metadatos a la web existen los microformatos, que están siendo apoyados por gran parte de la industria desarrolladora de web, intentar hacer algo parecido es dividir la web.

    Los microformatos son igual de simples.

  • Ernesto:

    A qué te refieres? Sandbox soporta microformatos. Es una de las pocas cosas que soporta microformatos. Un monton de lo que ha puesto aqui Anieto2k son microformatos.

    Claro que son igual de simples, son estos (solo que ademas de ellos hay docenas de otras clases posiblemente utiles).

  • (sospecho que Anieto2k tiene un segundo trabajo constantemente cambiando mi nick que sale como “anonimo” y realmente debería pasar como “eduo”. O eso o se cambia solo)

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.