Jaren actief
Websites / Apps
Kopjes koffie

Joomla - Handleiding

Wij ontwikkelen steeds vaker websites met Joomla als CMS (=Content Management System). Joomla is uiterst gebruiksvriendelijk. Om te beginnen met Joomla is het noodzakelijk om inzicht te krijgen in enkele basisbegrippen die dit CMS hanteerd. Daarom hebben we hier een aantal artikelen gepubliceerd die als leidraad of handleiding kunnen dienen.

3. Modulebeheer

Modules zijn kleine extensies c.q. uitbreidingen voor Joomla! die je op de website kunt tonen op plaatsen die de template toestaat. Als we kijken naar in onze template zijn er altijd diverse plaatsen waar we een module kunnen laden. Deze noemen we modules-positions.  De modules zijn te bereiken via "Extensies > Modulebeheer".

menu_extensiesNu komen we in een overzicht van modules. We zien dat er al veel modules in staan en zijn gepubliceerd, deze zijn tijdens de installatie geconfigureerd. Om bepaalde van deze modules uit te schakelen kunnen we deze selecteren en middels de knop 'Deactiveren' (rechts-boven) schakelen we deze direct uit en worden ze dus niet meer weergegeven op de website.

 

 

 

 

Wanneer we een nieuwe module willen gebruikendan klikken we rechtsboven op "Nieuw". Er verschijnt een overzicht met de verschillende typen modules die we kunnen gebruiken. 

module_nieuw

wanneer we een module selecteren dan moeten we vervolgens een aantal zaken invullen. Welke parameters en opties aanwezig zijn is verschillend per module. Een aantal zaken komen altijd voor. Als eerste vullen we de titel van de module in, deze komt in onze template boven de module te staan. Vervolgens geven we aan dat de module gepubliceerd moet zijn door "Geactiveerd" op 'ja' te zetten. Nu moeten we nog zorgen dat de module op de gewenste plaats in de template komt te staan. We kiezen (of typen) in de module, bij "Module Position", b.v. "left" om de module links op de website te plaatsen. Nu hebben we de module gekoppeld aan een positie in de template. We slaan tussentijds onze vooruitgang op, door rechtsboven op "Toepassen" te drukken (we zouden nu al resultaat moeten zien in onze website). Nu gaan we de parameters van de module invullen.

In het kader 'Menutoewijzing' kunnen we bepalen wanneer de module moet worden getoond. We hebben hier de keuze uit 3 opties: Alle, Geen of een selectie. Wanneer we laatste optie kiezen kunnen we één of meerdere (met inhouden van de Ctrl-toets) menu-opties kiezen. De module zal in dat geval alleen worden getoond wanneer de gebruiker de geselecteerde menuoptie heeft gekozen op de website.

Bij de parameters van de module zijn dus module-specifiek en moeten desgewenst ook worden ingevuld of aangepast. Nu zijn we klaar met het configureren van onze module en slaan we deze op.

Voor meer informatie over modules en de Module Manager raden we aan de officiële documentatie van Joomla! te bezoeken. Voor meer informatie in het Nederlands kun je ook de documentatie pagina's van Joomlacommunity.eu bekijken.

2. Menubeheer

Het maken van een menuknop is niet veel werk, het echte denkwerk is immers al gedaan. De beslissingen die vooral gemaakt moeten worden zijn:

  • Wat wil ik laten zien? Alle artikelen in één kolom, een artikel met of zonder titel, of een artikel met een printknopje naast de titel. Er zijn verschillende mogelijkheden hierin.
    Het tonen van een pagina van een geïnstalleerd componenten tonen is ook een optie. Dit laten we echter in deze handleiding achterwegen.
  • Welke knoppen wil ik laten zien in mijn menu en aan wie?
  • Hoe gaan die knoppen heten? Een belangrijke stap, want een goede naam schept duidelijkheid bij de bezoeker en een korte naam zorgt ervoor dat het menu past in de gemaakte layout.

Om deze keuze te maken moet u eerst weten welke verschillende vormen er zijn binnen Joomla! om content te tonen. Dit zijn er in totaal drie, namelijk:

Eén artikel - Article Layout
vorm1_article_layoutHierbij maken we een menuknop aan voor het tonen van één artikel. Handig voor bijvoorbeeld een disclaimer tekst of contactinformatie.

 

 

 

 

 

Meerdere intro's van artikelen - Category Blog Layout of Section Blog Layout
vorm2_blog_content_category Hierbij maken we een menuknop aan voor het tonen van meerdere intro's van artikelen. Onder de intro's staan "lees verder" knopjes waar een bezoeker op kan klikken om het hele artikel te lezen. Deze vorm van content tonen is ideaal voor bijvoorbeeld een nieuwsoverzicht of veelgestelde vragen.

 

 

 

 

Meerdere titels van artikelen - Category List Layout of Section Layout
vorm3_listHierbij wordt een lijst getoond van titels van artikelen. Eigenlijk wordt deze vorm van content tonen niet zo veel gebruikt. Het is alleen handig wanneer er een overzicht getoond wordt van meerdere artikelen.

 

 

 

 

 

Om een nieuwe menuoptie toe te voegen aan ons hoofdmenu gaan we naar 'Menu's - Main menu'. In dit menu zien we nog enkele voorbeelden van menuknoppen die tijdens de installatie zijn aangemaakt. Om hier een nieuwe knop aan toe te voegen, klikken we op "Nieuw". Wat volgt is een keuzescherm waarin de keuze gemaakt moet worden voor de juiste vorm.

menu_soortmenuoptie

Hier maken we de keuze die bovenaan in dit artikel verde is uitgelegd. We moeten de menuknop vervolgens goed configureren, zo moeten we:

  • De knop een titel geven.
  • De juiste categorie selecteren.
  • De parameters goed instellen om de content op de juiste manier te tonen.

De titel van de menuknop is niet zo moeilijk, deze vullen we in onder "Titel". Het enige dat we nu nog moeten doen is de categorie kiezen en de layout aanpassen zodat het laat zien wat we willen zien. Dit kunnen we doen aan de rechterkant in de "Parameters".

We zien in de parameters een aantal opties (afhankelijk van de gekozen layout). Hieronder een verklaring van een aantal gebruikte termen.:

  • #leading: Het aantal artikelen dat je over de hele breedte (in één kolom) wilt hebben.
  • #intro: Het aantal artikelen waarvan je de introductie wilt laten zien. Anders dan #leading kan de optie over meerdere kolommen worden verdeeld.
  • #columns: Het aantal kolommen waarover de introducties moeten worden verdeeld.
  • #links: mochten er meer dan de geselecteerder aantal artikelen zijn, dan verschijnt de rest als link vorm.

We drukken op "Opslaan" en we hebben onze menuknop aangemaakt. Als we nu naar onze website gaan zien we een knop verschijnen. (eventueel de website even verversen F5)

Voor meer informatie over het maken van menu-items en het beheer van verschillende menu's, raden we aan de om de Documentatie van Joomlacommunity.eu te bezoeken

1. Secties, Categorieën en Artikelen

Voordat we onze content gaan invoeren in Joomla!, kijken we eerst op welke manier we met Joomla! de content kunnen structureren. Joomla! gebruikt hier een systeem van drie lagen voor: de eerste laag is de Sectie, daarin zit de Categorie-laag waarin zich de artikelen bevinden. In het onderstaande plaatje vatten we schematisch deze structuur samen.

content-structuur

Secties
Secties zijn de hoogste laag binnen de contentstructuur van Joomla!. Ze zijn dan ook de meest algemene laag binnen de Joomla!-structuur. Dit wil zeggen dat je met een sectie globaal aangeeft wat voor type content er in zit, deze kan je verder definiëren binnen categorieën. Enkele voorbeelden van secties zijn: Nieuws, Over bedrijf, Projecten of Producten. In de backend van Joomla! gaan we in het menu naar 'Artikelen > Sectiebeheer'.

menu_artikelen

Standaard zijn over het algemeen een aantal voorbeeldsecties geïnstalleerd. Deze secties zijn over het algemeen zeer bruikbaar, maar wanneer u een extra sectie wenst dan klikken we op 'Nieuw' om een nieuwe sectie aan te maken. In het volgende scherm vullen we bij titel de naam van de sectie in. Met de rest van de velden doen we meestal niets, maar men kan hier zaken invullen zoals een omschrijving en afbeelding, ook kan men bepalen voor wie de sectie toegankelijk is. Nu slaan we de sectie op en keren we terug naar het overzicht.

Categorieën
Nu we de secties hebben behandeld kunnen we naar de volgende laag. Categorieën zijn de tweede laag binnen de structuur van Joomla!. Hierin maak je onderscheid tussen verschillende categorieën bínnen de sectie. Wanneer we dus een sectie Nieuws hebben, zouden enkele voorbeeldcategorieën zijn: Sitenieuws, Productnieuws of Bedrijfsnieuws. Hiermee zijn categorieën een stuk specifieker dan secties. We hebben de secties aangemaakt en kunnen nu de categorieën aanmaken. Om categorieën aan te maken gaan we in de backend van Joomla! naar 'Artikelen > Categoriebeheer'.

menu_artikelen

Artikelen
We hebben nu de twee bovenste lagen in de structuur gevuld en we kunnen aan de slag met het invoegen van artikelen. Artikelen zijn de laagste laag binnen Joomla! en bevatten de werkelijke content van de website. We vinden de artikelen onder 'Artikelen > Artikelbeheer'. We maken hierbij bij voorkeur gebruik van de JCE Editor, een van de beste editors voor Joomla!. Indien deze editor niet geïnstalleerd is, dan adviseren wij u deze te downloaden en alsnog te installeren.

Nu we de JCE Editor hebben geïnstalleerd / aangezet, kunnen we de content gaan invoeren. Hierbij maken we gebruik van de structuur die we gisteren hebben opgezet. Om ervaring met werken met de JCE Editor op te doen, gaan we een nieuwsitem invoeren. Om dit te doen gaan we in de Joomla! backend naar 'Artikele> Artikelbeheer'.

menu_artikelen

We komen in het overzicht van alle artikelen die beschikbaar zijn. Ook hier vinden we de voorbeeld content die we tijdens de installatie hebben ingevoegd. We willen een nieuw artikel aanmaken, dus klikken we rechtsboven op 'Nieuw'. Nu komen we in het scherm waarmee we een artikel kunnen bewerken.

Bij 'Titel' vullen de titel van ons artikel in. Vervolgens vinken we bij 'aan dat we het artikel direct willen publiceren. We laten 'Alias' leeg, omdat deze door Joomla! zelf wordt gevuld en ook '' laten we ongemoeid, omdat we het artikel niet op de voorpagina van de website willen tonen. Daarna kiezen we uit het 'Sectie'-selectielijstje de sectie waarin het artikel wordt gepubliceerd, bijvoorbeeld 'Nieuws', en vervolgens kiezen we uit 'Category' de categorie 'Algemeen'. Nu gaan we aan de slag met het invoeren van de content.

De JCE Editor
Als we iets naar beneden kijken, zien we de JCE Editor en het veld waar we de tekst moeten gaan invoeren.

jce

Als je bekend bent met tekstverwerkers zoals Word zullen enkele knoppen van de JCE Editor je zeer bekend voorkomen. Bijvoorbeeld het Bold of Italic maken van een stukje tekst, of het aanmaken van een genummerde of ongenummerde lijst. Maar er zullen ook veel knoppen tussen zitten die je niet kent. We zullen er hier een aantal van bespreken, bijvoorbeeld het aanmaken van een link, of een tussenkopje.

Om te beginnen voeren we bovenstaande tekst in in het tekstveld. Om hierbij een paragraaf te maken, drukken we op de Entertoets. Willen we echter alleen de regel afbreken (in dezelfde paragraaf), dan drukken we op Shift + Enter. Als we de tekst in zijn geheel hebben ingevoerd drukken we rechtsboven op "Apply" om het artikel op te slaan.

Als je tekst vanuit Word direct in Joomla! plakt, wordt er door Word opmaak meegezonden. JCE heeft een aparte knop om het merendeel van deze opmaak te verwijderen: 'Vanuit Word plakken'. Kopieer de tekst in Word en druk in JCE op deze knop (jce_btn_wordmet het Word-icoon er in). Plak de gekopieerde tekst erin en druk op 'Insert'. De meeste opmaak is nu verwijderd en we kunnen met een schone lei de tekst gaan opmaken.

Nu gaan we verder met de opmaak van onze tekst, zo willen we bijvoorbeeld een link opnemen naar de website van Scorpion Computers & Software. Hiervoor selecteren we in de tekst het woord Scorpion. Enkele knoppen in de Editor lichten nu op, waaronder het knopje om een link toe te voegen (jce_btn_link). Als we hierover met de muis staan, zien we 'Invoegen/bewerken link' staan. We klikken er op en een pop-up verschijnt. We vullen in deze pop-up bij URL de URL van de website van Scorpion Computers & Software (http://ScorpionComputers.nl) in en drukken op 'Insert'. Het geselecteerde is nu blauw geworden, een teken dat de link er in zit.

Nu willen we nog het tussenkopje een opmaak geven. We selecteren het tussenkopje. Nu klikken we in de Editor op het 'Opmaak'-selectieveld en selecteren daar 'Kop 3 / Heading 3'. De geselecteerde tekst is nu groter geworden en heeft een andere opmaak gekregen. We slaan het artikel nogmaals op door weer op 'Toepassen' te drukken.

Als laatste maken we een scheiding tussen een introductie en de rest van de tekst. Dit doen we zodat we op overzichtspagina's alleen de introductie zien in plaats van gelijk de gehele tekst. Zodra je dan op 'Read More' of 'Lees Verder' klikt krijg je het volledige artikel te zien. We willen dat de eerste alinea van het artikel de introductie wordt. Hiervoor zetten we onze cursor aan het einde van de eerste alinea. Als we onderaan de pagina kijken zien we een knop 'Invoegen lees meer' staan (jce_btn_readmore). We klikken hier op en er verschijnt een rode lijn in de Editor. Deze lijn geeft nu aan wat de introductie is en wat je extra ziet zodra je verder leest. We zijn voor vandaag klaar met het artikel, dus drukken we op 'Opslaan' om terug te keren naar het artikeloverzicht.

Voor meer informatie over JCE en de editor raden we aan de Support pagina's van JCE te bezoeken.

Wat vinden onze klanten

Jaren actief
Websites / Apps
Kopjes koffie

Schrijf jezelf in voor onze nieuwsbrief