Det här är alltsÃ¥ början till ett nytt tema. Helt utan tema kan inte WP köras, sÃ¥ jag har skapat ett nytt tema i dess allra enklaste form. I katalogen /wp_contents/themes/ har jag gjort en ny temakatalog som jag kallade ”mitt-tema” (kan heta vad som helst, men undvik mellanslag och hÃ¥ll dig till tecknen a-z, A-Z, 0-9, _ och – i namnet, det bör man för övrigt alltid göra med katalog- och filnamn som ska leva pÃ¥ webben för att undvika problem). I min temakatalog finns tvÃ¥ filer, style.css och index.php, dessa tvÃ¥ är nödvändiga för ett tema, men kommer sÃ¥ smÃ¥ningom att fÃ¥ sällskap med mÃ¥nga fler.
style.css
Stilmallen innehåller i nuläget inga stilregler över huvud taget, endast den rad som definierar själva temat för WP-motorn.
/* Theme Name: Mitt HTML5-tema */
Man kan lägga in mer information än bara tema-namnet om man vill, men ska man bara ha det för eget bruk räcker det så. Informationen skrivs som en kommentar, vilket i css görs mellan /* och */
index.php
Allt som skrivs mellan <?php och ?> är alltså php-kod, och består så här långt enbart av anrop till färdiga wp-funktioner. Exakt vad dessa gör kan man hitta i WordPress Codex (en sida som jag alltid har öppen som referensverk, det finns ingen möjlighet att lära sig allt utantill). De allra flesta finns under Template Tags, några får man använda sökfunktionen för att hitta.
Jag har gjort filen så enkel som möjligt och bara tagit med det allra nödvändigaste, så att själva inläggen ska synas och det ska gå att kommentera, men samtidigt använt de nya HTML5-elementen.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title>Lenas egna - Trial & error</title>
<link rel="stylesheet" type="text/css" src="<?php bloginfo('stylesheet_url'); ?>" />
<?php /* Funktionsanropet wp_head() ska alltid finnas allra sist före </head>! */ ?>
<?php wp_head(); ?>
</head>
<body>
<header>
<hgroup>
<h1><?php bloginfo('name'); ?></h1>
</hgroup>
</header>
<?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>
<?php /* Funktionsanropet wp_footer() ska alltid finnas allra sist före </body>! */ ?>
<?php wp_footer(); ?>
</body>
</html>
HTML5-element som används:
- header Definierar inledningen av ett dokument eller en sektion, kan innehålla t ex navigation och rubriker
- hgroup En grupp av h-taggar (<h1> till <h6>), där lägsta siffran är huvudrubrik och övriga underrubriker
- article Enligt w3.org ska article egentligen användas för att definiera externt innehåll, men verkar i praktiken användas till just det som det låter som: en artikel eller en bloggpost
- time Definierar datum och/eller tid (attributet pubdate talar om att det handlar om publiceringsdatum)
- nav Definierar navigering
- footer Definierar antingen en sidfot, eller foten på en sektion, t ex en article
Anm 1: Jag har skrivit in sidans namn i title-taggen. Det ska man inte göra, man ska använda sig av ett funktionsanrop istället (samma tema ska kunna användas till en annan wp-installation, eller du ska kunna byta namn på bloggen utan att behöva ändra i filerna). Men jag vill inte använda standardfunktionen utan istället skriva en egen funktion för att göra den mer sökmotorvänlig, så det får vara så länge. Om du vill anropa standardfunktionen ska title-taggen se ut så här:
<title><?php bloginfo('name'); ?></title>
Anm 2: Jag har avinstallerat alla plugins också, för att ingen sådan ska lägga sig i hur saker och ting uppför sig. Med ett undantag: en plugin som gör det möjligt att visa kod i inläggen.
HTML5 handlar alltsÃ¥ väldigt mycket om semantik. Och man har pÃ¥ ett sätt tagit till sig det som varit praxis bland webbutvecklare och gjort till standard. Det har varit väldigt vanligt under mÃ¥nga Ã¥r att man lagt t ex en headerbild, sidans rubrik och en navigation inom en div-tagg med id=”header”. Nu blir det ett eget element istället.
Nästa steg blir att lägga till såpass med stilregler att det blir lite mer läsvänligt. Det här är inte så kul.
Tyvärr, det är nu stängt för kommentarer här.