Alap sablon elkészítése

A JoomlaWiki wikiből

A leírás célja egy alap Joomla! sablon elkészítésének a bemutatása. Magában foglalja a szükséges fájlok és kódok ismertetését. A kód könnyen kivágható és beilleszthető, így csak néhány kisebb módosításra van szükség.

Tartalomjegyzék

A könyvtárstruktúra kialakítása

Egy alap sablon elkészítéséhez először is hozzunk létre egy új könyvtárat a "templates" könyvtáron belül. A könyvtár nevének a sablon nevét adjuk, mint például: "ensablonom". Szövegszerkesztő, vagy kifejezetten erre a célra készített szerkesztő (pl. Adobe Dreamweaver) segítségével hozzuk létre az "index.php" és "templateDetails.xml" fájlokat. A fájlok rendszerezéséhez hozzunk létre két másik könyvtárat is "images" és "css" néven. A "css" könyvtáron belül hozzuk létre a "style.css" nevű fájlt.

Annak ellenére, hogy a teljes CSS kódot közvetlenül is elhelyezhetnénk az "index.php" fájlba, a legtöbb webfejlesztő egy külön fájl használatát részesíti előnyben, amelyre több oldalról is lehet hivatkozni a "link" tag segítségével.

Tehát a könyvtár és fájlstruktúra a következőképpen néz ki: 

  1. ensablonom/
  2.   css/
  3.     style.css
  4.   images/
  5.   index.php
  6.   templateDetails.xml

A templateDetails.xml fájl elkészítése

A templateDetails.xml fájl nélkülözhetetlen. Ha a fájl hiányzik, a Joomla! nem fogja látni a sablont. A fájl a sablon információit tartalmazza.

Nézzünk meg egy példát: 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
  3.  "http://dev.joomla.org/xml/1.5/template-install.dtd">
  4. <install version="1.5" type="template">
  5.         <name>ensablonom</name>
  6.         <creationDate>2008-05-01</creationDate>
  7.         <author>John Doe</author>
  8.         <authorEmail>john@example.com</authorEmail>
  9.         <authorUrl>http://www.example.com</authorUrl>
  10.         <copyright>John Doe 2008</copyright>
  11.         <license>GNU/GPL</license>
  12.         <version>1.0.2</version>
  13.         <description>My New Template</description>
  14.         <files>
  15.                 <filename>index.php</filename>
  16.                 <filename>component.php</filename>
  17.                 <filename>templateDetails.xml</filename>
  18.                 <filename>template_thumbnail.png</filename>
  19.                 <filename>images/background.png</filename>
  20.                 <filename>css/style.css</filename>
  21.         </files>
  22.         <positions>
  23.                 <position>breadcrumb</position>
  24.                 <position>left</position>
  25.                 <position>right</position>
  26.                 <position>top</position>
  27.                 <position>user1</position>
  28.                 <position>user2</position>
  29.                 <position>user3</position>
  30.                 <position>user4</position>
  31.                 <position>footer</position>
  32.         </positions>
  33. </install>

Amint az látható, számos információ található a tagek (<valami>) között. A legegyszerűbb, ha a fenti kódot kivágjuk, majd beillesztjük a "templateDetails.xml" fájlba és szükséges adatokat megváltoztatjuk (mint például <name> vagy <author>).

A <files> résznek tartalmaznia kell az összes fájlt, amelyet a sablon tartalmaz. Valószínűleg a fentiek közül több is ismeretlen, de ne aggódjunk, későbbiekben részletezésre kerülnek.

A pozíciókat egyelőre hagyjuk úgy ahogy vannak. Ezek a leggyakrabban használt pozíciók, ezért az alapértelmezett sablonról könnyen át fogunk tudni váltani a saját sablonunkra.

Az index.php fájl elkészítése

Az index.php fájl lesz a Joomla! által megjelenített oldalak törzse. Alapjában véve egy szokványos oldalt készítünk (mint bármilyen HTML oldal), de bizonyos helyekre PHP kódot helyezünk, ahol a tartalom fog megjelenni. A következőkben bemutatjuk ennek a fájlnak az alapvető kódját, amelyet szintén kivághatunk és beilleszthetünk.

Kezdjük a elejével: 

  1. <?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" 
  5.    xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Az első sor néhány alapvető támadás ellen szükséges. A második sor megmondja a böngészőnek (és a robotoknak), hogy milyen típusú oldalról van szó. A harmadik sor az oldal nyelvét írja le.

Most következzen a fejléc: 

  1. <head>
  2. <jdoc:include type="head" />
  3. <link rel="stylesheet" href="/joomlatanulashu/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
  4. <link rel="stylesheet" href="/joomlatanulashu/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
  5. <link rel="stylesheet" href="/joomlatanulashu/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css" type="text/css" />
  6. </head>

Az első sor segítségével a Joomla! beilleszti a megfelelő fejléc információt. Ez tartalmazza az oldal címét, meta adatait és a rendszer által használt JavaScript-et is. A további sorok két rendszer stíluslapot és a mi saját stíluslapunkat illesztik be (ha "style.css" a neve és a "css" könyvtárban található).

Az oldal törzse a következőképpen néz ki: 

  1. <body>
  2. <jdoc:include type="modules" name="top" /> 
  3. <jdoc:include type="component" />
  4. <jdoc:include type="modules" name="bottom" />
  5. </body>

Meglepő módon ez a néhány sor elegendő. Ez egy alap elrendezés, de kezdetnek megteszi. Az összes többi kódot a Joomla! állítja elő.

Megjegyzés: Bizonyosodjunk meg arról, hogy a menü a "top" pozícióban szerepel.

Végül pedig zárjuk le a kódot: 

  1. </html>

Az "index.php" fájl teljes forráskódja tehát: 

  1. <?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" 
  5.    xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
  6. <head>
  7. <jdoc:include type="head" />
  8. <link rel="stylesheet" href="/joomlatanulashu/<?php echo $this->baseurl ?>/templates/mynewtemplate/css/style.css" type="text/css" />
  9. </head>
  10. <body>
  11. <jdoc:include type="modules" name="top" /> 
  12. <jdoc:include type="component" />
  13. <jdoc:include type="modules" name="bottom" />
  14. </body>
  15. </html>

A sablon becsomagolása

Egy könyvtár benne számos különálló fájllal nem alkalmas megosztásra. Tehát az utolsó lépés egy csomag készítése. Ez egy tömörített csomag, amely tartalmazza a teljes könyvtárstruktúrát és a fájlokat. A csomag lehet ZIP (.zip kiterjesztéssel), TAR-gzip (.tar.gz kiterjesztéssel) vagy TAR-bz2 (.tar.bz2 kiterjesztéssel) formátumú.

Ha a sablon az "ensablonom" könyvtárban található, akkor a parancssor segítségével könnyen elkészíthetjük a csomagot. 

  1. tar cvzf ../ensablonom.tar.gz *
  2. zip -a -r ../ensablonom.zip *.*

Megjegyzés Mac OSX felhasználók számára:

A Finder "Compress" menüpontja egy használható ZIP formátumú csomagot készít. Azonban a fájlokat az AppleDouble formátumban tárolja, további fájlokat hozzáaadva "._" karakterekkel kezdődve. Ezért például hozzáad egy "._templateDetails.xml" nevű fájlt is, amelyet a Joomla! 1.5 gyakran rosszul értelmez. Ennek jele egy hibaüzenet: "XML Parsing Error at 1:1. Error 4: Empty document". Ennek megkerülésére használjuk a parancssort, és állítsuk be a "COPYFILE_DISABLE" rendszerváltozót "true" értékre, mielőtt a "compress" vagy "tar" parancsot használnánk.

A rendszerváltozó beállításához nyissunk egy terminál ablakot és írjuk be a következőt: 

  1. export COPYFILE_DISABLE=true

Ezután ugyanabban a terminál ablakban lépjünk be abba a könyvtárba, amelyben a sablon található és használjuk a zip parancsot. Például: 

  1. cd ensablonom
  2. zip -r ensablonom.zip *

Mostanra elkészítettünk egy működő sablont. Habár még nem teljesen néz ki annak. A következő lépésként kezdjük el kísérletezgetni az elrendezéssel és a stílusokkal.

Forrás: Joomla! Documentation

A lap eredeti címe: „http://wiki.joomla.org.hu/Alap_sablon_elk%C3%A9sz%C3%ADt%C3%A9se”