Convertire o creare un tema per Drupal 7, guida rapida

La cosa che serve di sicuro ad un sito è un template fatto su misura, ecco allora una rapida guida per creare o convertire il nostro tema per Drupal 7. Questa guida è rivolta a chi sa già creare temi per Drupal 6 e vuole convertire il proprio tema per Drupal 7 oppure vuole creare il proprio tema per Drupal 7 avendone già creati altri per Drupal 6.

Il primo cambiamento è che la regione content è obbligatoria nel file .info, senza la regione dichiarata non sarà possibile procedere all’attivazione del tema.
I fogli di stile, i js e quant’altro vanno dichiarati nel file .info, non sarà più possible dichiararli internamente alla pagina.

La parte iniziale della nostra page.tpl.php sarà

<?php
print render($page[‘$page_top’]);
?>

(sostituisce da <html >fino a <body>, anche il doctype, ecco il perchè dei file css e js obbligatori nel .info)
e alla fine:

<?php
print render($page[‘$page_bottom’]);
?>

(sostituisce closure, </html> e </body>, per sapere come modificare il doctype e le parti “mancanti guardate qui” )
le regioni verranno richiamate nel template con:

<?php
if ($page[‘sidebar’]):
?>

<?php
print render($page[‘sidebar’]);
?>

<?php
endif;
?>

Dove la regione dichiarata sarà sidebar

le tabs, di modifica, e vista, cioè quelle che ci permettono di modificare il contenuto saranno chiamate con:

<?php
print render($tabs);
?>

e i messaggi di aiuto con

<?php
endif;
?>

<?php
if ($show_messages && !empty($messages)):
?>

<?php
echo $messages;
?>

<?php
endif;
?>

il menu primario, che cambia nome sarà richiamato con:

<?php
if ($main_menu):
?>

<?php
print theme(‘links__system_main_menu’, array(
‘links’ => $main_menu,
‘attributes’ => array(
‘id’ => ‘main-menu-links’,
‘class’ => array(‘links’, ‘clearfix’),
),
‘heading’ => array(
‘text’ => t(‘Main menu’),
‘level’ => ‘h2’,
‘class’ => array(‘element-invisible’),
),
));
?>

<?php
endif;
?>

Ovviamente ho inserito tutti i controlli con l’if, in modo tale che se l’elemento non è presente la regione verrà nascosta.

Maggiori dettagli sulla conversione sono presenti qui.

Una guida dettagliata per creare temi per Drupal 6 e per Drupal 7 la potete trovare a questo indirizzo.

Mentre la documentazione con tutte le variabili a disposizione per creare il vostro tema per Drupal 7 la trovate qui.

E per finire una pagina di esempio per cominciare la potete recuperare da qui.

Ecco inoltre un mio piccolo esempio di tema, provate a chiamare il contenuto qui sotto drupalita.info:

name = drupalita
description = “Tema per un sito che parla di Drupal”
core = 7.x
engine = phptemplate

regions[sopracontenuto] = sopra il contenuto
regions[sottocontenuto] = sotto il contenuto
regions[menutop] = menu in alto
regions[menu] = menu a fascia
regions[sidebar] = sidebar a destra
regions[footer] = footer
;regions[help]                = Help
;regions[highlighted]         = Highlighted
regions[content]             = Content

stylesheets[all][] = css/960.css
stylesheets[all][] = css/text.css
stylesheets[all][] = css/reset.css
stylesheets[all][] = css/stile.css
stylesheets[print][] = css/print.css

Questo contenuto chiamatelo con page.tpl.php:

<?php print render($page[‘$page_top’]); ?>

<div class=”container_12″>
<div class=”grid_2″><div class=”clear”></div>
<?php if ($logo) { ?><a href=”<?php print $base_path ?>” title=”<?php print t(‘Home’) ?>”><img src=”<?php print $logo ?>” alt=”<?php print t(‘Home’) ?>” /></a><?php } ?>
</div>
<div class=”grid_10″>
<div class=”menutab”>
<?php if ($page[‘menutop’]): ?>
<?php print render($page[‘menutop’]); ?>
<?php endif; ?>
</div>

<?php if ($site_name) { ?><h1 class=’site-name’><a href=”<?php print $base_path ?>” title=”<?php print t(‘Home’) ?>”><?php print $site_name ?></a></h1><?php } ?>
<?php if ($site_slogan) { ?><div class=’site-slogan’><?php print $site_slogan ?></div><?php } ?>

</div>
<div class=”clear”></div>
<br /><br /><br /><br /><br />
<div class=”grid_12″>
<?php if ($page[‘menu’]): ?>
<?php print render($page[‘menu’]); ?>
<?php endif; ?>

</div>
<div class=”clear”></div>

<div class=”grid_8″>
<?php print render($tabs); ?>

<?php if ($page[‘sopracontenuto’]): ?>
<?php print render($page[‘sopracontenuto’]); ?>
<?php endif; ?>

<?php if ($show_messages && !empty($messages)): ?>
<?php echo $messages; ?>
<?php endif; ?>

<?php if ($page[‘content’]): ?>
<?php echo render($page[‘content’]); ?>
<?php endif; ?>

<?php if ($page[‘sottocontenuto’]): ?>
<?php print render($page[‘sottocontenuto’]); ?>
<?php endif; ?>
</div>

<div class=”grid_4″>
<?php if ($page[‘sidebar’]): ?>
<?php print render($page[‘sidebar’]); ?>
<?php endif; ?>
</div>
<div class=”clear”></div>
<div class=”grid_12″>

<?php if ($page[‘footer’]): ?>
<?php print render($page[‘footer’]); ?>
<?php endif; ?>
</div>

<div class=”clear”></div>
<?php print render($page[‘$page_bottom’]); ?>

</div>
<div class=”clear”></div>

Scaricate 960 grid e mettete tutti i file dentro una cartella chiamata css.

Inserite tutti questi file in una cartella di nome drupalita e copiatela dentro sites/all/themes.

Avrete così il vostro sito con drupal, in cui nella cartella sites/all/themes ci sarà una cartella denominata drupalita, che al suo interno ha 2 file: drupalita.info e page.tpl.php, e una cartella css che conterrà 960.css, reset.css e text.css, presi da 960 grid e il vostrofoglio di stile stile.css, nel quale opererete i cambiamenti.

Ora recatevi nella pagina di amministrazione di Drupal e andate su Appearance. Cercate il vostro tema e cliccate su Enable, aspettate che si carichi nuovamente la pagina e nella scelta in alto cliccate su Set to default. Così facendo dovreste vedere il vostro tema nel vostro sito.

Adesso con Firebug potrete personalizzarlo senza troppi problemi.

Leave a Reply

Your email address will not be published. Required fields are marked *