Molti nuovi temi di WordPress vengono scritti e sviluppati in HTML5. In questo articolo vorrei illustrare alcune modalità per sviluppare i nostri temi utilizzando questo nuovo linguaggio di marcatura.
DOCTYPE e sezione head
Per prima cosa dobbiamo inserire il nuovo DOCTYPE HTML5:
<!DOCTYPE html>
Poi dobbiamo specificare la lingua in uso nell'elemento html:
Nell'elemento head dobbiamo specificare la codifica dei caratteri:
Quindi dobbiamo inserire il profilo per i Microformats:
<link rel="profile" href="http://gmpg.org/xfn/11" />
Per supportare Internet Explorer 8 e inferiori dobbiamo anche inserire lo script per HTML5 di Remy Sharp:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Il CSS
Nel CSS dobbiamo aggiungere degli stili predefiniti per i nuovi elementi HTML5 a vantaggio dei browser che non li supportano ancora:
article, aside, header,
hgroup, nav, figure,
figcaption, section, footer {
display: block;
}
Titolo del sito e sua descrizione
Possiamo usare questa struttura:
[php htmlscript="true"] <header id="branding"> <hgroup> <?php if( is_front_page() || is_home() || is_404() ) { ?> <h1 id="site-title"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1> <h2 id="site-description"><?php bloginfo('description'); ?></h2> <?php } else { ?> <h2 id="site-title"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2> <h3 id="site-description"><?php bloginfo('description'); ?></h3> <?php } ?> </hgroup> </header>Menu di navigazione
Useremo l'elemento nav:
Post
Possiamo usare questa struttura:
[php htmlscript="true"] <?php get_header(); ?> <section id="content"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>> <header> <h1><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h1> <figure><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); }?></figure> </header> <section class="content"> <?php the_content(); ?> </section> <footer class="post-meta"> <p><?php _e('Pubblicato il '); the_time('F j, Y'); _e(' alle '); the_time() ?></p> <p><?php _e(' Categorie: '); the_category(', ') ?></p> <p><?php the_tags('Tag: ', ', ', ' '); ?></p> </footer> </article> <?php comments_template( '', true ); ?> <?php endwhile;?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>Ovviamente la struttura base dei post può essere riutilizzata nella home page e nelle pagine di archivio o di categoria con le opportune modifiche del caso.
div o section?
Abbiamo usato l'elemento section a scopo dimostrativo, ma la semantica di questo elemento lo rende più adatto a documenti dalla struttura molto più complessa di quella dei post o delle parti di un blog. In questo caso l'elemento div sarebbe stato più appropriato, come già avviene nel framework Whiteboard.
La colonna laterale
La colonna laterale ospita in genere i widget di WordPress. Per questo motivo dobbiamo innanzitutto fare in modo che i widget ricevano la corretta marcatura:
if ( function_exists('register_sidebar') ) {
register_sidebar(array('name'=>'Sidebar',
'before_widget' => '<aside class="widget-sidebar"><ul>',
'after_widget' => '</ul></aside>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
In questo caso abbiamo utilizzato l'elemento aside per i widget. Quindi possiamo creare la nostra sidebar:
div o section?
Abbiamo usato l'elemento section a scopo dimostrativo, ma la semantica di questo elemento lo rende più adatto a documenti dalla struttura molto più complessa di quella dei post o delle parti di un blog. In questo caso l'elemento div sarebbe stato più appropriato, come già avviene nel framework Whiteboard.
Il footer
Il footer del sito si presenterà in questo modo:
[php htmlscript="true"] <footer id="site-info"> <p>&copy; <?php echo date("Y") ?> <a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a>. <?php _e('All Rights Reserved.'); ?></p> </footer>