El proceso y el código en este caso es muy fácil, solo debemos añadir la imagen que queremos en la carpeta “images”(o la que querais) de nuestro tema, buscar el css y modificar la clase “post” añadiendo esto:

1
2
3
4

 
.post{
     background: transparent url(images/tuImagen.gif) no-repeat bottom;
}

Si al igual que yo, teneis otro texto debajo de la entrada en sí, en mi caso las categorías y tags, podeis añadirle un “margin o padding” para que no se superpongan:

1
2
3
4
5
6

 
.post{
     background: transparent url(images/tuImagen.gif) no-repeat bottom;
     padding-bottom:20px;
     margin-bottom:10px;
}

Por internet hay montones de barras separadoras gratis, pero os aconsejo ser creativos y hacer la vuestra, para darle al blog un toque más personal.

Si tienes la última versión de wp habrás notado que mientras escribes, debajo de cada entrada hay una sección llamada campos personalizados. Pues bien, esto no es otra cosa que la posibilidad de añadir meta datos a nuestras entradas. La forma en la que lo usaremos ahora, es para hacer distinción entre unos posts y otros, es decir poder identificarlos y así darles forma a nuestro gusto en el css.

Para el ejemplo voy a añadir la siguiente sección a mi css, que consiste en una nueva clase para cambiar el aspecto de los mini-posts. Después en mi footer usaré un bucle que llame a la función de wp encargada de reproducir los posts, pero haciendo uso de los metadatos podré cambiar la clase para que se muestre de distinto modo.

En el css:

1
2
3
4

.mini{
  color:white;
  background: black;
}

Estas dos modificaciones simplemente cambian el color de fondo a negro y el color de las letras a blanco, lo único importante es darse cuenta de que usamos una clase, y no un atributo, es decir usamos un punto delante del nombre y no una almohadilla.

En el html:

1
2
3
4
5
6
7
8

 
<div class="<?php echo get_post_meta($post->ID,'mini', true) ?>" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="marcadores" title="Enlace permanente a<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
     <p><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></p>
 
	<?php the_content('Seguir leyendo &raquo;'); ?>
 
</div>

Lo único que nos interesa de aquí es el “get_post_meta()” y esta sección irá en el bucle principal dónde mostremos nuestras entradas. Lo que hacemos es pedirle a wordpress los metadatos de la entrada que tienen el nombre “mini” y puesto que está dentro de un echo lo intrepretará como si fuera el nombre de la clase.

Solo queda meter los metadatos en las entradas con la sección de campos personalizados, para no liarnos lo más sencillo es meter en los dos campos lo mismo, asi no tenemos que pensar si es el nombre del metadato o el contenido a la hora de llamar a la función. Quedaría asi:

Jugando con el css y los metadatos podemos hacer casi cualquier cosa con nuestras entradas, en mi caso he añadido al pie de página una sección de mini-posts con freebies que iré actualizando.
Fuente: codex.wordpress

El código es tan sencillo como casi todo en jquery, solo tienes que añadir a la cabecera los “alternates” de los diferentes css e importar tanto jquery como el plugin de este modo:

1
2
3

	<link rel="alternate stylesheet" type="text/css" href="nuevoEstilo.css" title="nuevoEstilo" media="screen" />
<script type="text/javascript" src="/wp-includes/js/styleswitch.js"></script>
<script type="text/javascript" src="/wp-includes/js/jquery.js"></script>

El atributo “title” es lo que usará el javascript para identificar los css.

La función para cambiarlos debe de ir como siempre nada más empezar el “body” y no hace falta modificarla en absoluto, sería asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script>
(function($)
{
   $(document).ready(function() {
      $('.styleswitch').click(function()
      {
         switchStylestyle(this.getAttribute("rel"));
         return false;
      });
      var c = readCookie('style');
      if (c) switchStylestyle(c);
   });
 
   function switchStylestyle(styleName)
   {
      $('link[@rel*=style][title]').each(function(i) 
      {
         this.disabled = true;
         if (this.getAttribute('title') == styleName) this.disabled = false;
      });
      createCookie('style', styleName, 365);
   }
})(jQuery);
</script>

Por último, desde los archivos php o html usamos un enlace para llamar a la función:

1

<a href="serversideSwitch.html?style=nuevoEstilo" rel="nuevoEstilo" class="styleswitch">Cambiar estilo css...</a>

Podeis verlo en funcionamiento en el menú de arriba o en la página web del autor.

Fuente: KelvinLuck.com