Drupal: Come creare un Tema da Zero

Tema Drupal
Tempo stimato di lettura: 6 minuti, 39 secondi
Pubblicato il 22 luglio 2014

Questo è l’ennesimo tutorial su come si realizza un tema grafico da zero per Drupal, cosa ha quindi di speciale? A differenza degli altri in giro per il web, questo l’ho scritto io, niente di più niente di meno, è per veri dummies quindi semplice e pratico allo stesso tempo. È la base della base più che sufficiente per capire la logica di funzionamento dei “themes” che troviamo in giro e di conseguenza basta poter iniziare successivamente a produrre i propri personalizzati in totale tranquillità partendo soprattutto da temi html semplici che sono distribuiti gratuitamente in giro su tanti siti di webdesign. La bellezza di Drupal sta proprio nel fatto che strutturato e definito il tema nelle sue sezioni principali e negli spazi di inserimento dei blocchi di contenuto, grazie ai migliaia di moduli che ci sono e che sono in continua evoluzione, al design non ci si pensa più e possiamo dedicarci in tutta tranquillità a programmare il sito in tutte le sue caratteristiche e funzionalità.

Cosa tratteremo in questo tutorial?

  1. Configurazione standard dei file e delle cartelle di un tema personalizzato
  2. Creazione di un mockup con un editor grafico
  3. Testata (header)
  4. Piè di pagina (footer)

Condizioni:

  • Ambiente di sviluppo predisposto su l’ultima versione di Drupal 7 in italiano appena installata (D7).
  • Conoscenza del linguaggio HTML di base e dei CSS.
  • Saper come installare e attivare un modulo non fornito nell’installazione di base di D7.

Importante: leggiti tutti i passaggi e capisci la logica di funzionamento, in fondo potrai poi salvarti in una volta sola tutti i file riportati per fare le tue prove con calma.

Struttura delle cartelle

Per cominciare organizziamo le cartelle dove imposteremo il setup del nuovo tema. Ogni tema ha bisogno di un nome, in questo tutorial chiameremo il tema “MySite”, andiamo nella nostra cartella ..site/all una cartella chiamata modules e dentro di questa una chiamata mysite, il risultato dovrà essere il seguente:  ../sites/all/themes/mysite all’interno di quest’ultima crea le seguenti tre cartelle: cssimages e  templatesAdesso abbiamo bisogno di tutti i file necessari per creare il vostro nuovo tema: crea con un editor di testo all’interno di mysite il file mysite.info poi dentro la cartella css il file style.css ed infine nella cartella templates il file page.tpl.php

Creazione del mock-up

Prima di iniziare qualsiasi stesura di codice creeremo un disegno del mockup con un programma di editor vettoriale, per questo tutorial ho usato Adobe Illustrator CC. Le dimensioni della pagina le ho fissate a 1500px per 5000px solo per ottenere un ottimo spazio per lavorare. Ci andiamo a creare così:

  • 1 per l’architettura della homepage
  • 1 per il logo

File di configurazione [mysite.info]

Ora che sappiamo come dovrà essere il sito possiamo iniziare la codifica. Apriamo quindi il file mysite.info (questo file contiene tutte le informazioni che D7 ha bisogno di conoscere per far funzionare il nostro tema) e aggiungiamo queste righe:

Capiamo adesso cosa c’è scritto riga per riga:

  • Il nome con ci abbiamo battezzato il tema.
  • La descrizione del tema.
  • Con quale versione di Drupal questo tema è compatibile.
  • Questa linea indica dove abbiamo il foglio di stile CSS principale nella nostra cartella del tema.
  • Ogni area è dove è possibile aggiungere blocchi di contenuto per le vostre pagine. Consideriamo e ricordiamoci sempre che tutti contenuti di un sito in Drupal stanno dentro dei blocchi, anche il contenuto della pagina principale.

Dopo aver inserito questi parametri chiudiamo il file .info e apriamo page.tpl.php che si trova nella cartella templates all’interno della cartella del nostro tema. Drupal utilizza un sistema PHP Template che invia delle variabili alle pagine che si desidera visualizzare. Per un elenco delle variabili disponibili, consultare la pagina Drupal Api. Non dobbiamo per forza usarle tutte, ma ci sono alcune variabili molto importanti ed interessanti, nelle descrizioni si può subito capire le varie funzioni di queste.

Struttura HTML [page.tpl.php]

Questo file è dove vivrà tutto il codice HTML. Non abbiamo bisogno di pasticciare con l’aggiunta del <html> e <body> in quanto questi sono già curati dal file html.tpl.php presente nel core di D7. Abbiamo adesso bisogno solo di preoccuparsi di montare i pezzi della pagina. Aggiungiamo il minimo indispensabile per ottenere che pagina per visualizzare i dati prima di aggiungere altri, inserire quindi il codice riportato di seguito al page.tpl.php file e poi salvarlo.

NB: è fondamentale salvare questo come un file php.

Attivazione del tema

Ora, è il momento di attivare il tema. Effettua il login come amministratore e clicca nel menu nero superiore sul collegamento “Aspetto” nell’elenco di temi che troverai cerca il nostro tema “MySite” e fai clic su “Abilita e imposta come predefinito”. Dopo aver salvato assicurati di avere sempre una scheda del browser con la sezione di amministrazione aperta, mentre per la visualizzazione pubblica consiglio di utilizzare un altro browser. Apriamo quindi la hompage del sito in un altra scheda o browser, vedremo così che conterrà le pochissime informazioni a disposizione che li sono state fornite dai parametri finora inseriti. Diamo un’occhiata veloce al mock-up realizzato e passiamo adesso a costruire la barra nera nella parte superiore con il link di login. Aggiungiamo nel file page.tpl.php il seguente codice:

e poi scriviamo questo codice nel file style.css

Il codice inserito nel file page.tpl.php ha un pò di logica php, in particolare si evidenzia un if ed un else  che serve per verificare se l’utente è connesso al sito o meno, al fine di mostrare i link corretti. Il menu utente è già configurato di default in Drupal e ora abbiamo solo bisogno di impostarlo come un blocco nella barra nera superiore. Dando uno sguardo al file mysite.info troverete questa riga “regions[user_menu] = User Menu”, questa è la sezione che abbiamo appena aggiunto al modello ed è dove il blocco del menu apparirà. Nella barra di navigazione amministrativa del sito cliccare su Struttura> Blocchi e impostare il blocco Menu utente nell’area Menu Utente e poi salvare. Adesso aggiorna la pagina con la homepage e vedrai prendere forma alle istruzioni appena inserite. Spostiamo quindi i link sulla destra aggiungendo il seguente codice al file style.css

Aggiorniamo nuovamente la homepage e vedremo il posizionamento corretto dei link.

Aggiunta del logo e del menù principale

Completata questa prima parte cominciamo a lavorare sul logo e sul menu principale, entrambi andranno in una sezione della testata, header.  Salviamo il logo realizzato come mysite_logo.png ed inseriamolo nella cartella / sites / all / themes / custom / mysite / images . Ora clicchiamo su “Aspetto > Impostazioni” e deselezioniamo la casella “Usa il logo predefinito” e impostiamo il “Percorso personalizzato logo” con sites / all / themes / custom / mysite / images / mysite_logo.png e salvare. Aggiungiamo adesso a page.tpl.php il seguente codice:

Ora possiamo aggiungere il codice al file style.css per visualizzare il logo e il menu principale:

Dopo aver inserito il codice, è necessario attivare il blocco nella sezione “Menu principale” del sito. Ricorda che abbiamo creato questa sezione nel file scratch.info. Aggiorna la pagina e dovrai veder apparire il logo ma una in posizione sbagliata, copia quindi questo codice nel file style.css

Adesso l’header del tuo sito è completo di logo e di menu esattamente come era disegnato nel mockup.

Sezione principale dei contenuti

Ora abbiamo bisogno di creare la sezione principale dei contenuti, content area, che consiste nella sezione che contiene il titolo e il corpo del contenuto. Questo è il codice per creare la pagina principale da inserire nel file page.tpl.php :

Quindi aggiungere in style.css il seguente codice:

Creazione del footer

Quel che resta adesso è creare il piè di pagina con i dettagli sul copyright del sito. Inserire nel file page.tpl.php questo codice:

e questo nel file style.css :

Ok, adesso il codice è completo.

Shares