<< προηγούμενο: Δημιουργία template (μέρος 3º)

Πριν δημιουργήσουμε τα κατάλληλα views (υποσέλιδα) του template μας, τώρα που έχουμε εγκαταστήσει το template μας, έχουμε τη δυνατότητα να το εμπλουτίσουμε με κάποια ενθέματα. Τα ενθέματα είναι μεμονομένες μικρές εφαρμογές (widgets) που προσδίδουν extra λειτουργικότητα στο site μας.

Η λογική είναι απλή.
Δημιουργούμε μέσα από τον πίνακα διαχείρισης διάφορα slots (γνωστά και ως positions), τα οποία μπορούν να υποδεχθούν ένα ή περισσότερα τέτοια widgets. Για να δημιουργήσουμε ένα slot, επιλέγουμε στον πίνακα διαχείρισης την επιλογή ΠΡΟΣΘΗΚΗ στο menu ΔΙΑΧΕΙΡΙΣΗ ΕΜΦΑΝΙΣΗΣ -> ΠΡΟΤΥΠΑ ΕΜΦΑΝΙΣΗΣ -> ΘΕΣΕΙΣ ΠΡΟΤΥΠΩΝ.

Ας υποθέσουμε πως θέλουμε να δημιουργήσουμε ένα slot στην αριστερή μας στήλη ώστε να φιλοξενήσουμε εκεί ένα menu πλοήγησης στις κατηγορίες των άρθρων και ένα πλαίσιο αναζήτησης κειμένου στα άρθρα.

Θα βρεθούμε στην οθόνη προσθήκης slot και θα συμπληρώσουμε τα πεδία με τον τρόπο που ακολουθεί:

Στην ουσία επιλέγουμε ένα περιγραφικό τίτλο που θα εμφανίζεται στον πίνακα διαχείρισης και ένα system name (λατινικοί χαρακτήρες χωρίς κενά).

Το ορίζουμε να ανήκει στο template μας (Aegean) και πατάμε Αποθήκευση.

Με τον ίδιο τρόπο μπορούμε να δημιουργήσουμε διάφορα slots για διάφορες θέσεις του template μας (header, footer κλπ), και να τα εκμεταλλευτούμε ορίζοντας σε κάθε slot να φορτωθεί το widget που επιθυμούμε. Μια σειρά από διαθέσιμα δωρεάν odyssey widgets μπορείτε να βρείτε στο τμήμα downloads.

Να σημειωθεί πως με κάθε εγκατάσταση προτύπου εμφάνισης, είναι αυτομάτως διαθέσιμα μια σειρά από system slots. Αυτά είναι τα:

• Available to pages ( pages )
• Facebook ( facebook )
• Google Plus ( googleplus )
• System Plugins ( plugins )
• Twitter ( twitter )
• Copyright Links ( copyright )
• Language Selector ( languages )
• Social Networks ( social )
• Facebook Comments ( fb_comments )
• Home Page ( homepage )
• Odyssey Comments ( comments )
• Related Files ( related_files )
• Related Images ( related_images )
• System Odyssey ( odyssey )
• Video Gallery ( video_gallery )
• AutoView Google Map ( auto_view_google_map )

Αν και θα μπορούσαμε να έχουμε το ίδιο αποτέλεσμα αν αντί για χρήση widget, γράφαμε κώδικα στο σημείο που θέλουμε να προσθέσουμε μια λειτουργία, το να χρησιμοποιούμε widgets μας δίνει δύο μεγάλα συγκριτικά πλεονεκτήματα.

Το πρώτο είναι η δυνατότητα επαναχρησιμοποίησής του, πολύ εύκολα και σε μελλοντικά sites. Το δεύτερο είναι πως έχουμε την δυνατότητα να παραμετροποιούμε ένα widget πριν το καλέσουμε στο template μας (ιδανικό για designers που δεν θέλουν να ασχολούντε με κώδικα). Το επίπεδο παραμετροποίησης εξαρτάται από την φύση του widget και λεπτομέρειες θα αναλυθούν στην ομώνυμη ενότητα Ενθέματα (modules ή widgets).

Για να χρησιμοποιήσουμε ένα widget, χρειάζεται:

• να γνωρίζουμε σε ποιο slot θα το αντιστοιχήσουμε
• να το εγκαταστήσουμε στο σύστημα από κάποιο zip (αν δεν είναι ήδη εγκατεστημένο)
• να το εισάγουμε στο template μας ορίζοντας τις παραμέτρους που είναι διαθέσιμες
• να χρησιμοποιήσουμε στο template μας, στη θέση που θέλουμε να το καλέσουμε, τον php κώδικα <?php includeModules("όνομα_του_slot");?>

Στην περίπτωσή μας γνωρίζουμε πως το slot λέγεται sidebar

Αν χρειαστεί να το εγκαταστήσουμε το κάνουμε από την επιλογή ΕΓΚΑΤΑΣΤΑΣΗ ΝΕΟΥ ΕΝΘΕΜΑΤΟΣ του menu ΔΙΑΧΕΙΡΙΣΗ ΕΜΦΑΝΙΣΗΣ -> ΕΝΘΕΜΑΤΑ ΣΕΛΙΔΑΣ με τον ίδιο τρόπο που εγκαταστήσαμε το template μας.

Για να το εισάγουμε, επιλέγουμε ΔΙΑΧΕΙΡΙΣΗ ΕΝΘΕΜΑΤΩΝ από το menu ΔΙΑΧΕΙΡΙΣΗ ΕΜΦΑΝΙΣΗΣ -> ΕΝΘΕΜΑΤΑ ΣΕΛΙΔΑΣ και στη συνέχεια κάνουμε κλικ στο Προσθήκη νέου ενθέματος. Στο αναδυόμενο παράθυρο κάνουμε κλικ στο όνομα του επιθυμητού ενθέματος και θα μεταφερθούμε στη σελίδα παραμετροποίησης, όπου αφού ορίσουμε τις επιθυμητές ρυθμίσεις πατάμε Αποθήκευση για να ολοκληρώσουμε τη διαδικασία.

Μια τυπική οθόνη ρυθμίσεων ενθέματος μπορείτε να δείτε στην εικόνα που ακολουθεί:

Ας δούμε στα γρήγορα τις βασικές ρυθμίσεις που μας παρέχονται σε όλα τα widgets:

• Έχουμε τον τίτλο του ενθέματος όπου μπορούμε να αφήσουμε αν θέλουμε αυτόν που μας προτείνει το σύστημα.
• Μετά θα πρέπει να επιλέξουμε το slot στο οποίο θα εμφανίζεται το ένθεμα.
• Στη συνέχεια έχουμε την δυνατότητα να ορίσουμε αν το ένθεμα θα εμφανίζεται σε όλες τις Ενότητες ή μόνο σε κάποιες επιλεγμένες.
• Με τον ίδιο τρόπο μπορούμε να ορίσουμε αν το ένθεμα μας θα εμφανίζεται αντί σε Ενότητες, κάτω από τα περιεχόμενα συγκεκριμένων σελίδων. Στην περίπτωση αυτή ορίζεται αυτόματα ως slot το system slot «Available to pages»
• Αν επιλέξουμε το useModuleContainer τότε μπορούμε να ορίσουμε το πλάτος του widget container, την στοίχιση, τα εξωτερικά περιθώρια (margins) και τα εσωτερικά περιθώρια (paddings)

Οι όποιες άλλες ρυθμίσεις είναι διαθέσιμες, αφορούν μόνο το συγκεκριμένο widget και επιλέγουμε κάθε φορά κατά περίσταση αυτές που επιθυμούμε.

Μετά απ' όλα αυτά ας δούμε πως διαμορφώνεται το index.php αφού του προσθέσουμε την loadModules:

<?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   *******************************
*/
?>

	

<a href="<?php $sef->url('index.php');?>" title="<?php echo t('κάντε κλικ για μετάβαση στην αρχική σελίδα');?>">
<img src="<?php echo $p; ?>images/logo<?php echo $urlExtension; ?>.png">
</a>
	
	

		

			<?php $this->includeModules("sidebar");?>
		
		

<?php
include(
($this->section == "odyssey_index" && $this->view == "odyssey_index") 
? $p."view_odyssey_index.php" 
: $p."view_".$this->section."_".$this->view.".php"
);
?>
		
	
	

		Copyrights...
	

Ας αφήσουμε την θεωρία και ας εγκαταστήσουμε στην πράξη τα δύο ενθέματα που αναφέραμε, το Menu των άρθρων και ένα πλαίσιο αναζήτησης κειμένου.

Τα ενθέματα που θα χρησιμοποιήσουμε είναι το Odyssey Menu και το Odyssey Search Box. Στις ρυθμίσεις του κάθε ενθέματος επιλέξτε αντίστοιχα:

Odyssey Menu

• εμφάνιση σε όλες τις ενότητες στο slot sidebar
• να χρησιμοποιεί container με πλάτος 280px
• να είναι τύπου «Κάθετο Superfish»
• να αντλεί δεδομένα από την ενότητα ΑΡΘΡΑ
• να έχει αριστερή στοίχιση

Odyssey Search Box

• εμφάνιση σε όλες τις ενότητες στο slot sidebar
  
• να χρησιμοποιεί container με πλάτος 280px
• να αναζητά περιεχόμενο στην ενότητα ΑΡΘΡΑ
• ορίστε σε πρώτη φάση τα προτεινόμενα χρώματα τα οποία μπορείτε εκ των υστέρων να αλλάξετε πειραματιζόμενοι με τα χρώματα του layout σας
• να έχει αριστερή στοίχιση
• όλες τις υπόλοιπες ρυθμίσεις αφήστε τις ως έχουν

Τα περιθώρια καλό είναι να τα ορίζετε σε δεύτερη φάση, αφού πρώτα δείτε πως τοποθετούνται τα widgets στο sidebar και τι διορθώσεις θα απαιτηθούν στις ρυθμίσεις.
Αν θέλετε μπορείτε να δημιουργείτε τα δικά σας containers για κάθε widget και να τα φορτώνετε το καθένα σε δικό του slot. Για παράδειγμα αντί για το slot sidebar θα μπορούσαμε να είχαμε το slot menu και το slot searchbox. Την κάθε includeModules() θα την βάζαμε μέσα στο κάθε container που θα είχαμε ετοιμάσει στο layout μας.

Παράδειγμα:

	

		

			<?php $this->includeModules("menu");?>
		
		

			<?php $this->includeModules("searchbox");?>
		
	

Για να δημιουργηθεί το menu θα πρέπει πρώτα να προσθέσουμε μερικές κατηγορίες άρθρων. Για να διαχειριστείτε την εμφάνιση των έτοιμων menus του Odyssey, επισκευθείτε στον πίνακα διαχείρισης την επιλογή ΔΙΑΧΕΙΡΙΣΗ ΕΜΦΑΝΙΣΗΣ MENU, επιλέγοντας τον αντίστοιχο τύπο menu που χρησιμοποιείτε.

Για να ταξινομήσουμε την θέση εμφάνισης των widgets, επιλέγουμε ΤΑΞΙΝΟΜΗΣΗ ΕΝΘΕΜΑΤΩΝ, επιλέγουμε το slot που μας ενδιαφέρει και σύρουμε το κάθε ένθεμα από τον τίτλο του στη νέα θέση.
Αφού δούμε στην πράξη πως εμφανίζονται τα δύο αυτά ενθέματα, μπορούμε να επεξεργαστούμε ξανά τις ρυθμίσεις τους και να ορίσουμε τα απαραίτητα margins, paddings κλπ. Φυσικά προς το παρών δεν είναι λειτουργικά αφού πρέπει να προσθέσουμε πρώτα views και περιεχόμενα (αν δεν χρησιμοποιούμε τα αυτόματα views).

Στη συνέχεια θα ασχοληθούμε αναλυτικά με τα views του Odyssey...

>> επόμενο: Δημιουργία template (μέρος 5º)