aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Andrés Nieto

Palma de Mallorca, España

Menú

Buscador

CSS Sprites para mejorar las fechas de tus posts

4 Feb

aNieto2k hace 4866 días en: CSS, hacks, Programacion, themes, webdev, Wordpress

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

(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

aNieto2k hace 4965 días en: Asides, themes, Wordpress

+ 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

aNieto2k hace 5022 días en: themes, webdev, Wordpress

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

(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

In the Clouds, lleva twitter hasta en tu WordPress

31 Jul

aNieto2k hace 5054 días en: themes, Wordpress

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

(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

aNieto2k hace 5055 días en: estandares, Programacion, themes, web, webdev, Wordpress

+ 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>

<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: ?>

WordPress Theme Frameworks, SandBox fué solo el principio

27 Jul

aNieto2k hace 5058 días en: themes, webdev, Wordpress

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

¿Necesitas un theme para WordPress?

25 Sep

aNieto2k hace 5363 días en: themes, webdev, Wordpress

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

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

aNieto2k hace 5378 días en: Asides, themes, Wordpress

+ 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

aNieto2k hace 5482 días en: Asides, themes, Wordpress

+ 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

aNieto2k hace 5490 días en: Actualidad, themes, Wordpress

+ 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