Per fortuna da qualche settimana c’è una risorsa in più, chiara, aggiornata, ben fatta.

Si tratta del libro (disponibile in versione ebook o in versione stampata) Consigli di webdesign di base, di Laura Gargiulo, che molti di voi conosceranno come Lauryn, di ItalianWebDesign.

Ho acquistato il libro qualche giorno fa (è in promozione fino al 31 maggio 2011, come spiegato in questo articolo) e, pur conoscendo la professionalità di Laura, sono stato colpito dall’alta qualità dei contenuti e dal modo estremamente chiaro di esporli.

Personalmente la parte che ho gradito di più è quella relativa al passaggio dal progetto grafico in Photoshop (o altro programma di grafica) al template in HTML e CSS, perchè è quella che conosco meno, ma tutti gli altri capitoli non sono da meno!

Ora so quale risorsa consigliare a chi mi chiede dritte in merito! Grazie Laura!

P.S.

No, non ci sono legami di affiliazione, sponsor, nulla. Si tratta semplicemente di un’ottima (ed economica) risorsa!

P.P.S

Ora bisognerebbe fare “la seconda parte”: dall’HTML al tema WordPress… che dite, mi ci metto? facciamo un corso Temi WordPress da Zero ? da affiancare a WordPress da Zero?

Si tratta di Professional Blogger, un tema che ho disegnato e realizzato pezzo per pezzo pensando ai Blogger professionali, quelli che mettono al centro il contenuto, e che necessitano di una grafica curata ma semplice, di spazi per l’advertising e l’affiliate marketing efficaci e ordinati, di aree di contenuto personalizzabili.
Ma soprattutto di LEGGIBILITA’

Professional Blogger è basato sul framework Genesis ed è in vendita 5 diverse combinazioni colori sul UsefulThemes, un sito che spero presto vedrà in vendita altre mie produzioni.

Professional Blogger? e perchè?

Nel disegnare Professional Blogger mi sono ispirato ai recenti restyling del blog di Chris Brogan, di CopyBlogger di Brian Clark, ProBlogger di Darren Rowse e così via: piacevoli, semplici, lineari.
In due parole: EFFICACI e LEGGIBILI.

Troppo spesso infatti ci si trova davanti a siti dove il contenuto (articoli, foto, ecc) è letteralmente oscurato da una grafica eccessiva, pesante, fatta più per “colpire” che per essere al servizio del messaggio del blog.

Ho deciso che si poteva “fare qualcosa” per rimediare ed è nato così Professional Blogger: una grafica semplice e lineare, facilmente personalizzabile, sopra a un pannello di controllo ricco di funzioni avanzate e con un codice HTML ben oliato per farsi capire bene dai motori di ricerca (quelli che sparano i paroloni direbbero ottimizzato per i motori di ricerca, SEO, e così via..)

Caratteristiche del tema:

• 5 combinazioni di colori, selezionabili da pannello di controllo (più colore di sfondo selezionabile a piacere)
• Home page personalizzabile da pannello: puoi decidere quanti articoli visualizzare a testo pieno e quanti poi su due colonne in modalità riassunto (vedi l’home page di WordPressMania).
• Pieno supporto alle “immagini in evidenza” in home, negli archivi, ecc
• 2 aree menu customizzabili a piacere con supporto per menu a cascata e a più livelli.
• Sfondo del blog personalizzabile
• Footer con 3 aree widget totalmente configurabili
• una o due sidebar, 6 layout disponibili per ogni pagina
• Sidebar ottimizzata per ospitare 2 banner 125×125 per riga
• Box autore facoltativo per ogni post
• Commenti nidificati e supporto Gravatar
• Sticky post in homepage evidenziato
• HTML ottimizzato per i motori di ricerca
• Configurazione SEO da pannello di controllo a livello di sito, di singolo archivio o categoria, di articolo e pagina
• Licenza GPL che vi permette di utilizzarlo quando, come e dove volete (e modificarlo a vostro piacimento). Da ogni punto di vista Professional Blogger ha lo stesso modello di licenza del suo “papà” Genesis
• Supporto alla configurazione.

Demo di Professional Blogger

Credo che non ci sia miglior demo di un sito reale che usa Professional Blogger: WordPressMania.

Come vi scrivevo in apertura, sto usando il mio nuovo tema su questo sito già da alcune settimane, questo mi ha permesso di identificare e risolvere gli inevitabili bug di sicurezza e di darvi la possiblità di vedere il tema in azione in un contesto reale.

In ogni caso è online anche una installazione demo del tema, con la possibilità di vedere tutti i layout disponibili, i 5 colori ecc.
Vai alla demo di Professional Blogger Theme

Requisiti di Professional Blogger

Professional Blogger è un tema child di Genesis, quindi per poter essere attivato dovrete prima aver installato Genesis, che va acquistato a parte dal sito di StudioPress.

Acquista Professional Blogger

Se il tema fa al caso tuo puoi acquistarlo con PayPal direttamente da qui:

Oppure puoi approfondire tutti i dettagli su UsefulThemes

Tenete conto che un tipo di post personalizzato come questo può essere trattato come qualsiasi altro post di WordPress. In particolare potrete usare un file all’interno del tema con lo stesso funzionamento di single.php, ma che avrà come nome single-type.php dove type è il nome del vostro custom post type (per il nostro esempio avremo quindi single-news.php).

L’uso più comune che farete dei custom post type è però attraverso query personalizzate all’interno dei vari files contenuti nei temi (ad esempio sidebar.php o footer.php).

Per continuare il nostro esempio apriamo index.php del vostro tema ed andiamo inserire in homepage la lista delle ultime 4 news all’interno di un box.

<div>
<h4>News</h4>
<?php
$my_query = new WP_Query(array('post_type'=>'news','showposts'=>4));
?>

<ul>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<span class="date"><?php the_time('j F Y') ?></span>
<?php the_content(); ?>
</li>
<?php endwhile; ?>
</ul>
</div>

Grazie al codice visto e con gli opportuni stili Css e un po’ di Javascript potrete raggiungere un risultato simile a quello che vedete nella homepage di Alt Design Web Agency.

Conclusioni

Grazie a questo breve tutorial sarete in grado di realizzare con facilità i vostri Custom Post Type e un visualizzatore di brevi news per la vostra homepage.

L’uso dei custom fields all’interno di questi nuovi tipi di post vi permetterà di modellare qualsiasi tipo informazione che vorrete visualizzare nei vostri siti web realizzati con WordPress e sarà oggetto di un prossimo tutorial.

L’esempio classico è quello della collezione di CD, in cui create un nuovo post type “cd” e vi inserite, oltre al titolo e alla descrizione (editor TinyMce) come visto nel tutorial, anche: prezzo, casa discografica, tipo di musica e nome dell’artista/i.

Per chi non fosse familiare con la programmazione php, e in generale per WordPress, segnalo (non l’abbiamo provato) il plugin Custom Post UI che permette di creare nuovi custom post type in maniera del tutto visuale.

Questo Guest Post è stato scritto da Alt Design, una web agency specializzata nella realizzazione di siti web basati su WordPress. Potete seguirli nel loro blog dove discutono di Internet Marketing.

Oltre al nuovo tema “Twenty Ten”, l’altra piccola rivoluzione di WordPress 3.0 sono i Menu Personalizzabili.

Finalmente possiamo decidere le “voci” da inserire nella barra di navigazione del nostro tema WordPress, utilizzando una comoda interfaccia simile a quella dei Widget.

Il nostro tema però deve essere predisposto per l’uso dei nuovi menu: nella maggior parte dei casi si tratta di incollare un po’ di codice php, un compito abbastanza semplice, non c’è bisogno di essere esperti…

Di seguito vedremo i passi necessari per sostituire con un nuovo Menu Personalizzato, la classica lista di pagine generata col comando wp_list_pages() che molti temi (recenti) utilizzano.

Nel caso il vostro tema usasse una modalità differente (ormai lo sappiamo che ogni tema “fa storia a sè”) il procedimento sarà comunque simile.

Ma vediamo come procedere.

Il mio tema non supporta i nuovi menu?

Innanzitutto dovete verificare se il tema ha già il supporto per i menu. Per fare questo andate nel pannello di controllo di WordPress (ovviamente va aggiornato alla versione 3.0). Selezionate “Aspetto” (Appearance) e poi “Menu” per aprire la nuova pagina di gestione.

Se il tema in uso non è ancora abilitato per i nuovi menu apparirà l’avvertimento seguente:

clicca la miniatura per vedere l'immagine completa

In questo caso avete 3 possibilità:

1. verificate sul sito del tema se ne esiste una versione aggiornata che supporta i menu. Eventualmente mandate un’email all’autore del tema allegando i link di approfondimento che trovate in fondo a questo post: lui saprà cosa fare.
2. Usate semplicemente il nuovo Widget chiamato “Menu personalizzato” per inserire i menu nella barra laterale.
3. Continuate a leggere questo post e abilitate una volta per tutte il tema.

Come attivare i menu personalizzati

L’attivazione è abbastanza semplice e, come vi dicevo, per la maggior parte dei casi richiede semplicemente il copia-incolla di qualche riga di php.

Passo1: aprite il file function.php che si trova nella cartella del vostro tema, incollatevi le seguenti righe, subito prima del tag di chiusura del php "?>": poi salvate e chiudete.


register_nav_menus(array('primary'=>__('Primary Menu'),));

Con questa riga abbiamo attivato un nuovo menu e registrato la locazione dove apparirà col nome  di “primary”.

Passo2: ora torniamo nel pannello di gestione dei menu, creiamone uno nuovo, aggiungiamo qualche pagina. Poi salviamo. In questo modo quando imposteremo il menu nel tema potremo “vedere” la differenza…

Passo3: individuate il file dove compare la barra di navigazione che volete sostituire, normalmente per la barra di navigazione orizzontale il file è header.php, ovviamente sempre nella cartella del vostro tema.

Fatene una copia di sicurezza e mettetela al sicuro.

Attenzione: le copie di sicurezza non le fa mai nessuno, ma in questo caso il backup è fondamentale: c’è una certa probabilità che alla fine del processo di conversione ai nuovi menu ti ritrovi con un menu almeno graficamente “scompaginato”: senza copia di sicurezza non avrai modo per tornare indietro!!!

Passo4: Ora, nel file originale (la copia di sicurezza l’hai messa al sicuro, vero?) cercate la riga con il comando che inizia con wp_list_pages (è il comando di WordPress che elenca nel menu le pagine) e sostituite l’intero comando con:

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

Ora salvate… ed ecco sostituita la lista delle pagine con il vostro nuovo menu. Ora potete tornare nella pagina di gestione dei menu e aggiungere / sostituire tutte le voci che vi servono.

Attenzione: Se il vostro tema non usa il comando wp_list_pages per creare il menu di navigazione, o se usa parametri particolari per modificarne l’aspetto, è probabile che il nuovo menu appaia piuttosto “scompaginato“.

In questo caso è indispensabile approfondire la struttura del proprio tema e i parametri che si possono “passare” alla funzione wp_nav_menu, in modo da personalizzarne l’output secondo le nostre esigenze. Di seguito trovate link a risorse molto utili per fare questo.

Se la cosa dovesse richiedervi parecchio tempo ripristinate temporaneamente la copia di sicurezza del file che avete realizzato in precedenza…

• Il blog di web2feel che illustra, anche con screencast la procedura che vi ho appena descritto
• Il sempre ottimo Justin Tadlock che vi dà una panoramica completa sui Menu e sulle possibilità di personalizzare l’output della funzione in modo da adeguarne la grafica alle nostre esigenze.
• Il riferimento ufficiale è come sempre il Codex di WordPress

P.S. Qui su WordPressMania sto usando i nuovi menu in 3 punti diversi: in alto a destra (sezione chi siamo/iscriviti/contattaci), nella barra di navigazione principale e, in un widget, per elencare i plugin che ho sviluppato io (barra laterale sinistra, box “I miei plugin”). Come vedete sono molto flessibili.

• Quanto impieghi per sviluppare un nuovo tema per WordPress?
• Quanto vale il tuo tempo?
• Quante volte hai rifatto la stessa personalizzazione per l’ennesimo cliente?
• e soprattutto: il prodotto finale è stato migliore? il cliente maggiormente soddisfatto?

Io me lo sono chiesto spesso ultimamente.

Per noi freelance il tempo è l’unica risorsa veramente finita e il cui valore è inestimabile.
Per guadagnare di più dobbiamo guadagnare tempo.
Guadagnarlo per re-investirlo.
Questa è la verità.

E’ evidente: mentre sviluppo un tema non posso modificare un plugin nè posso incontrare il cliente per formarlo su qualche rudimento di comunicazione web, nè tenere i contatti con nuovi potenziali clienti, nè… (non continuo: ognuno di voi potrebbe completare questa lista anche meglio di me)…

Ma come risparmiare tempo nello sviluppo con WordPress?

Poichè parte della mia attività professionale consiste nel realizzare siti web, in particolare con WordPress, in questi mesi ho svolto un “test” per capire come usare il tempo di sviluppo in modo più efficiente.
Per ciascuno la soluzione “vincente” è ovviamente diversa, ma deve essere necessariamente quella dove il risparmio di tempo coincide con una soddisfazione uguale o superiore da parte del cliente.

Per rendere più efficiente il mio lavoro con WordPress ho scelto la strada dei Temi Premium.
Propongo ai miei clienti layout grafici sviluppati professionalmente dai migliori designer a livello internazionale, i cosiddetti temi premium.

Cosa c’è che non va nei temi gratuiti?
Nulla, ci sono ottimi temi gratuiti per WordPress, ma quelli veramente validi sono pochi. E il tempo che si perde a trovarli, nel mare delle porcherie che si trovano in giro, è davvero troppo

Purtroppo negli ultimi anni, la distribuzione di temi gratuiti per WordPress è stata usata come modo per ottenere link ai propri siti, e questo ha portato a una invasione di temi spesso inutili, tutti simili tra loro, a volte realizzati male, magari con la sola differenza dell’immagine della testata

Come mi sono organizzato
Per migliorare il servizio verso i miei clienti mantenendo i costi contenuti ho stretto partnership o acquistato abbonamenti con i più accreditati di loro e ora i miei clienti possono scegliere liberamente tra i migliori temi realizzati da StudioPress (il loro AgentPress, tema WordPress per agenti e agenzie immobiliari è qualcosa di spettacolare), wooThemes, WPRemix, UniqueBlogDesign e altri…

A mio parere i vantaggi nell’usare temi premium sono a grandi linee i seguenti:

• propongo al cliente solo design di qualità, realizzati dai più accreditati designer a livello internazionale : io risparmio tempo nella ricerca di layout e il cliente risparmia tempo nella scelta
• Una volta scelto, il tema è pronto all’uso.
• il codice e la struttura del tema sono mediamente scritti meglio di quelli free: io risparmio tempo nello sviluppo e il cliente –anche se spesso non se ne accorge- ottiene un prodotto più valido nel tempo
• Ho un supporto costante da parte degli autori del tema risparmiando anche in questo caso tempo prezioso nello sviluppo di personalizzazioni
• Il tema viene tenuto aggiornato alle nuove versioni di WordPress (questo non è sempre vero per tutti i temi, ma nella mia esperienza gli autori a cui mi sono rivolto per demandare a loro un adeguamento lo hanno sempre fatto di buon grado, in fondo io sono un loro cliente)
• Molti di questi sono realizzati e pensati per essere modificati e personalizzati facilmente.
• In alcuni casi mi è capitato addirittura che, una volta acquistato il tema prescelto, il cliente fosse in grado di procedere da solo. No, non è un cliente perso: è un cliente soddisfatto che spero riponga fiducia in me anche in futuro.

Voi quali strategie avete scelto per lavorare in modo più efficiente?

(Aggiornamento: sempre sullo stesso argomento vi segnalo un articolo interessante su Italian Web Designer: Anche un cliente low budget può avere il suo sito?)

Fino ad ora tutto passava attraverso lui (leggi: attraverso la sua segretaria) o, peggio, per l’email: documenti, opinioni, ma anche battute, scambi di punti di vista… un modo assolutamente inefficiente di lavorare. “D’altra parte – mi dice – non voglio perdere l’informalità di questo modo di lavorare…“.

Dopo due giorni ero di nuovo da lui con una proposta che -a distanza di qualche settimana- sembre funzionare, ovviamente il tutto è basato su WordPress e ha comportanto (almeno inizialmente) la semplice installazione di un Tema e di un Plugin.

Il risultato? Una specie di “Twitter privato” che permette a ogni componente del team di inviare brevi messaggi, allegare immagini, slides e altri documenti, mantenendo le informazioni ordinate e disponibili nel tempo.

Si tratta davvero di una implementazione semplicissima, vediamo come procedere…

Il tema gratuito

Innanzitutto installate il tema P2, un template gratuito che ricorda Twitter, con caratteristiche molto interessanti:

• Ogni iscritto al blog può scrivere direttamente da un box presente in home page
• Il box prevede la possibilità di caricare immagini, video  ecc..
• Questi post, simili nell’apparenza a brevi messaggi, compaiono in ordine cronologico nella home
• Ovviamente ogni iscritto può commentare, con la stessa semplicità

Una volta installato il tema avrete una nuova voce nel menu “Aspetto” che vi permette di personalizzarne aspetto grafico e funzionamento.

Il grosso del lavoro è fatto: mantenendo l’informalità dello scambio di opinioni e l’assoluta facilità d’uso abbiamo una piattaforma di condivisione a tutti gli effetti.

Il plugin

Piccolo problema: poichè questo blog si trova su un server pubblico… beh i messaggi sono visibili a tutti quelli che… “passano”…

Installiamo quindi il plugin Private WP e attiviamolo.

Private WP fa sì che i visitatori vengano reindirizzati alla pagina di login in modo che solo gli utenti registrati possano vedere il blog.

Ho quindi creato un utente per ogni consulente, fornito loro username e password e realizzato un video di 5 minuti che mostra come usare il sistema, video che ho pubblicato su una pagina intitolata con grande fantasia “Guida all’uso“…

In realtà…

In realtà avevo pensato di utilizzare anche due plugin tipo Notify Blog Authors e Comments Notifier per inviare email a tutti i collaboratori ogni volta che qualcuno pubblica un nuovo commento/articolo. Ma dopo aver fatto un rapido sondaggio direttamente con loro abbiamo deciso di aspettare per vedere se è davvero indispensabile…

Che ne dite?