Creare un tema personalizzato

Ritratto di Vanni

Chi ha la necessità di personalizzare un tema di Drupal 7, normalmente interviene sui CSS e HTML della pagina o modifica qualche riga nei vari file .tpl.php, o meglio ancora, crea un subtheme (sotto tema) e modifica il tema originale in base alle proprie esigenze. E’ più difficile, quindi, aver la necessità di creare un tema da zero (custom theme).

Perché creare un tema personalizzato?

Se non si hanno esigenze molto particolari, personalmente suggerisco di trovare un buon tema tra quelli messi a disposizione dalla community e poi personalizzarlo in base alle proprie necessità.

Però individuo un paio di buone ragioni per provare a crearne uno proprio:

  • la prima è che creando un tema molto semplice si riesce ad entrare nella logica di funzionamento di Drupal
  • la seconda è che apprese le nozioni di base su come si costruisce un tema, avremo una maggiore capacità d’interpretare i file di un tema già pronto e potremo intervenire per modificarlo in maniera più rapida e precisa

Risorse, documentazione e requisiti

Come quasi tutto ciò che riguarda Drupal in rete si trova un’ampia documentazione, ecco alcuni link relativi alla “temizzazione”:

Come funzionano i file di un tema

Normalmente un tema è composto da un insieme di file con estensione .tpl.php i quali vanno a comporre le varie sezioni della pagina che sarà poi visualizzata dal browser.

Il principale è denominato “html.tpl.php” e comprende tutto il codice che costruisce: la dichiarazione del doctype, l’apertura del tag <html>, la sezione <head>….</head>, l’apertura del tag <body>, la chiusare del tag </body> e </html>

Questo file è presente nel core di Drupal nella cartella modules/system e qui ne riporto l’esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>
<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

Come si può vedere, tra i due tag <body> vengono richiamate delle variabili che a loro volta contengono ciò che dovrà essere visualizzato nella pagina. Il contenuto delle variabili, deriverà dal file “page.tpl.php” che a sua volta riceverà il contenuto dal file node.tpl.php e da altri file che compongono le varie sezioni della pagina come ad esempio comment.tpl.php ecc.. Per avere una migliore immagine d’insieme vedere la pagina ufficiale.

Tutti questi file sono presenti nella cartella “modules/system” ma vengono presi in “considerazione” solamente nel caso non siano presenti nella directory del tema utilizzato. Cioè Drupal dà la precedenza ai file .tpl.php presenti nel tema attivo, se non li trova, automaticamente carica quelli presenti nel core.

Come creare un tema personalizzato in Drupal 7

In questo esempio andrò ad illustrare la procedura per creare un semplice tema che si basa sulle regioni presenti di default in Drupal 7.

Cartelle e file

  • Creare in “files/all/themes” una cartella con il nome del tema e che a sua volta contenga una cartella denominata css, una images e una templates (nel mio esempio ho dato nome al tema “temaplus”)
  • Con un editor di testo creare un file nome_tema.info ed inserirlo nella cartella del tema, creare un file style.css ed inserirlo nella cartella “css”, creare un file page.tpl.php ed inserirlo nella cartella “templates”
  • directory del nuovo tema con tutte le cartelle in essa contenute
  • Spesso assieme al file .info si trova un file denominato template.php (lo si trova anche in bartik) non è obbligatorio, ma serve per gestire alcuni processi logici e per gestire il processo di output (ad esempio se vogliamo creare delle regioni che normalmente non sono presenti in Drupal), nel nostro esempio non serve

Compilare il file .info

Il file nome_tema.info è obbligatorio e serve a dare a Drupal tutte le informazioni che riguardano il tema. Alcune info sono obbligatorie e altre facoltative (per elenco completo vedi guida ufficiale).

Tra quelle obbligatorie:

  • Name
  • Description (non obbligatoria ma preferibile)
  • Core

Quindi la prima parte del mio file “temaplus.info” risulta essere:

name = Tema plus
description = Il mio tema personale
screenshot = images/temaplus.png
core = 7.x

Ho inserito anche la path per recuperare lo screenshot del tema.

Poi ho inserito l’elenco delle regioni, quelle presenti di default (da notare che esiste il nome che leggerà la “macchina” nelle parentesi quadre e quello leggibile dagli “umani” dopo il simbolo “=”):

regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer

A questo elenco si possono aggiungere eventuali regioni personalizzate.

Poi ho dichiarato la path per recuperare i fogli di stile CSS e le features (cioè i vari elementi che possono essere visualizzati in una pagina)

stylesheets[all][] = css/style.css

features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = comment_user_verification
features[] = favicon
features[] = main_menu
features[] = secondary_menu

Infine ho inserito dei commenti, i quali per essere considerati tali, devono avere ad inizio riga il simbolo “;”:

; questo potrebbe essere un file JavaScript che si deve inserire:
; scripts[] = il_mio_script.js

Come scritto nel commento, possiamo inserire anche dei file JavaScript che riguardano il nostro tema.

Ecco il mio file d’esempio temaplus.info:

name = Tema plus
description = Il mio tema personale
screenshot = images/temaplus.png
core = 7.x

regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer

stylesheets[all][] = css/style.css

features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = comment_user_verification
features[] = favicon
features[] = main_menu
features[] = secondary_menu

; questo potrebbe essere un file JavaScript che si deve inserire:
; scripts[] = il_mio_script.js

Compilare il file page.tpl.php

Come detto precedentemente, Drupal, per sapere cosa deve inserire all’interno di una pagina va alla ricerca dei file .tpl.php.

In questo esempio creeremo solo il file page.tpl.php che è quello che dice dove posizionare le varie regioni, quali tag HTML inserire ecc.., poi Drupal per sapere come gestire tutti gli altri contenuti, e non trovandoli nella cartella “templates”, andrà a cercarli direttamente nel core. Se si ha la necessità di modificare ad esempio il file node.tpl.php, è sempre bene non toccare il file nel core, ma di copiare lo stesso file in questa cartella, ed a questo, apportare le variazioni.

Cominciamo a creare lo “scheletro” della pagina attraverso dei tag DIV:

<div id="header"></div>
<div id="wrapper"> 
  <div id="highlighted"></div>
  <div id="help"></div>
  <div id="sidebar_left"></div>
  <div id="content"></div>   
  <div id="sidebar_right"></div>
</div>
<div id="footer"></div>

Ora andiamo a costruire le varie regioni (sviluppiamo il contenuto del div “wrapper”):

<div id="wrapper">
  <div id="highlighted">
    <?php if ($page['highlighted']): ?><?php print render($page['highlighted']); ?><?php endif; ?>
  </div>
  <div id="help">
    <?php if ($page['help']): ?><?php print render($page['help']); ?><?php endif; ?>
  </div>
  <?php if ($page['sidebar_first']): ?>
    <div id="sidebar_left">
      <?php print render($page['sidebar_first']); ?>
    </div>
  <?php endif; ?>
  <div id="content">
    <?php print render($page['content']); ?>
  </div>
  <?php if ($page['sidebar_second']): ?>
    <div id="sidebar_left">
      <?php print render($page['sidebar_second']); ?>
    </div>
  <?php endif; ?>
</div>

Come si nota, vengono inseriti dei piccoli snippet in PHP attraverso i quali andiamo a caricare il contenuto di variabili tramite un apposito array (render arrays). Da notare che la chiave inserita tra le parentesi quadre, corrisponde al nome della regione letto dalla macchina, scritto nel file .info

Inoltre, abbiamo inserito i vari div all’interno dei costrutti IF, questo perché se in quella regione non c’è un contenuto, Drupal non visualizzerà nulla. Per chi non ha familiarità con la costruzione di un’istruzione IF scritta in questa maniera può approfondire qui. Potete inserire il costrutto IF, all’interno del tag div (vedi “highlighted”), o che comprenda l’intero tag div (vedi “sidebar_left”); l’unica differenza è che nel primo caso, se in quella regione non c’è un contenuto, comunque verrà creato il div anche se vuoto.

Costruiamo ora l’intestazione della pagina, con logo e nome del sito:

<div id="header">
  <?php if ($logo): ?><a href="<?php print $front_page; ?>"><img src="<?php print $logo; ?>" /></a><?php endif; ?>
  <?php if ($site_name): ?><a href="<?php print $front_page; ?>"><h1><?php print $site_name; ?></h1></a><?php endif; ?>
</div>

Creiamo un costrutto IF per il footer:

<div id="footer">
  <?php if ($page['footer']): ?><?php print render($page['footer']); ?><?php endif; ?>
</div>

Ora manca di assegnare uno spazio della pagina per i messaggi di Drupal (i classici warning o errori)  e per quei pulsanti/link (denominati “action link”) che servono per modificare il contenuto del nodo. Tutto questo lo inseriamo sopra il “div content”:

<?php print render($messages); ?>
    <?php if ($tabs): ?><div><?php print render($tabs); ?></div><?php endif; ?>
    <?php if ($action_links): ?><ul><?php print render($action_links); ?></ul><?php endif; ?>
  </div>

L’ultima cosa è far visualizzare il titolo della pagina all’interno dei tag H1 e andremo ad inserire dentro il “div content”:

<?php if ($title): ?><h1><?php print $title; ?></h1><?php endif; ?>

Da notare che non sempre si usa la funzione render() per stampare una variabile, ma a volte la si stampa direttamente (es: print $front_page), come regola di massima, si usa quella funzione quando si deve stampare un array. Tutte le variabili che abbiamo utilizzato per questo esempio, e molte altre, sono descritte qui.

Ecco il file page.tpl.php completo:

<div id="header">
  <?php if ($logo): ?><a href="<?php print $front_page; ?>"><img src="<?php print $logo; ?>" /></a><?php endif; ?>
  <?php if ($site_name): ?><a href="<?php print $front_page; ?>"><h1><?php print $site_name; ?></h1></a><?php endif; ?>
</div>

<div id="wrapper">
  <div id="highlighted">
    <?php if ($page['highlighted']): ?><?php print render($page['highlighted']); ?><?php endif; ?>
  </div>

  <div id="help">
    <?php if ($page['help']): ?><?php print render($page['help']); ?><?php endif; ?>
  </div>

  <?php if ($page['sidebar_first']): ?>
    <div id="sidebar_left">
      <?php print render($page['sidebar_first']); ?>
    </div>
  <?php endif; ?>

  <?php print render($messages); ?>
    <?php if ($tabs): ?><div><?php print render($tabs); ?></div><?php endif; ?>
    <?php if ($action_links): ?><ul><?php print render($action_links); ?></ul><?php endif; ?>
  </div>

  <div id="content">
    <?php if ($title): ?><h1><?php print $title; ?></h1><?php endif; ?>
    <?php print render($page['content']); ?>
  </div>   

  <?php if ($page['sidebar_second']): ?>
    <div id="sidebar_right">
      <?php print render($page['sidebar_second']); ?>
    </div>
  <?php endif; ?>
</div>

<div id="footer">
  <?php if ($page['footer']): ?><?php print render($page['footer']); ?><?php endif; ?>
</div>

Creare il foglio di stile CSS

A questo punto si deve dare un minimo di stile al nostro tema, compilando il file style.css

Il mio file non ha molto stile…

#header img {float:left;}

#highlighted {background-color: blue; clear: left;}
#help {background-color: pink;}
#sidebar_left {background-color: lightgreen; float: left; width: 25%;}
#content {background-color: yellow; float: left; width: 50%;}
#sidebar_right {background-color: lightgreen; float: left; width: 25%;}

#footer {background-color: black; clear: left; color: white;}

Usare il nuovo tema custom

Ora che abbiamo il creato il nostro tema personalizzato, possiamo usarlo come qualsiasi altro.

  • Andare in admin/appearance e abilitare il nostro tema
  • Possiamo settare la varie impostazioni
  • prima parte della pagina di configurazione del nuovo tema
  • seconda parte della pagina di configurazione del tema custom
  • Ora possiamo andare ad impostare i vari blocchi per le nostre regioni (admin/structure/block)
  • Cliccando su “Demonstrate block regions” otterremo questo pagina di esempio di come vengono visualizzate le "regioni" del tema

Ecco il nostro tema in funzione:

visualizzazione finale di un sito drupal con il tema custom attivo

N.B.:Bisogna sempre ricordarsi di cancellare le cache di Drupal ogni qualvolta si apporta una modifica al tema, altrimenti potremmo non vedere la variazione apportata.

Commenti

creare un tema proprio con wordpress

Ciao, 

io ho installato il software di Wordpress e vorrei creare un sito con un tema tutto mio, senza dover quindi scegliere da quelli che l'applicazione stessa mette a mia disposizione. 

E' possibile creare il tema che voglio anche con Wordpress e non solo con Drupal?

Ritratto di Vanni

Ciao Anna, io non ho mai

Ciao Anna, io non ho mai provato a creare un tema per WP quindi non saprei aiutarti, però è sicuro che puoi creartene uno personale. 

Presumo che la procedura non sia proprio la stessa e di sicuro tutti i nomi delle variabili, delle funzioni ecc.. siano diversi, quindi ti consiglio di trovarti qualche tutorial online specifico per Wordpress, oppure passa a Drupal...wink

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
6 + 4 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.