CRAFTING WORDPRESS TEMPLATES

OPERAZIONI PRELIMINARI
 OPERAZIONI PRELIMINARI

★Ultima versione di Wordpress installata (in locale o remoto).

★Grafica pronta (idealmente un file psd).

 OPERAZIONI PRELIMINARI

Impostare i Settings di Wordpress per preparare l'installazione al meglio:

★controllare titolo e sottotitolo del sito;

★impostare la data e il fuso orario giusti;

★impostare il tipo di homepage desiderata (ultimi post scritti o homepage statica);

★sistemare le impostazioni relative ai commenti;

★impostare le dimensioni di default delle immagini.

 OPERAZIONI PRELIMINARI

Sistemare la nuova installazione di Wordpress a livello dei contenuti:

★homepage (pagina statica);

★altre pagine e/o post;

★categorie e/o tag;

★eventuali plugin;

★eventuali widget.
 ARGOMENTI TRATTATI

★Usare tag condizionali per l'homepage e per le altre pagine.

★Impostare un template diverso per una pagina.

★Mostrare solo i post di una categoria in una pagina.

★Usare @font-face.

★Usare thumbnails per gli excerpts.

★Impostare una favicon.

★Implementare Javascript.

★Usare progressive enhancement.

 ARGOMENTI TRATTATI

@font-face

@font-face

tag condizionali excerpts

thumbnails
GRAFICA + PHOTOSHOP
LAYOUT
 LAYOUT

960.gs
 GRAFICA
COLOR PALETTE

Filters > Pixelate > Mosaic

 GRAFICA
FONT

Quicksand

Idolwild
medium
Helvetica Neue
italic regular
 GRAFICA
ELEMENTI RICORRENTI
GRAFICA
 PHOTOSHOP SLICING

Cosa si può ottenere con i CSS e cosa invece serve come immagine?
PREPARARE IL TEMA
 TEMI BLANK PER WP

http://wpcandy.com/made/the-wordpress-starter-theme-project

http://www.plaintxt.org/#sandbox

http://wp-themes.com/wp-framework/

http://themeshaper.com/demo/thematic/

http://starkerstheme.com/
PREPARARE E INSTALLARE IL TEMA

★Modificare il file style.css.

★Preparare uno screenshot (300x225px).

★Cambiare il nome della cartella del tema.

★Installare il tema.
ANATOMIA DI UN TEMA DI WP
ANATOMIA DI UN TEMA

header.php

index.php sidebar.php

footer.php
ANATOMIA DI UN TEMA

header.php

page.php
single.php
archive.php
category.php sidebar.php
tag.php
search.php
404.php

footer.php
ANATOMIA DI UN TEMA

functions.php agisce come un plugin e

permette di aggiungere funzionalità al tema
(e.g. post thumbnails)

loop.php è il “motore” di Wordpress

 ANATOMIA DI UN TEMA

<?php get_header(); ?>

<?php get_template_part( 'loop', 'index' ); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
 TEMPLATE TAGS

<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo
( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 TEMPLATE TAGS

<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo
( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

funzione
aperturadie Wordpress
chiusura
parametrodel tag php
opzionale
 TEMPLATE TAGS

Servono per eseguire determinate azioni oppure per visualizzare determinate informazioni.
Il comando php viene elaborato dal server che lo trasforma in html e genera le porzioni
dinamiche del sito.

<?php bloginfo( 'name' ); ?> = “Joe Cool’s Portfolio”

<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo
( 'name', 'display' ) ); ?>" rel="home"></a> = <a href="http://urldelmiosito"
title="Titolo del mio sito" rel="home"></a>
 TEMPLATE TAGS

Possono essere incluse in tag HTML...

<h1><?php bloginfo( 'name' ); ?></h1> = Joe Cool’s Portfolio

... e quindi anche modificate tramite CSS.

h1 { color: brown; font-style: italic;} = Joe Cool’s Portfolio

 TEMPLATE TAGS

http://codex.wordpress.org/Template_Tags
 LOOP

Il loop viene usato da Wordpress per mostrare i post all’interno della pagina.

Il numero, il tipo e le caratteristiche dei post possono essere modificati usando tag
particolari.

L’aspetto dei post può essere modificato usando HTML e CSS.

 LOOP
APERTURA

<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?>

Ci sono post? Se sì, utilizza un loop “while” PHP - ovvero, finché ci sono post da mostrare,
mostrali.
 LOOP
TITOLO, DATA ED AUTORE

<h2 id="post-<?php the_ID(); ?>">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link
to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author() ?></small>

<h2 id="post-3">
<a href="http://linkalmiopost" rel="bookmark"
title="Permanent Link to Titolo del mio post">
Titolo del mio post</a></h2>
<small>23 novembre 2010 by Nome dell’autore</
small>

Titolo del mio post

23 novembre 2010 by Nome dell’autore
 LOOP
POST

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<div class="entry">
<p>Bla bla bla bla prime righe del mio post.</p>
<a href="Link al post intero">Read the rest of
this entry»</a>
</div>

Titolo del mio post

23 novembre 2010 by Nome dell’autore

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula leo,
ullamcorper eget vehicula at, dictum a magna. Quisque sodales interdum urna
vel condimentum. Read the rest of this entry »
 LOOP
CHIUSURA

<?php endwhile; ?>

Questo chiude il loop. Tutto quello che vogliamo modificare nel loop, perciò, va inserito
sempre prima di questa riga di codice.
 LOOP
UN ESEMPIO

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php if ( in_category('3') ) { ?>

<div class="post-cat-three">
<?php } else { ?>
<div class="post">
<?php } ?>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?

>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<div class="entry">
<?php the_content(); ?>
</div>

<p class="postmetadata">Posted in <?php the_category(', '); ?></p>

</div>

<?php endwhile; else: ?>

<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

 TAG CONDIZIONALI

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php if ( in_category('3') ) { ?>

<div class="post-cat-three">
<?php } else { ?>
<div class="post">
<?php } ?>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?

>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<div class="entry">
<?php the_content(); ?>
</div>

<p class="postmetadata">Posted in <?php the_category(', '); ?></p>

</div>

<?php endwhile; else: ?>

<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

 TAG CONDIZIONALI

<?php if ( in_category('3') ) { ?>

<div class="post-cat-three">
<?php } else { ?>
<div class="post">
<?php } ?>

Le tag condizionali permettono di decidere cosa e come viene mostrato, a seconda delle
condizioni che si verificano.
 TAG CONDIZIONALI

<?php if ( in_category('3') ) { ?>

<div class="post-cat-three">
<?php } else { ?>
<div class="post">
<?php } ?>

Le tag condizionali permettono di decidere cosa e come viene mostrato, a seconda delle
condizioni che si verificano.

"Questa condizione è VERA o FALSA? SE è vera, ALLORA..., ALTRIMENTI...".

 TAG CONDIZIONALI

<?php if ( in_category('3') ) { ?>

<div class="post-cat-three">
<?php } else { ?>
<div class="post">
<?php } ?>

Le tag condizionali permettono di decidere cosa e come viene mostrato, a seconda delle
condizioni che si verificano.

"Questa condizione è VERA o FALSA? SE è vera, ALLORA..., ALTRIMENTI...".

 TAG CONDIZIONALI

Nel nostro caso, possiamo inserire un paragrafo di testo che compaia soltanto nella
homepage. Se impostato correttamente, il testo non comparirà nelle altre pagine.
 TAG CONDIZIONALI

http://codex.wordpress.org/Conditional_Tags
DALLA GRAFICA AL CODICE
 CONSIGLI UTILI

★Usare i commenti per le aperture e le chiusure dei div e delle template tag, per non
perdersi nel labirinto dei codice;

★Commentare, non cancellare;

★Tenere in ordine le cartelle.

 CODICE
LAYOUT

Layout a 16 colonne da 960.gs

960 è divisibile 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160,
192, 240, 320 and 480.
 CODICE
LAYOUT

Layout a 16 colonne da 960.gs

5 colonne 10 colonne
 GRAFICA
LAYOUT

http://960.gs/ http://www.spry-soft.com/grids/ CSS file

 CODICE
LAYOUT

5 colonne 10 colonne

.container_16 .grid_5 { width:280px;} .container_16 .grid_10 { width:580px;}

 CODICE
LAYOUT

Avremo bisogno del contenitore generale per tutto il contenuto...

.container_16 { width:960px; }

... e delle due porzioni principali, la sidebar a sinistra e il main content a destra:

.container_16 .grid_5 { width:280px;}

.container_16 .grid_8 { width:580px;}
 CODICE
LAYOUT

header

nav

footer
 CODICE
LAYOUT

A questo punto, occupiamoci degli ingombri verticali.

 CODICE
TIPOGRAFIA

1em = 16px = 100% (ad esempio: 2.5em = 40px)

Il nostro testo è più piccolo, perciò lo rimpiccioliamo con http://pxtoem.com/

100% = 16px 75% = 12px

 CODICE
TIPOGRAFIA

font: 75% "Helvetica Neue", Helvetica, Arial, sans-serif;

font stack

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
 CODICE
TIPOGRAFIA

Colori, pesi, grandezze.

 CODICE
BACKGROUND E MARGINI

Impostare tutti i background.

Caveat: non mostrate le mutande del vostro sito! Esempi 1, 2, 3 e 4.

Impostare margini e paddings.

 CODICE
NAVIGAZIONE

Anatomia della navigazione di Wordpress:

<?php wp_nav_menu($args); ?> 

<div class="menu">

<ul>
<li class="current_page_item"><a href="http://localhost:8888/
joecool/" title="Home">Home</a></li>
<li class="page_item page-item-9"><a href="http://localhost:8888/
joecool/?page_id=9" title="About">About</a></li>
<li class="page_item page-item-11"><a href="http://localhost:
8888/joecool/?page_id=11" title="Work">Work</a></li>
<li class="page_item page-item-7"><a href="http://localhost:8888/
joecool/?page_id=7" title="Contacts">Contacts</a></li>
</ul>

</div>
 CODICE
LOGO

Uso della tecnica @font-face.

Fontsquirrel Generator!

embedded open-type format

web open font format
Microsoft (1997)
formato XML richiesto dagli iOS file TrueType
(è il font compresso per il web)
per funzionare con IE
 CODICE
LOGO

@font-face {
 font-family: 'QuicksandBook';

 src: url('quicksand_book-webfont.eot');

 src: local('☺'), url('quicksand_book-webfont.woff') format('woff'), url('quicksand_book-

webfont.ttf') format('truetype'), url('quicksand_book-webfont.svg#webfontonEP62GB') format
('svg');

 font-weight: normal;

 font-style: normal;
}

Il testo è selezionabile e funziona anche con le immagini disattivate.

 CODICE
SIDEBAR

Le categorie vengono formattate così:

<ul>
 <li class="cat-item cat-item-7"><a href="http://localhost:8888/joecool/?cat=7" title="View all
posts filed under corporate">corporate</a>
</li>
 <li class="cat-item cat-item-4"><a href="http://localhost:8888/joecool/?cat=4" title="View all
posts filed under interaction">interaction</a>
</li>
 <li class="cat-item cat-item-3"><a href="http://localhost:8888/joecool/?cat=3" title="View all
posts filed under movie">movie</a>
</li>
 <li class="cat-item cat-item-5"><a href="http://localhost:8888/joecool/?cat=5" title="View all
posts filed under photography">photography</a>
</li>
 <li class="cat-item cat-item-6"><a href="http://localhost:8888/joecool/?cat=6" title="View all
posts filed under print">print</a>
</li>
 <li class="cat-item cat-item-1"><a href="http://localhost:8888/joecool/?cat=1" title="View all
posts filed under webdesign">webdesign</a>
</li>
</ul>
 CODICE
PAGE TEMPLATE

Il file php si formatta così:

<?php
/*
Template Name: Nome della pagina
*/
?>

Page > Edit > Page template

 QUERY POST

Serve per richiamare in una determinata pagina soltanto i post di un determinato tipo.

<?php
query_posts('cat=4');
?>

"Mostra tutti e solo i post che appartengono alla categoria "4" del mio sito.

http://codex.wordpress.org/Function_Reference/query_posts
 PROBLEMI

Può succedere che il codice del template presenti problemi di visualizzazione una volta che
gli è stato abbinato un foglio di stile.
 PROBLEMI

In questi casi può essere necessario utilizzare l'hardcoding (agire direttamente sulla
sorgente del codice).

Caveat: bisogna sapere dove mettere le mani! Questa è un'extrema ratio!

★CASO #1: gli ingombri delle categorie nella sidebar.

★CASO #2: la visualizzazione dei post in "Work".

 POST THUMBNAILS

È necessario che il tema preveda l'uso delle thumbnails. Questo si può controllare nel file
functions.php, cercando questa riga:

add_theme_support( 'post-thumbnails' );

Altrimenti, è possibile aggiungerla per attivare questa funzionalità.

 POST THUMBNAILS

http://codex.wordpress.org/Function_Reference/the_post_thumbnail
<?php the_post_thumbnail ('') ?>

1.Settare l'immagine nel post.

2.Inserire la chiamata nel file loop.php.

3.Modificare le caratteristiche della thumbnail nel CSS.

 UN POCO DI JAVASCRIPT

jQuery è un framework - un insieme di librerie - Javascript, che consente un apprendimento

semplificato del linguaggio di programmazione.

1.Scaricare jQuery dal sito e installarlo nel proprio.

2.Richiamare jQuery nell'head del nostro documento.

3.Inserire nell'head lo script che ci interessa.

4.Collegare l'evento ad un elemento nell'HTML.

 FAVICON

Le favicons:

★aiutano chi naviga a identificare le diverse pagine tra i vari tab aperti;

★aiutano ad identificare visualmente i segnalibri.

Bisogna cercare di usare immagini che siano ben distinguibili anche a piccolissime
dimensioni.
http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/all.png
 FAVICON

http://tools.dynamicdrive.com/favicon/

1.Scaricare la propria favicon e inserirla nel tema di Wordpress.

2.Inserire nella head del documento il codice per richiamare la favicon:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/

favicon.ico" />
 ... E POI?
PROGRESSIVE ENHANCEMENT

CSS3 gradients:

no CSS Opera Safari, Firefox, Chrome

 ... E POI?
MOBILE DEVICES
GRAZIE