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?
- Configurazione standard dei file e delle cartelle di un tema personalizzato
- Creazione di un mockup con un editor grafico
- Testata (header)
- 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: css, images e templates. Adesso 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:
name = MySite description = Tema grafico personalizzato per il mio nuovo sito web. core = 7.x stylesheets[all][] = CSS/style.CSS regions[user_menu] = User Menu regions[main_menu] = Main Menu regions[content] = Content
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.
<?php print render($page['content']); ?>
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:
<div class="black-header"> <div class="mysite-user-menu"> <?php if ($logged_in): ?> <?php print render($page['user_menu']); ?> <?php else: ?> <ul> <li class="menu"><a href="<?php base_path(); ?>user/login">Log In</a></li> </ul> <?php endif; ?> </div> </div> <?php print render($page['content']); ?>
e poi scriviamo questo codice nel file style.css
body {
margin:0px;
}
/* barra nera superiore */
.black-header {
height:50px;
background-color:#333;
}
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
/* User Menu */
.black-header h2, .mysite-main-menu h2 {
display:none;
}
.black-header ul, .mysite-main-menu ul {
list-style-type:none !important;
margin:0;
padding:0;
padding-top:12px;
padding-right:30px;
float:right;
}
.black-header li, .mysite-main-menu li {
display:inline;
}
.mysite-user-menu {
width:960px;
margin-left:auto;
margin-right:auto;
}
.mysite-user-menu .menu a:link {color:#FFF; text-decoration: none;}
.mysite-user-menu .menu a:visited {color:#FFF; text-decoration: none;}
.mysite-user-menu .menu a:hover {color:#FFF; text-decoration: underline;}
.mysite-user-menu .menu a:active {color:#FFF; text-decoration: none;}
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:
<div class="mysite-header clearfix">
<div class="logo-div">
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
</div>
<div class="mysite-main-menu">
<?php print render($page['main_menu']); ?>
</div>
</div>
Ora possiamo aggiungere il codice al file style.css per visualizzare il logo e il menu principale:
/* header section */
.mysite-header {
width:960px;
height:100px;
margin-left:auto;
margin-right:auto;
}
/* Logo */
.logo-div {
float:left;
}
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
/* Main Menu */
.mysite-main-menu {
float:right;
}
.mysite-main-menu h2 {
display:none;
}
.mysite-main-menu ul {
list-style-type:none !important;
margin:0;
padding:0;
padding-top:40px;
padding-right:30px;
}
.mysite-main-menu li {
display:inline;
}
.mysite-main-menu .menu a:link {color:#4d4d4d; text-decoration: none;}
.mysite-main-menu .menu a:visited {color:#4d4d4d; text-decoration: none;}
.mysite-main-menu .menu a:hover {color:#4d4d4d; text-decoration: underline;}
.mysite-main-menu .menu a:active {color:#4d4d4d; text-decoration: none;}
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 :
<div class="mysite-content-container-div clearfix"> <?php if ($messages): ?> <div id="messages"> <div class="section clearfix"> <?php print $messages; ?> </div> </div> <?php endif; ?> <?php if ($breadcrumb): ?> <div id="breadcrumb"><?php print $breadcrumb; ?></div> <?php endif; ?> <h1><?php print $title; ?></h1> <?php print render($page['content']); ?> </div>
Quindi aggiungere in style.css il seguente codice:
/* main content */
.scratch-content-container-div {
width:960px;
margin-left:auto;
margin-right:auto;
}
/* breadcrumb */
#breadcrumb {
margin-top:15px;
}
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:
<div class="mysite-footer"> <hr /> <div class="mysite-footer-text"> © 2014 MySite. All rights reserved. </div> </div>
e questo nel file style.css :
/* footer */
.mysite-footer {
width:960px;
margin-left:auto;
margin-right:auto;
color:#4d4d4d;
text-align:center;
}
Ok, adesso il codice è completo.
