Drupal 6 custom theme tutorial

Dit artikel is verouderd en niet meer up2date, door een major version update is enkele data verdwenen!

Je eigen Drupal theme maken is niet zo moeilijk, je moet uiteraard wel beschikken over de nodige kennis HTML & CSS. Indien je deze opmaak talen nog niet machtig bent, kan je best even een bezoekje brengen aan W3school.org. Heb je weinig tijd?.. dan raad ik je aan om te beginnen zoeken tussen de honderden gratis Drupal templates, er is vast wel iets te vinden dat u kan bekoren. Niet? ... dan zal je zelf uw eigen Drupal 6 theme moeten maken... Hieronder volgt een handleiding die u kan helpen voor het ontwikkelen van je eigen Drupal theme,.. Drupal template bestanden

  • page.tpl.php + Style.css: het uiterlijk voor uw webpagina (header, sidebars, footer, enz...)
  • template_naam.info: hier bepaald u de 'blockregions' en andere informatie ivm. de template
  • block.tpl.php: bepaald het uiterlijk van uw blokken
  • node.tpl.php: het uiterlijk van de inhoud (titel, bericht tekst, taxonomy links, enz...)
  • comment.tpl.php: de layout van de commentaren
  • template.php: Hier kan je de standaard drupal theme engine overschrijven

 

page.tpl.php

 

Deze 2 bestanden zijn verantwoordelijk voor de basis layout van uw website. De 'page.tpl' is een mix van html en kleine stukjes php. Hieronder ziet u een page.tpl.php, zonder layout gedeelte. Uw layout plaats je zoals altijd tussen de body tags. <!--?php //naked template file ?-->

 

 

 

 

 

 

 

 

 

De layout van een Drupal theme is ongeveer hetzelfde als een standaard html template. De statische inhoud word vervangen door de php print functie. Hier onder een stukje code van een standaard html template:

 

In Drupal word dit vervangen door de volgende code:

<!--?php print $left; ?-->

of als u een dynamische 'blockregion' wil hebben kan je dit nog verder uitwerken met bv een validatie <!--?php if ($left): ?-->

<!--?php print $left; ?-->

<!--?php endif; // else kan u uiteraard ook gebruiken ?--> '$left' kan u vervangen door elke (willekeurige) term die u kan bedenken, je bent ongelimiteerd in het aantal plaatsen die u toekent. Je kan alle statische inhoud vervangen door de 'print + variabel'. Wanneer je een custom region wil maken in de template, dan moet je dit toekennen in de .info file.

 

 

 

 

drupal template .info file

 

In de .info file kan u extra CSS, scripts, en blockregions toekennen, hieronder een voorbeeld: (PHP code in deze file is voor verduidelijking, en mag verwijderd worden) <!--?php //De beschrijving van de template, dit gedeelte is zichtbaar in de admingedeelte voor de templates ?-->name = EVAD V1 description = Tableless, recolorable, multi-column theme (default). version = VERSION core = 6.x engine = phptemplate <!--?php //custom extra scripts &amp; CSS ?-->scripts[] = script/external.js stylesheets[all][] = style.css stylesheets[print][] = print.css <!--?php //drupal stuff ?-->version = "6.19" project = "drupal" datestamp = "1267662008" <!--?php //custom block regions:  ?-->regions[advert1] = advert (imagescroller) regions[left] = left (leftbox) regions[login] = login (top menu bar right position) regions[footmenu] = footmenu (bottom menu bar left position) regions[footmenu2] = footmenu2 (bottom menu bar right position) Een custom region maken in uw template, kan dat door in de page.tpl een variable te maken (bv:$advert) en deze in de .info file toe te kennen Op deze manier kan u custom blockregions (posities) maken, of extra css en scripts toevoegen. Zoals in het voorbeeld de 'external.js' file.

 

 

Block.tpl

 

<!--?php if (!empty($block--->subject)): ?&gt;

<!--?php print $block--->subject ?&gt;

<!--?php endif;?--><!--?php print $block--->content ?&gt;

 

De block template kan u net zoals de page.tpl verder uitbouwen met divs en php 'if/else' statements tot complexe dynamische scripts. Plaats bv divs rond de php printfuncties zodat je elk onderdeel apart kan gaan stylen.

 

 

 

 

Custom template bestanden

 

 

De meeste modules bevatten template bestanden, deze kan je makkelijk overschrijven door de file uit de module te halen en dan op te slaan met dezelfde naam in uw template folder.
modules/node/node.tpl.php of modules/comment/comments.tpl.php of ....
Je kan nu extra modules gaan stylen, maar vergeet zeker niet om de template bestanden die u aanpast op te slaan in uw template folder! Als u dit niet doet is er veel kans dat uw custom module styles overschreven worden bij een update, dus -> save as -> in de template folder! Drupal herkent automatisch de template bestanden, en zorgt ervoor dat de bestanden in uw template folder voorrang hebben op de standaard modules folders. Voor Css is dit anders, deze MOET je ook toevoegen aan de .info file zoals bovenaan deze theme tutorial staat beschreven.

Hieronder nog enkele handige php-snippets die u kunnen helpen bij het maken van een custom Drupal template

Onderstaande functie maakt alle node-variables zichtbaar.

<!--?php print_r($node); ?-->

de primary links,.. verander 'primary' door 'secondary' of de naam die u zelf gegeven hebt aan een menu. Deze code print de ganse menu + subitems. <!--?php print menu_tree($menu_name = 'primary-links'); ?--> De code voor de algemene inhoud, mission, content, admin buttons, enz... <!--?php if ($mission): print '<div id="mission"-->'. $mission .''; endif; ?&gt; <!--?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block"-->'; endif; ?&gt;

<!--?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'-->'. $title .''; endif; ?&gt;

<!--?php if ($tabs): print '<ul class="tabs primary"-->'. $tabs .''; endif; ?&gt; <!--?php if ($tabs2): print '<ul class="tabs secondary"-->'. $tabs2 .''; endif; ?&gt; <!--?php if ($show_messages &amp;&amp; $messages): print $messages; endif; ?--><!--?php print $help; ?--><!--?php print $content ?--><!--?php print $feed_icons ?-->

 

Drupal template.php file

Dit bestand is net zoals de node.tpl of de comment.tpl.php optioneel. Het moet niet in de template zitten, maar als het aanwezig is, dan kan je de standaard drupal php-engine overschrijven door je eigen php functies. Dit bestand moet beginnen met de gekende ?php tag, maar u moet het bestand niet sluiten met de php close tag, het word zelf aangeraden om de php niet te sluiten. je kan enkel functies gebruiken in dit bestand. voor meer informatie kan u de Drupal: template.php pagina bezoeken of de volledige Drupal 6: theming guide raadplegen.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.