Eccoci alla fine del nostro percorso con una delle lezioni più attese ed importanti. L'idea è quella di dare un'immagine personale al proprio sito, distinguendolo dagli altri. Per farlo prepariamo i nostri file grafici e diamo sfogo alla creatività!
Personalizzare il layout di PHP Nuke significa modificarne il tema. I temi sono contenuti nella cartella themes e per ciascuno di essi è prevista una sottocartella.
Ogni cartella dei temi contiene almeno due sottocartelle:
- images che ci presenta le immagini del tema scelto
- style che contiene il foglio di stile ovvero uno (o più) file con estensione .css che elenca le caratteristiche del nostro testo come le dimensioni dei caratteri, i colori, etc. ed altre informazioni che possiamo dare per stabilire una regola nello stile della pagina.
Maggiori informazioni sui css le troviamo consultando la Guida HTML.it ai CSS.
Il "cuore" di un tema è il file theme.php che gestisce tutte le inclusioni dei blocchi e dei moduli.
Nella cartella "images" troviamo tutte le immagini e le icone che compongono il tema del sito. Si possono modificare e sostituire a piacimento, fermo restando che dobbiamo comunque tener conto dell'impostazione generale della singola pagina e dell'intero sito.
Proviamo a realizzare un tema personalizzato. Per creare un nuovo tema occorre prima di tutto creare una nuova directory dentro "themes" e poi modificare il file theme.php. Ad esempio, supponendo di voler creare il tema "MioSito", creiamo la cartella "MioSito":
Usiamo un editor HTML (come ad esempio Dreamweaver) ed editiamo il file theme.php dove sono definite le seguenti funzioni (che descriveremo in dettaglio in seguito):
function OpenTable()
function CloseTable()
function OpenTable2()
function CloseTable2()
function FormatStory($thetext, $notes, $aid, $informant)
function themeheader()
function themefooter()
function themeindex($aid, $informant, $time, $title, $counter, $topic, $thetext, $notes, $morelink, $topicname, $topicimage, $topictext)
function themearticle ($aid, $informant, $time, $title, $thetext,
$topic, $topicname, $topicimage, $topictext)
function themesidebox($title, $content)
Queste funzioni produrranno il codice HTML necessario per visualizzare le varie parti del tema.
Per illustrare il procedimento realizziamo le varie funzioni per ottenere un semplice tema. Si tratta di un tema volutamente molto semplice, creato esclusivamente a scopo dimostrativo, che non fa uso di grafica, mantiene volutamente codice HTML molto semplice ed utilizza il colore, nel codice, solo per evidenziare le varie parti. Utile per poi essere modificato e ampliato con i vostri gusti grafici.
themeheader() e themefooter() servono ad impostare l'intestazione (header) e il piè di pagina (footer) del nostro layout.
In generale è responsabilità di themeheader() creare la tabella principale del sito. Questa tabella ripropone la classica struttura a tre colonne, variandola si possono ottenere altre strutture. Inoltre questa funzione deve anche occuparsi di creare i blocchi laterali, o almeno il blocco di sinistra (che verrà visualizzato prima del modulo al centro) chiamando esplicitamente la funzione blocks(left). Ecco il codice di esempio:
function themeheader() {
// intestazione
echo "<body bgcolor='#abcdef' text='000000' link='red' vlink='green'>";
echo "<table border='1' align='center' width='100%'>";
echo "<tr><td align='center' bgcolor='green'>";
echo "<h1>Tema PHPNuke di Michele Sciabarrà</h1>";
echo "</td></tr></table>n";
// corpo - tre colonne classico
echo "<table border='1' width='100%'><tr>n";
echo "<td valign='top' align='center' bgcolor='#abcd80'>";
blocks(left);
echo "</td><td valign='top' width='100%'>";
}
La funzione themefooter() chiude le tabelle aperte da themeheader(). Soffermiamoci a considerare una cosa importante: generalmente l'indice del portale è a tre colonne ma il dettaglio di un articolo è preferibile che sia a due colonne. Infatti quando viene visualizzato un articolo, esso viene affiancato da blocchi quali gli articoli correlati. Per questo motivo è bene che il footer non crei il blocco di destra se si sta visualizzando un articolo.
Il modo di operare è semplice: controllare la variabile $index e visualizzare la colonna di destra solamente quando è falsa. Il codice è il seguente:
function themefooter(){
global $index;
if($index == 1) {
echo "</td>n";
echo "<td valign='top' bgcolor='abcd80'>";
blocks(right);
}
echo "</td></tr></table>n";
footmsg();
echo "</body>";
}
La funzione themesidebox($title, $content) imposta la grafica di visualizzazione di un blocco laterale. Poiché non ha particolari dipendenze, è piuttosto semplice ed immediata. Ecco il codice:
function themesidebox($title, $content) {
echo "<table align='center' border='1'>n";
echo "<tr><th bgcolor='green'>$title</th></tr>n";
echo "<tr><td valign='top'>$content</td></tr>n";
echo "</table>";
}
Analogamente, OpenTable() e CloseTable() si limitano ad aprire e chiudere una tabella e sono utilizzati per visualizzare dei messaggi. Il codice ancora più semplice:
function OpenTable() {
echo "<table border='1' align='center'>";
echo "<tr><td valign='top'>";
}
function CloseTable() {
echo "</td></tr></table>n";
}
Un po' più complesso è il codice di themearticle() e themeindex(...) perché i parametri sono numerosi. Il codice consiste infatti essenzialmente nella formattazione in html dei vari parametri forniti. La differenza tra le due funzioni sta nel fatto che la prima visualizza l'articolo per intero (ovvero sia la parte testo che la parte testo esteso), mentre la seconda visualizza solamente la parte di testo più altri elementi quali link, l'ora di invio dell'articolo ecc. Siccome le due funzioni sono molto simili mostriamo il codice solamente del primo:
function themearticle ($aid, $informant, $time, $title, $thetext, $topic, $topicname, $topicimage, $topictext)
{
echo "<table border='1'>n";
echo "<tr><th bgcolor='#abcd80'>$title</th></tr>n";
echo "<tr><td><b>$topictext</b> - <i>$time</i>";
echo "<img alt='$topicname' align='left' src='images/topics/$topicimage'>n";
FormatStory($thetext, $notes, $aid, $informant);
echo "</td></tr></table>n";
}
Due osservazioni:
- le immagini che rappresentano l'argomento si trovano nella directory images/topics, dove vengono poste dal componente "Gestore di Argomenti";
- si usa la funzione FormatStory, che viene utilizzata anche da themeindex(). Il codice di FormatStory è semplicemente:
function FormatStory($thetext, $notes, $aid, $informant)
{
echo "<b>$informant</b> $aid<br>";
echo "$thetext<br>";
echo "<i>$notes</i>";
}
Per quanto riguarda la formattazione del testo e le sue proprietà dobbiamo fare riferimento come visto ai fogli di stile (file .css) ma all'interno di theme.php possiamo trovare alcune indicazioni al testo, sotto forma di variabili che possono essere la prima indicazione nel codice della pagina:
$bgcolor1 = "#ffffff";
$bgcolor2 = "#9cbee6";
$bgcolor3 = "#d3e2ea";
$bgcolor4 = "#0E3259";
$textcolor1 = "#000000";
$textcolor2 = "#000000";
Il consiglio è quello di partire sempre da un tema esistente che rispecchi in linea di massima il nostro obiettivo per poi modificarlo a seconda delle nostre esigenze.
