CRAFTING WORDPRESS TEMPLATES

OPERAZIONI PRELIMINARI

OPERAZIONI PRELIMINARI

★Ultima

versione di Wordpress installata (in locale o remoto). pronta (idealmente un file psd).

★Grafica

OPERAZIONI PRELIMINARI

Impostare i Settings di Wordpress per preparare l'installazione al meglio:
★controllare ★impostare ★impostare ★sistemare ★impostare

titolo e sottotitolo del sito;

la data e il fuso orario giusti; il tipo di homepage desiderata (ultimi post scritti o homepage statica); le impostazioni relative ai commenti; le dimensioni di default delle immagini.

OPERAZIONI PRELIMINARI

Sistemare la nuova installazione di Wordpress a livello dei contenuti:
★homepage ★altre

(pagina statica);

pagine e/o post; e/o tag; plugin; widget.

★categorie ★eventuali ★eventuali

ARGOMENTI TRATTATI

★Usare

tag condizionali per l'homepage e per le altre pagine. un template diverso per una pagina.

★Impostare ★Mostrare ★Usare ★Usare

solo i post di una categoria in una pagina.

@font-face.

thumbnails per gli excerpts. una favicon. Javascript.

★Impostare

★Implementare ★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 Helvetica Neue
italic regular medium

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 ★Preparare ★Cambiare ★Installare

il file style.css.

uno screenshot (300x225px). il nome della cartella del tema.

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 tag.php search.php 404.php

sidebar.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 <?php <?php <?php

get_header(); ?> get_template_part( 'loop', 'index' ); ?> get_sidebar(); ?> 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 di Wordpress opzionale apertura e chiusura del tag php parametro

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, ★Tenere

non cancellare;

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

title="View all

title="View all

title="View all

title="View all

title="View all

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 ★CASO

#1: gli ingombri delle categorie nella sidebar. #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 ★aiutano

chi naviga a identificare le diverse pagine tra i vari tab aperti; 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

Sign up to vote on this title
UsefulNot useful