Maquetar un tema per WordPress II

En aquesta apartat donarem forma al contingut (index.php) i al peu (footer.php).

index

Começarem editan l’arxiu index.php borran div id=”contingut” i posan el següent codi

[php]

<div id="recent-info">
<h3>Recent Work</h3>

<p>"Sed et facilisis adipiscing et ultricies. Enim tincidunt elementum? Eu urna nisi. Turpis placerat. …"</p>
</div>

<div class="work">
<img src="http://lorempixum.com/200/200/nature/1/" />
<h3>Porjecte 1</h3>
<p>"Sed et facilisis adipiscing et ultricies. Enim tincidunt elementum? Eu urna nisi. Turpis placerat. …"</p>
</div><!– end of item" –>

<div class="work">
<img src="http://lorempixum.com/200/200/nature/2/" />
<h3>Porjecte 2</h3>
<p>"Sed et facilisis adipiscing et ultricies. Enim tincidunt elementum? Eu urna nisi. Turpis placerat. …"</p>
</div><!– end of item" –>

<div class="work">
<img src="http://lorempixum.com/200/200/nature/3/" />
<h3>Porjecte 3</h3>
<p>"Sed et facilisis adipiscing et ultricies. Enim tincidunt elementum? Eu urna nisi. Turpis placerat. …"</p>
</div><!– end of item" –>
</div> <!– end of recent –>
<div class="fila">

<div id="about">
<h3>Sobre nosaltre</h3>
<p>Scelerisque non pellentesque mauris, a in facilisis sagittis mus? Lorem. Nec ac sit natoque. Proin a nascetur scelerisque in scelerisque ac sociis facilisis augue in scelerisque parturient integer lorem habitasse. Elementum dignissim nec tincidunt tincidunt elit, eros in ac ac. Sed dapibus turpis vel diam. In risus velit? Purus et.</p>

<p>Ut rhoncus nunc! Augue adipiscing. Dapibus porta integer sagittis! Lacus quis purus. Sed, diam rhoncus integer mattis, augue! Et? Natoque sit! Pellentesque sed pulvinar dignissim scelerisque elementum et turpis aenean? Hac porta tempor, nisi sit phasellus integer. Et in. Nec duis eros vel tincidunt in, risus mattis. Enim in.</p>
<a href="#" class="readmore"><span>Mas info</span> </a>

</div><!– end of about –>
<div id="recent-posts">

<h3>Recent Blog Posts</h3>
<div class="single-recent-post">
<div class="thumb">
<img src="http://lorempixum.com/60/60/nature/4/" />
</div>
<div class="info-post">
<p>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit…</p>
</div>
</div><!– end of single-recent-post –>

<div class="single-recent-post">
<div class="thumb">
<img src="http://lorempixum.com/60/60/nature/5/" />
</div>
<div class="info-post">
<p>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit…</p>
</div>
</div><!– end of single-recent-post –>

<div class="single-recent-post">
<div class="thumb">
<img src="http://lorempixum.com/60/60/nature/6/" />
</div>
<div class="info-post">
<p>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit…</p>
</div>
</div><!– end of single-recent-post –>

</div><!– end of fila –>

</div><!– end of contingut –>

[/php]

Em dividit el div “contingut” en tres files, “nivoslider”, on més endavant posarem un slideshow, “recent-work”, on mostrarem els darrers treballs i “fila” on anirà el about i un include ,get_sibedar();, pel nostre sidebar. Això si ho carreguem ja s’ahuria de veure. Ara posem els estils :

[css]

/*CONTINGUT*/

#contingut{
padding: 30px 0px;
background-color: #FFF;
}

#nivoslider {
margin-bottom:70px;
}

#recent-work {
margin-bottom: 30px;
position: relative;
padding-left: 195px;
overflow:hidden;
}

#recent-work h3{
font-weight:bold;
line-height:30px;
}

#recent-info {
text-align: right;
width: 195px;
position: absolute;
left: 0;
top: 0;
}

.work {
float: left;
margin: 0 0 0 55px;
width: 200px;
position: relative;

}

#about{
float:left;
width:455px;
margin-right:40px;
margin-left:10px;
}

#about h3, #recent-posts h3 {
padding-bottom: 18px;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 12px;
font-weight:bold;
}

p {
padding-bottom: 10px;
line-height: 20px;
}

.fila{
padding:40px 0;
background-image: url(images/shadow.png);
background-repeat:no-repeat;
overflow:hidden;
}

/*RECENT BLOG POSTS*/

#recent-posts, .single-recent-post{
float: left;
width: 455px;
}

.thumb {
float: left;
position: relative;
margin-bottom: 5px;
margin-right: 22px;
height: 60px;
width: 60px;
}

.info-post {
float: left;
position: relative;
width:373px;
}
[/css]

Els estils dels botons

[css]

/*BOTONS*/

a.readmore {
background: url(images/readmore.png) no-repeat right bottom;
color: #2b2b2b;
height: 30px;
line-height: 31px;
padding-right: 11px;
display: block;
float: right;
text-decoration: none;
}
a.readmore span {
background: url(images/readmore.png) no-repeat;
display: block;
height: 30px;
padding-left: 16px;
padding-right: 5px;
}

[/css]

Editem l’arxiu footer.php i borrem l’etiqueta footer i posem el següent codi

[php]
<footer class="clear">

<div class="footer-widget">
<h3>titol</h3>
<p>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit…</p>
</div>
<div class="footer-widget">
<h3>titol</h3>
<p>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit…</p>
</div>
<div class="footer-widget">
<h3>titol</h3>
<p>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit…</p>
</div>
<div class="footer-widget last">
<h3>titol</h3>
<p>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit…</p>
</div>

</footer><!– end of footer –>

[/php]

Ara els estils de footer

[css]

/*FOOTER*/

footer {
padding-top:30px;
overflow:hidden;
background-color:#F1F1F1;
}

footer h3{
font-weight:bold;
line-height:30px;
}

.footer-widget {
float: left;
margin-right: 52px;
width: 201px;
}

.last {
margin-right: 0;
}
.last {
margin-right: 0;
}

[/css]

Fins aquí la part de maquetació. A la propera classe veurem el bucle bàsic de WordPress.

Podeu descarregar el resultat de la classe d’avui al següent link:
[download id=”586″]