E questo framework lo fa. Ovviamente dovete smanettarci per adattarlo alle vostre esigenze ma è una buona base da cui partire, e i temi base sono diversi.

Che dire se non provare la demo per rendersene conto?

Grazie a SuperThemes!

Cosa vogliamo realizzare

Nel layout originale di Twenty Eleven (TE nel seguito) la data di pubblicazione di un post nella front page (quando impostata per visualizzare gli ultimi posts pubblicati) è collocata sotto il relativo titolo. Invece il design desiderato prevede un elemento grafico, tipo clip, allineato alla sinistra del titolo e a bordo pagina. Alcuni riferimenti su questo tipo di designs sono:

• Qualche dettaglio grafico per la mia data su wp
• 28 Stylish Article Headings, Date & Meta Data Designs

Come detto nell’introduzione, questa modifica deve essere compatibile con il carattere “responsive” del tema. Questo significa che la clip della data deve sempre rimanere ancorata alla sua posizione a prescindere dalla larghezza della finestra che visualizza la pagina.

Inoltre, come ulteriori requisiti, vogliamo generare un markup che utilizzi il tag HTML5 <time> (usato nel markup originale di TE) e visualizzare un tooltip con la data completa (quindi anche con l’ora) quando l’utente passa sopra la data con il mouse.

Implementazione

Svilupperemo un child theme di TE con quattro files:

• functions.php
• style.css
• js/post-date.js
• img/post-date-clip.png

Esaminiamoli uno alla volta.

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

add_action('template_redirect', 'on_template_redirect');
 
function on_template_redirect() {
	if (!is_home()) 
		return;
 
	wp_enqueue_script(
		'post-date', 
		'/wp-content/themes/twentyeleven-child/js/post-date.js', 
		array('jquery'), 
		'', 
		true);
}
 
function twentyeleven_posted_on() {
	if (is_home()) 
		printf(__(
			'<time datetime="%1$s" pubdate title="%2$s">' . 
				'<span class="month">%3$s</span>' . 
				'<span class="day">%4$s</span>' . 
			'</time>', 'twentyeleven'),
			esc_attr(get_the_date('c')),
			esc_attr(get_the_date('r')),
			esc_html(strtolower(get_the_date('M'))),
			esc_html(get_the_date('d'))
		);
	else {
		printf(__(
			'<span class="sep">Posted on </span>' . 
			'<a href="%1$s" title="%2$s" rel="bookmark">' . 
				'<time class="entry-date" datetime="%3$s" pubdate>%4$s</time>' . 
			'</a>' . 
			'<span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'twentyeleven' ),
			esc_url( get_permalink() ),
			esc_attr( get_the_time() ),
			esc_attr( get_the_date( 'c' ) ),
			esc_html( get_the_date() ),
			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
			esc_attr( sprintf( __( 'View all posts by %s', 'twentyeleven' ), get_the_author() ) ),
			get_the_author()
		);
	}
}

Il primo passo è l’inclusione dello script JavaScript, il cui scopo verrà esaminato dopo. A tal fine invochiamo la funzione wp_enqueue_script() con dei parametri che, oltre a fornire la locazione dello script, specificano la sua dipendenza da jQuery (anche se probabilmente la libreria dovrebbe essere già caricata nella pagina) e la sua posizione all’interno del documento con il parametro finale true, per ‘iniettare’ lo script a fine pagina, prima della chiusura del tag body.

Includiamo questo script solo quando serve, e cioè solo quando viene servita la home page. Per fare ciò usiamo l’hook ‘template-redirect’ e un conditional tag.

Poi abbiamo l’overriding della funzione twentyeleven_posted_on() che TE utilizza per l’output del markup per la data di pubblicazione. Override che anche in questo caso deve avvenire solo nella home, ancora una volta usando un conditional tag. Il markup che viene generato è un elemento <time> a cui viene applicato il tooltip con la full date e al cui interno annidiamo i tags per il mese ed il giorno.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/*
Theme Name:     Twenty Eleven Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Eleven theme 
Author:         Giulio Mainardi
Author URI:     http: //mgiulio.altervista.org
Template:       twentyeleven
Version:        0.1.0
*/
 
@import url("../twentyeleven/style.css");
 
.home .entry-header .entry-meta {
	position: absolute;
	width: 36px;
	height: 50px;
	padding: 0;
	top: 15px;
	overflow: hidden;
	background: url(img/post-date-clip.png) transparent no-repeat left top;
}
.home .entry-header .entry-meta time {
	display: block;
	height: 50px;
	padding: 0;
}
.home .entry-header .entry-meta .month {
	display: block;
	color: #fff;
	text-align: center;
	font-size: 9px;
}
.home .entry-header .entry-meta .day {
	display: block;
	color: #fff;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}

Agiamo sugli elementi .entry-header > .entry-meta, che TE utilizza per racchiudere le meta informazioni del post. Da notare il prefisso .home per applicare queste regole solo ai posts della home page.

Primo, assegniamogli una background-image con delle trasparenze per rappresentare la clip

Secondo, e più importante, l’uso del posizionamento assoluto per ‘estrarre’ dal layout del documento il suddetto elemento e posizionarlo nella locazione desiderata. Il contesto di questo elemento è l’<article> a cui esso appartiene. Applicando un piccolo offset con la proprietà top risolviamo l’allineamento verticale con il titolo del post. A questo punto dovremmo settare la componente orizzontale, con la proprietà left, impostando un offset negativo pari in valore assoluto alla distanza che intercorre tra il lato sinistro del post ed il bordo sinistro della pagina del documento. Il problema è che TE è un tema ‘responsive‘ e quindi tale gap è determinato con una percentuale applicata alla proprietà margin-left del #content e di conseguenza non può essere computata staticamente. Ecco spiegato il ricorso a JavaScript, che andiamo subito a vedere.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(function($) {
var
	dates = $('.entry-header .entry-meta'),
	page = $('#page'),
	post = $('#content > article.post')
;
 
$(window).on('resize', keepDateAligned);
 
keepDateAligned();
 
function keepDateAligned() {
	dates.css('left', -(post.offset().left - page.offset().left) - 5 + 'px');
}
 
})(jQuery);

Usiamo jQuery. Possiamo tranquillamente usare la versione 1.7.1 dato che è inclusa in WordPress 3.3.

Registriamo un handler per l’evento di resizing della finestra del browser, dove poter effettuare in maniera dinamica il calcolo della proprietà left per il corretto posizionamento orizzontale della data. Per determinare l’offset voluto ricorriamo al metodo .offset() dell’oggetto jQuery, che ritorna le coordinate relative al documento dell’elemento a cui è applicato. Aggiungiamo un ulteriore offset dipendente dal design della clip ed il gioco è fatto.

Conclusione

La soluzione presentata non è ‘La Soluzione’ ma ‘Una’ soluzione possibile. Per esempio, sarebbe interessante una soluzione senza JavaScript, che però non cambi troppo la struttura originaria del markup generato da TE.

Ecco, sul blog di Iwa abbiamo pubblicato la soluzione.

Buon WordPress a tutti!!

Innanzitutto scaricate il plugin Importer Splinder fornito da Altervista, e seguite i semplici passi, che consistono in:

1. Installare il plugin appena scaricato e attivarlo
2. Entrare nel pannello di gestione, che troverete sotto Strumenti > Importa > Splinder
3. Copiare il codice  template che viene fornito
4. Entrare nel pannello di gestione di splinder, cliccare su template e sosituire con il codice appena copiato (salvate una copia di quello già presente se avete intenzione di usare ancora il blog fino alla sua scadenza)
5. Andate su Configura->Impaginazione e impostate su NO la paginazione
6. Controllate che il formato dell’ora che sia impostato come “gg/mm/yyyy hh:mm″ altrimenti verranno tutti importati con la data odierna
7. Tornare al pannello di Splinder Importer e impostare il nome del blog e gli altri dettagli
8. Avviare l’importazione e attendere. Non vi spaventate se vi mostra talvolta una pagina bianca, lasciate finire l’elaborazione fino al riepilogo finale con ok finale. Se gli anni da importare sono tanti potete decidere di importare per scaglioni temporali.
9. Attivate sul pannello del vecchio blog di splinder il redirect al nuovo sito andando su Configura > Esporta blog e attiva redirect

Finora quasi nessuna delle richieste dei clienti sono state inevase, ed è tanto soddisfacente poter dire di aver creato un sistema, nonchè un template ad hoc senza pasticci ma con tutte le conferme e la sicurezza che un sistema come WordPress può dare.

Talvolta il budget del cliente ci porta obbligatoriamente a far ricorso a temi personalizzabili (esplicitati nel preventivo: il cliente è cosciente di ottenere a basso costo un prodotto che esteticamente potrebbe essere del tutto simile ad un altro sito presente in rete), framework (se il budget è più alto ma non sufficientemente da giustificare un template ad hoc 100%) ed infine i template iperpersonalizzati ad hoc, dove tutte le richieste del cliente possono essere evase e soddisfatte.

Per quanto riguarda i temi personalizzabili, mi affido con tranquillità a Themeforest: hanno uno standard di qualità grafica molto alto, template aggiornatissimi e validati, documentazione a prova di bomba e pannelli di gestione che permettono una configurazione e gestione a prova di “utonto”. Ho provato di recente dei temi di Templatemonster, e devo dire che molti temi, oltre a non essere compatibili con le ultime versioni di WordPress (su Themeforest quando ciò avviene li tolgono dallo store), sono difficili da installare (bisogna fare un dump del database per avere una simulazione dei campi da compilare) e non ci sono istruzioni d’uso in merito. Assolutamente Sconsigliabili!

Per quanto riguarda i framework ho usato solo Thematic, che pure è abbastanza semplice da personalizzare, ma lo consiglio solo in caso di template ad hoc particolarmente semplici, altrimenti rischiate di perdere più tempo a capire come personalizzarne il css che ricreandovelo da zero. Altri framework che però non ho mai usato ma di cui ho letto su html.it, sono:

• Xtreme
• Genesis
• Thesis

Qualcuno di voi vuole raccontare la sua esperienza in merito? Diteci la vostra!

In questa fase promozionale, con soli 47€ si ha accesso per tre mesi a tutti i video, che potete consultare comodamente quando volete semplicemente accedendo al vostro pannello, dove potete anche chiedere supporto.

Ho provato per voi qualche video e devo dire che sono spiegati chiaramente e in modo semplice. Per me che già conosco WordPress ripeto: lo proporrò ai miei clienti come video esplicativo delle funzioni principali poichè  è destinato ad un utente medio che vuole conoscere a fondo tutte le potenzialità dello strumento.

A presto!

Cercando ho trovato questo semplice script da aggiungere al file functions.php del vostro tema.

Innanzitutto nella cartella del vostro tema create una cartella scrivibile che chiamerete /single/ e dentro la quale riporrete il file che costituisce il template della vostra categoria, chiamandolo nel seguente modo: single-cat-nomecategoria.php dove il nome della categoria sia lo slug (l’abbreviazione) usata da wordpress. Se composta da più parole non temete, potete usarla tranquillamente (es: single-cat-nome-della-categoria.php)

Ed ecco lo script che prende in automatico quel template associandolo al post presente in quella categoria:

/**
* Filter the single_template with our custom function
*/
define(SINGLE_PATH, STYLESHEETPATH . '/single');

/**
* Filter the single_template with our custom function
*/
add_filter('single_template', 'my_single_template');

/**
* Single template function which will choose our template
*/
function my_single_template($single) {
global $wp_query, $post;

/**
* Checks for single template by category
* Check by category slug and ID
*/
foreach((array)get_the_category() as $cat) :

if(file_exists(SINGLE_PATH . '/single-cat-' . $cat->slug . '.php'))
return SINGLE_PATH . '/single-cat-' . $cat->slug . '.php';

elseif(file_exists(SINGLE_PATH . '/single-cat-' . $cat->term_id . '.php'))
return SINGLE_PATH . '/single-cat-' . $cat->term_id . '.php';

endforeach;

/**
* Checks for default single post files within the single folder
*/
if(file_exists(SINGLE_PATH . '/single.php'))
return SINGLE_PATH . '/single.php';

elseif(file_exists(SINGLE_PATH . '/default.php'))
return SINGLE_PATH . '/default.php';

return $single;
}

Le istruzioni sono presenti già nel pannello di amministrazione, ma per chi è pigro o si trova in difficoltà, vi riporto i semplici passi da seguire (nè uno più nè uno meno), per spostare il sito. Innanzitutto: NON SPOSTATE NIENTE, non spostate intere directory sulla root pensando che magicamente poi tutto funzioni come per un sito statico, perchè NON LO E’, ma seguite quello che vi sto per scrivere.

Questo è il pannello Impostazioni > Generale così come vi si presenterà se avete lavorato in una cartella diversa dalla root del sito. Il primo passo da fare è quello di modificare l’indirizzo del sito. ATTENZIONE: SOLO L’INDIRIZZO DEL SITO e non di WordPress, pertanto:

e confermate. Dopodichè non spaventatevi se vedete error 500: è perfettamente normale, perchè in questo momento avete modificato il file .htaccess, che dovrete spostare, insieme al file index.php, nella root principale. Solo questi due files pertanto, e non tutto il sito

Fatto ciò, editate il file index.php e modificate la seguente riga:

require('./wp-blog-header.php');

trasformandola in:

require('./directory/wp-blog-header.php');

Tutto qui.
NON toccate assolutamente l’htaccess…e vedi che ti mangi!

Per ulteriori dettagli: http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

Cos’è aNobii

Per chi non lo conoscesse, aNobii è un social network tematico ideato esclusivamente per gli amanti della lettura. Fu inventato nel 2006 da una compagnia privata di Hong Kong. Il servizio permette agli utenti di catalogare la propria collezione di libri, valutarli, scrivere recensioni e discuterne con gli altri utenti. Il punto di forza principale di questo social network è quello di offrire agli utenti semplici meccanismi per creare velocemente una vera e propria collezione digitale di tutti i libri che essi hanno letto. Il sistema sfrutta soprattutto i codici ISBN, formato internazionale per identificare univocamente un libro, e i relativi codici a barre. Anobii ha infatti mirato alla velocità e semplicità di identificazione dei libri creando addirittura apposite applicazioni mobile (sia per iPhone che per Android) che consentono, tramite la fotocamera del dispositivo, di scansionare il codice a barre di un qualsiasi libro che ci troviamo per le mani e, così facendo, il libro apparirà automaticamente nella nostra libreria virtuale aNobii.
In Italia gode di discreta fama sopratutto perché il sito è tradotto interamente in 15 lingue tra le quali figura anche l’italiano.

Il plugin

L’idea di sviluppare questo plugin è nata “giocando” un po’ con WordPress e studiando le funzionalità delle nuove API WordPress per lo sviluppo di widget. Inoltre mi ero da tempo accorto che non esistevano molti plugin WordPress per interagire con aNobii e così è arrivata l’ispirazione di creare qualcosa di utile.
Come già detto, il plugin consiste in un widget attraverso il quale potremo mostrare i libri che abbiamo letto di recente o che stiamo leggendo. Niente di particolarmente complesso in realtà ma è bene vedere quali sono gli step da seguire per l’installazione e fare una panoramica di tutte le caratteristiche e le opzioni messe a disposizione dal widget.

Un anteprima di come apparirà il nostro widget

L’installazione

Prima di procedere con l’installazione del plugin assicuratevi che sul vostro spazio web sia disponibile l’estensione php CURL e di avere la versione 3.0 di wordpress (o superiore).

L’installazione è praticamente uguale a quella di tutti gli altri plugin WordPress.
E’ possibile installare automaticamente il plugin direttamente dal pannello amministrativo di WordPress, accedendo alla apposita sezione “aggiungi nuovo”.
Da questa sezione sarà necessario trovare il plugin tra tutti quelli disponibili. Vi basterà inserire AnobiiWidget come parola chiave e vi verrà presentato il plugin in questione come unico risultato della ricerca. Adesso vi basterà cliccare sulla voce installa per avviare il processo di installazione automatico. Completata l’installazione sarà necessario attivare il plugin. Niente di più banale, cliccate su attiva e le “jeux sont fait”!

Se volete invece installare manualmente il plugin sarà necessario scaricarlo dal repository ufficiale o da github e copiare i files scaricati nella cartella wp-contents/plugins/ della vostra installazione WordPress.
Fatto ciò sarà possibile attivare il plugin dal pannello di amministrazione dei plugin di WordPress.

Configurare il widget

Una volta installato e attivato il plugin possiamo spostarci nella sezione widget dell’amministrazione. A questo punto, tra tutti i widget disponibili, ci sarà un nuovo widget intitolato Anobii. Se siete già familiari con i widget saprete come fare per farlo apparire in un’area del vostro tema. Se siete, invece, un po’ meno pratici di WordPress, sappiate che vi basterà cliccare sul widget nell’elenco sulla sinistra e trascinarlo in una delle aree a destra. Ognuna delle aree a destra, rappresenta un particolare spazio del vostro tema grafico: sidebar, footer, header, etc… Ogni tema grafico ha i propri spazi personalizzati in cui è possibile posizionare i widget. Nella maggior parte dei casi, comunque, avrete a disposizione uno spazio intitolato sidebar che rappresenta la colonna laterale del vostro template.
Trascinato il widget Anobii su uno di questi spazi, si aprirà il rispettivo pannello delle impostazioni.

La schermata di configurazione del widget.

Spendiamo qualche parola su ognuno dei parametri di configurazione:

• Titolo: il titolo del widget. Verrà inserito immediatamente prima del corpo del widget. Se non vogliamo mostrare alcun titolo basterà semplicemente lasciare questo campo bianco.
• Nome utente: il vostro id (nome utente) su aNobii.
• Aggiungi link al profilo: se selezionato, verrà aggiunto un link al titolo del widget che punterà al vostro profilo aNobii.
• Elementi: il numero di libri da mostrare (da 1 a 5).
• Mostra immagini: vi permetterà di selezionare se visualizzare o meno l’immagine di copertina dei libri. E’ possibile mostrare l’immagine per ogni libro, solo per il primo libro o non mostrarla affatto.
• Utilizza javascript: opzione raccomandata, attiva il caricamento del contenuto del widget attraverso AJAX. Ciò impedirà che le richieste ai server di aNobii rallentino il caricamento dell’intero sito web. In questo modo infatti le richieste verranno eseguite solo dopo il caricamento dei contenuti della pagina.
• Tipi di libro: tipologie di libro da mostrare in base allo stato di lettura corrente (Finiti, non iniziati, etc…).
• Durata cache: permette di definire la durata della cache (un giorno, 3 giorni, una settimana o un mese). Per velocizzare il caricamento del contenuto del widget, i dati ricevuti in risposta dai server di aNobii verranno archiviati localmente. Questi dati resteranno in memoria proprio per il periodo specificato dall’opzione durata cache. Di conseguenza se modificherete la vostra libreria aNobii, il widget si aggiornerà solo allo scadere del periodo di durata della cache. Si noti che la cache verrà automaticamente svuotata dopo l’installazione di un aggiornamento del plugin e dopo ogni modifica alle impostazioni del widget.

Ci tengo a precisare che è possibile creare più istanze del widget, ovvero più widget aNobii, posizionarle in diverse sezioni del nostro tema. Potreste ad esempio creare un widget per mostrare i libri che state leggendo e un widget per gli ultimi 5 libri che avete già letto.

Localizzazione del plugin

Mi piacerebbe vedere questo plugin tradotto in quante più lingue possibili. Negli ultimi giorni mi sono preoccupato personalmente di contattare alcuni amici sparsi nel mondo per avere delle prime traduzioni, ma il lavoro da fare è ancora molto. E’ possibile leggere l’elenco delle lingue in cui il plugin è già stato tradotto dalla pagina ufficiale del plugin. Se conoscete abbastanza bene una lingua straniera in cui il plugin non è stato ancora tradotto potete contribuire facilmente creando l’apposita traduzione. Attualmente vi sono solamente 23 semplici stringhe da tradurre. Se siete esperti di traduzioni gettext troverete tutto l’occorrente all’interno della cartella languages. In alternativa, nella stessa cartella, è presente un file excel che potreste compilare e spedire al mio indirizzo di posta.

Stato del plugin

Al momento della stesura di questo articolo il plugin è alla versione 0.0.3, ritenuta ancora una versione beta. Non sono stati riscontrati particolari bug a parte qualche sporadico caso in cui si sono registrati comportamenti anomali nelle richieste ai server aNobii. Talvolta è possibile che vengano mostrati dei libri che non sono realmente presenti nella nostra libreria o per alcuni utenti ad esempio potrebbe non essere possibile accedere ad i propri libri impostati come “Da consultare”. Purtroppo sembra che queste siano delle bug delle API di aNobii e quindi c’è solo da aspettare che vengano corrette.

Contribuire allo sviluppo

Il progetto è totalmente open source ed ho anche aperto un apposito repository github. Potete utilizzare lo stesso github per segnalare eventuali problemi o suggerimenti per le future versioni. Ogni contributo è ben accetto.

Per concludere

Spero che questo plugin, nella sua semplicità, possa risultare utile a quanti utilizzano frequentemente aNobii e WordPress. Spero anche di essere stato abbastanza esaustivo, ma per qualsiasi altra informazione non esitate a contattarmi.
Per concludere vorrei ringraziare i responsabili di questo sito per avermi concesso questo spazio e tutti voi per esservi interessati a questo piccolo progetto.

Saluti.

Luciano Mammino
http://oryzone.com

Scarica AnobiiWidget

Per editare tali files è necessario un programmino chiamato Poedit, ma dovrebbero essercene diversi in giro con la stessa utilità.

Ecco che quindi ci ritroveremo con tanti files .mo quante sono le lingue che necessitiamo di usare. Solitamente chi sviluppa cms o applicazioni web fornisce il files .po sorgente originario, dal quale chi vuole, nel caso si tratti di open source come WordPress, può fornire e rilasciare la traduzione nella lingua preferita, come fanno i nostri paladini di WordPress Italy.

Vi segnalo a tal proposito, che il plugin WPML, che ci serve per creare più versioni del nostro sito in più lingue, permette di editare tali files direttamente dal pannello di gestione del plugin stesso. E dove i plugin e il tema siano supportati, tramite le opportune stringhe di scrittura di testo (<? _e(‘qui testo’,'nomedeltema’) ?>) possiamo tradurre l’intero tema direttamente dalla gestione di WPML.

Spero vi sia stato d’aiuto! A presto.