Contenido

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

  • Genial!, la verdad, es que en mi opinión toda nueva web debería hacerse en HTML5 (y CSS3) se gana mucho :-D

    Y si el explorer supone un problema, pues se pone algo como lo que sale esta web mía cuando entras con el explorer http://www.hornosanagustin.uni.cc/como_llegar.html y ya está :-P (claro, que obviamente eso sólo se puede hacer si la web la haces gratis, porque cuando alguien paga, no puedes quejarte de que la gente utilice un navegador nuevo con un motor de renderizado obsoleto…. … …)

    PD: la pu$ada, es que habría que generar más divs si queremos que se vea bien en el Safari

    Por lo que he probado, article una vez que está en display:block, tanto en el Crhome, como en el Firefox si le pones borde, color de fondo, etc. lo admite, pero el Safari (al menos el de Mac) me da error, se ve como si fuera el explorer.. .. por eso en esa web que he puesto arriba, tengo y le doy el estilo al div, no al article, porque si no se vería mal en el Safari… ..

    Si en Safari se viera bien, pues se pondría a ese div para que sólo fuera para el Explorer, pero me temo que todavía no se puede poner ese div sin comentar… ..

    Aunque quizás con la nueva versión de Safari que saldrá con el Snow Leopard lo solucionen.. … ya veremos… ..

  • @Moi_85: Tendrías que plantear el código HTML de esa página web… para darte unas pista, con poner sólo la palabra DOCTYPE no es suficiente y hay etiquetas que están en un sitio que no le corresponden.

    No quiero ser un troll y perdona de antemano, pero antes de criticar deberías hacer una autocritica. Ya sé que queda muy cool hoy en día estar en contra de IE (que conste que no le tengo simpatía) pero revisa tu código y todos seremos más felices

    Salu2.

  • @Moi_85: Vale, perdona, me acabo de dar cuenta que lo estás haciendo en HTML 5. Admito mi error.
    Llevo unos días un poco mosca porque todavía no he cogido vacaciones y veo elefantes rosas :-P

    ¿Creéis que vale la pena desarrollar en HTML 5 aún siendo un borrador?

  • @paco: Personalmente creo que es un poco pronto. Pero no está de más tener en cuenta estas nuevas funcionalidades como una opción más.

    Dependiendo del proyecto (perfíl al que vá dirigida la aplicación, costes,…) se podría crear una versión alternativa con las nuevas funcionalidades para usuarios avanzados.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.