Il blog per tutti gli smanettoni del pc

Guida alla realizzazione di un Theme WordPress – Parte 4

Css,Html ,
dic 26

Indice guida

  1. - Introduzione
  2. - Convertiamo header
  3. - Commento prima parte del codice css
  4. - Convertiamo i post

Eccoci al 4° appuntamento della guida . Oggi convertiremo i post del nostro theme wordpress.

Aggiornare la index.html con questo nuovo codice :

<!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>EasyTheme by iosmanetto.it</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 style="clear:both"></div>
 </div>
 <div id="main">
 <div class="post">
 <div class="title"><a href="#">Qui titolo post</a></div>
 <div class="detail"><a href="#">Nome Categoria</a> | Autore | Data</div>
 <div class="entry">qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo <a href="#" class="more-link">Continua a leggere ></a> </div>
 </div>
 </div>
</div>
</body>
</html>

Ho aggiunto la struttura del post e modificato un piccolo particolare della header.

Prima della chiusura del div header ho inserito un contenitore(div) con un clear:both. Clear both specifica che gli elementi successivi non saranno adiacenti all’elemento float di slogan.

La struttura del post è la seguente

Nel div title ci andrà il titolo del post. In detail i dettagli del post come l’autore , le categorie e i tags .Infine in entry il testo del post.

Aprite il file style.css e inserite nell’ultima riga queste regole

#main{
float:left;
width:540px;
}
#main .post{
padding:0 0 10px 0;}
#main .post .title{
font-size:24px;
color:#326EA1;}
#main .post .title a{
color:#326EA1;
text-decoration:none;
}
#main .post .title a:hover{
color:#326EA1;
text-decoration:underline;
}
#main .post .detail{
font-style:oblique;
padding:15px 0;}
#main .post .detail a{
color:#000000;
text-decoration:none;
}
#main .post .detail a:hover{
text-decoration:underline;
}
#main .post .entry{
font-size:16px;
line-height:160%;}
#main .post .entry .more-link{
font-size:14px;
color:#003366;
text-decoration:underline;
display:block;
padding:15px 0;}
#main .post .entry .more-link:hover{
text-decoration:none;
}

La maggior parte del codice lo conosciamo già. Occorre commentare i seguenti comandi :

text-decoration:none;
text-decoration:underline;
font-style:oblique;
line-height:160%;
display:block;
  1. Effetto sottolineatura del testo non impostato
  2. Effetto sottolineatura del testo impostato
  3. Testo in corsivo
  4. La distanza tre due righe di testo è uguale al 160% rispetto alle dimensioni del font
  5. Trasformiamo l’elemento in un  blocco ( come un div )

Lascia un Commento