Creare un tema WordPress semplice e funzionale non è cosa immediata. C’è da affrontare diverse fasi per sviluppare un buon layout che possa adattarsi ai rodati e funzionali meccanismi di questo CMS. Il mio approccio a questo tipo di lavoro prevede 4 operazioni fondamentali: schizzo su carta, realizzazione del template in PhotoShop, codifica del psd in (x)html/css ed infine lo sviluppo del tema WordPress. Ritengo ognuno di questi step assolutamente fondamentale e propedeutico a quello successivo.

In questo post si affronta il terzo passo, cioè la preparazione del layout web in html dal file psd. E’ ovvio che bisogna strutturare la pagina in modo che possa facilmente adattarsi a lavorare con il theme system di wordpress.

Per saperne di più su come realizzare un template PSD consiglio di leggere Come creare un Web Portfolio Layout con sfondo Watercolored in PhotoShop.

Per i nostri scopi si utilizzerà SportNewsPvm template. Continuando la lettura dell’articolo è possibile comprendere le ragioni di questa scelta.

Perché il template SportNewsPvm può diventare un funzionale tema WordPress

Ci apprestiamo a dare uno sguardo sommario a quelli che sono gli elementi fondamentali dei quali si ha bisogno quando si intende progettare e realizzare un buon tema per questo fantastico CMS.
In questo caso abbiamo un obiettivo preciso: un magazine sportivo con aggiornamenti settimanali.

SportNewsPvm è stato pensato proprio per realizzare qualcosa dele genere. Uno stile soft-grunge con un header spazioso e un utile box per le featured news.
E’ possibile intuire facilmente come la struttura del template sia assolutamente adattabile alla mission, infatti gli elementi base sono top-menu, header, featured news box, posts container, sidebar and footer.
Si divide ulteriormente il layout in questione in 4 macro-aree: top, left-container, right-container e bottom.
Questo tipo di suddivisione è utile durante tutto lo sviluppo del tema per avere sempre a disposizione una rappresentazione grafica della disposizione degli elementi.

In questo modo, con questo tipo di struttura, si sta provando a costruire tutti i “contenitori” necessari per i componenti propri di un tema WordPress. Questi componenti sono fondamentalmente l’intestazione, il ciclo dei post, la sidebar e il footer.
Ora è chiaro che il nostro template dispone dei container necessari per ospitare tutte quelle che sono le prerogative di un WP theme.

Altri elementi caratteristici nello sviluppo del tema sono la pagina per il singolo post, la struttura dei commenti, il template per le categorie, il template per le page quello per l’archivio. Adesso, però, c’è solo da capire come preparare il layout base, per cui ci si occuperà di questi aspetti nei post successivi.

Anteprima, demo on-line e Template Css

In questa sezione del post è possibile vedere una demo on-line del web layout realizzato e scaricare il Template (X)HTML/CSS completo con tutti i file sorgenti.

Coding SportNewsPvm

Una piccola sintesi.
Nella parte alta della struttura (top si va ad inserire una barra di navigazione e l’header con il logo, il form cerca e le icone dei feed.
Il left-container prevede un box per le fetured news e il loop degli articoli.
Il right-container (sidebar) è utile per inserire gli sponsor, gli articoli più letti e altre side-info.
Nel bottom un semplice footer con i crediti.

Ora è arrivato il momento di buttar giù un po’ di codice.
Questa sezione dell’articolo mostra i passaggi essenziali per codificare un template psd, senza addentrarsi molto in questioni già affrontate in post precedenti come WaterColored Portfolio Coded, guida per realizzare un semplice layout (X)HTML/CSS e DesignSchool Coded, guida per realizzare un semplice layout (X)HTML/CSS.
L’obiettivo principale di questo articolo è semplicemente capire come predisporre un template css per la realizzazione di un vero e proprio tema per il più famoso CMS di blogging in circolazione.

Prima di cominciare non resta che creare le cartelle “images” e “js” all’interno della main folder (“sportnews”) e i file “index.html” e “style.css”.

Passo 1 – Main Structure

Si usa una immagine ripetibile per il background generale del body.

Di seguito il markup della struttura base (modificare “index.html”).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sport News Design | A free CSS Template | made in PV.M Garage</title>
<link href="style.css" rel="stylesheet" type="text/css" /><!-- stylesheet -->
</head>
<body>

<div id="top"><!-- top menu -->
  <div class="top_left">
    <!-- categories menu -->
  </div>

  <div class="top_right">
    <!-- pages menu -->
  </div>
</div>

<div id="header">
<!-- header -->
</div>

<div id="container">

  <div id="left_cont">
    <!-- left container -->
  </div>

  <div id="sidebar">
    <!-- right container -->
  </div>

</div>

</div>

<div id="footer">
<!-- footer container -->
</div>

</body>
</html>

Si inizializza il Cascading Style Sheet scrivendo nel file “style.css” le regole riportate in basso.

/*Yahoo! Reset CSS*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,
blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/*End Yahoo! Reset CSS*/

body {
  background: #fff url("images/bck.jpg") repeat-x top;
  font-family: Verdana, Georgia, “Lucida Sans Unicode”, sans-serif;
  font-size: 14px;
  color: #333;
  margin-top: 15px;
}

:focus {
	outline: 0;
}

a {
  text-decoration: none;
  color: #ca5235;
}

a:hover {
  color: #75a7b4;
}

small {
  font-size: 10px;
}

h1 {
  color: #ca5235;
  font-size: 28px;
}

h2 {
  color: #ca5235;
  font-size: 28px;
}

Passo 2 – Top menu e Header

Si aggiungono gli elementi del design previsti per la parte alta della struttura. Sotto è possibile osservare le immagini esportate dal psd per il background di header e top.

Le seguenti immagini, invece, sono utili per completare l’header con il logo, il search form e le icone del feed.

Ecco di seguito il codice (x)html per l’header e la top-nav bar.

<div id="top">
  <div class="top_left">
    <ul>
      <li><a href="#">Football</a></li>
      <li><a href="#">Basket</a></li>
      <li><a href="#">Volley</a></li>
      <li><a href="#">MotorSports</a></li>
      <li><a href="#">Special</a></li>
      <li><a href="#">Interview</a></li>
    </ul>
  </div>

    <div class="top_right">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Write for us</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

<div id="header">
  <div id="logo">
    <a href="#"></a>
  </div>

  <div id="search_box">
      <input name="textfield" type="text" class="search_input" id="textfield" value="Search" />
  </div>

  <div id="feed">
    <ul>
      <li><a href="#" class="rss_icon"></a></li>
      <li><a href="#" class="rss_mail"></a></li>
    </ul>
  </div>
</div>

Si procede aggiornando il file di stile.

#top {
  background: url("images/bck_top.png") no-repeat center left;
  height: 53px;
  width: 1030px;
  margin: auto;
}

  .top_left {
    position: relative;
    float: left;
  }

  .top_left ul {
    margin: 23px 0 0 105px;
  }

  .top_left ul li {
    padding:0 5px;
    display: inline;
    font-size: 12px;
  }

  .top_left ul li a {
    color: #706d67;
    font-weight: bold;
    text-transform: uppercase;
  }

  .top_left ul li a:hover {
    color: #ca5235;
    font-weight: bold;
    border-bottom: 1px dotted #ca5235;
  }

  .top_right {
    position: relative;
    float: right;
  }

  .top_right ul {
    margin: 20px 60px 0 0;
  }

  .top_right ul li {
    padding:0 2px;
    display: inline;
    font-size: 10px;
  }

  .top_right ul li a {
    color: #706d67;
  }

  .top_right ul li a:hover {
    color: #ca5235;
    border-bottom: 1px dotted #ca5235;
  }

#header {
  background: url("images/bck_head.png") no-repeat center left;
  height: 244px;
  width: 1030px;
  margin: auto;
}

  #logo {
    background: url("images/logo.png") no-repeat center left;
    margin: 0 0 0 50px;
    padding: 26px;
  }

  #logo a {
    width: 463px;
    height: 167px;
    display: block;
  }

  #search_box {
    position:relative;
    float: left;
    top: -18px;
    margin-left: 40px;
    width: 260px;
    background: url("images/search.png") no-repeat center right;
    margin-right: 10px;
  }

  .search_input {
    border: 1px solid #c8c9d0;
    width: 150px;
    color: #c8c9d0;
    padding: 8px;
  }

  #feed {
    position:relative;
    float: left;
    top: -18px;
    border-left: 2px solid #c8c9d0;
    padding: 0px 5px;
    background: url("images/subscribe.png") no-repeat center right;
    width: 340px;
  }

  #feed ul li {
    display: inline;
    padding: 0 5px;
  }

  .rss_icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("images/rss.png") no-repeat;
  } 

  .rss_mail {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("images/rss_mail.png") no-repeat;
  }

Passo 3 – Il Main Container

Quella seguente è l’immagine di background utilizzata per il main container. Si usa un’altezza di 375px per non far perdere il grunge effect. E’ ovvio che questa scelta è orientata al mantenimento di una certa qualità nella grafica, ma si va a peggiorare leggermente il tempo di caricamento della pagina date le dimensioni.

Ecco, riportato in basso, il codice html per il main container. In questo passo viene aggiunto anche un fix per l’interpretazione della proprietà float da parte di alcuni browser. Aggiungendo la classe .clearfix si risolve il problema della visualizzazione dello sfondo posizionato sotto elementi di tipo float (per saperne di più su questo tipo di problema e sulla soluzione adottata leggi How To Clear Floats Without Structural Markup).

<div id="container" class="clearfix">

  <div id="left_cont">
    <!-- left container -->
  </div>

  <div id="sidebar">
    <!-- right container -->
  </div>

</div>

#container {
  background: url("images/bck_container.png") repeat-y top left;
  width: 1030px;
  margin: auto;
}

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

Passo 4 – Il Left Container

In questa sezione ci sono da sviluppare due importanti elementi: il box per le featured news e il post container. Sotto sono riportate le immagini utilizzate in questa sezione.

Nel box featured ci sono tre elementi scorrevoli, quindi c’è da scrivere un corretto markup per preparare il documento all’uso di UI jQuery Tabs.
La costruzione del post container prevede il titolo, una immagine 200×200px, l’estratto del post e i box per le meta-info.
Sotto è possibile osservare il codice completo.

<div id="container" class="clearfix">

  <div id="left_cont">
  <div id="featured_title"></div>
  <div id="featured" class="clearfix">

    <ul class="nav">
      <li>
          <a href="#featured-1">
          <span class="imag_list"><img src="images/image1-small.jpg" alt="" /></span>
          <span class="meta_info_list">Category - 07.11</span><br />
          <span class="title_list">Lorem ipsum dolor sit amet</span>

          </a>
      </li>
      <li>
          <a href="#featured-2">
          <span class="imag_list"><img src="images/image2-small.jpg" alt="" /></span>
          <span class="meta_info_list">Category - 04.11</span><br />
          <span class="title_list">Etiam rhoncus</span>
          </a>
      </li>
      <li>
          <a href="#featured-3">
          <span class="imag_list"><img src="images/image3-small.jpg" alt="" /></span>
          <span class="meta_info_list">Categoria - 03.11</span><br />
          <span class="title_list">Etiam ultricies nisi vel augue</span>
          </a>
      </li>
    </ul>

    <div id="featured-1" class="featured_content">
      <a href="#" ><img src="images/image1.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Lorem ipsum dolor sit amet</a></h2>
			</div>
    </div>

    <div id="featured-2" class="featured_content">
      <a href="#" ><img src="images/image2.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Etiam rhoncus</a></h2>
			</div>
    </div>

    <div id="featured-3" class="featured_content">
      <a href="#" ><img src="images/image3.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Etiam ultricies nisi vel augue</a></h2>
			</div>
    </div>

  </div>

  <div id="news_title"></div>
  <div id="post_container" class="clearfix">
      <h1>Sed ut perspiciatis unde omnis iste</h1>
      <div class="post_image">
        <img src="images/post1.jpg" alt="post1" />
        <div class="meta_tag_comment">
        <p><a href="#">Commenti (10)</a></p>
        <p><small>Author: <a href="#">Leo Miranda</a></small></p>
        <p><small>Tags: <a href="#">football</a>, <a href="#">interview</a>, <a href="#">serie A</a>, <a href="#">serie B</a>, <a href="#">liga</a>, <a href="#">premier league</a></small></p>
        </div>
      </div>
      <div class="post_content">
        <span class="meta_info">Category - 10.07.09</span>
        <p><!--the excerpt--></p>
        <span class="more"><a href="#">Read More</a></span>
      </div>
  </div>
</div>

Di seguito le relative regole CSS.

#left_cont {
    float: left;
    width: 650px;
    margin: 10px 10px 10px 21px;
  }

  #featured {
    width: 600px;
    background: url("images/img_feat_bck_big.png") no-repeat center left;
    margin-left: 20px;
    margin-bottom: 30px;
  }

  #featured_title {
    background: url("images/feat_tit.png") no-repeat center left;
    width: 632px;
    height: 27px;
    margin-bottom: 25px;
    margin-top: 5px;
  }

  #news_title {
    background: url("images/news_tit.png") no-repeat center left;
    width: 632px;
    height: 27px;
    margin-bottom: 18px;
  }

  ul.nav {
    float: right;
    left: 360px;
	  width: 225px;
	  padding-top: 3px;
  }

  ul.nav li {
    overflow: hidden;
    padding: 4px 1px;
  }

  ul.nav li a{
	  display: block;
	  height: 60px;
	  color: #333;
  }

  ul.nav li a:hover{
    outline: 1px dotted #ca5235;
  }

  ul.nav li img {
	  float: left;
    margin: 4px;
    padding: 5px;
    width: 75px;
    height: 40px;
  }

  span.imag_list {
  	 float: left;
     background: url("images/img_feat_bck.png") no-repeat center left;
     width: 95px;
     height: 58px;
  }

  span.title_list {
    color: #ca5235;
    font-size: 11px;
    font-weight: bold;
  }

  span.meta_info_list {
    color: #75a7b4;
    font-size: 10px;
    font-weight: bold;
  }

  .featured_content {
	  width: 350px;
    height: 205px;
  }

  .featured_content img {
	  padding: 9px 8px 8px 8px;
  }

  .featured_content .info {
    position: relative;
	  top: -61px;
    left: 5px;
	  height: 50px;
	  width: 340px;
	  margin: 0 3px;
	  background: url("images/transparent-bg.png");
	  overflow: hidden;
  }

  .info h2 {
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    padding: 5px;
  }  

  .info h2 a {
    color: #d8d7d7;
  }

  #post_container, #post_container1, #post_container2 {
    margin: 0 23px 30px 23px;
    clear: both;
    min-height: 220px;
    background: url("images/post_sep.png") no-repeat bottom right;
  }

  .post_image {
    float: left;
    margin: 10px 25px 13px 15px;
    width: 201px;
  }

  .post_image img {
    border: 1px solid #75a7b4;
  }

  .meta_tag_comment {
    padding: 3px;
    background: #75a7b4;
  }

  .post_image p {
    font-size: 10px;
    color: #fff;
    padding: 3px;
  }

  .post_image p a {
    color: #fff;
  }

  .post_image p a:hover {
    border-bottom: 1px dotted #fff;
  }

  .post_content {
    margin-top: 15px;
  }

  span.meta_info {
    padding: 5px;
    background: #75a7b4;
    color: #fff;
    font-size: 14px;
  }

  span.meta_info a {
    color: #fff;
  }

  .post_content p {
    margin: 15px 0 10px 0;
    font-size: 12px;
    line-height: 20px;
    padding-left: 241px;
  }

  span.more {
    position: relative;
    right: 293px;
    float: right;
    margin-bottom: 10px;
  }

  span.more a {
    font-size: 12px;
    color: #ca5235;
    font-weight: bold;
  }

  span.more a:hover {
    border-bottom: 1px dotted #ca5235;
  }

Passo 5 – Attivare Slider Tabs Effect

Per prima cosa scaricare il minified package del framework dalla pagina ufficiale per il download e also il package UI (selezionare UI Core, Tabs e Effects Core).

A questo punto si copiano i file nella cartella “js” e si attivano i pacchetti inserendo tra i tag <head> il codice riportato in basso.

<head>
  [...]
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	[...]
</head>

Ora non resta che attivare l’effetto tabs come mostrato. Si noti che il codice va inserito appena dopo il tag <body>.

	<script type="text/javascript">
	$(function() {
		$("#featured").tabs({ fx: { width: 'toggle', opacity: 'toggle' } }).tabs("rotate", 6000, true); });
	</script>

Per completare l’operazione bisogna aggiungere la riga di stile riportata in basso nel file css.

.ui-tabs-hide { display: none !important; }

Passo 6 – Right Container, la barra laterale

Per la sidebar si utilizza una sola immagine per il background dei titoli, si ricordi che la back-image generale è inclusa nel main container.

Di seguito è riportato il markup.

<div id="sidebar">
    <div class="side_cont">
    <h2>Sponsor</h2>
      <div class="adv">
	       <a href="#"><img src="images/pvmban125.jpg" alt="pvm" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/pvmban2504.jpg" alt="Advertisement" /></a>
	    </div>
    </div>

    <div class="side_cont adv">
    <h2>BlogRoll</h2>
    <ul>
      <li><a href="#">Sport Magazine - Resources for Sport Lovers</a></li>
      <li><a href="#">Football Mag - We Play Football</a></li>
      <li><a href="#">BuzzerBeater Magazine - Basket Fans</a></li>
      <li><a href="#">Premier Paper - Premier League News</a></li>
      <li><a href="#">European Sport - News from Europa</a></li>
      <li><a href="#">Focus on Carling</a></li>
      <li><a href="#">NBA News - Do you wanna play?</a></li>
      <li><a href="#">Road to South Africa 2010</a></li>
      <li><a href="#">Volley World League</a></li>
    </ul>
    </div>

    <div class="side_cont adv">
    <h2>Most Read Articles</h2>
    <ul>
      <li><a href="#">Nisi ut aliquid ex ea commodi consequatur?</a></li>
      <li><a href="#">Nam libero tempore, cum soluta nobis</a></li>
      <li><a href="#">At vero eos et accusamus et iusto odio</a></li>
      <li><a href="#">Nemo enim ipsam voluptatem quia voluptas</a></li>
    </ul>
    </div>
  </div>

In basso le relative proprietà css per le classi utilizzate.

#sidebar {
  float: left;
  width: 335px;
}

.side_cont {
  background: url("images/side_tit1.png") no-repeat top right;
  margin-bottom: 25px;
  padding-right: 35px;
  padding-left: 20px;
  width: 280px;
  font-size: 12px;
  line-height: 18px;
}

.side_cont h2 {
  font-size: 20px;
  color: #fff;
  padding-top: 3px;
  margin-bottom: 20px;
}

.adv {
  margin-top: 37px;
}

.adv img {
  margin: 0 10px 10px 0px;
  border: 1px solid #ccc;
}

.side_cont ul {
  margin-bottom: 15px;
}

.side_cont ul li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  display: block;
}

.side_cont ul li a {
  color: #333;
  padding: 10px 0;
}

.side_cont ul li a:hover {
  color: #ca5235;
}

.side_cont ul li:hover {
  background: #e1e1e1;
}

Passo 7 – Il Footer

Infine riportiamo la back-image usata per il footer, il markup e le relative regole css.

Il codice html.

<div id="footer">
<p>SPORT NEWS PVM MAGAZINE 2009 - Creative Common License. It's a free template for you!</p>
<p>It's a PV.M GARAGE PRODUCTION - <a href="http://validator.w3.org/check?uri=referer">valid (X)HTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">valid CSS</a>
</p>
</div>

Le regole per lo stile.

#footer {
  background: url("images/bck_foot.png") no-repeat top left;
  height: 113px;
  width: 1030px;
  margin: auto;
  padding-top: 48px;
}

#footer p {
  font-size: 12px;
  text-align: center;
  padding: 2px;
  color: #666;
}

#footer p a {
  border-bottom: 1px dotted #666;
  color: #666;
}

Stay tuned, il prossimo passo sarà il tema WordPress

Già, per concludere lo sviluppo il prossimo passo sarà quello di implementare un tema base per WordPress.
Presto un nuovo post con una panoramica sulle operazioni necessarie per finalizzare il lavoro. Quando tutto sarà pronto sarà rilasciata anche una versione free del WordPress SportNewsPvm Theme.