Creare un sotto tema in 15 minuti.

5 contenuti / 0 new
Ultimo contenuto
Creare un sotto tema in 15 minuti.
AllegatoDimensione
Package icon drupalitalia.zip2.43 KB

Prima di aggiungere in documentazione, faccio un giro di boa qui sul processo di creare un sotto tema proprio.
Ogni suggerimento, correzione di errori, sono i benvenuti.

L'esempio crea un sotto tema da Garland, ma è sufficientemente generico per qualsiasi tema (spero).

1. Decidere il nome.
Un nome a singola parola va bene, seguendo le regole per i nomi delle variabili di PHP. Ho scelto drupalitalia.

2. Creare il percorso per il tema.
Puoi metterlo in sites/all/themes o sites/default/themes. Ho scelto sites/all/themes/drupalitalia. Controlla che i permessi siano identici rispetto a quelli di themes/garland. Per riuscire ad editare i file potrebbe essere necessario cambiare il gruppo, e mettere i permessi a 775.

3. Preparare il tema.
Bisogna creare solo pochi file per il tema. Il primo, e più importante, è drupalitalia.info. Il file deve usare il nome del tema - drupalitalia, e l'estensione .info. Qui dobbiamo specificare una serie di parametri del tema (vedi http://drupal.org/node/171205).

name = Drupalitalia - modificato Garland
description = Esempio di sotto-tema per DrupalItalia.org.
base theme = garland
core = 6.x
engine = phptemplate
stylesheets[all][] = drupalitalia.css
scripts[] = drupalitalia.js
regions[left]    = Colonna sinistra
regions[right]   = Colonna destra
regions[content] = Contenuto
regions[header]  = Intestazione
regions[footer]  = Piè pagina
regions[drupalitalia]  = Speciale per questo tema

Tutto copiato dal tema originale, con qualche eccezione:

  • base theme bisogna pur dire da quale tema vogliamo ereditare la funzionalità - devi usare la nome 'macchina' cioè il nome usato per il file .info
  • stylesheets[all][] oltre ai file CSS dell'originale specifichiamo anche uno nostro.
  • scripts[] oltre ai file JavaScript dell'originale (se ci sono) specifichiamo anche uno nostro.
  • regions[drupalitalia] oltre ai famosi cinque aggiungiamo anche una regione nostra (perche no?)
    • Il secondo file sarà proprio il file CSS che abbiamo appena definito, drupalitalia.css - ovviamente possiamo darlo un nome qualsiasi, basta che corresponda con quello definito nel file .info:

      /* CSS per il nostro tema */
      body {
        font-family: monospace;
      }

      Cambiamo il font per dare un feedback visivo e per controllare che tutto funziona - poi lo elimineremo.

      Il terzo file sarà proprio il file JavaScript che abbiamo definito, drupalitalia.js - di nuovo possiamo dare un nome qualsiasi, basta che corresponda con quello definito nel file .info:

      /* JavaScript per la nostra tema */

      E' vuoto per il momento, magari più avanti avremo bisogno di mettere codice qui.

      Il prossimo file è template.php, che finirà per contenere codice di temizzazione, se necessario:

      <?php
      // Codice di temizzazione specifico per la tema
      /**
      * Override o inserire variabili per page.tpl.php.
      * Vedi http://api.drupal.org/api/function/template_preprocess_page/6
      */
      function drupalitalia_preprocess_page(&$vars) {
        // vuota per ora...
      }
      /**
      * Override o inserire variabili per node.tpl.php.
      * Vedi http://api.drupal.org/api/function/template_preprocess_node/6
      */
      function drupalitalia_preprocess_node(&$vars) {
        // vuota per ora...
      }

      Altro file 'vuoto' per il momento. Ho semplicemente aggiunto due funzioni di cui quasi sicuramente avremo bisogno in futuro.
      Si, manca un ?> finale - non è un errore, fidati.

      In fine dovremo modificare page.tpl.php aggiungendo la regione che abbiamo creato. Per fare questo, basta copiare page.tpl.php da themes/garland in sites/all/themes/drupalitalia. E' un file grosso, quindi non metto tutto il contenuto qui, solo le ultime righe dove aggiungiamo nostra regione:

          ...
          </div> <!-- /container -->
        </div>
        <!-- nostra regione aggiunto -->
        <div id="special-region" class="clear-block"><?php print $drupalitalia; ?></div>
      <!-- /layout -->
        <?php print $closure ?>
        </body>
      </html>

      4. Testare la tema.
      Fatto. Adesso andiamo in admin/build/themes, dove troviamo un nuovo tema (oooh) chiamato "Drupalitalia - modificato Garland". Clicca su attiva e predefinito, poi 'Salva configurazione' (incrociando le dita). Se tutto va bene, la maggior parte del testo sarà monospace come questo - il nostro controllo visivo che tutto va bene.

      Poi controlliamo la nostra nuova regione. Andiamo in admin/build/block/list/drupalitalia dove, nella lista di regioni, prima di 'Disattivato' troviamo 'Speciale per questo tema' mettiamo dentro 'Realizzato con Drupal (module: system)' poi 'Salva blocchi' et voilà mes amis! La goccia è in fondo alla pagina.

      Ma c'è un piccolo problema - abbiamo perso il logo nel header. Basta copiare logo.png da themes/garland in sites/all/themes/drupalitalia.

      Per i pigri tutti i file sono in allegato. Formatto zip per gli appasionati di Windows.

Ottimo per chi come me capisce la metà di quello che legge in inglese (quando va bene) che devo dire... Grande!!! :-)

@John
Grazie per la tua sempre e costante disponibilità.
Un piccolo appunto John, visto che finora nessuno te lo ha detto: Tema è maschile, anche se il tuo italiano è quasi sempre più perfetto.
Giovanni

Grazie john, ho corretto alcune cose, in seguito ci sarà una seconda revisione, ma mi pare un grande intervento! Pronto per la doc :P

Go PowerJohn Go!

ps: volendo puoi agganciarlo qui:
http://www.drupalitalia.org/node/7609

@krima - grazie per il supporto morale
@giovanni - grazie della correzione. Oggi ho imparato "un altro" senza apostrofo, e tema che è un altro eccezzione alla regola, come problema.
@psicomante - grazie delle correzioni aspetto la seconda 'lisciata'. Dal link sno in accordo per la sezione, ma questo non è creare un nuovo tema (nel senso di 'ex novo') ma estendere uno già esistente.

Più imparo, più dubito.