4
Feb
aNieto2k hace 5054 días en: CSS, hacks, Programacion, themes, webdev, Wordpress
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.

(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.
28
Oct
aNieto2k hace 5153 días en: Asides, themes, Wordpress
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.
1
Sep
aNieto2k hace 5210 días en: themes, webdev, Wordpress
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.

(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.

(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
31
Jul
aNieto2k hace 5242 días en: themes, Wordpress
@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.

(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í.
30
Jul
aNieto2k hace 5243 días en: estandares, Programacion, themes, web, webdev, Wordpress
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 »', 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 ),' · ', ''); ?></p>
</section>
<?php } else { ?>
<?php the_content( the_title( '', '', false ) . ' ' . __( 'weiterlesen »', 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 »’, 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 ),’ · ‘, »); ?></p>
</section>
<?php } else { ?>
<?php the_content( the_title( », », false ) . ‘ ‘ . __( ‘weiterlesen »’, FB_BASIS_TEXTDOMAIN ) ); ?>
<section>
<?php wp_link_pages(); ?>
</section>
<?php } ?>
</section>
</article>
<?php endwhile; else: ?>
10
Sep
aNieto2k hace 5566 días en: Asides, themes, Wordpress
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.
29
May
aNieto2k hace 5670 días en: Asides, themes, Wordpress
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]
21
May
aNieto2k hace 5678 días en: Actualidad, themes, Wordpress
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

2. Omni Theme

3. Web 2.0

4. Quommunication Video

5. Revolution Media Pro

6. Video Gallery

7. TV Elements

8. Video Flick

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