Een Joomla Template Maken – De Basis

Wil je een Joomla template maken? Leuk dat je kijkt op mijn website. Voordat ik verder ga wil ik je eerst de volgende vraag stellen: Ben je op zoek naar hoe je een Joomla template moet maken? Ja? Dan mag ik je feliciteren dat je deze website hebt gevonden. Want vandaag ga ik je de basis uitleggen hoe je dat moet doen. Op internet vond ik namelijk dat er nog vrij weinig te vinden was over dit onderwerp. Vooral teksten in het Nederlands waren schaars. Daarom besloot ik dit artikel te schrijven.

Ik leg in dit artikel trouwens alleen de basis uit over het maken van een joomla template. Als je alles precies en goed wilt weten, raad ik je aan om hier eens te kijken: Klik hier om naar die pagina te gaan. 

Nu over naar de orde van de dag waar jij tenslotte voor bent gekomen ;-). Het maken van een Joomla template. Ik zal dit in 3 stappen voor je uitleggen.

1. Blanke Joomla template downloaden
2. De structuur
3. Het geraamte maken van de template/de blanke joomla template bewerken

Blanke Joomla template downloaden
Om de Joomla template te maken gebruiken we een blanke joomla template, die we vervolgens gaan aanpassen. Dit doen we omdat het veel sneller en efficiënter is dan het maken van template uit het niets.
Goed, hoe komen we aan de blanke Joomla template? Die gaan we nu downloaden op de volgende website: http://blank.vc/. Klik op de grote knop blank template free download.
Je krijgt nu een . zip bestand die je moet uitpakken. Als je het zip bestand hebt uitgepakt zou de map er zou uit moeten zien:

Oké we kunnen we door gaan naar het volgende punt. De structuur.

De structuur
Zoals je ziet bestaat de Blanke template uit een heleboel verschillende bestanden. Ik zal je uitleggen wat alle bestanden betekenen. Een belangrijke stap voor het maken van een Joomla template is namelijk het begrijpen van hoe een template in elkaar zit.

.git: Deze map is meer bedoelt voor mensen die het maken van een joomla template professioneel aanpakken. Door deze map hoef je de programmeercode maar te beperken tot een project, deze .git dus.

css: Deze map bevat alle stylesheets. Hier bepaal je de opmaak van de website. Dus bijvoorbeeld de achtergrondkleur, lettertype, letterkleur etc.
html: Alle bestanden van de overrides liggen in deze map. De overrides herschrijven de html kernbestanden. Hierdoor hoef je niet het origineel te veranderen maar kan je het rechtstreeks via de html bestanden doen.
images: Spreekt voor zich zou ik zeggen. De afbeeldingen van je website staan in deze map.

Js: De Javascript code ligt in deze map. Javascript is een programmeertaal die gebruikt wordt om bepaalde handelingen uit te voeren op je website. Zoals een bewegend beeld op je website. Deze map is trouwens niet noodzakelijk.
Language: Hierin laat je Joomla weten wat de taal is van de template. Dus bijvoorbeeld Engels of Nederlands.

psd: Als je nog Photoshop plaatjes hebt kan je die in deze map opslaan.

apple-touch-icon-57×57, 72×72 en 114×114. : Deze icoontjes kunnen worden gebruikt voor de iphone/ipod/ipad versie van je website. Dit icoontje staat dan linksboven in je adresbalk van het apple device.

CHANGELOG: Hierin staat een copyright van de template. Geen noodzakelijk bestand dus.
Component: Als je bij je templates ook nog componenten wilt maken kan je dat met dit php bestand doen. Componenten zijn extra’s die je aan je website kan toevoegen, zoals een vragenlijst of zoekfunctie

Error: Dit is de error pagina. Als een bezoeker van je website iets na de hoofdurl verkeert intypt krijgt hij deze foutmelding te zien.

favicon: Het pictogram dat linksboven in de browser wordt weergaven.

Index: Dit is het belangrijkste bestand van de template. Hier ga je de hoofdcode invullen en linken naar de andere bestanden in de template. De index.php is dus eigenlijk als het waren de home pagina waar alles samen komt.

offline: Als je website tijdelijk offline wordt gehaald, krijgt de bezoeker deze pagina te zien.

Readme: Een bestand van de maker van deze blanke template. Kan je verwijderen als je aan de slag gaat.

template_preview: Een plaatje van je template hoe die er uit komt te zien.

template_tuhmbnail: Bijna het zelfde als template_preview, maar dan hoe iets kleiner bestand en plaatje wat je op je joomla administratie panel krijgt te zien hoe je template er uit ziet.

templateDetails: Dit bestand zorgt voor de installatie van je joomla template. Daarnaast worden alles parameters hier ingevuld.

Dat was de structuur met alle begrippen van de Template. We gaan nu kijken naar de het maken van het geraamte van de template.

Het geraamte maken van de Template

De Joomla template die we gaan maken is een website met boven in een header, daaronder de content en tot slot de Footer.
Nu je een idee hebt gekregen hoe de template er uit komt te zien gaan we aan de slag.
Open nu de file index.php met kladblok of eventueel dreamweaver als je dat hebt. Ik zelf gebruik hiervoor dreamweaver. Je ziet nu een hele code, wat de broncode van de website is. Scroll naar beneden tot je dit ziet staan:
body class="<?php echo $pageclass; ?>">   <!--     YOUR CODE HERE   -->   <jdoc:include type="modules" name="debug" /> </body>


We gaan de header, content en footer toevoegen aan de code. We doen dit met <jdoc:include type="component" /> en jdoc:include type="modules" name="position_name" />

Vervang dus YOUR CODE HERE met <jdoc:include type="modules" name="header" /> <jdoc:include type="component" /> <jdoc:include type=”modules” name=”footer />

en delete: <jdoc:include type="modules" name="debug" />

Je hebt nu dit: body class="<?php echo $pageclass; ?>">   <!--  <jdoc:include type="modules" name="header" /> hier komt het menu <jdoc:include type="component" />  hier komt de content <jdoc:include type=”modules” name=”footer /> hier komt de footer     --> </body>

Om alles te configureren gaan je daar het bestand Templatedetails.xml en zoek je naar het volgende script:

<h2>Module positions</h2> <ol> <li>debug</li> </ol>

maak hier het volgende van:

<h2>Module positions</h2> <ol> <li>header</li> <li>footer</li> </ol>

Nu komt het laatste gedeelte wat we moeten aanpassen, namelijk de positie’s.
Dit ziet er als eerste zo uit: <positions><!-- define the positions for modules here --> <position>debug</position> </positions>

Verander dit naar: <positions><!-- define the positions for modules here --> <position>header</position> <position>Footer</position> </positions>

Oke we hebben nu eindelijk het geraamte gemaakt voor onze site af, de eerst stap. Er volgen nu nog meer stappen om de Joomla template af te maken.

Als je de volgende stappen in details wilt weten, klik dan hier

Bedankt voor je aandacht en veel succes in de toekomst met het maken van Joomla templates!

Geplaatst in Uncategorized

Een Joomla Template Installeren

Wil je zelf een joomla template installeren?

Het installeren van een joomla template is niet heel moeilijk om te doen. Maar het is wel handig om te weten hoe het precies zit. Daarom leg ik je in dit artikel uit hoe je een joomla template moet installeren. Dit doe ik met behulp van een stappenplan.

Stap 1: Ga naar je joomla administratie panel en log in. Om bij je administratie panel te komen typ je de URL van je website in met daarachter /administrator/. Dus zo moet het er in jouw adresbalk er uit zien: http://www.jouwdomeinnaam.nl/administrator/

Stap 2: Klik op het menu “extensies” rechts boven in de menubalk. Als je hier op hebt geklikt komt er een drop down menu naar beneden. Klik nu op Extension Manager.

Stap 3: Klik op browse En Zoek waar je de template hebt opgeslagen . Je ziet nu een scherm waar je de template die je graag voor je website wilt gebruiken, kunt installeren. Onder het kopje: Upload package file zie je een balkje met de knop browse ernaast. Klik daar op. Je wordt nu geleid naar je bestanden van je computer. Zoek waar je de template hebt opgeslagen en dubbel klik op die map. Dit moet trouwens een .zip of .rar bestand zijn.

Stap 4: Klik op installeren. Simpeler kan ik het niet maken.

Stap 5: Ga naar de template manager. De template is nu geïnstalleerd. Maar dit betekent niet dat de template ook op je website zal staan. Hiervoor moet je deze template eerst als Standaard instellen. Ga hiervoor terug naar het menu extensies en klik op template manager.

Stap 6: Stel je template in als standaard. Vink de template aan die je net hebt geïnstalleerd en klik op standaard. Dit is te herkennen aan het gele sterretje. 

Dat was het stappenplan. Een kind kan de was doen. Hieronder nog even een filmpje hoe de stappen in 2 minuten nog duidelijker worden.

Geplaatst in Uncategorized

Joomla Template Maken – Nieuwe Website!

Welkom op mijn nieuwe website over het onderwerp joomla template maken. Op deze website ga ik jullie uitleggen hoe je zelf een joomla template kan maken. En dit is helemaal niet zo moeilijk als je zelf denkt 😉

Na ongeveer 2 jaar gewerkt te hebben met joomla, heb ik nu al aardig wat ervaring met dit content management systeem opgedaan. Die ervaring deel ik met je op deze website.  Ik vond namelijk dat er op internet nog niet zo heel veel te vinden was over dit onderwerp, dus besloot ik er een website over te maken. Overigs bespreek ik op deze website niet de basis van joomla. Ik richt me specifiek op het onderwerp joomla templates. Als je meer wilt weten over de basis van joomla moet je maar even zoeken op google. Daarover is wel genoeg te vinden naar mijn mening.

Het is je misschien opgevallen dat ik gebruik maak van een wordpress template op deze blog. Dat klopt inderdaad, wat misschien nogal ironisch is, gezien deze website gaat over het maken van joomla templates. Maar ik doe dit met de reden dat ik ook eens wat anders wil uit proberen. Joomla is zeker niet slechter dan wordpress. Ik denk dat allebei zo’n zn voordelen en nadelen hebben.

Ik wens je veel succes met het maken van een joomla template in de toekomst!

 

 

 

Geplaatst in Uncategorized
Joomla Template Maken located at , , . Reviewed by 173 bezoekers rated: 4.7 / 5