<< προηγούμενο: Δημιουργία template (μέρος 1º)
Δημιουργούμε ένα φάκελο `aegean` εκτός του Odyssey (πχ στην επιφάνεια εργασίας).
Αποσυμπιέζουμε τα περιεχόμενα του starter template zip αρχείου, που θα βρείτε εδώ
Σημείωση: μπορούμε εύκολα να δημιουργήσουμε το δικό μας favicon.ico στο
Υποθέτοντας πως έχουμε ήδη δημιουργήσει ένα στατικό template σε html/css φροντίζουμε να αντιγράψουμε τα css, js και image files στους αντίστοιχους φακέλους του template μας. Να σημειωθεί πως η τελευταία έκδοση της jQuery φορτώνεται αυτόματα στο template.
Κάποια αρχεία που απαρτίζουν το template μας, καθώς και κάθε position (slot) που δημιουργούμε για εγκατάσταση ενθεμάτων, θα πρέπει να τα συμπεριλαμβάνουμε στο xml μας.
Τα αρχεία αυτά είναι όσα βρίσκονται στο root, τα js και τα css αρχεία. Τις εικόνες μας πρέπει απλά να τις έχουμε στον φάκελο images χωρίς να χρειαστεί να τις αναφέρουμε στο xml της εγκατάστασης.
Αν υποθέσουμε πως έχουμε στο template μας τα αρχεία styles.css και slider.js, τότε το xml μας θα είχε την ακόλουθη μορφή:
<?xml version="1.0" encoding="utf-8"?>
<install type="template">
<name>aegean</name>
<title>Aegean Odyssey Template</title>
<protected>0</protected>
<files>
<file type="root">favicon.ico</file>
<file type="root">index.php</file>
<file type="root">meta.txt</file>
<file type="root">globalCSSFiles.txt</file>
<file type="root">globalJsFiles.txt</file>
<file type="root">view_odyssey_index.php</file>
<file type="css" role="common">styles.css</file>
<file type="js" role="common">slider.js</file>
</files>
<slots>
</slots>
</install>
Στο meta.txt θα συμπεριλάβουμε όλα τα meta tags που θέλουμε να εμφανίζονται σε όλες τις σελίδες του template μας.
Παράδειγμα meta.txt
<meta name="robots" content="all"> <link rel="shortcut icon" href="templates/aegean/favicon.ico">
Στα globalCSSFiles.txt και globalJsFiles.txt συμπεριλαμβάνουμε τα paths των αντίστοιχων css και javascript αρχείων του Odyssey System αν θέλουμε να τα συμπεριλάβουμε στο template μας.
Παράδειγμα globalCSSFiles.txt
js/fancybox/jquery.fancybox-1.3.4.css css/odyssey.css css/ui/jquery-ui.css
Παράδειγμα globalJsFiles.txt
js/odyssey.js js/swfobject/swfobject.js js/fancybox/jquery.fancybox-1.3.4.pack.js js/jquery-ui.js
Προσοχή, τα αρχεία αυτά είναι αποθηκευμένα εκτός του template σας. Τα δικά σας css & js αρχεία θα πρέπει να τα συμπεριλαμβάνετε στο xml και στο root φάκελο του template ώστε να δημιουργηθούν αυτόματα στους κατάλληλους φακέλους (js και css) κατά την εγκατάσταση!
Αν χρειάζεστε και υποφακέλους μέσα στους js και css φακέλους, απλά δημιουργήστε τους με το κατάλληλο περιεχόμενο.
Τέλος, ανοίγουμε στον αγαπημένο μας editor (Notepad++, Notepad2, Dreamweaver κλπ) το index.php
Στη συνέχεια κάνετε paste τα περιεχόμενα που βρίσκονται ανάμεσα στα tags <body> και </body>, του δικού σας index.html (ή όπως αλλιώς το έχετε ονομάσει) μετά το πρώτο block php κώδικα.
Τα όποια περιεχόμενα έχετε στο χώρο που θα φιλοξενεί το εκάστοτε θέμα (μεταβλητό περιεχόμενο), διαγράψτε τα και στη θέση τους βάλτε το ακόλουθο block php κώδικα:
<?php
include(
($this->section == "odyssey_index" && $this->view == "odyssey_index")
? $p."view_odyssey_index.php"
: $p."view_".$this->section."_".$this->view.".php"
);
?>
Ανακεφαλαιώνοντας αν υποθέσουμε πως έχουμε ένα πολύ απλό template με το ακόλουθο html markup:
το τελικό index.php θα πρέπει να είναι:
<?php
/*
Odyssey template index file
node must always be "index.php"
Do not remove the following system code block
***************************** Start ******************************
*/
defined('CMS') or die("This file cannot run this way!");
global $library, $safeRequest, $urlExtension;
foreach($library as $class){global ${$class};}
foreach($safeRequest as $key=>$value){${$key} = $value;}
if($this){
$p = $this->getTemplatePath(); // use the $p shortcut to refer to the template path
$settings = $this->template_settings; // any template's settings
// example of settings reference: $settings->color_palete;
}
/*
***************************** End *******************************
*/
?>
<?php
include(
($this->section == "odyssey_index" && $this->view == "odyssey_index")
? $p."view_odyssey_index.php"
: $p."view_".$this->section."_".$this->view.".php"
);
?>
Κάποια τελευταία πράγματα που πρέπει να προσέξουμε είναι πως πρέπει να κάνουμε localization για να είμαστε έτοιμοι να προσθέσουμε αργότερα και άλλες γλώσσες, καθώς επίσης να ορίσουμε στις εικόνες μας το path του template μας (αφού το odyssey τρέχει από το root του domain μας).
Το path μας προσφέρεται στην μεταβλητή $p οπότε το image πρέπει να αναφερθεί ως
Όπως έχει αναφερθεί αναλυτικά στην ενότητα πολυγλωσσικότητα, στα images που χρειάζονται localization, πρέπει να προσθέτουμε πριν την επέκταση του αρχείου, την php μεταβλητή $urlExtension. Οπότε το τελικό αποτέλεσμα θα πρέπει να είναι:
Επίσης όπου έχουμε ελληνικά κείμενα στην html του template μας, θα πρέπει να χρησιμοποιούμε την function t($text) για να μπορεί να μεταφράζεται από το σύστημα. Αν για παράδειγμα θέλουμε να κάνουμε το logo να λειτουργεί σαν link προς την αρχική σελίδα, και βάλουμε ένα title "κάντε κλικ για μετάβαση στην αρχική σελίδα", θα πρέπει να έχουμε τον ακόλουθο κώδικα:
Αν θέλουμε να έχει υποστήριξη SEF URLs το template μας, όπου έχουμε εσωτερικά links πρέπει να χρησιμοποιούμε την $sef->url($someURL). Οπότε αντικαθιστούμε στην περίπτωση μας το index.php με την κατάλληλη php διαμεσολάβηση:
Φτάνοντας ως εδώ, έχουμε ήδη μια καλή υποδομή ώστε να αρχίσουμε να προσθέτουμε ενθέματα, views κλπ.
