Contenido

CSS Sprites para mejorar las fechas de tus posts

4 Feb

+ 9

Hace ya tiempo, vimos como introducir un calendar con las fechas en tus posts. Un sistema que permite darle un aspecto diferente a tu wordpress. En WpBeginner dán un paso más y usando la CSS Sprites genera un elegante sistema que se basa en desplazarse por encima de una imágen para mostrar la fecha.

dates-css-sprites-large
(Ver Imagen)

Como vemos en la imágen, tenemos las fechas desde 2009 a 2014 y con el siguiente código CSS podremos mostrar el año que deseemos.

/*Date Sprite */
.postdate {
position: relative;
width: 66px;
height: 60px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(images/date_img.png);
background-repeat: no-repeat;
}
.month { top: 10px; left: 0; width: 33px; height: 30px;}
.day { top: 30px; left: 0; width: 33px; height: 30px;}
.year { bottom: 0; right: 13px; width: 20px; height: 60px;}

.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -62px;}
.m-04 { background-position: 0 -94px;}
.m-05 { background-position: 0 -125px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -185px;}
.m-08 { background-position: 0 -217px;}
.m-09 { background-position: 0 -248px;}
.m-10 { background-position: 0 -279px;}
.m-11 { background-position: 0 -310px;}
.m-12 { background-position: 0 -341px;}

.d-01 { background-position: -51px 0;}
.d-02 { background-position: -51px -27px;}
.d-03 { background-position: -51px -57px;}
.d-04 { background-position: -51px -91px;}
.d-05 { background-position: -51px -122px;}
.d-06 { background-position: -51px -151px;}
.d-07 { background-position: -51px -185px;}
.d-08 { background-position: -51px -214px;}
.d-09 { background-position: -51px -249px;}
.d-10 { background-position: -51px -275px;}
.d-11 { background-position: -51px -309px;}
.d-12 { background-position: -51px -338px;}
.d-13 { background-position: -51px -373px;}
.d-14 { background-position: -51px -404px;}
.d-15 { background-position: -51px -436px;}
.d-16 { background-position: -51px -462px;}
.d-17 { background-position: -100px -0px;}
.d-18 { background-position: -100px -27px;}
.d-19 { background-position: -100px -57px;}
.d-20 { background-position: -100px -91px;}
.d-21 { background-position: -100px -122px;}
.d-22 { background-position: -100px -151px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -214px;}
.d-25 { background-position: -100px -249px;}
.d-26 { background-position: -100px -275px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -338px;}
.d-29 { background-position: -100px -373px;}
.d-30 { background-position: -100px -404px;}
.d-31 { background-position: -100px -436;}

.y-2009 { background-position: -150px 0;}
.y-2010 { background-position: -150px -60px;}
.y-2011 { background-position: -150px -120px;}
.y-2012 { background-position: -150px -180;}
.y-2013 { background-position: -150px -240px;}
.y-2014 { background-position: -150px -300px;}

El código HTML encargado de mostrar las imágenes se basa en el uso de clases que indicarán que porción de imágen hay que mostrar.

<div class="postdate">
<div class="month m-<?php the_time("m") ?>"><?php the_time("M") ?></div>
<div class="day d-<?php the_time("d") ?>"><?php the_time("d") ?></div>
<div class="year y-<?php the_time("Y") ?>"><?php the_time("Y") ?></div>
</div>

El resultado es que mediante la carga de una única imágen disponemos de todas las fechas posibles entre estos 5 años y solo cambiando las clases de los hijos del elemento .postdate podremos mostrar una fecha u otra.

70 de los mejores theme para WordPress

28 Oct

+ 6

Trazos web publica una recopilación de los mejores themes para nuestros WordPress. Entre estos 70 themes encontrarás calidad gratuita para cualquier proyecto que tengas en mente.

YouAre Theme, el theme de las opciones

1 Sep

+ 6

Jose Luis Antunez, me avisa por email de la publicación de YouAre Theme, un theme que han desarrollado con la idea de ofrecer la misma cantidad de opciones de configuración que los themes de pago.

3855479500_3a38fd1c7b_b
(Ver Imagen)

Opciones y más opciones

Entre las opciones que nos podemos encontrar vale la pena destacar, la integración con Twitter, Flickr, Google Analytics o FeedBurner, además de la posibilidad de cambiar fácilmente los colores del theme.

3870288427_2f8aa105c6_b
(Ver Imagen)

A nivel técnico nos encontramos con:

  • Basado en el Framework CSS 960.gs concretamente en el model de 24 colúmnas.
  • Valida según los estándares XHTML.
  • Optimizado para SEO
  • Multi-Lenguaje (dependiendo del idioma especificado en wp-config.php).
  • Gravatar integrado
  • Comentarios anidados
  • Microformatos
  • Mejoras de accesibilidad

Demo y Descarga

Demo y Descarga

In the Clouds, lleva twitter hasta en tu WordPress

31 Jul

+ 1

@nnatali, me envia un mail informándome de que se ha iniciado en el apasionante mundo de la creación de themes para WordPress y lo ha hecho aprovechando el rediseño de Twitter para crear un theme que se asemeja a la página inicial de esta red social y que nos permite conseguir un aspecto muy fresco y conocido.

clouds_portada-580x494
(Ver Imagen)

El theme se visualiza perfectamente en resoluciones desde 800×600. Además permite conectarlo fácilmente con Twitter para mostrar el último tweet en el header del theme. Podeis ver un ejemplo aquí.

WP-Basics, ahora tambien en HTML5

30 Jul

+ 4

WP-Basics es un theme para WordPress que propone una estructura básica de ficheros y de ficheros para generar themes más facilmente intentado conseguir una estandarización en la creación de themes.

Existe un proyecto en Google Code en el que se puede descargar el código para echarle un vistazo.  Basicamente se trata de un theme completo que podemos personalizar fácilmente mediante CSS, sin llegar a ser un framework de themes.

Aprovechando este proyecto, Frank de WP-Engineer.com ha creado un proyecto paralelo en el que está adaptando el theme al nuevo estandar HTML5. Simplemente está añadiendo los tags <article />, <section /> y demás atributos integrados en el estandar.

[...]
<?php while ( have_posts() ) : the_post(); ?>
  <article <?php if ( function_exists('post_class') ) { post_class(); } else { _e( 'class="post"'); } ?> id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  <section class="story">
  <?php if ( is_archive() || is_search() ) { ?>
     <?php the_excerpt() ?>
     <p class="textright"><a href="<?php the_permalink() ?>" rel="bookmark"><?php _e( '... weiterlesen &raquo;', FB_BASIS_TEXTDOMAIN ); ?></a></p>
     <section class="info">
       <p><?php _e( 'Aktualisiert am', FB_BASIS_TEXTDOMAIN ); ?> <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date(); ?></time> <?php edit_post_link( __( 'Editieren', FB_BASIS_TEXTDOMAIN ),' &middot; ', ''); ?></p>
     </section>
     <?php } else { ?>
     <?php the_content( the_title( '', '', false ) . ' ' . __( 'weiterlesen &raquo;', FB_BASIS_TEXTDOMAIN ) ); ?>
     <section>
        <?php wp_link_pages(); ?>
     </section>
  <?php } ?>
  </section>
</article>
<?php endwhile; else: ?>
[...]

Basta con echarle un pequeño vistazo al código para ver la mejoría semántica con respecto a lo que estabamos usando hasta ahora. Y eso, teniendo en cuenta que es de lo primero que sale al respecto, ya que aún se podrá mejorar más.

<?php while ( have_posts() ) : the_post(); ?>
<article <?php if ( function_exists(‘post_class’) ) { post_class(); } else { _e( ‘class=»post»‘); } ?> id=»post-<?php the_ID(); ?>»>
<h2><a href=»<?php the_permalink() ?>» rel=»bookmark»><?php the_title(); ?></a></h2>

<section class=»story»>
<?php if ( is_archive() || is_search() ) { ?>
<?php the_excerpt() ?>

<p class=»textright»><a href=»<?php the_permalink() ?>» rel=»bookmark»><?php _e( ‘… weiterlesen &raquo;’, FB_BASIS_TEXTDOMAIN ); ?></a></p>
<section class=»info»>
<p><?php _e( ‘Aktualisiert am’, FB_BASIS_TEXTDOMAIN ); ?> <time datetime=»<?php the_modified_date(‘Y-m-d’); ?>»><?php the_modified_date(); ?></time> <?php edit_post_link( __( ‘Editieren’, FB_BASIS_TEXTDOMAIN ),’ &middot; ‘, »); ?></p>
</section>
<?php } else { ?>
<?php the_content( the_title( », », false ) . ‘ ‘ . __( ‘weiterlesen &raquo;’, FB_BASIS_TEXTDOMAIN ) ); ?>
<section>
<?php wp_link_pages(); ?>
</section>
<?php } ?>
</section>

</article>

<?php endwhile; else: ?>

WordPress Theme Frameworks, SandBox fué solo el principio

27 Jul

+ 15

Hace ya tiempo vimos que se había desarrollado una serie de themes que permiten ser personalizados usando una misma base. A estos themes los llaman WordPress Theme Frameworks y es que con ellos podrás crear themes nuevos de una forma sencilla.

Sandbox, fué el primero y el que ofreció esta idea que muchos más han desarrollado y extendido. Aquí tienes una lista de 20 de estos frameworks que puedes usar para desarrollar tus propios themes.

  1. ThemeHybrid
  2. Carrington
  3. Thematic
  4. Imagination
  5. WP Framework
  6. Buffet
  7. Whiteboard
  8. WordPress Starter Theme
  9. Ashford
  10. Sandbox
  11. OnePress
  12. Blank WordPress Themes
  13. WordPress Naked
  14. Starkers
  15. Vanilla
  16. WordPress Basis
  17. WordPreciousss
  18. WP Constructor
  19. Brave New World
  20. Thesis (Comercial)

¿Necesitas un theme para WordPress?

25 Sep

+ 23

¿Estás buscando un theme para tu blog? ¿Has buscado y buscado y no has encontrado nada? Pues te puedo asegurar que no has buscado suficiente. Aqui tienes 50 sitios de los que poder descargar themes para tu WordPress.

  1. Theme Viewer
  2. 100 Excellent Free WordPress Themes
  3. 45+ Must See WordPress themes
  4. 83 Beautiful WordPress Themes
  5. Amazing WordPress Themes
  6. Best WordPress Themes
  7. Blog OH Blog
  8. Blogtheme
  9. Design Oahu
  10. Download free WordPress themes
  11. Elegant
  12. Free CSS Templates & WordPress Themes | CSS Design Templates
  13. FREE Premium WordPress Themes
  14. Free WordPress Themes
  15. Free wordpress themes
  16. Free wordpress themes – phpld templates
  17. Free WordPress Themes & phpLD Templates
  18. Free WordPress Themes | JAUHARI
  19. Free WordPress Themes and Skins, Custom WP Templates
  20. Free WordPress Themes and WordPress Tutorials
  21. Free WordPress Themes
  22. Free WordPress Themes, Plugins
  23. Global Internet Index
  24. How To Blog
  25. JohnTP.com
  26. Kate’s Theme Viewer
  27. Land of Free WordPress Themes
  28. Natty WP
  29. Ndesign Studio
  30. New WordPress themes release every week
  31. OS Designer – Open source templates
  32. Plaintex
  33. Pro Themes
  34. Revolution WordPress Theme
  35. Sanbox Design Competition
  36. Skins for WP
  37. Template Extreme
  38. Theme Porter – WordPress Themes , WordPress Templates
  39. Top WordPress Themes – Best Free Themes for WordPress
  40. WordPress | SkinPress.com
  41. WordPress Garden
  42. WordPress Graphics Co
  43. WordPress Theme
  44. WordPress Theme Corp
  45. WordPress Theme Gallery
  46. WordPress Themes
  47. WordPress Themes
  48. WordPress Themes
  49. WordPress Themes
  50. WordPress Themes

Si aún así no has encontrado nada que te acabe de convencer, puedes hacer tu propio theme para WordPress.

Actualización del theme Deep Red

10 Sep

+ 2

Primero quiero pedir perdón a todos los usuarios que han tenido problemas con este theme, debería haberlo solventado hace tiempo, pero el poco tiempo, las pocas ganas y el descuido se ha impuesto. Bueno, ya está corregido el problema que había que Deep Red no funcionaba con las nuevas versiones de WordPress. Podeis decargarlo directamente de este enlace.

45 Themes tipo magazine completamente gratuitos

29 May

+ 3

Listado de más de 45 themes para WordPress, con los que podrás darle un aspecto similar a un magazine a tu blog. Todos ellos completamente gratuitos y listos para empezar a usarlos. [Via]

8 + 1 themes de WordPress ideales para contenido multimedia

21 May

+ 24

Si estás usando WordPress para mostrar una gran cantidad de contenido multimedia estos 8 themes te ayudarán a mostrarlo eficientemente. Aunque haya themes de pago, pueden servir como ideas para implementar en tus propios diseños.

1.Fresh News

WordPress Premium Themes

2. Omni Theme

WordPress Premium Themes

3. Web 2.0

WordPress Premium Themes

4. Quommunication Video

WordPress Premium Themes

5. Revolution Media Pro

WordPress Premium Themes

6. Video Gallery

WordPress Premium Themes

7. TV Elements

WordPress Premium Themes

8. Video Flick

WordPress Premium Themes

9.Options

Fernan nos informa de este fantástico theme gratuito ideal para contenidos multimedia.

options