lenas egna » stilregler http://lena.smuligt.com mitt i livet - och sen då? Mon, 11 Mar 2013 13:37:26 +0000 sv-SE hourly 1 http://wordpress.org/?v=3.4.2 mot html5: del 1 http://lena.smuligt.com/2011/08/06/mot-html5-del-1/ http://lena.smuligt.com/2011/08/06/mot-html5-del-1/#comments Sat, 06 Aug 2011 11:03:25 +0000 Lena http://lena.smuligt.com/?p=2358 [...]]]> 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.

]]> http://lena.smuligt.com/2011/08/06/mot-html5-del-1/feed/ 0