Manca il nome del progetto

ItalyStrap, WordPress Theme Framework

Schema.org e Bootstrap insieme per Wordpress

Usalo come template base per sviluppare i tuoi siti web

v. - Beta -

Rimani aggiornato sul progetto

Screenshot del nuovo template per wordpress ItalyStrap

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.

Changelog here

Last edit:

44 responses to “ItalyStrap WordPress Theme Framework”

  6. Sergio Pinna

    Ho notato che almeno nel tuo demo i file css sonbo tutti nell’header i file javascritp son tutti nel footer.
    COMPLIMENTI!
    Finalemnte ho trovato un tema scritto come si deve!
    Per esser perfetto: inserisci nel functions una funzione che ponga il file style (se esiete il tema figlio del tema figlio e non del tema padre) SEMPRE come ultima nell’header, ovviamente.

    Comnuque ottimo lavoro!!! 🙂
    E’ difficile trovare un lavoro ben fatto cos’!

    • Enea Overclokk

      Ciao Sergio, grazie mille dei complimenti 🙂 e del tuo feddback, importantissimo per migliorare il progetto.

      La funzione per fare questo esiste già: get_stylesheet_directory_uri() che serve apposta per trovare il path del tema figlio, quando per esempio copi il file script nel tema figlio basta che usi quella funzione al posto della variabile $path.

      Ciao 🙂

  9. Sergio

    Ciao,
    cerscando nel web un thema per il mio sito di auto & moto ho tovato questo, (http://themeforest.net/item/car-news-html-for-car-website/full_screen_preview/8613635) molto bello e accativante, rispecchiando l’idea che avevo per il sito…. purtroppo ho scoperto che non progettato per wp bensi per bootstrap 3.x, allora ho iniziato a cercase sul web trovando diverse cose interessanti sul questo framework, ho installato bootstrap 3.2 dal mio cpane ma ti confesso che ho capito ben poco ovvero non so dove mettere le mani… pertanto qualora possibile ti volevo chiedere qualche consiglio:
    come faccio a installare il thema? partendo da zero e sperimentare un po (non sono un grande esperto mi piace sperimetare e con WP ormai me la cavo abbastanza bene…) esiste qualche tutorial magari video su come iniziare? ha qualche consiglio da darmi?
    Scusami in anticipo per il disturbo.

    Saluti
    Sergio .

    • Enea Overclokk

      Ciao Sergio,
      Bootstrap è un framework CSS da usare per avere una base di partenza per lo sviluppo di siti web, in pratica ti gestisce la “grafica” iniziale da cui poi tu dovrai applicare il tuo stile, bootstrap fornisce anche altre cosette oltre la griglia base, come bottoni, form, menù ecc.

      Per installare ItalyStrap e cominciare a sviluppare il proprio template puoi seguire le indicazioni che trovi nella guida sopra.

      Per poter lavorare con uno starter theme (o qualsiasi tema per WordPress) devi avere delle conoscenze in HTML, CSS, PHP e Javascript senza le quali è molto difficile poter anche solo modificare un tema, non sapendo quale sia il tuo livello attuale e quali linguaggi di markup e/o programmazione conosci mi è un po’ difficile consigliarti al meglio.

      Se hai altre domande sono sempre a disposizione.

      Ciao
      Enea

  10. Elena

    Ciao 🙂 Mi piacerebbe usare questo tema per il mio sito, ma sono alle primissime armi in quanto a personalizzazione… Mi sapresti dire perchè questo tema non può essere usato così com’è ma va bene solo per sviluppatori? Gli manca qualcosa?

    • Enea Overclokk

      Ciao Elena 🙂

      Questo tema è pensato come base di sviluppo infatti come puoi vedere dalla demo non ha uno stile ma solo le impostazioni base di Bootstrap, quindi solo la griglia (ovviamente potrai usare tutte le classi contenute nel file css), tutte le altre personalizzazioni dovrai fartele tu, per il resto non manca nulla, anzi 🙂

      Quello che ti consiglio è di sviluppare il tuo tema usando un tema child così puoi mantenere aggiornato il tema principale, ricorda che quando scarichi il file devi rinominare la cartella in Italystrap.

      Sto lavorando su temi child già pronti da poter usare su ItalyStrap già ottimizzati per le performance, ovviamente saranno pronti fra qualche mese ma se sei interessata qui trovi il sito di ItalyStrap con la newsletter per rimanere aggiornata 🙂

      Per qualunque domanda su ItalyStrap durante il tuo sviluppo sono sempre disponibile 🙂

      Ciao
      Enea

      • Elena

        Grazie 🙂 Però ho un problema: dopo aver installato il tema principale, ho installato il child, ma mi dà errore: Il tema padre è mancante. Installare il tema padre “ItalyStrap”. Cosa che appunto ho già fatto, tantè che posso benissimo impostarlo come tema. Cosa ho sbagliato? Scusa per il disturbo…

  11. Walter

    Ciao Enea, complimenti per il tema e sopratutto grazie per averlo condiviso con noi.
    Ho appena installato la versione 2.0.0. ed ho riscontrato degli errori nelle pagine archive.php e author.php.
    Fatal error: Call to undefined function the_archive_description()
    Fatal error: Call to undefined function the_archive_title()

  12. Walter

    Ciao Enea, ho letto un tuo post su seoblog.giorgiotave.it riguardante la WPO in particolare quello su come caricare jQuery in modo asincrono. Seguendo i tuoi consigli ho istallato il plugin Async JS and CSS ed effettivamente ho notato un effettivo aumento nella velocità di caricamento del sito.
    Seguendo alcuni link di quel post sono finito nel post di Andrea Pernici dove si parla di rendering del contenuto Above-the-Fold.
    Ho visto anche che nel tuo tema esiste un file css-above-the-fold.php e mi chiedevo se attivandolo questo possa ulteriormente migliorare le prestazioni.
    Sono rimasto impressionato quando ho visto il tuo sito italystrap.it su Pagespeed che dava come risultati 100/100 sia su mobile che su desktop.
    Buon fine anno
    Walter

    • Enea Overclokk

      Ciao Walter,

      Ottimo 🙂

      Il file css-above-the-fold.php è ancora un esperimento ma se carichi solo il css per la parte sopra della pagina funziona benissimo, un consiglio, invece di usare tutte quelle echo fai un require del file css (è più veloce a caricare).

      Ps: se hai attivato gli aggiornamenti del tema tieni attivo il debug perché quel file potrei cambiarlo in futuro con funzioni più performanti.

      Sto lavorando ad un plugin per consentire anche a chi è meno esperto di poter ottenere buoni punteggi si pagespeed 😉

      Buon fine anno anche a te 🙂

      Ciao
      Enea

  13. andrijana

    Good day,
    I’m Andrijana from WebHostingGeeks Support. We have found your plugin ItalyStrap very interesting and of a significant use for the community. Since I’m of Serbian decent, I’m willing to help people from former Yugoslavia, which now represents six independent countries in Europe, better manage their internet pages by translating your plugin into Serbo-Croatian language.
    Would that be ok with you?
    I hope I’ll hear from you soon.

    Many kind regards,

    Andrijana Nikolic

    andrijanan@webhostinggeeks.com
    webhostinggeeks.com

  14. Riccardo

    Ciao,
    innanzitutto complimenti per lo splendido tema. Ho cercato per parecchio tempo uno tema starter di WordPress costruito con bootstrap come Italystrap.
    Vorrei farti però una domanda. Sto realizzando in locale un sito la cui homepage è una landing page divisa in sezioni ( il tipico sito monopagina con bootstrap). Come posso ottenere un effetto di scrolling dalle voci di menu simile a quello della voce “plus” sul sito di italystrap o di questo sito monopagina?
    grazie in anticipo per la risposta e complimenti per l’ottimo lavoro.

  15. Walter

    Ciao Enea, sempre grande il tuo progetto.
    Sto usando l’ultima versione 3.0.5 di ItalyStrap.
    Non sono un espertissimo di javascript quindi volevo chiederti nello specifico a cosa servono i file che si trovano nella cartella /js, in pratica i vari archive.min.js custom.min.js etc…
    Ho visto che anche in /js/src ci sono file per esempio archive.js, custom.js etc.. e questi mi sono abbastanza chiari
    Mi potresti dare una breve spiegazione, sopratutto su quelli contenuti in /js

    Grazie

    • Enea Overclokk

      Ciao Walter, grazie mille 🙂 (e scusa per il ritardo nella risposta)
      nelle cartelle src ci sono i sorgenti dei file js e/o css non minificati, nella cartella superiore ci sono le versioni minificate, se usi grunt per sviluppare puoi vedere come usare i vari file nel file gruntfile.js e poi minificarli, il template caricherà solo quelli minificati, non gli altri, il file è script.php.
      Il nome dei file è relativo alla pagina in cui verranno caricati seguendo lo schema di gerarchia dei file di template dove qui puoi vedere la wiki https://developer.WordPress.org/themes/basics/template-hierarchy/ in questo modo puoi caricare lo snippet solo nella pagina in cui verrà utilizzato realmente e non nelle altre, per esempio hai un effetto particolare che userai solo negli articoli, bene, usa il file single.min.{js|css} e non gli altri, questo ti permette di ottimizzare le prestazioni per le altre pagine.
      Spero di aver spiegato bene 🙂
      Se hai altre domande chiedi pure.
      Ciao

    • Enea Overclokk

      Ciao Sergio,
      mi sono permesso di copiare la parte relativa alle segnalazioni del plugin su pastebin.com per evitare di appesantire troppo i messaggi.
      Come ben saprai il plugin Theme Check serve principalmente per chi deve caricare il proprio tema sul repository di WordPress, io non lo devo caricare quindi non sono obbligato a seguire tutti i “consigli” che da il plugin (come vedi dai vari warning e info sono consigli non errori), la cosa importante è che non ci siano errori php ;-).

      • Sergio Pinna

        Perfetto! 🙂

        Scusa se ho “appesantito” con quella lista così lunga: non conoscendo esattamente cosa facesse quel plugin pensavo ti fosse utile la cosa.
        Continua a migliorarlo che è un tema davvero ben fatto!

        Ciao!

  18. Antonio

    Ho installato sia il tema normale che il child e sto progettato il mio sito partendo dal tema child. Quando creo i nuovi template di pagina e inserisco ad esempio la navbar di bootstrap non viene caricato lo stile di default di bootstrap. Devo inserire qualche collegamento nell’header.php?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Puoi formattare meglio il testo con questi tag HTML

Pre Code Bold Italico Link Quote

© 2017 Overclokk di Enea Scerba P.IVA 03530371206 - Cod.Fisc. SCRNEE77A23F704J

Email: info@overclokk.net - Tel: 348 6608722

This website uses Overclokk powered by ItalyStrap developed by Overclokk.net