Πως φτιάχνουμε ένα template/πρότυπο στο Joomla! 1.5

Joomla! Templates

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Πως φτιάχνουμε ένα template/πρότυπο στο Joomla! 1.5

Δημοσίευση από cpulse » 26 Οκτ 2010 22:08

Ανοίγω αυτή την συζήτηση σαν συνέχεια μιας ενδιαφέρουσας κουβέντας που είχαμε στην Web World Expo με τους φίλους του Free Stuff.

Η εμπειρία μου πάνω στα templates έρχεται μέσα από το Bonus Themes, ένα template club για Joomla! στο οποίο εδώ και περίπου 3 μιση χρόνια φτιάχνουμε templates και ανταγωνιζόμαστε μεγάλα template clubs του εξωτερικού.

Υπάρχουν πολλά που μπορεί να πει κανείς για το templating system. Σε αυτό το άρθρο θα σας πω κάποια βασικά πράγματα. Πολλές περισσότερες πληροφορίες μπορείτε να βρείτε στο http://docs.joomla.org/Category:Templates

Υπάρχουν δύο αρχεία που πρέπει οπωσδήποτε να έχετε σε ένα template. Το index.php και το templateDetails.xml . Πέρα από αυτά υπάρχει ο φάκελλος html στον οποίο μπορείτε να φτιάχνετε "viewers" για modules/ενθήματα και components/εφαρμογές.

Ένα τυπικό template έχει την δομή

Κώδικας: Επιλογή όλων

templates/

    my_template_name/
        index.php -- Κεντρικό αρχείο
        templateDetails.xml -- Βοηθητικό αρχείο με extra πληροφορίες
        .templateDetails.xml -- ΠΡΟΣΟΧΗ σε αυτό το αρχείο. Μοιάζει με το προηγούμενο αλλά αυτό ξεκινάει με τελεία. Όσοι δουλεύετε με Mac δημιουργείται ένα τέτοιο αρχείο το οποίο προκαλεί μπερδέματα. Αν καταλάθος ανεβάσετε αυτό το αρχείο, πρέπει να το σβήσετε από τον server!
        favicon.ico -- (Προαιρετικό) Εικονίδιο που εμφανίζεται στο address bar του browser.
        template_thumbnail.png -- (Προαιρετικό) Screen shot από το template το οποίο εμφανίζεται στον template manager και βοηθάει τους χρήστες να καταλάβουν ποιο είναι το template σας.

        images/
            arrow.png -- (Προαιρετικό) Εμφανίζεται σαν τόξο στο breadcrumbs ή αλλιώς pathway
            emailButton.png -- (Προαιρετικό) Εικονίδιο που εμφανίζεται στα άρθρα για να στείλετε το άρθρο μέσω email
            pdf_button.png -- (Προαιρετικό) Εικονίδιο που εμφανίζεται στα άρθρα για να δείτε το άρθρο σε μορφή pdf
            printButton.png -- (Προαιρετικό) Εικονίδιο που εμφανίζεται στα άρθρα για εκτυπώσετε το άρθρο

        css/
            template.css -- (Προαιρετικό) CSS αρχείο

        html/
            modules.php -- (Προαιρετικό) Βοηθητικό αρχείο για extra μεθόδους παρουσίασης modules
            pagination.php -- (Προαιρετικό) Κάνει override τον viewer των σελίδων

            mod_mymodule/
                default.php -- (Προαιρετικό) Κάνει override τον viewer του module "mod_mymodule"



templateDetails.xml

Το αρχείο templateDetails.xml περιέχει γενικές πληροφορίες αλλά και κάποιες που έχουν σημασία για λειτουργικούς λόγους.

Κώδικας: Επιλογή όλων

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http&#58;//dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
	<name>My Template</name>
	<creationDate>October 2010</creationDate>
	<author>example.com</author>
	<copyright>My Company 2010</copyright>
	<authorEmail>email@example.com</authorEmail>
	<authorUrl>http&#58;//www.example.com</authorUrl>
	<license>GNU/GPL</license>
	<version>1.0</version>
	<description></description>
	
	<files>

		<filename>index.php</filename>
		<filename>favicon.ico</filename>
		<filename>template_thumbnail.png</filename>
		<filename>images/arrow.png</filename>
		<filename>images/emailButton.png</filename>
		<filename>images/pdf_button.png</filename>
		<filename>images/printButton.png</filename>
		<filename>css/template.css</filename>
		<filename>html/modules.php</filename>
		<filename>html/pagination.php</filename>
		<filename>html/mod_mymodule/default.php</filename>

	</files>

	<positions>
		<position>position1</position>
		<position>position2</position>
		<position>breadcrumb</position>
		<position>debug</position>
	</positions>

	<params>

		<param name="my_text_field" type="text" default="abc" label="Text field" />

		<param name="my_textarea_field" type="textarea" cols="20" rows="5" default="" label="Text area field" description="Short help" />

		<param name="my_list_field" type="list" default="option1" label="List field" description="Short help">
			<option value="option1">Option 1</option>
			<option value="option1">Option 1</option>
		</param>

		<param name="my_radio_field" type="radio" default="option1" label="Radio field" description="Short help">
			<option value="option1">Option 1</option>
			<option value="option1">Option 1</option>
		</param>

		<param name="my_menu_field" type="mos_menu" default="topmenu" label="Menu field" description="Short help" />

	</params>

</install>
Στην ενότητα files πρέπει να βάλετε όλα τα αρχεία που χρησιμοποιεί το template σας εκτώς του ίδιου του templateDetails.xml . Η χρησιμότητα αυτής της ενότητας είναι να δείξει στο σύστημα ποιά αρχεία πρέπει να σβήσει όταν θα κάνετε uninstall.

Στην ενότητα positions πρέπει να βάλετε τα ονόματα των positions που θα χρησιμοποιήσετε. Αυτό χρειάζεται γιατί το σύστημα θα πρέπει με κάποιο τρόπο να ξέρει ποια positions να δείχνει στον module manager.

Στην ενότητα params μπορείτε να βάλετε παραμέτρους που θα δίνουν ειδικές πληροφορίες στο πρόγραμμα σας. Αυτές οι παράμετροι φαίνονται μέσα από τον template manager.




index.php

Το index.php είναι το κεντρικό για ένα template. Είναι μίξη HTML με μερικά ειδικά tags που βγάζουν πληροφορίες από το Joomla!.

Ένα βασικό template είναι αυτό:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="<?php echo $this->language ?>" lang="<?php echo $this->language ?>" >
<head>

<jdoc&#58;include type="head" />

<link href="<?php echo "&#123;$this->baseurl&#125;/templates/&#123;$this->template&#125;/"; ?>css/template.css" rel="stylesheet" type="text/css" />

</head>

<body>

<jdoc&#58;include type="modules" name="breadcrumb" />
<jdoc&#58;include type="message" />
<jdoc&#58;include type="component" />

<jdoc&#58;include type="modules" name="position_name" style="xhtml" />

</body>

</html>
Αν στο templateDetails.xml βάλατε παραμέτρους, μπορείτε να τις καλέσετε μέσα από το template με τον εξής τρόπο

Κώδικας: Επιλογή όλων

<?php echo $this->params->get&#40;'my_text_field', 'default_value'&#41;; ?>
Από τα παραπάνω..

<jdoc:include type="modules" name="breadcrumb" />
Βγάζει τα breadcrumbs ή αλλιώς pathway

<jdoc:include type="message" />
Βγάζει το μήνυμα από το component, αν υπάρχει. Τα μηνύματα βγαίνουν μόνο όταν τα components το θελήσουν.

<jdoc:include type="component" />
Βγάζει το περιεχόμενο του κυρίως μέρος της σελίδας, δηλαδή το component.

<jdoc:include type="modules" name="position_name" style="xhtml" />
Βγάζει το positon "position_name". Το όνομα του position πρέπει να δηλωθεί και στο .xml . Το attribute "style" δεν είναι απαραίτητο στο tag, αλλά αν το χρησιμοποιήσετε μπορείτε να ελέγξετε τον τρόπο που θα εμφανίζονται τα modules στο position. Τέλος, επαναλάβετε αυτό το tag για όσα positions θέλετε να έχετε στο template σας.

Σε περίπτωση που κάποιο position τυχαίνει να μην έχει καθόλου modules σε μια σελίδα, μπορείτε να το βγάλετε από το template (position collapse) με λίγη βοήθεια από την PHP. Αυτό χρησιμεύει σε templates τα οποία έχουν περιπλοκές στα γραφικά τους. Για να εμφανίσετε positions μόνο όταν υπάρχουν modules γράψτε τον κώδικα περίπου έτσι

Κώδικας: Επιλογή όλων

<?php

if &#40;$this->countModules&#40;'position_name'&#41;&#41;
    echo '<jdoc&#58;include type="modules" name="position_name" />' . "\n";

?>
Μπορείτε να φτιάξετε ένα δικό σας τρόπο να εμφανίζετε positions. Για να το καταφέρετε πρέπει στο style να γράψετε ένα δικό σας όνομα, πχ. mystyle
<jdoc:include type="modules" name="position_name" style="mystyle" />
Και στην συνέχεια θα πρέπει να γράψετε κώδικα για τον χειρισμό μέσα από το αρχείο templates/my_template_name/html/modules.php

Παράδειγμα:

Κώδικας: Επιλογή όλων

function modChrome_mystyle&#40;$module, &$params, &$attribs&#41; &#123;
    echo '<div class="moduletable' . $params->get&#40;'moduleclass_sfx'&#41; . '">' . "\n";
    echo '<h3>' . $module->title . '</h3>' . "\n";
    echo $module->content;
    echo '</div>' . "\n";
&#125;



Override σε viewers για modules και components

Μπορείτε να αλλάξετε τον viewer σε ένα module ή component, αν αυτό το επιτρέπει, βάζοντας ένα αρχείο default.php στον φάκελο html.

Για παράδειγμα θα μπορούσατε να αλλάξετε τον viewer του module για το login.
Αντιγράψτε το αρχείο modules/mod_login/tmpl/default.php σαν templates/my_template_name/html/mod_login/default.php
Μέσα εκεί κάντε όσες αλλαγές επιθυμείτε. Καμιά φορά θέλει λίγη προσοχή για να μην ανακατώσετε το namespace με μεταβλητές που μπορεί να μπερδέψουν το ίδιο το module. Οπότε κάντε πειράματα πριν βγάλετε τελική έκδοση.




Άδεια χρήσης / License

Το Joomla! κυκλοφωρεί με άδεια GNU/GPL v2. Όσοι δεν το χετε κάνει ήδη, αξίζει να το διαβάσετε. Ειδικά για τα templates υπάρχει μια λεπτομέρεια. Ο κώδικας του template που θα φτιάξετε θα πρέπει και αυτός να βγεί με άδεια GNU/GPL v2. Τα γραφικά αν θέλετε μπορείτε να τα εκδόσετε είτε με GNU GPL είτε με δικιά σας εμπορική άδεια.

Όπως και να χει, φτιάχτε τα templates σας και σεβαστείτε οτι παίρνετε ένα κώδικα που έχει αναπτυχθεί από πολλούς άλλους συνάδελφους σας δωρεάν. Κατά την γνώμη μου δεν υπάρχει τίποτα κακό στον να βγάζετε χρήματα από τα GPL, αλλά είναι χρήσιμο και ωραίο όταν μέσα από την εμπειρία σας μπορείτε να προσφέρετε πίσω στην κοινότητα.

Η συμβολή της εταιρίας μου και του εμπορικού template club που αντιπροσωπεύω σε αυτή την συζήτηση το κάνει αυτό προσφέροντας τα modules και components ελεύθερα σε όλους. Μπορείτε να τα βρείτε μέσα από την ενότητα Joomla! Addons στο Downloads Area του Bonus Themes. Το μόνο που πρέπει να κάνετε είναι να εγγραφείτε ως μέλη στο http://www.bonusthemes.com .

Επίσης μια που μιλάμε για templates, μέσα στην ιστορία του bonus themes υπάρχει και μια τεχνολογία, το Zone Layout technology, με το οποίο μπορείτε να φτιάχνετε τα positions μέσα από ένα control panel με μια Ajax εφαρμογή. Αυτό έγινε για πρώτη φορά τον Αύγουστο του 2007, η δεύτερη έκδοση βγήκε τον Αύγουστο του 2008 και τώρα ήρθε ο καιρός να βγεί η επόμενη έκδοση αλλά και το documentation που θα σας εξηγεί πως μπορείτε κι εσείς να φτιάχνετε μόνοι σας templates με δυναμικά positions. Ελπίζω κάπου στα χριστούγεννα να έχουμε προλάβει να το βγάλουμε.




Hints & Tips

Σε αντίθεση με τα modules και components, τα templates μπορούν να ανέβουν απλά ανεβάζοντας τα με FTP χωρίς ειδική προετοιμασία. Οπότε ανεβάστε άφοβα τα templates σας και ενεργοποιήστε τα από τον template manager.

Δεν είναι απαραίτητο να κάνετε αλλαγές στο template και στο css με τοπικό editor και με FTP. Μπορείτε να οτ κάνετε και μέσα από τον template manager. Μπείτε στον template manager, πατήστε στο template σας και χρησιμοποιήστε τα κουμπιά "Edit HTML" και "Edit CSS".

Η ιστοσελίδα σας μπορεί να χρησιμοποιεί πολλά templates ταυτόχρονα. Μπορείτε δηλαδή να έχετε ένα template για γενική χρήση και ένα ξεχωριστό template για το front page. Και αυτό ρυθμίζεται μέσα από τον template manager. Από την λίστα ορίστε ποιο θα είναι το default template και μέσα στο control panel ενός ξεχωριστού template μπορείτε να ορίσετε τα menu items στα οποία θα γίνεται η εξαίρεση.

Μέσα από το template σας για το front μπορείτε να ορίσετε το CSS για τον text editor (TinyMCE, JCE κτλ) που χρησιμοποιείτε στο back-end. Αυτό γίνεται με το αρχείο templates/my_template_name/css/editor.css
Παράδειγμα για το CSS:

Κώδικας: Επιλογή όλων

body &#123;
	margin&#58; 0;
	padding&#58; 0;
	text-align&#58; left;
	background-color&#58; white;
&#125;

Άβαταρ μέλους
hitca
Honorary Member
Δημοσιεύσεις: 1919
Εγγραφή: 13 Ιουν 2010 19:41
Τοποθεσία: Brussels
Επικοινωνία:

Πως φτιάχνουμε ένα template/πρότυπο στο Joomla! 1.5

Δημοσίευση από hitca » 27 Οκτ 2010 00:51

Άψογο.... ευχαριστώ και συγχαρητήρια για την πολύ καλή εργασία σου

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Πως φτιάχνουμε ένα template/πρότυπο στο Joomla! 1.5

Δημοσίευση από korgr » 27 Οκτ 2010 00:59

Εύγε Αλέξη! :)


Απάντηση

Επιστροφή στο “Joomla! Templates”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες