Enlace de descarga

La mejor forma y la más sencilla para poner twitter en nuestro blog es usar uno de los muchos plugins que existen para este cometido. De entre todos yo me he inclinado por este, dado que es fácil de usar y se adapta a lo que necesito.
Una vez instalado basta con arrastrarlo a la sección de widgets si el tema de tu blog dispone de ella, o mediante php con la siguiente función:

1

<?php twitter_messages("nombreUsuario"); ?>

La segunda opción más usada, aunque un poco más liosa es hacerlo mediante javascript, en concreto con la librería tweet. Para un blog no es necesario
meterse en algo tan engorroso, pero si queremos añadirlo a una web propia es la mejor solución.

Por útimo existen otras formas de hacerlo, todas ellas válidas pero bastante más complejas, por ejemplo con php o asp. En esta entrada de Noupe podréis encontrar casi todas las alternativas.

Si decidís probar twitter o añadirlo a vuestro blog, aquí teneis una gran selección de iconos y personajes.

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.

Enlace: Chris Jennings.

Una buena prática es la de enriquecer las páginas de error 404 de modo que cuando alguien se encuentre con ellas puedan resultarle últiles. Vamos a ver algunos puntos claves que deberían contener en el caso de que se trate de un blog:

• •En primer lugar, la página debería mantener en lo posible la estructura del blog, es decir no perder las barras laterales, cabeceras y footer, para que el usuario pueda seguir con su navegación habitual y no se encuentre en tierra de nadie con con una simple página estática carente de cooncordancia con el resto del blog.
• •En segundo lugar, una parte obligada es una caja de búsqueda, aun si tu blog ya la tiene en la parte superior, ponerla directamente dónde el usuario espera el contenido le incitará a usarla y conseguiremos que no se vaya.
• •En tercer lugar, para los navegantes más vagos o sedientos de contenidos, no sería mala idea añadir las entradas más recientes, los posts populares o incluso un archivo con los ya antiguos.
• •Por último, una de las cosas que también pueden ser útiles es un formulario de contacto, a través del cual puedan comentarte que buscaban cuando llegaron al error, a la gente le encanta participar y un poco de feedback nunca viene mal.

Resumiendo, las páginas “not found” pueden llegar a ser muy útiles a la hora de redirigir la atención de nuestros usuarios, así que debemos de llenarlas de contenido y mantener la navegación acostumbrada.
Os dejo un enlace a Smashing Magazine dónde recopilan algunas muy interesantes y bonitas.

Fuente: Blogussion/blog

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

Enlace de descarga

• ProFolio 1.05 – Featuring Portfolio Navigation
• Separar por sílabas los textos de un blog en WordPress
• 120 CSS Galleries for Web Design Inspirations
• 15 INCREDIBLY DETAILED CONCEPT ART TUTORIALS
• The 1Kb CSS Grid, Part 1

Ahí os dejo unos enlaces que me parecieron interesantes.

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

En primer lugar debemos bajar los archivos y localizarlos en alguna carpeta de wordpress, para ser ordenados deberíamos meterlos en la carpeta que wp trae para las bibliotecas javascript importadas: “/wp-includes/js”.
A continuación incluiremos las bibliotecas y enlazaremos al css dentro del archivo header de nuestro tema. En mi caso quedará así:

1
2
3
4

<script src="/blog/wp-includes/js/jquery_feed_menu/jquery.js" type="text/javascript"><!--mce:0--></script>
 
		<script src="/blog/wp-includes/js/jquery_feed_menu/feed_menu.js" type="text/javascript"><!--mce:1--></script>
		<script type="text/javascript"><!--mce:2--></script>

Modificar las urls para adecuarla a vuestro caso, pero aseguraros de que el código va justo antes de finalizar el head para que no entre en conflicto con otras importaciones.

Una vez tenemos todas las librerías, el código para usar los botones debe ir nada más empezar el body y dentro de un onload o un $(document).ready dado que usamos jQuery. El código quedaría así:

1

<script type="text/javascript"><!--mce:3--></script>

Dónde ‘atributo_css’ es el selector o atributo que contendrá el botón rss, por ejemplo: ‘contenedor_rss’.

1
2

En el css---> #contenedor_rss
En el html--->

Lo único que nos falta es añadir las lineas anteriores a nuestro css y la página en la que queremos mostrar los botones.

El plugin rastreará nuestro head en busca de todos los feeds que tengamos. Por defecto WordPress solo añade el rss en versión 2, pero podemos añadir todos los que queramos dentro del “head” por ejemplo:

1

<link rel="alternate" type="application/rss+xml" title="El blog" href="http://feeds.feedburner.com/Blog" />

Ya tenemos un bonito y útil botón con varios de nuestros feeds, podéis expresar cualquier duda en los comentarios.

Algunos ejemplos de su funcionamiento.

Descarga jquery y el menu rss.
Fuente: Komodomedia
Licencia: Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States.