Egyedi sablon készítés 2. rész: Joomla

A CMS kipróbálását én Joomlával kezdtem, még az 1.5-ös verzióra gyártottam először egyedi sablont.

A Joomla egy elég összetett – inkább nagyobb portálokhoz való – CMS rendszer. Simán meghajt például egy önkormányzati honlapot, egy nagyobb webáruházat, vagy egy hírportált is. Nagyobb tartalommennyiségez ideális.

Saját tapasztalatom szerint kicsit kötöttebb a testreszabása mint a WP-nek.
A sablont nem kell szekciónként szétdarabolni, de ha egyedi megjelenést akarsz egy aloldalnak, bizony nagyon át kell gondolni, hogy mi hova kerüljön.

Természetesen itt is érvényes minden olyan kritérium, amiről az 1. részben írtam, tudni kell statikus HTML-CSS weboldalt létrehozni hibamentesen.

joomla-sablon-kesztites

Hogyan kezdj hozzá?

Legyen készen a design és a hibamentes statikus HTML oldalad. Olvass bele a dokumentációba, hogy mik azok a minimálisan szükséges fileok, amik a nélkülözhetetlenek. Fontos, hogy a sablon szintaxisa verziónként eltérhet. A korábbi verziókkal nem nagyon érdemes foglalkozni, ha új weboldalt csinálsz, az aktuális Joomla 3.4.8 verziót használd.

Ha most próbálkozol először joomlával, akkor érdemes egy demo felületen, vagy aldomain-on kipróbálni a rendszert, ne az élő domainon próbálkozz. Telepítéskor válaszd ki a mintaadatokat telepítését is, így lesznek demo cikkeid és moduljaid is, amivel az egyedi sablon tesztelhető.

Az alábbi egy általam kiegészített lista, amelyen tartalmazza egy egyszerű Joomla sablon szükséges file-jait.

Joomla alap sablon

  • css/template.css – A sablonhoz tartozó stílus elemek
  • templateDetails.xml – Sablon paramétereket és modulpozíciók
  • index.php – HTML oldal
  • images/ – Itt lesznek a design kép elemei, háttérképek, logók

Mint ahogy a struktúrából is látszik, annyiban egyszerűbb a WordPressnél, hogy nem kell szétdarabolni a HTML-t külön szekciókra. A sablonod HTML része csak egy index.php file-ban lesz.

Index.php felépítése

A Joomlának is megvan az egyedi utasítás készlete. <jdoc:include />-al modulpozíciókat és egyéb dinamikus elemeket adhatsz a sablondohoz.

 <?php defined( '_JEXEC' ) or die; ?> <!doctype html> <html lang="<?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" /> </head> <body> <header> <div class="container"> <div id="logo"> <a href="/"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png"></a> </div> <div id="navigation"> <nav id="nav"> <jdoc:include type="module" name="menu" /> </nav> </div> </div> </header> <section id="content"> <div class="container"> <article> <jdoc:include type="component" /> </article> <aside> <jdoc:include type="module" name="sidebar" /> </aside> </div> </section> <footer> <div class="container"> Lábléc tartalmak, kiegészítő szöveg , a szerzői jogi információkat a téma és a kiegészítő tárgyak. </div> </footer> </body> </html> 

Feltételes megjelenéseket PHP elágazásokkal (IF) tudsz megadni. pl.: Csak a kezdőlapra szeretnél kitenni egy slideshow-t, akkor nem kell külön sablon file-t létrehoznod a kezdőlapnak. Egyszerűen írd bele az index.php megfelelő részébe, a PHP feltételt.

A legfontosabb Joomla utasítások

  • <jdoc:include type=”head” /> – Ide töltődnek meta adatok és a bővítmény fileok.
  • <jdoc:include type=”component” /> – Minden tartalomtípus, komponens, bővítmény, cikk, tartalmi része ide töltődik
  • <jdoc:include type=”module” name=”barmilyen-nev” /> – Modulpozíciók, ahova az egyes modultípusok tartalma töltődik.
  • <jdoc:include type=”message” /> – Rendszerüzenetek és hibaüzenetek megjelenítésére szolgál

Modulok és modulpozíciók

A modulok teszik lehetővé, hogy a sablon tartalmi részeit adminisztrációs felületen keresztül szerkeszteni lehessen (csak úgy mint WP-nél a widget-ek). A modulpozíciók az index.php fileban a kell először megadnod. A modul neveket tetszőlegesen megválaszthatod, pl.: “main-menu”, “sidebar”, “top-content” stb.

A moduloknak több típusa van. Az egyes komponenshez tartozhatnak egyedi szerkezetű modulok is. Például a menü létrehozásához “menu” típusú modult kell létrehoznod.

A templateDetails.xml

Minden saját – index.php fileban meghatározott – modulpozíciót hozzá kell adni a templateDetails.xml fájlhoz, hogy admin felületen kiválasztható legyen. Ez a file tartalmazza még a sablon paramétereit, és a sablondban használt fájlok neveit is. Itt különösen figyelni kell arra, hogy ne legyen fájlban elütés, vagy ékezet, mert a sablon nem fog települni.

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd"> <extension version="2.5" type="template" client="site" method="upgrade"> <name>DEMO</name> <creationDate>2016-02-08</creationDate> <author>Emese Pocsik</author> <copyright>Copyright © Emese Pocsik designstreet.hu</copyright> <authorEmail>pocsikemese@gmail.com</authorEmail> <authorUrl>designstreet.hu</authorUrl> <version>1.0.0</version> <description>Demo template for Joomla</description> <files> <folder>css</folder> <folder>images</folder> <filename>index.php</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <filename>templateDetails.xml</filename> </files> <positions> <position>menu</position> <position>sidebar</position> </positions> </extension> 

Felülbírálások

Lehetőséged van komponensek, modulok kinézetének felülbírálására. Az ehhez tartozó fileokat csak át kell másolni a templates/sablonod/html mappájába. Ezt érdemes FTP-n keresztül megtenni, a sablon telepítése után, de beállíthatod a sablonkezelőben (Template Manager) is.

A sablon telepítése

Sima FTP bemásolással nem fog megjelenni admin felületen a templatek között. Ezért a sablont legegyszerűbb a hagyományos módon, bővítménykezelőből (Extension manager) telepíteni. Ehhez össze kell csomagolnod a file-okat. A csomag .ZIP, vagy .TAR formátum legyen (.RAR nem jó!).

A sablon csak akkor fog felmenni, ha nincs benne hiba, ezért mindenképpen az egyszerűségre kell törekedni (később FTP keresztül bővíthető, modulpozíció is hozzáadható). Emellett nagyon figyelni arra, hogy ne legyen benne elgépelés, vagy ékezet.

A sablont telepítheted FTP-n keresztül is. Másold fel a sablont a /weboldalad.hu/templates/ mappába a szerveren. Ettől viszont még nem lesz telepítve. Admin felületen be kell menned a Bővítménykezelőbe ( Extension manager ) és a Felfedez ( Discover ) gombra kattintani, ha a sablon nem jelenik meg a telepítetlen bővítmények listájában.

Ha telepítetted a sablont, a Sablonkezelőben ( Template manager) aktiválod és meg is van.

A rendszerben rengeteg a beállítási lehetőség, éppen ezért érdemes az admin felületet a fejlesztés alatt angol nyelven tartani, így hamarabb találsz megoldást, ha elakadtál.

Csináltam egy egyszerű példa sablont, amit kipróbálhatsz. Telepítsd admin felületen keresztül bővítménykezelőben, majd kapcsold be a sablonkezelőben.

Töltsd le Most!

Sablon szerkesztő szoftverek

NE! Ha jól akarod csinálni. A kódod, akkor lesz minden szempontból optimális, és az adott projektre maximálisan illeszkedő, ha a “varázs megoldásokat” elkerülöd.

A szerkesztő szoftverek szinte kivétel nélkül teli szemetelik a kódodat a saját osztályaikkal, vagy egyéb kiegészítőkkel, amelyek a futáshoz szükségtelenek. A jegyzettömbnél nincs jobb. A Programmer’s Notepad, vagy a Notepad++ legyen a legjobb barátod.

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

Szólj Hozzá!

Hozzászólások

  • Bács Krisztián szerint:

    Kedves Emese!

    Most állok honlap készítés előtt, és keresem az infókat a Joomla!-val kapcsolatban.
    Az Önök oldalán van sablon, ami kipróbálható, de nem tudom telepíteni. ezt írja ki: “JFolder::create: Az elérési út nem open_basedir elérési utakon van”, illetve “Unable to create destination Nem található telepítőcsomag”. Nekem a 3.6.5 verzió fut, lehet, hogy nem kompatibilis?

    1. Emese szerint:

      Kedves Krisztián!
      Próbából most feltettem egy 3.4.8 as verzióra, gond nélkül fel ment. Sajnos 3.6.5 el még nem teszteltem. Kérdés, hogy mást tudsz-e frissíteni? Mondjuk bővítményt? Elsősorban az open_basedir problémát kell leküzdeni. Ha van hozzá jogosultságod, akkor a Rendszer -> Rendszerinformáció -> PHP-információkon belül keress rá az open_basedir értékre, majd az ott található útvonal alapján korrigáld a configuration.php-ban található logs és tmp útvonalat. Nézz még rá arra, hogy a tmp mappa írható-e a tárhelyen -> chmod 755
      Ennyi jut most eszembe, remélem megoldódik, de ha mégsem letesztelem szívesen a verzióddal.
      ui.: Ez a template inkább front-endhez való kezdő próbálkozásnak.