Grazie a questo lavoro ho potuto imparare nuove e diverse cosette riguardo ai template per WordPress, piattaforma di bloggin su cui si basa appunto IF.

Per esempio per ora ti do la prima chicca e nei prossimi giorni ce ne saranno altre per poter ottimizzare e personalizzare i tuoi template per WordPress:

1. come inserire l’ avatar dell’ autore nel box informativo di ogni post;

Chiaramente tutto fatto senza l’ utilizzo di plugin esterni ma solo grazie al richiamo di funzioni php del core WordPress o create ad hoc ed inserite nel file function.php che sta all’ interno della directory del theme WordPress correntemente utilizzato.

Come inserire l’ avatar dell’ autore nel box informativo di ogni post.

Gravatar - WordPress

Hai presente che su molti commenti sparsi per i vari blog trovi il commento testuale ed a finco l’ avatar, l’ iconcina che identifica chi ha commentato? In molti casi viene sfruttato il servizio Gravatar ed è quello che ho utilizzato io per far comparire il mio avatar per esempio su questo post (lo puoi vedere in alto a destra della pagina subito sotto il titolo).

Gravatar è un servizio che ti permette una volta registratoti, di caricare una immagine che vuoi che ti identifichi in qualunque blog tu approderai per commentare: questo succederà chiaramente se il template utilizzato dal blog che commenterai supporta, ha implementato il codice adatto per interfacciarsi al servizio Gravatar naturalmente.

Dal sito del servizio si può leggere:

Cos’è un gravatar?

Un gravatar o globally recognized avatar, è semplicemente una immagine che ti segue di sito in sito ed appare accanto al tuo nome quando fai qualche operazione. Gli avatar ti aiutano ad identificare i tuoi commenti sui blog e sui forum web, quindi perchè non su ogni sito??

Io in definitiva ho utilizzato questo pezzo di codice proprio per inserire il Gravatar di ogni autore di IF nel box dei dettagli su ogni post:

<?php
echo get_avatar( get_the_author_id(), $size = ’45′, $default = ‘<path_to_url>’ );
?>

Il codice in questione non fa altro che:

get_avatar : è la funzione che ricerca e piglia in caso esista, l’ avatar in questione;

get_the_author_id() : è la funzione che preleva l’ ID dell’ utente/autore del mio blog;

$size : è la variabile che determina la grandezza in pixel dell’ avatar da visualizzare;

$default : è la variabile che determina dove reperire l’ immagine di default se non dovesse esistere il Gravatar dell’ autore;

Approfondimenti: Using Gravatar

Theme Name: Color Line
Theme URI: http://www.cms-italia.org/cms/templa…dpress-92.html
Description: Color Line is a clear template, 2-column Widget ready theme created for WordPress.
Version: 1.0
Author: Davide Tommasin
Author URI: http://www.tommasin.org
Tags: red, green, yellow, white, custom header, fixed width, two columns, widgets

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

EcoWP Template WordPress

Theme Name:  EcoWP
Theme URL: http://www.tommasin.org/template-wordpress/template_wordpress_ecowp-20090120.html
Description: EcoWP is a light, 2-column Widget-ready theme created for WordPress.
Author: Davide Tommasin
Author URI: http://www.tommasin.org
Version: 1.0
Tags: white, blue, green, brown, two-columns, fixed-width

The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

Download

Di solito utilizzo e navigo in questa tipologia di siti per trovare ispirazione per qualche sito che devo realizzare.

Come Robin Good utilizza il mantra per trovare le immagini adatte da inserire negli articoli che pubblica, lo stesso procedimento personalmente lo utilizzo per cercare nuovi layout adatti al sito che devo creare: cerco di tener sempre il focus sul tipo di sito che devo realizzare, cerco di immaginarmelo, lascio andare la mente e inizio a sfogliare le CSS Gallery dei vari siti e un buon 99% delle volte trovo ispirazione da qualche sito che trovo proprio su queste gallery.

Sia ben chiaro, non copio spudoratamente, ma mi serve principalmente per avere un’ idea, per avere una traccia di come poter posizionare i vari div e box in maniera originale e va a finire che prendo spunto non solo da un layout ma da diversi per poi fonderli insieme e farne il layout personalizzato e su misura per il sito che andrò a creare.

NOTA: ho cercato di inserire non le migliori, ma quelle che ho trovato e che seguo prevalentemente e cercando di inserire in lista quelle gallery che non abbiano (troppi) doppioni in fatto di layout: visto che le CSS Gallery online abbondano ce ne sono diverse che ripropongono spesso siti e template già segnalate su altre N CSS Gallery. Se vuoi seguire eventuali aggiornamenti delle CSS Gallery puoi utilizzare il link al relativo Feed RSS di ogni galleria per essere aggiornato attraverso il tuo feed reader.

1. Design Snips
2. CSS Artillery
3. CSS Drive
4. CSS Elite
5. CSS Creme
6. Design Shack
7. CSS Daddy
8. Inspiration King
9. W3C Sites
10. CSS Star
11. Web Design Gallery
12. CSS Heroes
13. CSS Gallery Web Design for Inspiration
14. Best CSS Gallery
15. CSS Based
16. Unmatched Style
17. Avenue CSS
18. CSS Tea
19. CSS 2.0
20. CSS Bunch

Quando è tempo di cambiare layout

Non è stato cambiato layout di IF solo per uno scopo prettamente vanitoso, ma l’ obiettivo principale è stato quello di migliorarne l’ accessibilità, è stato ottimizzato rispetto all’ impaginazione precedente per dare all’ utente la possibilità con un colpo d’ occhio di riconoscere le varie aree, i box e le relative categorie di contenuti che accolgono.

Descrizione del layout

Il nuovo template di IF РInformatica Friuli ̬ diventato a 3 colonne.

1. la prima a sinistra raggruppa le news, i post editoriali, quelli scritti dal pugno del team di editori di IF e dai suoi ospiti;
2. la colonna sulla destra, la sidebar raccoglie i vari link ai servizi offerti da IF (la newsletter di IF, il servizio di comunicati stampa di IF) e dai suoi partner (l’ Hosting SEO di Sito Nerd – ne arriveranno altri di servizi per il web)
3. la colonna centrale raggruppa 3 blocchi principali dedicati ai seguenti argomenti (post e contenuti aggregati con un sistema di news-mastering):

• video sul marketing, viral video, video tutorial…;
• notizie sul mondo del design, della creatività e del web deign in generale;
• news del modno del marketing e della comunicazione;

Analisi del layout

Alla colonna centrale dedicata alle breaking news è stato volutamente dato un colore di sfondo diverso e più scuro rispetto alle colonne laterali per dare maniera agli occhi del lettore di capire in maniera veloce e non troppo invasiva, la suddivisione dei tre macro blocchi del layout di IF.

I 3 box delle notizie della colonna centrale a loro volta sono stati bordati da un colore diverso per dare maniera di suddividere in maniera semplice la colonna centrale e dar modo all ‘intuito del lettore di IF che sta leggendo news suddivise per N argomenti.

Il colore dei titoli delle 3 colonne, delle tre macro sezioni è stato standardizzato in un colore dedicato ad area di competenza cercando di mantenere una palette di tonalità consona rispetto al logo, alla scritta nell’ header.

L’ icona del Feed RSS di IF che si trova in alto a destra e nel menu orizzontale a fondo pagina, non è la classica iconcina standard dei feed come la conosciamo ma si è voluto dare un tocco sottile di originalità facendone un semplice link testuale con sfondo arancio aggiungendoci un’ immagine (le 3 ondine bianche ) via CSS.

Nuovo layout per blog

Tirando le somme, la voglia di cambiare veste grafica ad IF – Informatica Friuli, non è stato solo un semplice motivo di rinnovamento a livello visuale ma è stato ponderato per migliorare l’ impatto visivo e l’ accessibilità per i lettori stessi di IF, per non appesantirne la lettura e far in modo che i contenuti stessi siano maggiormente fruibili da tutti.

Conclusioni e consiglio

Nel precedente paragrafo è stata data esplicita spiegazione del perchè del nuovo template, ma questo articolo vuol essere spunto per tutti i blogger che lo fanno per passione o per lavoro, che non sanno decidersi se sia un bene o meno il cambiar template.

Suggerisco che è un bene nel momento in cui abbiamo nuove esigenze o ancor meglio, i nostri contenuti ce lo chiedano.

Per approfondire l’ argomento su come migliorare il template del nostro blog, trovare fonte d’ ispirazione per ottimizzare il layout dello stesso, consiglio la lettura dei seguenti post:

• Come cambia la grafica di un blog – TagliaBlog
• Information Design: Che Differenza C’è Tra Il Post Di Un Blog E Un Articolo Preparato In Maniera Professionale? – Robin Good – Master New Media Italia
• Pubblicare News Online: Newsmastering E Newsradar – Cosa Sono E Come Usarli – Robing Good – Master New Media Italia

Avevo espresso questo mio enigma anche sul Forum per Webmaster TPU – Tutti Per Uno

PREMESSA – IL PROBLEMA:

Ho avuto la necessità di trovare la soluzione ad un problema che mi assillava da tempo ovvero poter inserire nello stesso post di un sito basato su WordPress, un oggetto quale per esempio un’ immagine o un video YouTube e variarne le dimensioni a seconda che l’ articolo si trovi in homepage (nel qual caso volevo una thumbnail o il video di dimensioni ridotte in altezza e larghezza) o nella pagina dell’ articolo singolo (nel quel caso volevo mostrare l’ oggetto in questione con le dimensioni originali o comunque ingrandito rispetto alla visualuizzazione in homepage).

ANALISI DEL PROBLEMA:

Approfondendo sono venuto alla conclusione che mi serviva del codice php per poter estrapolare e passare le dimensioni all’ oggetto in questione, a seconda che mi trovassi in home o nella pagina dell’ articolo singolo.

L’ idea di base era che nei 2 blocchi di codice php i tag html per inserire le immagini o i tag per inserire contenuto flash in una pagina web sarebbero stati uguali per tutte le pagine, quindi la variabile sostanziale che avrei dovuto preoccuparmi sarebbe stato solamente il link da dove attingere il contenuto (src per il tag img per le immagini e value ed src per i tag per il video in flash di YouTube).

Per le dimensioni sarebbero state fissate già preventivamente nei due blocchi di codice php inseriti nella home e nella pagina dell’ articolo singolo facilitato dal fatto che nel mio template, come nel 90% dei templates WordPress, esiste il file index.php per la homepage del blog e single.php dove si trova il codice per estrapolare il contenuto del post singolo.

LA SOLUZIONE:

Quindi detto questo, mi serviva solo capire come poter inserire agevolmente il link all’ immagine o al video senza per forza dover a che fare con codice html e php.

WordPress mette a disposizione di default sotto il form, la textarea, in cui scrivere il post, una sezione dedicata ai campi personalizzati, che fino ad oggi non mi ero mai sognato di utilizzare, ma cercando soluzioone al mio problema su Google, quando mi son ricordato “campi personalizzati” mi è scattata la molla rileggendo “personalizzati”… questo significa che se posso inserire etichetta/nome del campo e contenuto dello stesso, si sarebbe registrato nel database ergo avrei potuto estrapolare a mio piacimento e quando avrei avuto la necessità tale contenuto nel template come e dove mi sarebbe piaciuto.

Capito il problema, analizzato… la soluzione si trovava sotto i miei occhi da sempre.

LA PRATICA:

IL CODICE:

Ho aperto con un editor testuale (io utilizzo joe da shell sulla mia postazione Ubuntu ) index.php del template WordPress che stavo utilizzando;

Subito prima di questo codice che fa comparire il riassunto nella homepage:

<?php the_excerpt() ; ?>

..ho inserito tale codice (primo stralcio per inserire le miniature delle immagini Рed il secondo ̬ per i video YouTube):

<?php // pubblica la immagine se il campo personalizzato ‘immagine’ esiste
$values = get_post_custom_values(“videoyt”);
if ( is_array($values) ) { ?>
<div id=”imgCSS”>
<img src=”<?php $key=”immagine”; echo get_post_meta($post->ID, $key, true); ?>” alt=”<?php the_title(); ?>” width=”150″ height=”100″ />
</div>
<?php } ?>

<?php // pubblica la immagine se il campo personalizzato ‘videoyt’ esiste
$values = get_post_custom_values(“videoyt”);
if ( is_array($values) ) { ?>
<div id=”introVIDEO”>
<object width=”150″ height=”100″>
<param name=”movie” value=”<?php $key=”videoyt”; echo get_post_meta($post->ID, $key, true); ?>”></param>
<param name=”allowFullScreen” value=”true”></param>
<embed src=”<?php $key=”videoyt”; echo get_post_meta($post->ID, $key, true); ?>” type=”application/x-shockwave-flash” allowfullscreen=”true” width=”150″ height=”100″>
</embed>
</object>
</div>
<?php } ?>

Ho aperto il file single.php (il file come detto precedentemente, per estrapolare il contenuto di un post singolo):

<?php the_content(); ?>

Subito dopo questo codice che fa visualizzare tutto il contenuto del post:

…ho inserito il secondo blocco di codice php:

potete copiare il codice inserito nel index.php e variarne i paramentri width e height

Fatte queste modifiche il sistema è funzionante.

Nel momento in cui andrò a scrivere il mio post ed utilizzerò i campi personalizzati accoppiando l’ etichetta immagine + link di dove si trova l’ immagine o videoyt col link di dove si trova il video YouTube che voglio inserire, il codice php inserito nei due file sopra citati, si preoccuperà di estrapolare e far visualizzare le immagini e i video con le dimensioni adattate alla pagina in cui verranno pubblicati.

Un esempio lo potete vedere sul sito del CKF – Canoa Kayak Friuli nel blocco MOVIE a fondo pagina dell’ homepage e cliccando per esempio sul titolo in rosso scuro di tale video, come compare lo stesso video sull’ articolo singolo di tale news.

Essi infatti dispongono di molti template gratuiti ed open source, riutilizzabili nei vostri siti web, a patto che venga lasciato il link al sito dell’autore del template.

•  http://www.opensourcetemplates.org/ dispone di 7 template, dalla grafica semplice e web 2.0
• http://www.oswd.org/ oltre 2000 template liberamente scaricabili
• http://www.openwebdesign.org/ anche questo sito con oltre 2500 template scaricabili
• http://www.opendesigns.org/ devo ammettere, questo è il mio preferito, dispone di 910 template validati xhtml anchessi liberamente scaricabili.

Non vi resta che farvi un giretto su questi siti e scaricare quello che vi piace di più

Ogni utente ora ha la facolta di scegliere fra tot temi messi a disposizione… ed ora la home personale cambia pure nome ovvero iGoogle.

La mia ora la vedo così

Un  tema senza troppe pretese, pulito e semplice ma non troppo essenziale, basato su tre colonne e larghezza fissa.

Qui un’ anteprima:

Per maggiori dettagli, demo e link per il download visitare questa pagina:

Ying Yang 1.0