Zelf een Joomla! template maken

[UPDATE]
Gezien dit ondertussen een WordPress site geworden is, is dit niet meer echt van toepassing om deze template. Toch wil ik het graag laten staan voor de geïnteresseerden.
[/UPDATE]
Als je ooit in een grijs verleden een website hebt gemaakt, zal die meer dan waarschijnlijk uit pure HTML bestaan. Op zich is daar natuurlijk niets mis mee, maar het onderhoud van zo’n site wordt op den duur wel vervelend. Zeker als die hij wat groot wordt.
de beste oplossing is dan om je website om te zetten naar een web content management system (zoals Joomla!). Maar natuurlijk wil je die oorspronkelijke layout, waar je misschien dagen aan hebt gesleuteld, niet kwijt. Je moet dus zien dat die layouti n een template kan gegoten worden.
Dat is exact waar ik voor stond. En aangezien ik van verschillende bronnen stukjes bij mekaar heb moeten rapen om mijn template werkend te krijgen, leek het me wel handig om de nodige informatie hier even samen te zetten…

  • Plaats een kopie van je oude site in een map waarin je gaat werken, en gooi alle html bestanden weg op 1 na. Dit ene bestand zal de basis van je template worden. Afbeeldingen die als content worden weergegeven mogen ook weg, zodat enkel de afbeeldingen voor de layout over blijven.
  • Geef de map waarin je nu alles hebt gezet de naam van je template.
  • De map waarin afbeeldingen staan hernoem je naar “images”. Indien je afbeeldingen nog niet een aparte map staan, moet je dat nu doen.
  • De map waarin de css-bestanden staan hernoem je naar “css”. Indien je css-bestanden nog niet een aparte map staan, moet je dat nu doen.
  • Hernoem nu het overgebleven html-bestanje naar index.php
  • Je mag nu de inhoud van de pagina beginnen verwijderen. Let wel op dat je enkel zaken verwijderd die specifiek zijn aan deze site (menu’s, body tekst, …) maar zorg er wel voor dat je onthoudt dat waar saat/stond.
  • Wat je natuurlijk niet mag vergeten is de verwijzingen naar je layout-afbeeldingen juist te zetten (images/).
  • De verwijzing naar de css-bestanden is een beetje speciaal…
    Eerst en vooral moet je steeds volgende lijn toevoegen: <link rel=”stylesheet” href=”/joomla/templates/system/css/general.css” type=”text/css” />
    Verder moet je naar je eigen css verwijzen vanuit de root van de Joomla! installatie. Dit wil zeggen dat je ook de naam van ke template al moet gebruiken:
    <link rel=”stylesheet” href=”/joomla/templates/NaamVanJeTemplate/css/template.css” type=”text/css” />
  • Nu is het de moment om Joomla! controls in te voegen.
    • Vlak onder de <html> tag plaats je hetvolgende
      <?php defined( “_JEXEC” ) or die( “Restricted access” );?>
      <jdoc:comment></jdoc:comment>
    • Op de plaats waar de je de titel van je site wil tonen (en bv. in de<title> tag) zet je
      <?php echo $mainframe->getCfg( ‘sitename’ ); ?>
    • In het gebied waar je de bodtext van een artikel (of een andere component) wil weergeven zet je dit:
      <jdoc:include type=”component” />
    • Als laatste moetje nog aangeven waar je allemaal modules wil kunnen plaatsen (bv footer, sidbar, …). Dit doe je door op al die plaatsen volgende code te zetten (vervang uiteraard de name door de naam die voor jou van toepassing is):
      <jdoc:include type=”modules” name=”jeZelfGekozenNaam” style=”xhtml” />
  • Je mag ook niet vergeten om verwijzingen naar afbeedlingen in de css-bestanden juist te zetten
  • Optioneel kan je een screenshot van je site nemen, en die mee in de map opslaan onder de naam template_thumbnail.png

De basis van je template is nu wel klaar, maar Joomla! zou nog niet alles terug vinden. Daarom moet je in je werkmap nog een xml-bestand maken met de naam templateDetails.xml. Wat hierin moet staan zal ik nu beschrijven:

Dit eerste blok is gewoon algemene informatie over wat het is, en van wie het komt
<install type=”template” version=”1.5″>
<name>NaamVanJeTemplate</name>
<creationDate>17/01/09</creationDate>
<author>jouwnaam</author>
<copyright>GNU/GPL</copyright>
<authorEmail> info@jouwemail.nlDit e-mail adres is beschermd tegen spambots. U heeft Javascript nodig om het te kunnen zien. </authorEmail>
<authorUrl>www.jouwsite.nl</authorUrl>
<version>0.1</version>
<description>Dit is een Template Tutorial voor Joomlers</description>

Het volgende blok geeft aan welke files er er tot deze template behoren. Als er ergens meerdere files zitten (bv. voor css) dan maak je gewoon een extra node aan <files>
<filename>
<filename>css/template.css</filename>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.php</filename>
</filename>
</files>

In dit laatste stuk worden de positions behandeld. Hier som je de namen op die je eerder aan de modules hebt gegeven in de index.php. Op deze manier zal Joomla! de posities herkennen en je de mogelijkheid geven modules op deze plaatsen te zetten
<positions>
<position>topMenu</position>
<position>sideMenu</position>
<position>sideMenu2</position>
<position>body</position>
<position>footer</position>
<position>language</position>
</positions>
</install>

Eens dit gedaan is mag je de hele map uploaden naar de map templates in de root van je Joomla! installati. Als alles goed verlopen is zou je nu in staat moeten zijn je eigen template te selecteren in de Joomla! administrator pagina’s.

Veel succes ermee!

Published
Categorized as Blog