Essere presenti sul web è ormai una necessità, però a volte l’avere degli account social molto attivi non è sufficiente: in alcuni casi, infatti, è necessario avere un proprio sito web. Gli utenti però nel corso degli anni hanno cambiato le loro abitudini: oggi navigano da una marea di dispositivi diversi e vogliono trovare subito l’informazione che cercano. Quindi è giusto avere un sito web, ma deve essere un sito responsive! In questa pagina verrà spiegato come creare un tema WordPress responsive partendo da zero.
Cos’è un tema WordPress responsive e come è composto
Prima di iniziare la guida bisogna fare chiarezza su un paio di aspetti, Innanzi tutto bisogna capire cosa si intende con il termine responsive. Il sito responsive è quello che riesce ad adattarsi automaticamente alla grandezza del display su cui viene visualizzato. Questa tecnica di web design non permette solo di adattare l’aspetto del template, ma consente anche di riorganizzare i contenuti della pagina, in modo da adattarsi al meglio alle esigenze del navigatore: l’utente che naviga su PC ha esigenze completamente diverse da quello che naviga su smartphone. La seconda cosa da chiarire è: cos’è un tema WordPress? WordPress è un CMS, ovvero un content management system, una piattaforma che consente di creare e gestire siti web dinamici; il tema (spesso chiamati anche template) invece può essere considerato come l’abito che si fa indossare al proprio sito: è un insieme di file che di fatto definiscono lo stile ed il design del sito, i colori, il layout delle pagine, le posizioni dei vari widget e così via.
Come abbiamo detto, un tema WordPress è composto da un insieme di file con diverse estensioni (PHP, css, javascript). Solitamente, in un tema WordPress non mancano mai:
- index.php, file fondamentale, senza il quale il sito non potrebbe mai funzionare;
- style.css, il file che contiene le regole che definiscono l’aspetto del sito;
- header.php, il file che corrisponde alla parte superiore del tema;
- single.php, che è il template relativo ai post;
- page.php, il template relativo alle pagine;
- comments.php, il template relativo ai commenti;
- archive.php, il template relativo alla visualizzazione delle categorie;
- sidebar.php, che fa riferimento alla barra laterale del tema:
- footer.php, il file che corrisponde alla parte inferiore del tema;
- functions.php, il file che contiene le funzioni utili per l’estensione di WordPress;
- 404.php, il file relativo alla pagina di errore, quella che compare quando la pagina richiesta non è disponibile.
Come creare la struttura del tema WordPress responsive
Prima di tutto bisogna creare la base del template, rappresentata dalla struttura html ed il foglio di stile css. Il documento HTML dovrà contenere una sezione header (all’interno della quale di solito si inserisce un menù ed il logo del sito), una sezione <div> in cui verrà collocato il contenuto e la sezione della sidebar (spazio che di solito viene riservato ai widget). Una volta creata la struttura con l’HTML si può passare al file css, dove verranno inserite le regole di stile di base per le varie sezioni. E poi si passa alla parte “divertente”, ovvero rendere responsive la pagina appena creata: per farlo si utilizzano le Media Queries. All’interno del css bisogna inserire delle dichiarazioni che identificano il dispositivo e/o una sua caratteristica (ad esempio la risoluzione del suo display) al quale devono essere applicate delle specifiche regole di stile.
Le queries sono composte dall’elemento media-type, che permette di identificare la categoria di dispositivo (screen, print, speech, all) e dall’elemento media-features, che permette di identificare le caratteristiche del dispositivo quali larghezza, altezza (width, min-width, max-width,height, min-height, max-height) o la posizione (landscape, portrait). All’interno delle seguenti parenti graffe vanno inserite le regole di stile specifiche per quel dispositivo e quella risoluzione. Piccolo esempio:
@media screen and (min-width: 480px) and (max-width: 767px) { … }
@media screen and (min-width: 768px) and (max-width: 1279px) { … }
La prima queries fa riferimento ai display degli smartphone o dei tablet con schermi piccoli, mentre la seconda fa riferimento agli schermi di tablet più grandi e notebook. Naturalmente il foglio di stile deve essere incluso nell’HTML.
Ora che la struttura base è pronta bisogna adattare il tutto a WordPress. Ogni pagina generata dal CMS ha una precisa organizzazione modulare: ci sono la testata, la sidebar ed il footer e poi c’è lo spazio destinato al contenuto, in cui vengono richiamati dei file in base alla pagina che l’utente sta visitando (index.php se sta visitando l’homepage, page.php se sta visitando una pagina interna o single.php se sta leggendo un articolo). Bisogna ora creare quelli che sono i file base di ogni template WordPress: la cartella con tutti i file del nostro tema responsive va caricata all’interno della cartella Themes di WordPress. Il file style.css è già stato creato, anche se va completato con una serie di informazioni da inserire all’inizio, quindi bisogna creare i vari file php che abbiamo elencato in precedenza, inserendo il loro contenuto in modo corretto.
Sei confuso e non ne vieni a capo? Non preoccuparti, puoi metterti in contatto con il nostro centro assistenza WordPress in qualunque momento, per chiedere supporto sulle personalizzazione dei temi WordPress.
I software per creare un tema WordPress responsive partendo da zero
Creare un template responsive completamente dal nulla non è una cosa semplicissima se non si ha un po’ di esperienza con i linguaggi HTML, CSS e PHP. Però anche chi non ha molte conoscenze da sviluppatore può creare un tema WordPress responsive partendo da zero: basta ricorrere ai giusti strumenti! Tra i programmi più famosi per questo scopo è possibile menzionare:
- Artisteer, software di web design che permette di creare anche template per siti WordPress ed altri CMS; è disponibile in diverse versioni, con prezzi che vanno dai 50 ai 200 dollari; il programma è solo in lingua inglese;
- Template Toaster, software che consente di progettare siti (anche e-commerce) e temi per WordPress ed altre piattaforme, il tutto senza dover conoscere linguaggi e codici di programmazione;
- Visual Composer, il più famoso editor visuale per WordPress, disponibile in diverse versioni, da quella gratuita a quella per sviluppatori. Con questo programma la creazione e la gestione di un tema responsive diventa ancora più semplice.
Se anche con questi software si incontrano delle difficoltà a creare un tema WordPress responsive partendo da zero, la cosa migliore da fare è utilizzare uno dei template responsive scaricabili dal web, sia gratuiti che a pagamento, e magari personalizzarlo a proprio piacere.
