mot html5 – del 2
Postat i WP & HTML5 Inga kommentarerFluid 960 gs
Jag har lagt till en grid-mall, och genast ökade läsbarheten med flera snäpp. Efter ett visst velande bestämde jag mig för en flytande layout (dvs inga fasta mått), och det blev Fluid 960 Grid System jag valde. Det visade sig innehålla en hel del javascript-effekter också, som jag kanske använder senare men la åt sidan tills vidare. I tema-mappen gjorde jag en ny mapp med namnet css: /wp-content/themes/mitt-tema/css/ där jag la filerna jag behöver (grid.css, reset.css, ie.css och ie6.css).
style.css, import av grid-filerna:
@import url('css/reset.css');
@import url('css/grid.css');
index.php, länkar till de IE-specifika css-filerna efter den ordinarie css-filen:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/css/ie.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/css/ie7.css" />
<![endif]-->
Nu finns det färdiga grid-systemet att tillgå. Bara att använda de färdiga klasserna från grid-mallen i index.php. Jag började med att lägga en div med klassen ”container_12″ runt hela innehållet. Det innebär att ett rutnät med 12 kolumner jämnt fördelade över hela ytan beräknas av grid-mallen. Glöm inte att avsluta diven sist i body, men före funktionsanropet wp-footer().
Headern ska sträcka sig över alla 12 kolumnerna, så den fick klassen ”grid_12″. Omedelbart efter headern lägger jag en div med class=”clear”, för att garanterna att inget innehåll hoppar upp och lägger sig bredvid headern.
Jag valde att göra två kolumner tills vidare, den första består av innehållet jag gjort tidigare. Det innehållet omger jag med html5-elementet section (som är precis vad det låter som). Jag testar med att låta det få 3/4 av ytan så länge, alltså klassen ”grid_9″. Eftersom även nästa kolumn blir en section gav jag den ett id, ”main-area”.
Efter main-area, men fortfarande inom container, lägger jag ett select-element till, som får id ”sidebar-right” och klassen ”grid_3″ (dvs 1/4 av 12). Den får vara tom tills vidare. Direkt efter sidebar-right kommer en ny clear-div, och därefter HTML5-elementet footer, som också får vara tom så länge. Sidfoten ska också sträcka sig över hela sidbredden och får alltså klassen ”grid-12″.
Nu ser hela index.php ut så här:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title>Lenas egna - Trial & error</title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/css/ie.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/css/ie7.css" />
<![endif]-->
<?php /* Funktionsanropet wp_head() ska alltid
finnas allra sist före </head>! */ ?>
<?php wp_head(); ?>
</head>
<body>
<div id="container" class="container_12">
<header class="grid_12">
<hgroup>
<h1><?php bloginfo('name'); ?></h1>
</hgroup>
</header>
<div class="clear"></div>
<section id="main-area" class="grid_9">
<?php /* Hämta inlägg: The Loop */ ?>
<?php while(have_posts()) : the_post(); ?>
<article>
<header>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark"
title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
Postat i <?php the_category(); ?>
<time pubdate="pubdate"><?php the_date(); ?></time>
<?php comments_number(); ?>
</header>
<?php the_content(); ?>
<footer>
<?php the_tags('Taggar: '); ?>
</footer>
</article>
<?php if(is_single()) : ?>
<ol class="commentlist">
<?php comments_template(); ?>
</ol>
<?php comment_form(); ?>
<?php endif; ?>
<?php /* Avsluta The Loop */ ?>
<?php endwhile; ?>
<nav>
<?php next_posts_link(); ?>
<?php previous_posts_link(); ?>
</nav>
</section><!-- #main-area -->
<section id="sidebar-right" class="grid_3">
</section><!-- #sidebar-right -->
<div class="clear"></div>
<footer class="grid_12">
</footer>
</div><!-- #container -->
<?php /* Funktionsanropet wp_footer() ska alltid
finnas allra sist före </body>! */ ?>
<?php wp_footer(); ?>
</body>
</html>
Webbläsare som inte klarar HTML5
Så var det då det här med att alla webbläsare inte klarar HTML5 lika bra. Alla känner helt enkelt inte till de nya elementen. Det löser man genom att initialt sätta stilregeln display:block på samtliga nya element, för att därefter kunna behandla dem som man behandlar vilken div som helst. Eftersom reset.css är den som läses först (och är till just för att sätta default-regler) skriver jag in det i den filen (jag utelämnade några av elementen som jag vet att jag inte kommer att använda.)
article, aside, details, embed, figcaption, figure, footer, header, hgroup, mark,
meter, nav, output, progress, section, source, summary, time, video{
display: block;
}
Exempelvis Firefox och Safari är sedan vänliga nog att ta hand om informationen utan att ifrågasätta, så icke IE. Om inte IE känner till ett element, så låtsas det inte om att det finns. Men det finns förstås sätt att överlista även IE, och vi får ta till lite javascript. Dags för en ny fil: html5.js, och för att få lite ordning och reda (eftersom jag kommer att ha många fler js-filer sedan) lägger jag den i en särskild js-mapp (/wp-content/themes/mitt-tema/html5.js). Kod att klistra in (jag hoppar över förklaringar här):
var html5Elements = [
'article',
'aside',
'details',
'embed',
'figcaption',
'figure',
'footer',
'header',
'hgroup',
'mark',
'meter',
'nav',
'output',
'progress',
'section',
'source',
'summary',
'time',
'video'];
for(var i = 0; i < html5Elements.length; i++){
document.createElement(html5Elements[i]);
}
Och så ska html5.js länkas in i index.php för dem som behöver den (dvs IE lägre än 9), detta måste göras innan css-filerna läses:
<title>Lenas egna - Trial & error</title>
<!--[if lt IE 9]>
<script src="<?php bloginfo('stylesheet_directory') ?>/js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
Done. Nu är alla webbläsare skapligt med på noterna.
Registrera en Widget Area (Sidebar)
En sak till har jag gjort: jag har registrerat en Widget Area, så att jag har någonstans att lägga widgets från admindelen i WP. En ny fil, functions.php som ska ligga direkt i tema-mappen behövs för det. Och här kommer koden:
<?php /** * Registrera sidebars (widget areas) */ $args = array( 'name' => 'Right Sidebar', 'id' => 'sidebar-right', 'description' => 'Högra sidospalten', 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>'); register_sidebar($args); ?>
Det är viktigt att det inte finns några blankrader först eller sist i filen! Nu är widget-arean registrerad och kommer att finnas i admindelen. Men för att någon widget ska visa sig sedan måste man lägga till lite kod i index.php:
<section id="sidebar-right" class="grid_3">
<?php if(is_active_sidebar('sidebar-right')) : ?>
<?php dynamic_sidebar('sidebar-right'); ?>
<?php endif; ?>
</section><!-- #sidebar-right -->
Flytande grid-layout med två kolumner.
Sedan skrev jag lite text i en text-widget och drog dit, en förklaring ifall någon skulle råka komma in här och undra varför det ser ut som det gör…