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!!

Add2Cart infatti è nato dall’esperienza di ben 5 anni di programmazione su Magento che ha portato il team a conoscere a fondo quelle che erano le reali esigenze dei merchant europei. Add2Cart permette infatti di creare un ecommerce in meno di 5 minuti ed è già configurato per vendere rispettando tutte le leggi relative al fisco, termini di vendita e privacy. Attraverso un backend migliorato rispetto a quello ufficiale di Magento potrai avere il pieno controllo del tuo ecommerce, gestirne la grafica, i sistemi di pagamento, le spedizioni i clienti e gli ordini il tutto nella massima semplicità.

Se guardiamo al servizio in sè, non si può non notare come sia stata data grande importanza all’aspetto grafico: dal backend infatti è possibile scegliere fra circa dieci template gratuiti di livello corporate mentre nel theme store ne sono disponibili un altro centinaio a pagamento, compatibili con Magento.

A chi è rivolto Add2Cart ? Le sue fasce di prezzo coprono un po tutte le esigenze, dal piccolo imprenditore che decide di avvicinarsi all’ecommerce fino alla multinazionale che ha deciso di utilizzare una piattaforma potente come Magento senza però perdere tempo a risolvere bug oppure installare moduli aggiuntivi di cui non si conosce fino in fondo il funzionamento. Add2Cart ha anche un rapporto speciale con i rivenditori ai quali da consulenza gratuita, aiutandoli a completare il loro progetto con grande soddisfazione del cliente.

Cosa ci riverva il futuro di questa piattaforma? Social Commerce, Mobile Commerce, migliori prestazioni e più facilità nella personalizzazione grafica. Il team di sviluppo di Add2Cart ci ha infatti fornito alcune indiscrezioni sui prossimi update della piattaforma, ci sarà posto per il modulo di interfacciamento con Payvment, sistema di Socialcommerce con facebook, una app mobile iphone/android per gestire da remoto il proprio negozio, una riscrittura di alcuni processi per la creazione della cache che miglioreranno le prestazioni del 70% ed un nuovo pannello per la personalizzazione grafica che strabilierà anche i meno esperti.

Beh, restiamo in ascolto sul canale ecommerce e godiamoci l’evoluzione di questa interessantissima piattaforma.

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

Di seguito potete averne un’anteprima. Se siete interessati potete scaricarlo gratuitamente qui: Wp Reviews. Riceverete in mail il link al download dopo esservi registrati alla newsletter.

Qui invece la demo online e la pagina facebook per tenersi aggiornati sulle nuove versioni del template, che andrà sempre migliorandosi.

Grazie Marco!

La figura richiesta è un graphic webdesigner esperto per la zona di Milano, contratto freelance con retribuzione quindi definita progetto per progetto e NON in telelavoro.

L’obiettivo per il futuro sarà quello di lavorare insieme a Sevenlike fino ad entrare nel team come componente stabile del gruppo (composto da 10 persone attualmente).

Chi di voi non ha ancora fatto un sito per la pubblica amministrazione? Troppe mani alzate, non va bene

Se uno dei freni a fare un sito ad hoc per la PA è stato il problema di dover gestire Albi pretori, Organigrammi, gare, concorsi, delibere, ordinanze, etc non avete più scuse. Ora c’è “PA facile“, un plugin WordPress creato dalla toSend.it volto proprio a gestire tramite custom post types preimpostati tutte queste opzioni obbligatorie e sempre presenti per un sito del genere.

Se poi a frenarvi sono stati i requisiti e le linee guida sull’accessibilità ne parleremo approfonditamente a breve per sollevarvi da qualsiasi dubbio o timore e per approfondire come WordPress possa essere in questo caso uno strumento adeguato e valido (in tutti i sensi).

Se amate così tanto Facebook da non volerlo mai abbandonare, ecco un template joomla! Per il vostro sito.

Attualmente è l’unico template per joomla! (valido per la 1.5 e 1.6) ad esser così fedele all’interfaccia di facebook, inoltre è validato XHTML e CSS2.

DEMO

NOTE:

• per il menu principale il “Suffisso classe CSS modulo” è fbvmenu;

• l’immagine nella colonna contenuti è in posizione “banner2” con margini top e left: 20px; ed ha dimensioni: 540×320.

Cominciamo! Le cose da fare sono tre:

1. RISCRIVERE L’URL SEF

Andiamo in Sito > Configurazione Globale > Impostazioni SEO
Le voci “Attiva URL SEF” e “Riscrivi URL SEF”, attivano le url SEF (SEF sta per Search Engine Friendly, una SEF URL è qualcosa del tipo:

http://miosito.com/chi-siamo/contatti.html …ovvero una URL che sia esplicativa per l’utente)

mentre “Suffisso URL” attiva nell’url il suffisso .html.

A questo punto occorre rinominare il file htaccess.txt che c’è nella root del sito in .htaccess.
In alcuni casi, dopo queste modifiche, il sito potrebbe non funzionare, basterà commentare la riga 20 dell’ .htaccess in questo modo:

# Options +FollowSymLinks

Con queste modifiche, l’indirizzo web che prima era: www.miosito.it/index.php?option=com_content&view=article&id=6:articolo&catid=1&Itemid=49

diventerà così: www.miosito.it/categoria/6-articolo.html

Fatto ciò, occorre inserire i metatag in ogni pagina del nostro sito web.

In questa nuova versione di joomla! È possibile inserire e personalizzare i metatag non solo negli articoli ma in ogni pagina del sito.

2. INSERIRE I METATAGS

Andiamo in Menu > Menu Principale (il menu principale è un esempio) e clicchiamo su una voce di menu.

In Opzioni visualizzazione pagina possiamo inserire il titolo della pagina, questa opzione è importantissima per l’ottimizzazione nei motori di ricerca.

Inseriamo la descrizione (vi suggerisco di inserire la keyword per la quale volete posizionarvi)

Se volete, compilate il box relativo alle keywords (ormai non è più considerato importante dai motori di ricerca)

I campi metatags description e keywords in Configurazione Globale vi consiglio di non compilarvi altrimenti si rischia di avere i metatags duplicati in tutti gli url dove non sono state inserite la descrizione e le keywords.

3. INDICIZZAZIONE SU GOOGLE

Andiamo su Strumenti per Webmaster di Google > Nuovo Sito, uploadiamo il file di verifica nella root del nostro sito e inviamo l’url della sitemap.
RICORDATEVI DI CREARE LA SITEMAP

Buona ottimizzazione a tutti