Il blog per tutti gli smanettoni del pc

Guida alla realizzazione di un Theme WordPress – Parte 5

Css,Html 
gen 1

Indice guida

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

In questo articolo convertiremo la sidebar, parte fondamentale di un theme wordpress. La sidebar contiene informazioni utili per l’utente come gli archivi, le categorie e informazioni personali.

Spiegare passo passo come convertire tutto il theme in html/css è davvero complicato . Dovrei scrivere una guida di minimo 50 pagine perchè ci vuole una solida conoscenza dell’html e del css. Per codesto motivo , ogni qual volta converto, registro ogni movimento del mio monitor.



Aggiungiamo al file index.html la struttura della sidebar:

<div id="sidebar">
 <div style="padding-top:0">Il mio profilo</div>
 <div> <img src="" width="119" height="107" /> Hello My name is ii isojdisssos
 sadjasioj dioasj dioasjdssdiasj
 asdjiasiodj ioasdj ioassdsdsdj
 asdji asiodj ioasjdijassdsddiojs
 sajid ioasdj ioasj dioassdsjiod
 asdk psoakdopk asdopk as </div>
 <div>Ultimi post</div>
 <ul>
 <li>» <a href="#">qui titolo post ecc assdaads</a></li>
 </ul>
 <div>I più visitati</div>
 <ul>
 <li>» <a href="#">qui titolo post ecc assdaads</a></li>
 </ul>
 <div>
 <div>Archivio</div>
 <ul>
 <li>» <a href="#">Gennaio</a></li>
 </ul>
 <div>Archivio</div>
 <ul>
 <li>» <a href="#">Gennaio</a></li>
 </ul>
 <div>Archivio</div>
 <ul>
 <li>» <a href="#">Gennaio</a></li>
 </ul>
 </div>
 <div>
 <div>Archivio</div>
 <ul>
 <li>» <a href="#">Gennaio</a></li>
 </ul>
 <div>Archivio</div>
 <ul>
 <li>» <a href="#">Gennaio</a></li>
 </ul>
 <div>Archivio</div>
 <ul>
 <li>» <a href="#">Gennaio</a></li>
 </ul>
 </div>
 </div>

Nel file style.css creiamo delle nuove regole per impostare lo stile della sidebar

#sidebar{
float:right;
width:355px;
font-size:14px;
}
#sidebar .title{
font-size:22px;
color:#69950F;
font-style:oblique;
padding:20px 0;
 
}
#sidebar .text{
line-height:160%;
color:#666666;}
#sidebar .text img{
float:left;
padding:3px;
border:1px solid #676767;
margin:0 10px 10px 0;}
#sidebar ul{
list-style-type:none;}
#sidebar ul li{
border-bottom:1px solid #cccccc;
padding:10px 0;}
#sidebar ul li a{
color:#000000;
text-decoration:none;}
#sidebar ul li a:hover{
text-decoration:underline;
}
#sidebar .fLeft{
float:left;
width:165px;
}
#sidebar .fRight{
float:right;width:165px;}

In html per visualizzare una lista si usa il tag <ul></ul> . Ogni elemento deve essere racchiuso tra i tag <li></li>.

<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
</ul>

Per default i browser visualizzano accanto ad ogni elemento un puntino. Con la regola list-style-type:none; non facciamo altro che eliminare questo stile.

L’intero codice del theme è reperibile a questo indirizzo – Download Theme WordPress

Lascia un Commento