Články

Odkazy

Spřátelené weby

JoomlaDev.eu - Vše o vývoji CMS Joomla

Redakční systém WordPress - Nejlepší redakční systém zdarma - WordPress

Anketa

O jakém RS by jste chtěli více článků
 
Navigace: Úvodní strana Drupal Články Drupal Tvorba šablony pro Drupal (I.díl)

Tvorba šablony pro Drupal (I.díl)

PDF Tisk Email
Středa, 23 Červen 2010 12:58

drupallogoDalší z tutoriálů pro Drupal se bude zaměřovat na tvorbu šablon. V posledním tutoriálu pro Drupal jsme tento článek slibovali, čas na napsání se však našel až nyní. Ukážeme si jak upravit zdrojové soubory tak, aby sme si přizpůsobili vzhled šablony k obrazu svému. Tento článek předpokládá alespoň základní znalosti html a css a orientaci ve webovém prostředí.



Nejprve si řekneme kde začít. Možností je více. Buďto začneme celou šablonu psát od začátku, což nedoporučuji, nejen že je to složité a zdlouhavé, ale hlavně úplně zbytečné. Nejlepší volbou je použít buďto hotové kostry, nebo vzít přímo některou z hotových šablon, která má podobné rozložení jako naše předpokládaná a tu upravovat. V případě použití kostry je výhodné, že obsahuej pouze nezbytné soubory a začínáme tedy na "čistém plátně".

My si zkusíme tvorbu šablony z kostry, stáhneme si tedy uvedenou kostru (framework, adresa viz. výše), verzi stahujte 6.x. Po stažení si balíček rozbalíme a umístíme do složky themes tam kde máme Drupal nainstalovaný. Již nyní si můžeme v administraci tuto šablonu povolit a podívat se jak vypadá (Administer->Site Building->Themes).

Soubory použité v šabloně

Pokud otevřeme naši nově vytvořenou šablonu vidíme jednu složku a několik souborů. Složka images slouží pro umístění obrázků použitých v šabloně. Ostatní soubory si popíšeme níže.

  • .info (povinný) - jako jediný povinný soubor musí každá šablona obsahovat soubor xxx.info, kde xxx je název šablony. V naší kostře je pojmenován jako framework.info, stejně jako složka ve které se nachází. Tento soubor obsahuje informace o šabloně: Název, popis, engine, verze drupalu, seznam css stylů, seznam javascript souborů, seznam pozic a další pro teď nedůležité vlastnosti. Blíže si řekneme k souboru .info dále
  • tpl.php soubory šablony - tyto soubory určují vzhled jednotlivých prvků stránky - obsahu, postranních panelů, hlavičky, atd. Pokud vzhled pro některou část webu chybí, Drupal ji nahradí defaultním vzhledem. Tyto soubory by měli obsahovat pouze XHTML tagy a PHP proměnné.
  • template.php - mozek šablony, tento soubor není povinný ovšem je duporučováno ho použít. Slouží pro přepsání defaultních funkcí drupal a zpracování dat, ještě předtím než budou poslány na výstup (do souborů tpl.php). Zajímavé je, že na oficiálních stránkách se uvádí, že by se tento soubor neměl ukončovat pomocí ?>
  • subšablony - každé šabloně můžete vytvořit tzv. subšablony. Jsou to vlastně šablony se stejným jádrem, ale pozměněným vzhledem některého ze souborů tpl.php, kaskádových stylů, javascriptů,.. Všechny nepozměněné soubory se dědí od nadřazené šablony. O subšablonách se nebudu dále zajímat, pokud Vás toto téma zajímá, podívejte se na oficiální stránky
  • ostatní soubory - šablona může obsahovat další soubroy a složky. CSS, JS soubory, printscreen šablony atd. Doporučuji si na css a js vytvořit samostatné složky, aby v tom nebyl zmatek.

Struktura souboru .info

Jak jsem již říkal, soubor nazev_sablony.info je povinný, má několik částí a parametrů. Některé jsou povinné jiné nepovinné. Pokud nepovinné části nevyplnítě, Drupal je nahradí defaultními hodnotami. Komentáře se píší pomocí středníku (;). Nyní vypíši všechny proměnné, které se mohou v souboru info použít. Některé mohou být typu pole, pak se jen za jejich název vloží hranaté závorky například: stylesheets[]. Pokud uznám za vhodné, pod názvem proměnné uvedu příklad.

  • name - povinné - název šablony
  • description - krátký popis šablony
  • screenshot - náhled šablony, udává cestu k obrázku 
    • screenshot = images/screen.png
  • version - není nutné uvádět, má význam, pokud šablonu publikujete na server drupal.
    • version = 1.0
  • core - povinné - udává pro jakou verzi Drupalu je šablona psaná, pokud nesouhlasí verze šablony a verze nainstalovaného Drupalu, automaticky šablonu systém zakáže. Pokud si nejste jisti co vyplnit, podívejte se do souboru modules/system/system.module a podívejte se na definici proměnné DRUPAL_CORE_COMPATIBILITY. S touto proměnnou je hodnota core porovnávána.
    • core = 6.x
  • engine - povinné - ve většině případů nabývá hodnoty phptemplate, udává jaký engine chceme použít pro návrh šablony. Díky enginu máme přístupné celé API Drupalu. Je možné použít i Smarty engine, ale takových šablon existuje minimum.
    • engine = phptemplate
  • base theme - využívá se pouze pokud vytváříme podšablony
  • regions - oblasti na stránkách, něco jako pozice pro moduly v Joomle. Můžeme vytvořit nekonečně pozic pro naše stránky (například levý blok, hlavička, obsah, patička,...). Do hranaté závorky uvedeme název pozice, který pak budeme používat v šabloně, a za = uvedeme krátký popi. Pokud žádný region nedefinujeme Drupal vytvoří sadu regionů za nás (left, right, header,content, footer)
    • regions[left] = Levy blok
      regions[right] = Right sidebar
      regions[content] = Content
      regions[header] = Header
      regions[nav] = Navigation
      regions[footer] = Footer
      regions[banner] = Banner
  • features -jsou "vychytávky" které můžete v šabloně zobrazit. Jedná se například o logo, název stránky, slogan, vyhledávání atd. Tyto volby máte v administraci v konfiguraci šablony. Pokud něktorou z features zakomentujete, uživatel šablony nebude moci tyto volby v administraci zaškrtnout.
    • features[] = logo
      features[] = name
      ;features[] = slogan
      features[] = mission
      features[] = node_user_picture
      features[] = comment_user_picture
      features[] = search
      features[] = favicon
      features[] = primary_links
      features[] = secondary_links
  • stylesheets - seznam souborů s kaskádovými styly. Rozlišujeme tři typy - all - pro všechno, screen - pro projekci, print - pro tisk. Můžeme vložit nekonečně mnoho souborů.
    • ; Add a stylesheet for all media
      stylesheets[all][] = css/theStyle.css

      ; Add a stylesheets for screen and projector media
      stylesheets[screen, projector][] = css/theScreenProjectorStyle.css

      ; Add a stylesheet for print media
      stylesheets[print][] = css/thePrintStyle.css
       
  • scripts - prakticky to samé jako stylesheets, jen s tím, že vkládáme javascriptové kódy
    • scripts[] = js/myscript.js
  • php - minimální nutná verze php, není nutné vyplňovat, poté se bere automaticky hodnota převzatá z instalace Drupalu
To by bylo pro první díl vše, příště už se pustíme do skutečného programování, podíváme se na soubor page.tpl.php a template.php
Související články: Tvorba šablony pro Drupal II.Díl
 
Komentáře (1)
Super
1 Čtvrtek, 01 Červenec 2010 08:47
Exo
Úžasný článek! Něco takového jsem přesně potřeboval :D

Přidej Váš komentář

BoldItalicUnderlineStrikethroughSubscriptSuperscriptEmailImageHyperlinkOrdered listUnordered listQuoteCodeHyperlink to the Article by its id
Vaše jméno:
Předmět:
Komentář:

Ochrana osobních údajů, Mapa stránek,design a kód Klasdesign, Redakční systémy, rs@redakcni-systemy.com 2009
Wifi router a antény , Moje IP, Studuj FEL, Barevné kontaktní čočky