Disclaimer
Questo template è consigliato principalmente per sviluppatori o per chi sta muovendo i primi passi con lo sviluppo di temi per WordPress, non è adatto per lavori finiti in quanto non completo e potrebbe presentare bug e farti esplodere il computer. Uomo avvisato, mezzo salvato 🙂
English description
English description coming soon 😉
Ora disponibile anche sul repository npm installabile con yeoman
Caratteristiche principali
- HTML5 Bolierplate
- CSS3
- Twitter Bootstrap 3
- Schema.org
- Google Authorship
- Facebook opengraph
- Twitter cards
- SEO Friendly (che vuol dire tutto e niente :-))
- WPO Friendly 😉
- Articoli correlati
- E chi più ne ha più ne metta 😛
Un po’ di storia
Sono un fan di Bootstrap, Schema.org, HTML5 e WordPress (e altre cose che non centrano nulla :-)) e così ho deciso di integrare tutti insieme in un tema custom per poterlo usare in qualsiasi progetto sviluppato con questo fantastico CMS, insomma, un bel minestrone di tante cosette per il web 3.0 😉
Oltre che di SEO mi appassiona anche la Web Performance Optimization (WPO) ed è per questo che lo sviluppo di questo template si basa appunto sulle regole fondamentali per avere un web più veloce (che non è un fattore di ranking ma però….), quindi ecco un tema senza troppi fronzoli e con PHP solo quando necessario (ok, ok, per far funzionare alcune caratteristiche di Schema.org ho dovuto aggiungere un po’ di codice :-P).
C’era proprio bisogno di un’altro template per WordPress che implementasse twitter bootstrap? Si, perché in nessuno di quelli che ho provato era stato implementato Schema.org e siccome avrei comunque dovuto adattarli per le mie esigenze perché non farne direttamente uno con pieno supporto ai Rich Snippet? Così è nato ItalyStrap, un template custom con tante feauture già integrate ed in continuo sviluppo.
In questo template sono presenti molti pezzi di codice presi da alcuni temi a cui mi sono ispirato per portare avanti questo progetto, uno fra tutti sicuramente è Roots, da cui sto ancora implementando alcune caratteristiche veramente valide per quanto riguarda la sicurezza e la velocità .
Ora tocca a te, se trovi questo progetto interessante puoi aiutarmi in due modi, uno potresti linkare questa pagina sul tuo sito, eventualmente puoi scrivere un articolo in merito e mettere un link in mezzo al testo 😀 (mi raccomando, non nella sidebar o nel footer :-), ok, sono un po’ paraculo :-)), il secondo modo è informarmi in caso ci siano bug o anche per darmi consigli nel caso vedessi errori di programmazione o se proprio non riesci a farne a meno puoi aiutarmi nello sviluppo :-), ad ogni modo CONDIVIDI CONDIVIDI e CONDIVIDI sui social che preferisci, è gratis ;-), a fondo articolo trovi tutti i pulsanti che ti servono ;-).
Come si installa
Scarica il tema da qui e una volta decompresso rinomina la cartella in Italystrap e inseriscila nella cartella “themes” di WordPress via FTP usando per esempio Filezilla, vai nel pannello di controllo alla voce “aspetto > temi” e attiva ItalyStrap, oppure puoi caricarlo direttamente senza usare un programma FTP andando nella pagina “Aspetto > Temi” tab “Installa Temi”, clicca su “caricare” e segui la procedura guidata.
Nota importante, per inserire in automatico le regole al file htaccess devi salvare i permalink del tuo sito in WordPress.
Ti consiglio di caricare anche il tema figlio che trovi a questo indirizzo decomprimere la cartella zippata, rinominare in Italystrap-child, caricarla nella cartella dei temi e attivare questa, così potrai usare il tema figlio per le tue modifiche e beneficiare dei futuri aggiornamenti del tema padre senza perdere nulla del codice da te creato.
Puoi anche eseguire una installazione da riga di comando usando Yeoman, la guida la puoi trovare a questa pagina.
Ti consiglio anche l’utilizzo di questo plugin che ti consentirà di poter aggiornare ItalyStrap direttamente dal pannello di controllo di WordPress quando saranno disponibili le future versioni comodamente con un click.
Prima configurazione
Come vedi questo tema non ha la solita pagina home che visualizza gli ultimi articoli ma è già una home utilizzabile per siti stile corporate, una slide principale che prende i dati dai custom post type “Prodotti” e gli ultimi 4 articoli visualizzati sotto (nelle prossime versioni vedo se mantenere questo sistema o semplificarlo ulteriormente).
Per attivare la slide principale in Home page devi usare i custom post type “Prodotti” già attivi nel tuo WordPress seguendo questa procedura:
- Crea un nuovo prodotto
- Inserisci una immagine in evidenza (deve essere almeno 1140px x 500px)
- Attiva mettendo la spunta nel meta box che trovi in alto a destra (questo passaggio sarebbe già sufficiente ma…)
- Inserisci il testo che preferisci nei campi personalizzati “Headline” e “call_to_action”
- Ripeti la sequenza creando un secondo prodotto 🙂
Solo seguendo questa procedura verrà visualizzata la slide in home page, ricorda, funziona con minimo 2 prodotti :-).
Per visualizzare gli articoli puoi utilizzare il template “Blog” ed assegnarlo ad una pagina nuova, non importa inserire del contenuto in questa pagina, è tutto automatico 🙂
Pagina autore
Per configurare la pagina autore (che trovi all’indirizzo http://www.TUOSITO.TLD/author/NOMEUTENTE/) segui questi semplici step:
Prima di tutto se non lo hai ancora fatto registrati su Gravatar con la mail che utilizzi per accedere al tuo sito, questo servizio serve per associare una immagine avatar al tuo utente, quando hai caricato la tua immagine devi copiare la sua url ed incollarla nell’apposito campo che trovi nel tuo pannello admin di WP, (sezione “Utenti > Il tuo profilo”) questo servirà per fare in modo che durante la condivisione della pagina del profilo personale su G+ o Facebook di default venga utilizzata questa come prima immagine.
Ora puoi compilare tutti gli altri campi che ritieni utili per il tuo scopo, questi quelli presenti:
- Profilo Google (url pulita del profilo)
- Pagina Google (url pulita del profilo)
- Profilo Facebook (url pulita del profilo)
- Pagina Facebook (url pulita del profilo)
- Profilo Pinterest (url pulita del profilo)
- Profilo Twitter (url pulita del profilo)
- Profilo Linkedin (url pulita del profilo)
- Contatto skype (username utilizzato)
(Per rimuovere o aggiungerne altri vai nel file function.php alla funzione italystrap_add_social_contactmethod( ))
Per ottenere l’authorship di Google inserisci la url del tuo profilo di Google plus nel campo “Profilo Google” (poi ovviamente dal tuo profilo di G+ devi linkare la tua pagina autore ;-)), verifica che sia stato implementato correttamente con questo strumento e aspetta qualche tempo per l’assegnazione della faccina in SERP.
Una volta inseriti i tuoi social preferiti verranno attivati i mega button in stile flat nella pagina sotto la descrizione dell’autore 🙂
Consiglio anche di compilare il campo description in modo tale da avere il box autore nella pagina compilato a modo (e poi un po’ di testo in più piace tanto a google ;-)).
Sotto al box autore verranno elencati gli articoli che lo stasso ha scritto, ottimo anche per siti multi autore.
Bene, per la pagina autore è tutto :-).
Pagina full width
Esiste anche una pagina a larghezza piena, senza sidebar, utile da usare per esempio per landing page di vendita 🙂
Pagina SItemap HTML
Per configurare la Sitemap HTML devi creare una nuova pagina e scegliere il nuovo template “Sitemap HTML” nel menù a tendina “Modello” sulla destra del pannello amministrazione quindi puoi pubblicare la nuova pagina che potrai linkare anche nel menù.
Configurare Facebook Open Graph
Per configurare Facebook open graph apri il file facebook_opengraph.php che trovi nella cartella “lib” del template ItalyStrap e aggiungi l’ID amministratore dell’app che hai creato in fb:admins, in casi ci fosse più di un amministratore inserisci la seconda ID nella riga sotto, se ce ne fosse solo uno cancella la riga inutilizzata, inserisci anche l’ID dell’app stessa in fb:app_id e il gioco è fatto, ora testa la coretta visualizzazione nel tool di facebook.
Attualmente è solo possibile effettuare l’inserimento manualmente della ID.
La description per i post e le pagine prende come parametro il campo description compilato di All in one SEO pack se presente o di SEO by Yoast se presente, se non sono stati installati nessuno dei due plugin sopracitati verrà preso come valore il contenuto del campo riassunto se presente altrimenti verrà generato automaticamente prendendo i primi 200 caratteri del contenuto del post o pagina.
Configurare Twitter cards
Per configurare le Twitter cards apri il file twitter_card.php nella cartella “lib” del template ItaliStrap quindi inserisci il tuo username di twitter nel campo twitter:creator e se non hai una user per il tuo sito inseriscila anche in twitter:site, fai un test nel tool di una pagina di un tuo articolo e se è tutto ok richiedi l’approvazione.
Attualmente è solo possibile effettuare l’inserimento manualmente del proprio nume utente.
L’attribuzione multi utente è in fase di sviluppo.
La gestione della description è uguale a quella per open graph (vedi sopra).
Articoli correlati
Con questo template di default sono attivi gli articoli correlati, la funzione che gestisce tutto si chiama show_related_posts() nel file function.php e richiamata nel file single.php.
Gli articoli correlati sono organizzati attraverso l’utilizzo dei tag, il limite massimo di articoli correlati visualizzabili è 4 (consigliato) puoi modificare a piacere la funzione.
Gallery
La gallery nativa di WordPress attualmente utilizza una funzione che riscrive quella originale per dare un effetto particolare usando twiter bootstrap, purtroppo al momento le immagini non vengono ridimensionate fisicamente ma solo via css e questo non è buono per le performance, sto lavorando per trovare una soluzione. Qui puoi vedere la gallery.
Lascia un commento