Il blog per tutti gli smanettoni del pc

Guida alla realizzazione di un Theme WordPress – Parte 2

Css,Html ,
dic 22

Indice guida

  1. - Introduzione
  2. - Convertiamo header

La grafica che convertiremo passo passo è la seguente  My Easy Theme

Si tratta , come accennato nell’articolo precedente, di una grafica molto semplice , studiata per chi non è tanto pratico .

Un layout grafico, per buona regola,  si divide in tre parti : header , contenuto centrale e footer. La header è quella parte del sito, fissa in alto, composta da un logo e da un menu . Il contenuto, sono i testi centrali di ogni pagina. Invece il footer , è quella parte fissa in basso che contiene il copyright.

Oggi convertiamo la header del nostro theme.

Creiamo la pagina index.html , il file style.css e la cartella images .

Nel file style.css inseriamo il seguente codice :

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
#conteiner{
width:999px;
margin:0 auto;
padding:0 30px;
}
#header{
padding:40px 0;
}
#header #logo{
float:left;
padding:0 30px 0 0;
font-family:"Times New Roman", Times, serif;
font-size:36px;
color:#3C3C30;
border-right:1px solid #CCCCCC;
 
}
#header #slogan{
float:left;
padding:15px 0 0 30px;
}
#header #logo em{
color:#69950F;
}

Nel file index.html

<!DOCTYPE html PUBLIC "><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
@import "style.css";
</style>
</head>
<body>
<div id="conteiner">
 <div id="header">
 <div id="logo">My <em>first</em> theme</div>
 <div id="slogan">Qui slogon wordpress</div>
 </div>
</div>
</body>
</html>

Mentre convertivo, ho registrato ogni singolo movimenti nel video qui sotto. Nel prossimo articolo cercheremo di commentare ogni riga di codice .

Lascia un Commento