Basiscursus Joomla! 3

Transcriptie

1 Basiscursus Joomla! 3

2 Basiscursussen en Handboeken verschenen bij Academic Service: Basiscursus Access 2010 Basiscursus Access 2007 Basiscursus Access 2003 Basiscursus Apps ontwikkelen Basiscursus ASP.NET Basiscursus AutoCAD 2014 en LT 2014 Basiscursus AutoCAD 2013 en LT 2013 Basiscursus AutoCAD 2012 en LT 2012 Basiscursus AutoCAD 2011 en LT 2011 Basiscursus AutoCAD 2010 en LT 2010 Basiscursus AutoCAD 2009 en LT 2009 Basiscursus AutoCAD 2008 en LT 2008 Basiscursus AutoCAD 2007 en LT 2007 Basiscursus AutoCAD 2005 en LT 2005 Basiscursus AutoCAD 2004 Basiscursus AutoCAD LT 2004 Basiscursus Dreamweaver CS5 Basiscursus Dreamweaver CS4 Basiscursus Dreamweaver CS3 Basiscursus Dreamweaver 8 Basiscursus Dreamweaver MX 2004 Basiscursus Drupal Basiscursus Excel 2013 Basiscursus Excel 2010 Basiscursus Excel 2007 Basiscursus Excel 2003 Basiscursus Excel 2002 Basiscursus Flash CS5/ActionScript Basiscursus Flash CS4 Basiscursus Flash CS3 Basiscursus Flash 8 Basiscursus Flash MX 2004 Basiscursus FrontPage 2003 Basiscursus Gamedesign Basiscursus HTML 5 Basiscursus HTML 4.01 Basiscursus Illustrator CS4 Basiscursus Illustrator CS3 Basiscursus Illustrator CS2 Basiscursus InDesign CS4 Basiscursus InDesign CS3 Basiscursus InDesign CS2 Basiscursus JavaScript 1.5 Basiscursus Joomla! 3 Basiscursus Joomla! 1.6 Basiscursus Joomla! 1.5 Basiscursus Mac OSX 10.5 Leopard Basiscursus Office 365 Basiscursus Office 2013 Basiscursus Outlook 2013 Basiscursus Outlook 2010 Basiscursus Outlook 2007 Basiscursus Outlook 2003 Basiscursus Photoshop CS5 Basiscursus Photoshop CS4 Basiscursus Photoshop CS3 Basiscursus Photoshop 7 Basiscursus PHP 6 Basiscursus PHP5.4 en mysql Basiscursus PHP 5 Basiscursus Pinnacle Studio 10 Basiscursus Pinnacle Studio 9 Basiscursus PowerPoint 2013 Basiscursus PowerPoint 2010 Basiscursus PowerPoint 2007 Basiscursus PowerPoint 2003 Basiscursus Project 2003 Basiscursus Project 2013 Basiscursus SEO & HTML5 Basiscursus SQL, 2e herziene druk Basiscursus SUSE Linux 10 Basiscursus Ubuntu Basiscursus Ubuntu Basiscursus Ubuntu Basiscursus Visio 2013 Basiscursus Visio 2010 Basiscursus Visual Basic 6.0 Basiscursus Windows 8.1 Basiscursus Windows 8 Basiscursus Windows 7 Basiscursus Windows Vista Basiscursus Windows XP Basiscursus Word 2013 Basiscursus Word 2010 Basiscursus Word 2007 Basiscursus Word 2003 Basiscursus XHTML 1.0 Basiscursus XML herziene editie Handboek Excel 2013 Handboek Word 2013 Handboek Windows 8.1 Voor meer informatie en bestellingen: BIM Media B.V. Postbus BG Den Haag Tel.: Website:

3 Eric Tiggeler Basiscursus Joomla! 3 Herziene editie

4 Meer informatie over deze en andere uitgaven kunt u verkrijgen bij: BIM Media B.V. Postbus BG Den Haag tel.: (070) Omslagontwerp: LandGraphics, Amsterdam Vormgeving en zetwerk: Redactiebureau Ron Heijer, Markelo Druk- en bindwerk: Wilco, Amersfoort ISBN: NUR: 980 BIM Media B.V. 2014, Den Haag Academic Service is een imprint van BIM Media B.V. Alle rechten voorbehouden. Alle intellectuele eigendomsrechten, zoals auteurs- en data bankrechten, ten aanzien van deze uitgave worden uitdrukkelijk voorbehouden. Deze rechten berusten bij BIM Media B.V. en de auteur. Behoudens de in of krachtens de Auteurswet gestelde uitzonderingen, mag niets uit deze uitgave worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand of openbaar gemaakt in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever. Voor zover het maken van reprografische verveelvoudigingen uit deze uitgave is toegestaan op grond van artikel 16 h Auteurswet, dient men de daarvoor wettelijk verschuldigde vergoedingen te voldoen aan de Stichting Reprorecht (Postbus 3051, 2130 KB Hoofddorp, Voor het overnemen van gedeelte(n) uit deze uitgave in bloemlezingen, readers en andere compilatiewerken (artikel 16 Auteurswet) dient men zich te wenden tot de Stichting PRO (Stichting Publicatie- en Reproductierechten Organisatie, Postbus 3060, 2130 KB Hoofddorp, Voor het overnemen van een gedeelte van deze uitgave ten behoeve van commerciële doeleinden dient men zich te wenden tot de uitgever. Hoewel aan de totstandkoming van deze uitgave de uiterste zorg is besteed, kan voor de afwezigheid van eventuele (druk)fouten en onvolledigheden niet worden ingestaan en aanvaarden de auteur(s), redacteur(en) en uitgever deswege geen aansprakelijkheid voor de gevolgen van eventueel voorkomende fouten en onvolledigheden. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the publisher s prior consent. While every effort has been made to ensure the reliability of the information presented in this publication, BIM Media B.V. neither guarantees the accuracy of the data contained herein nor accepts responsibility for errors or omissions or their consequences.

5 Inhoud Hoofdstuk 1 Inleiding 1 Hoofdstuk 2 Joomla installeren In dit hoofdstuk Wat heb je nodig? Stap 1: een database maken Stap 2: Joomla downloaden Stap 3: de Joomla-bestanden op de webserver plaatsen Stap 4: de Joomla-software installeren Het resultaat: een werkende voorbeeldsite 18 Hoofdstuk 3 De beheeromgeving van Joomla verkennen In dit hoofdstuk Introductie: hoe werk je met een cms? De beheeromgeving: jouw werkplek Hoe zit de beheeromgeving in elkaar? De mogelijkheden van de beheeromgeving uitproberen 28 Hoofdstuk 4 De content indelen met categorieën en tags In dit hoofdstuk Stap 1: bepaal welke categorieën je nodig hebt Stap 2: categorieën en subcategorieën maken Instellingen van categorieën aanpassen Categorieën verwijderen Tags gebruiken om content beter vindbaar te maken 45 Hoofdstuk 5 Contentpagina s maken In dit hoofdstuk Artikelen schrijven en bewerken in de artikel editor Het artikel zichtbaar maken op de site Afbeeldingen aan artikelen toevoegen Artikelen verdelen in intro en hoofdtekst De velden Afbeeldingen en links gebruiken Instellingen van artikelen aanpassen Artikelen verwijderen Artikelen archiveren 68 v

6 vi Basiscursus Joomla! 3 Hoofdstuk 6 Homepages en categoriepagina s maken In dit hoofdstuk Bepalen welke informatie op de homepage komt De indeling van de homepage veranderen Categoriepagina s maken Overzichtspagina s maken met getagde artikelen 85 Hoofdstuk 7 Menu s en hyperlinks maken In dit hoofdstuk Een nieuw menu maken Een menu aanpassen Een horizontaal drop-downmenu gebruiken Verschillende soorten menulinks maken Een hyperlink binnen een artikel toevoegen 100 Hoofdstuk 8 De site uitbreiden met extensies In dit hoofdstuk Soorten extensies Werken met de meegeleverde extensies: module Aangepaste HTML Extensies downloaden en toevoegen aan de site Meer extensies vinden 113 Hoofdstuk 9 Gebruikersbeheer: gebruikers laten inloggen In dit hoofdstuk Gebruikersaccounts aanmaken Inloggen als nieuwe gebruiker Zelfregistratie van bezoekers mogelijk maken Speciale content aanbieden aan geregistreerde gebruikers 123 Hoofdstuk 10 Templates: de vormgeving van de site aanpassen In dit hoofdstuk Wat is een template? De standaardtemplate aanpassen Een nieuwe template downloaden en installeren De gedownloade template aanpassen Waar vind je templates? 139 Hoofdstuk 11 En nu verder! De voorbeelddata verwijderen Verder bouwen aan je eigen site Handige websites 145 Bijlage A De site beveiligen 147 A.1 Regelmatig updaten 147 A.2 De standaardgebruikersnaam wijzigen 148 A.3 Sterke wachtwoorden gebruiken 148 A.4 Mappen en bestanden beschermen 148 A.5 Back-ups maken 150 A.6 Blijf op de hoogte 152

7 Inhoud vii Bijlage B De site beter vindbaar maken 153 B.1 Gebruik informatieve titels 153 B.2 Bouw het artikel goed op 153 B.3 Gebruik zoektermen in de tekst 154 B.4 Voeg tekst toe aan plaatjes 154 B.5 Voeg metadata toe 154 B.6 Zoekmachinevriendelijke URL s 155 B.7 Wat kun je nog meer doen? 155 Register 157

8

9 1 Inleiding Joomla is een contentmanagementsysteem: software waarmee je websites kunt bouwen en onderhouden. Of je nu een professionele webdesigner bent of 1 een hobbyist, met Joomla kun je professionele websites ontwikkelen met zeer veel mogelijkheden websites waarvoor vroeger een groot budget en heel veel programmeerkennis nodig was. Wat is een contentmanagementsysteem? Een contentmanagementsysteem (cms) is software die je installeert op een webserver en die al meteen een kant-en-klare basis bevat voor een website. Je hoeft dus niet vanaf nul te beginnen; in het cms zitten alle belangrijke functies van een website ingebouwd. Joomla bevat bovendien ook al voorbeeldcontent, zodat je meteen een beeld krijgt van de mogelijkheden en een basis om op verder te bouwen. Een website bouwen met een cms betekent dat je de cms-software installeert en vervolgens met die software de website aanpast en aanvult. Je voegt je eigen logo toe, verandert het design, je maakt pagina s, je maakt menu s enzovoort. Verder kun je extra s toevoegen, of je nu een bezoekersforum nodig hebt of een gallery om foto s te laten zien. Werken aan je website doe je online, dat wil zeggen in een webbrowser. Je logt in aan de achterkant van je site, je komt terecht in de beheeromgeving, en daar pas je de site aan en breid je deze uit. Je hebt daarvoor geen programmeerkennis nodig of kennis van codetalen zoals HTML, CSS of php. Wat is Joomla? Joomla is een gratis beschikbaar contentmanagementsysteem. Het is opensourcesoftware: het cms wordt niet op de markt gebracht door een commerciële organisatie, maar wordt ontwikkeld en ondersteund door een wereldwijde groep ( community ) van vrijwilligers. Joomla is lang niet het enige opensource-cms; heel bekend zijn bijvoorbeeld ook WordPress en Drupal. Joomla springt eruit doordat het erg veel mogelijkheden heeft en toch ook voor beginners begrijpelijk is. Joomla is misschien wel het populairste contentmanagementsysteem wereldwijd; het is de motor van vele miljoenen websites. 1

10 2 Basiscursus Joomla! 3 Joomla is geschikt om heel uiteenlopende websites te maken, van een kleine persoonlijke site tot een site voor je vereniging of bedrijf die je samen met anderen beheert. Joomla 3.3, 3.4, 3.5, 3.x Wat is de nieuwste versie? Vroeger werkte Joomla met vaste versienummers: Joomla 1.5, 2.5 en 3.5 waren gepland als definitieve versies die langere tijd ondersteund werden. Maar in 2014 hebben de makers van Joomla een andere keuze gemaakt. Er komt geen definitieve versie; vanaf Joomla 3.3 blijven er updates verschijnen: 3.4, 3.5, 3.6 enzovoort. Het voordeel is dat er zo steeds nieuwe mogelijkheden en verbeteringen aan het cms kunnen worden toegevoegd: de ontwikkeling wordt niet bevroren bij één versienummer. Doordat je met één klik kunt updaten naar een hogere versie van Joomla 3.x, krijg je als gebruiker dus gemakkelijk de beschikking over een verbeterde versie. (Echt grote wijzigingen komen er trouwens niet: die kun je pas weer verwachten bij versie 4.) Dit boek richt zich op de vernieuwingen vanaf Joomla 3.3. Omdat Joomla voortdurend wordt doorontwikkeld, kunnen er altijd details veranderen of nieuwe mogelijkheden bij komen. Kijk op voor extra informatie over updates. Wat is er nieuw in Joomla 3.x? Joomla bestaat sinds Sinds de laatste versies is de gebruiksvriendelijkheid weer vergroot, waardoor je sneller kunt werken en met minder muisklikken meer bereikt. Bovendien zijn de mogelijkheden van het programma verder uitgebreid. Meer gebruiksgemak De achterkant van Joomla, de beheeromgeving waar je als site-ontwikkelaar werkt om de site te maken en onderhouden, is volledig veranderd. Knoppen en functies zijn logischer ingedeeld, zodat zowel beginners als gevorderden er sneller en gemakkelijker mee kunnen werken. Er is bijvoorbeeld ook een betere teksteditor, waardoor je makkelijker kunt tekstverwerken in Joomla-artikelen. Sneller installeren Joomla is sneller te installeren: het aantal schermen dat je moet doorklikken om de installatie af te ronden is sterk verkleind. Responsive design Joomla 3.x is geschikt voor het mobiele web. Daar profiteren zowel sitebeheerders als sitebezoekers van, want zowel de beheeromgeving als de voorbeeldtemplates maken gebruik van een zogenoemde responsive techniek. Die zorgt ervoor dat de lay-out zich automatisch aanpast aan schermen van verschillende afmetingen, van desktop tot smartphone.

11 1 Inleiding 3 Figuur 1.1: Websites gemaakt met Joomla 3 zijn geschikt voor elk apparaat Revisies bijhouden Als je een artikel wijzigt,houdt Joomla de wijzigingen bij. Wil je terug naar een vorige versie van een artikel? Bijvoorbeeld omdat jij of een ander per vergissing delen van de tekst hebt geschrapt? Dan kun je eenvoudig vorige versies van de tekst bekijken en de wijzigingen ongedaan maken. Artikelen labelen met tags Als je de site indeelt, kun je nu ook gebruikmaken van tags. Je kon tot nu toe artikelen indelen in categorieën, maar daarnaast kun je er ook tags (labels) aan hangen. Zo kunnen gebruikers heel makkelijk artikelen vinden met dezelf de tag, of ze nu in dezelfde categorie zitten of niet. Naast de vernieuwingen in Joomla 3.x zijn de bestaande voordelen van Joomla onveranderd: Eenvoudig werken met content Je kunt content gemakkelijk indelen in net zo veel categorieën en subcategorieën als je wilt. Dat is erg handig als je een grote website hebt met veel artikelen. Rechten van gebruikers beheren Joomla beschikt over een verfijnd systeem van toegangsbeheerniveaus (Access Control Levels) voor gebruikers. Het doel is dat je heel nauwkeurig kunt regelen wat ingelogde gebruikers mogen zien en doen op de site. De vormgeving aanpassen met sjablonen Met templates (sjablonen) verander je in een paar klikken de vormgeving van de site; Joomla bevat nieuwe sjablonen die meer mogelijkheden bieden.

12 4 Basiscursus Joomla! 3 Werken met uitbreidingen (extensies) Extensies zijn een sleutelbegrip in Joomla. Extensies zijn uitbreidingen van de basisfuncties van de site; denk aan een blokje met hyperlinks naar meest gelezen artikelen, of een fotogallery. Joomla maakt het zeer eenvoudig om extensies te installeren, te beheren en te updaten. In deze Basiscursus maak je kennis met alle belangrijke functies en de belangrijkste vernieuwingen van Joomla 3.x. Voor wie is dit boek? De Basiscursus Joomla! is bedoeld voor mensen die een website willen maken met Joomla en nog geen ervaring hebben met dit contentmanagementsysteem. Als je al eens kennisgemaakt hebt met eerdere versies van Joomla, ben je met deze basiscursus weer helemaal bij. Je leert vanaf de installatie stap voor stap hoe je een website bouwt met Joomla en je krijgt adviezen om een stap verder te zetten en net iets meer uit Joomla te halen. Tenslotte wil je niet zomaar een website maken, maar een site die er professioneel uitziet en prettig werkt. Dat kan met Joomla, en daarvoor hoef je geen gevorderde gebruiker te zijn. Inhoud van deze Basiscursus In dit boek maak je kennis met de basisvaardigheden die je nodig hebt bij elke site die je met Joomla wilt bouwen. Eerst installeer je de software en ontdek je wat er allemaal zit in de meegeleverde voorbeeldwebsite. Daarna begin je met de basis voor elke Joomla-site: je maakt een indeling voor de site, door categorieën aan te maken. Vervolgens leer je hoe je die categorieën vult: je maakt verschillende soorten pagina s, voegt menu s toe, je installeert extra s (speciale functies) en je stelt de site open voor andere gebruikers. Ten slotte pas je de layout van je site aan naar je eigen smaak. Aanwijzingen voor het gebruik van dit boek Deze basiscursus is bedoeld om naast de computer te gebruiken. Zo kun je zelf zien hoe Joomla werkt en meteen in de praktijk brengen wat je leert. Elk hoofdstuk in de basiscursus bevat oefeningen waarmee je alle handelingen onder de knie krijgt die je als webdesigner in Joomla nodig hebt. Toetsen die je op het toetsenbord indrukt, worden in een vet lettertype weergegeven. Bijvoorbeeld: druk op de Enter-toets. Ook stukjes tekst die je moet intypen, worden vet weergegeven. De namen van schermonderdelen, opties, dialoogvensters en knoppen worden weergegeven in dit lettertype.

13 1 Inleiding 5 Tips en waarschuwingen herken je aan deze vormgeving. Joomla! of Joomla? De naam van de software is eigenlijk Joomla!, met uitroepteken. De naam komt uit het Swahili en betekent zoiets als allemaal samen! Omdat een uitroepteken in gewone tekst opvallend is (en soms verwarrend kan zijn), schrijven we in dit boek verder Joomla. Website Je kunt de oefeningen in deze basiscursus prima doen zonder extra bestanden. Alles wat je nodig hebt, wordt al mee geïnstalleerd met Joomla. Wil je de specifieke afbeeldingen, logo s en dergelijke uit de voorbeelden in dit boek downloaden, ga dan naar Daar vind je links naar voorbeeldbestanden die je kunt downloaden om ze te gebruiken in de oefeningen. Heb je vragen, ga ook dan naar Op die website vind je een contactformulier. Aarzel niet om vragen te stellen of suggesties te doen. Ook vind je er up-to-date informatie over nieuwere versies van Joomla.

14

15 2 Joomla installeren Om een website met Joomla te kunnen opzetten, moet je Joomla installeren op een webserver. Als je dat nog nooit gedaan hebt, lijkt dat misschien 2 ingewikkeld. Toch is het prima te doen wanneer je stap voor stap de installatieprocedure volgt. De eerste keer kan het je wat meer tijd kosten, maar geroutineerde Joomla-gebruikers installeren de software in een paar minuten. 2.1 In dit hoofdstuk Wat heb je nodig? Stap 1: een database maken Stap 2: Joomla downloaden Stap 3: de Joomla-bestanden op de webserver plaatsen Stap 4: de Joomla-software installeren Het resultaat: een werkende voorbeeldsite 2.2 Wat heb je nodig? Joomla is een webapplicatie: software die je installeert op een webserver. Vervolgens kun je die software online gebruiken. Vanaf elke computer met toegang tot internet kun je inloggen op de beheeromgeving van jouw Joomla-installatie op jouw webadres. Om Joomla te installeren, heb je het volgende nodig: 1 Een domeinnaam, zoals of De domeinnaam wordt het webadres waar jouw site te bereiken is. Ook domeinnamen met andere extensies dan nl of be ( of www. website.net) zijn natuurlijk mogelijk. Een domeinnaam kun je reserveren en per jaar of meer jaren huren bij een webhostingbedrijf of een domeinregistratiebedrijf. Op de site van de webhost kun je controleren welk webdomein nog vrij is. Voor alle duidelijkheid: aan een domeinnaam alleen heb je niets; zodra je een domeinnaam geregistreerd hebt, betekent dat alleen 7

16 8 Basiscursus Joomla! 3 dat je die kúnt gebruiken. Om dat ook daadwerkelijk te doen, heb je ook een hostingaccount nodig zie de volgende stap. 2 Een abonnement (hostingaccount) bij een webhostingbedrijf Een hostingaccount nemen betekent dat je een stukje ruimte op een computer huurt die permanent in verbinding staat met internet. De webhost zorgt ervoor dat wat je op die webruimte zet, voor iedereen benaderbaar wordt via jouw domeinnaam. Bovendien zorgt de webhost ervoor dat jij als beheerder (met je eigen inlognaam en wachtwoord) toegang hebt tot die webruimte, om er bestanden op te kunnen plaatsen. Op die manier kun je software zoals Joomla op jouw webruimte installeren. Joomla gebruikt de codetaal PHP en slaat gegevens op in een database (een MySQL-database). Bij vrijwel elke webhost kun je tegenwoordig terecht voor een hostingaccount die Joomla ondersteunt. Op de volgende pagina zie je aan welke eisen de webhost precies moet voldoen. 3 Een FTP-programma Om Joomla te installeren, moet je de programmabestanden vanaf je computer kopiëren naar de webserver. Dat heet uploaden. Je hebt daarvoor een FTP-programma nodig. Dat werkt simpel: een FTP-programma is niet veel anders dan de Verkenner in Windows of de Finder op de Mac. Je kopieert er bestanden mee van de ene naar de andere computerlocatie. Het verschil is dat je bij een FTP-programma niet kopieert naar een map op je eigen computer, maar naar een map op een webserver. Als je nog niet bekend bent met FTP, zoek dan op het web naar FTP uitleg om meer te leren over hoe je aan een FTP-programma komt en hoe het werkt. Hoe kom je aan FTP-software? Een aanrader is het gratis (open source) programma Filezilla, beschikbaar voor alle gangbare computers (Windows, Apple en Linux). Je kunt het downloaden vanaf Je boodschappenlijstje bij het kiezen van een webhost Hostingaccounts zijn er in verschillende soorten en maten. Voordat je een abonnement neemt, is het belangrijk om te controleren of jouw webhost voldoet aan de installatievereisten van de huidige versie van Joomla 3. De huidige versie stelt hogere eisen dan Joomla 2.5 en 3.0, dus vraag je webhost of de webhostingaccount voldoet aan de onderstaande lijst met systeemeisen. Met name de eerste drie eisen zijn heel belangrijk, anders kun je Joomla niet installeren.

17 2 Joomla installeren 9 PHP of hoger. PHP is de programmeertaal waarin Joomla geschreven is. MySQL 5.1 of hoger. MySQL is het type database waarin Joomla de ge gevens (met name de content van je site) opslaat. Bij de hostingaccount heb je minimaal één (lege) database nodig om Joomla te kunnen laten werken. De ene provider voegt zo n database al meteen toe aan je hostingpakket, bij de ander heb je de vrijheid om een of meer databases zelf aan te maken. In de praktijk zit je met beide mogelijkheden goed. Apache 2.x of hoger. Apache is de webserversoftware die ervoor zorgt dat Joomla (de PHP-code en de MySQL-database) kan functioneren. De hostingaccount moet aan twee technische vereisten voldoen: ondersteuning van XML en van Zlib. Die afkortingen staan voor specifieke technologie die Joomla gebruikt, en waar je als gebruiker verder niet mee te maken hebt zolang je webhost maar zorgt dat het werkt. Maar dit zijn geen bijzondere eisen; bij de meeste webhosts zit dit goed. Als je een hostingaccount hebt geregeld, krijg je van je webhost een mail met alle gegevens die je nodig hebt om bestanden toe te voegen op jouw website. Een webhost biedt je bovendien toegang tot een beheeromgeving: een door de host geïnstalleerd programma waarin je inlogt en allerlei zaken kunt regelen op jouw stukje webruimte: bijvoorbeeld bestanden toevoegen, instellingen wijzigen, een nieuwe database aanmaken. Veelgebruikte beheertools zijn Plesk, cpanel of DirectAdmin. Het kan ook simpeler: Joomla in één stap installeren De installatie van Joomla is prima te doen, ook als je nog nooit software op een webserver hebt gezet. Maar het is wel een nauwkeurige procedure, en zeker de eerste keer vergt het wel wat tijd. Om je het werk uit handen te nemen, bieden sommige webhosts ook een Joomla-installatie in één klik aan. Bij je account krijg je dan ook toegang tot een programma (een voorbeeld daarvan is Installatron) dat je de keuze biedt uit webapplicaties die je automatisch kunt installeren, waaronder Joomla. Dat werkt gemakkelijk en snel. Het enige bezwaar van deze automatische procedure is dat je wat minder handmatige controle hebt over de instellingen. Verder moet je goed in de gaten houden dat je de meest recente versie installeert (dus bijvoorbeeld niet 2.5). Als je Joomla vaker wilt gebruiken, is het aan te raden om te leren hoe de installatie werkt en die zélf te regelen. Omdat lang niet elke webhost deze automatische procedure aanbiedt, gaan we er hierna van uit dat je Joomla op de gewone manier installeert.

18 10 Basiscursus Joomla! Stap 1: een database maken Joomla maakt gebruik van een database. Voordat je Joomla kunt installeren, moet die (lege) database al aangemaakt zijn op de webserver. Een database aanmaken doe je in de beheeromgeving (vaak control panel genoemd) die bij je hostingaccount hoort. Hieronder gebruiken we de beheeromgeving Plesk als voorbeeld, maar als je bij jouw host een ander programma gebruikt, is de aanpak vergelijkbaar. Kort en goed komt die aanpak hierop neer: je logt in in de beheeromgeving, maakt eerst een nieuwe database aan en voegt vervolgens een databasegebruiker toe. Het kan zijn dat je niet zelf een database hoeft te maken. Sommige webhosts leveren bij het hostingpakket standaard al een lege database met inloggegevens. Als dat zo is, staat dat in je accountinformatie die je van de webhost hebt ontvangen. In dat geval kun je de eerste stap hieronder overslaan. Zoek dan wel de benodigde gegevens op: de naam van de database en de gebruikersnaam en het wachtwoord. Die heb je vanaf stap 2 nodig. Oefening 2.1: Een database maken in de webbeheeromgeving 1 Log in op het webadres van Plesk. Dat adres heb je gekregen van je webhost. Het kan zoiets zijn als Gebruik voor het inloggen de gegevens die je van de webhost hebt ontvangen. 2 Voeg een nieuwe database toe. Ga op de startpagina van Plesk naar Services en klik op de knop Databases. 3 Klik in het volgende scherm op Add Nieuw Database (Nieuwe database). Figuur 2.1: Een database toevoegen in Plesk 4 Kies een naam voor de nieuwe database, bijvoorbeeld joomla. Welke naam je kiest, maakt niet uit; de naam wordt alleen door het systeem gebruikt en verschijnt nergens op de site. Klik op OK. Je krijgt nu een bevestiging te zien: Information: Database joomla has been created. 5 Maak een nieuwe gebruiker aan voor de database: klik op de knop Add Nieuw Database User (Nieuwe Database Gebruiker). Voer een inlognaam in (die je zelf bedenkt) en een password (dat je ook zelf bedenkt) voor de nieuwe gebruiker.

19 2 Joomla installeren 11 De database is klaar. Noteer de databasegegevens die je straks nodig hebt bij de installatie van Joomla: de naam van de database, de inlognaam en het password van de databasegebruiker. 2.4 Stap 2: Joomla downloaden In deze stap download je de software die je straks gaat installeren. Oefening 2.2: Joomla downloaden 1 Ga naar en kies de meest recente versie van Joomla. Op het moment van schrijven is dat Joomla Stable Full in Dutch. Hier download je al meteen de Nederlandstalige versie van Joomla. (Versies in andere talen vind je via de website van Joomla zelf, www. joomla.org.) 2 De programmabestanden zijn samengepakt in één zipbestand om het te downloaden bestand zo klein mogelijk te houden. Het zipbestand is één bestand waarin de duizenden bestanden zitten die samen de Joomla-software vormen. Sla dit zipbestand op in een map op je computer. 3 Pak de bestanden in het zipbestand uit. In Windows doe je dat door te dubbel kikken op het bestand; Windows vraagt dan waar het de uitgepakte bestanden moet opslaan. Sla de uitgepakte bestanden bijvoorbeeld op in een map joomla op je Bureaublad. 2.5 Stap 3: de Joomla-bestanden op de webserver plaatsen Nu kun je alle bestanden uploaden naar de webserver. Je hebt daarvoor een FTP-programma nodig (zie paragraaf 2.2 hierboven). Oefening 2.3: Bestanden kopiëren naar de server 1 Open je FTP-programma en maak een verbinding met de FTP-server: de webserver waar je op inlogt en vervolgens bestanden naartoe kunt kopiëren. Gebruik daarvoor de gegevens die je hebt ontvangen van je webhost: het adres van de FTP-webserver (bijvoorbeeld en een inlognaam een wachtwoord. 2 Upload alle uitgepakte programmabestanden. Dat doe je als volgt: a Selecteer in het FTP-programma alle bestanden van Joomla. Als je het voorbeeld hierboven hebt gevolgd, staan die bestanden in een map joomla. Selecteer niet de map, maar selecteer in die map alle bestanden zélf. b Upload de bestanden naar de rootmap van de webserver. Dat is de basis map van de webserver, de plek waar jouw websitebestanden komen te staan. De rootmap heeft vaak een naam als htdocs, httpdocs of www. Als je die map niet kunt vinden, kan je webhost je daarover informeren.

20 12 Basiscursus Joomla! 3 Figuur 2.2: Bestanden kopiëren met een FTP-programma Bestanden via FTP naar het web uploaden is niet ingewikkelder dan wat je hierboven ziet: links selecteer je de map waarin de Joomla-bestanden op je computer staan, rechts navigeer je naar de rootmap op de webserver (hier heet die map httpdocs). Klik op de pijl naar rechts om de bestanden over te zetten van links naar rechts. Je ziet in het rechtervenster alle geüploade bestanden verschijnen. Dit neemt wel wat tijd; voordat alle Joomla-bestanden zijn overgezet, kan er zo n vijf tot tien minuten overheen gaan. 2.6 Stap 4: de Joomla-software installeren Nu kun je Joomla installeren. De installatieprocedure is sinds Joomla 3 een stuk eenvoudiger gemaakt. Oefening 2.4: De online-installatieprocedure uitvoeren 1 Ga in je browser naar het webadres waar je de bestanden naartoe gekopieerd hebt; in principe is dat gewoon je domeinnaam, bijvoorbeeld Als je dat webadres intikt, word je automatisch doorgeleid naar 2 Je ziet het eerste scherm van de Joomla-installatieprocedure (zie figuur 2.3). 3 Hier maak je een aantal keuzes en vul je de benodigde informatie in: Selecteer taal: kies de taal voor de installatie. De keuze staat standaard goed, op Nederlands. Websitenaam: welke naam moet de site hebben? Vul de naam van de site in en indien nodig ook een paar woorden die omschrijven van wat de site te bieden heeft, bijvoorbeeld Jansen.nl Fietsaccessoires. Deze naam wordt op de site zichtbaar in de titelbalk van de browser. In dit voorbeeld kun je Basiscursus Joomla invullen.

21 2 Joomla installeren 13 Figuur 2.3: Het eerste scherm bij de installatie: de pagina Hoofdconfiguratie De Beschrijving is niet verplicht; je kunt deze ook later invullen. Vul hier in één zin een toelichting in op wat je site te bieden heeft. De informatie in deze beschrijving is van belang voor zoekmachines. adres administrator: het mailadres van jou als beheerder van de site. Dit is het adres waar je systeemboodschappen van Joomla ontvangt. Gebruikersnaam administrator: vaak wordt admin gebruikt; dat was lange tijd de standaard inlognaam. Het is veiliger om te kiezen voor in een eigen inlognaam. Wachtwoord administrator: kies een wachtwoord waarmee je als beheerder inlogt in de beheeromgeving van Joomla en type dit wachtwoord nogmaals in. Website offline: dit staat standaard op Nee. Na installatie is de (lege) site dan meteen online. Als je wilt dat de site nog niet zichtbaar is voor bezoekers, maar alleen voor jouzelf wanneer je ingelogd bent, kies dan voor Ja. Bezoekers zien dan na installatie van Joomla een melding dat de site nog offline is. 4 Klik op de knop Volgende. Je komt nu in het scherm Database configuratie.

22 14 Basiscursus Joomla! 3 Dit is een belangrijk scherm; let erop dat je bij het invullen geen typefouten maakt. De gegevens die je hier invoert, zijn nodig om Joomla te kunnen laten communiceren met de database die je eerder hebt gemaakt. Figuur 2.4: Het scherm Database configuratie Vul dit scherm als volgt in: Laat de instelling Databasetype staan op MySQLi. Naam host: vul in localhost (tenzij je van de webhost andere gegevens hebt gekregen). Gebruikersnaam: de gebruikersnaam voor je database. Dat is de gebruikersnaam voor de database die je net hebt aangemaakt, in stap 1. Wachtwoord: vul het wachtwoord in dat je bij het aanmaken van de database in stap 1 hebt gekozen. Naam database : de naam van de database die je zelf hebt aangemaakt in stap 1. Als je het voorbeeld hebt gevolgd, is die naam joomla. Als je webhost een database voor jou heeft aangemaakt, dan neem je gebruikersnaam, wachtwoord en databasenaam over uit de informati die je van je webhost ontvangen hebt.

23 2 Joomla installeren 15 Let op: gebruikersnaam en password van je database hoeven niet hetzelfde te zijn als gebruikersnaam en password die je gebruikt om in te loggen in bijvoorbeeld het beheerprogramma of het FTP-programma. Voor de veiligheid is het zelfs beter als die namen en passwords verschillend zijn; dat maakt het voor hackers minder gemakkelijk om toegang te krijgen tot jouw database en je site. Tabelvoorvoegsel: als verschillende installaties van Joomla gebruikmaken van één database, dan herkent Joomla de verschillende tabellen in die ene database aan het specifieke tabelvoorvoegsel. Vul dan bijvoorbeeld site1_ in als voorvoegsel voor de tabellen van de database van deze site. Als je gewoon één site installeert met één database, is een voorvoegsel niet nodig. Oude database verwerking: alleen belangrijk als je Joomla al eerder hebt geïnstalleerd en de nieuwe Joomla-installatie gebruikmaakt van dezelfde database als de vorige. Dan kun je er hier voor kiezen om de data van die eerdere site te kopiëren (Back-up) of te Verwijderen. Als alles goed staat, kun je doorklikken op Volgende. Je komt in het laatste scherm, Voltooien (met het tabkopje Samenvatting). Figuur 2.5: Het scherm Voltooien Hier maak je nog een paar keuzes en zie je een overzicht van de instellingen die je eerder hebt gekozen en ingevuld. De keuzes zijn:

24 16 Basiscursus Joomla! 3 Installeer voorbeelddata: kies hier voor Leer Joomla Engelse voorbeelddata. Dit betekent dat je Joomla installeert met uitgebreide Engelse voorbeelddata.in dit boek gaan we ervan uit dat je deze voorbeelddata installeert. De test-voorbeelddata installeren is handig als je Joomla nog niet kent: er worden dan voorbeelden meegeïnstalleerd van websites die je kunt maken, inclusief teksten, menu s en dergelijke. In de praktijk werkt dat heel handig; je leert veel sneller wat de mogelijkheden zijn als je die uitprobeert in een voorbeeldsite dan wanneer je stap voor stap vanuit niets een site moet bouwen. Je kunt ook kiezen voor een van de andere voorbeelddata-opties, maar die leveren minder voorbeeldartikelen en dergelijke op en geven dus een wat beperkter beeld van de opties. Het enige bezwaar van voorbeelddata installeren is dat ze later overbodig zijn als je écht een site gaat bouwen met Joomla, maar alle voorbeeldmateriaal is natuurlijk ook weer te verwijderen. Zie daarover hoofdstuk 11. Bij Samenvatting, instellingen kun je ervoor kiezen om alle informatie over instellingen, databasenaam en dergelijke na de installatie in een bericht aan jouzelf te laten mailen. Als je dat wilt, kies dan Ja. Helemaal onderaan in het scherm Voltooien (je moet even doorscrollen) staan ook de gegevens van de Pre-installatie controle en Aanbevolen instellingen. Daar zie je of alle instellingen van de server goed staan om Joomla correct te laten functioneren. Staan er aanbevolen instellingen verkeerd? Ook dan kun je Joomla gewoon installeren. Deze aanbevolen instellingen zijn niet noodzakelijk om Joomla goed te laten functioneren. Wil je zo n instelling toch aanpassen, dan kun je dat (meestal) niet zelf. Vraag je webhost of deze voor jouw hostingaccount de instelling in de aanbevolen stand wil zetten (bijvoorbeeld safe mode op off). 5 Klik op de blauwe knop Installatie. (Volgende). De installatie wordt nu verder automatisch afgerond. In het scherm zie je de voortgang.

25 2 Joomla installeren 17 Figuur 2.6: De installatie verloopt automatisch 6 Zodra de installatie is afgerond, zie je het volgende scherm. Je krijgt de melding dat de installatie succesvol is afgerond: Figuur 2.7: De installatie is klaar 7 Rechts onderaan zie je een melding die alleen belangrijk is als je een meertalige website wil maken; die kun je nu negeren. Klik op Verwijder de installatiemap om de map installation van de webserver te verwijderen. Dat moet, anders kun je niet verder. De reden daarvoor is dat het onveilig is om de installatiebestanden te laten staan: die bevatten gegevens waar kwaadwillenden misbruik van kunnen maken. Klik op de knop; de tekst verandert nu in Installatiemap verwijderen geslaagd. 8 Klik op Website om de zojuist geïnstalleerde site te bekijken. Je kunt ook op Administratie klikken, dan kun je inloggen in de beheeromgeving.

26 18 Basiscursus Joomla! 3 Figuur 2.8: De voorbeeldsite is geïnstalleerd 2.7 Het resultaat: een werkende voorbeeldsite In de vorige stappen heb je de installatie afgerond; Joomla is nu klaar voor gebruik. We bekijken eerst de voorbeeldsite en de achterkant van die site, de beheeromgeving. Oefening 2.5: De voorbeeldsite verkennen 1 Als je de installatieprocedure van Joomla hebt afgerond, klik je in het allerlaatste scherm op Website om de voorbeeldsite te bekijken. Als je dat scherm al hebt afgesloten, dan kom je op de voorbeeldsite door het webadres in te toetsen (bijv. in de browser. De voorbeeldsite ziet eruit als in figuur Neem even de tijd om deze uitgebreide voorbeeldsite te verkennen. Eigenlijk zijn het drie sites in één; er is dus meer te ontdekken dan alleen de website over Joomla die je als eerste ziet. Klik op de link Sample Sites (Voorbeeldsites) bovenaan om twee andere voorbeeldsites te bekijken: een over nationale parken en eentje over een fruitzaak. De voorbeeldsite over Joomla (Using Joomla) zelf bevat veel informatie (in het Engels) over de mogelijkheden van Joomla.

27 2 Joomla installeren 19 Figuur 2.9: De pagina Image Gallery > Animals op de voorbeeldsite Australian Parks Hoe kan dat, drie sites in één? Eigenlijk is het allemaal één site, waarin drie groepjes artikelen zijn aangemaakt (over Joomla, over parken, over fruit). Bij de site van de Fruit Shop verandert zelfs de hele vormgeving van de site. Dat werkt zo: als je op het menu van de fruitwinkel klikt, dan toont Joomla de lay-out (de template, zie hoofdstuk 10) die aan die menulink is gekoppeld. Zo krijg je de indruk dat je op een andere site bent. De voorbeeldsites geven je een indruk van wat mogelijk is met Joomla: verschillende paginalay-outs, verschillende soorten content (homepages, contentpagina s, pagina s met afbeeldingen).

28 20 Basiscursus Joomla! 3 Figuur 2.10: De voorbeeldwebsite Fruit Shop. Dit is geen aparte website; het is een deel van de standaard voorbeeldwebsite dat een ander uiterlijk, andere menu s en andere content heeft Inloggen in de beheeromgeving Als je bij de installatie in het allerlaatste scherm klikt op de knop Administratie, dan kom je terecht in het scherm waar je kunt inloggen in de beheeromgeving van de site. Om rechtstreeks naar de beheeromgeving te gaan, navigeer je in je browser naar In de beheeromgeving doe je alles wat te maken heeft met het bouwen en onderhouden van de site: artikelen toevoegen, menu s beheren, de lay-out aanpassen. In het volgende hoofdstuk leer je de belangrijkste functies van de beheeromgeving beter kennen.

29 3 De beheeromgeving van Joomla verkennen In het vorige hoofdstuk heb je Joomla geïnstalleerd. Nu kun je beginnen je website te bouwen. Maar... de beheeromgeving van Joomla mag er dan 3 gebruiksvriendelijk uitzien, er zitten wel vele tientallen menuopties en knoppen in. Waar begin je, wat zijn de belangrijkste onderdelen? In dit hoofdstuk maak je kennis met de basisfuncties van Joomla. 3.1 In dit hoofdstuk Introductie: hoe werk je met een cms? Werken in de beheeromgeving Hoe zit de beheeromgeving in elkaar? De mogelijkheden van de beheeromgeving uitproberen 3.2 Introductie: hoe werk je met een cms? Zo n tien jaar geleden werden de meeste websites nog met de hand gemaakt. Als webbouwer maakte je een HTML-document, dat je kopieerde naar het web. Dat HTML-document verscheen als webpagina op het scherm van je sitebezoeker. Had je nog een pagina nodig, dan maakte je opnieuw een HTMLdocument. En zo verder, tot je een complete website had. Die manier van werken had z n beperkingen; denk alleen maar aan het bijhouden van hyperlinks. Wanneer de website groter en groter werd, werd het bijna ondoenlijk om ervoor te zorgen dat alle hyperlinks van en naar al die pagina s nog werkten. Tegenwoordig zijn de meeste websites dynamisch; ze maken gebruik van een database om content op te slaan. De pagina die de webbezoeker ziet, is eigenlijk een combinatie van bouwstenen uit een database. Die bouwstenen kunnen uit van alles bestaan: artikeltekst, koppen, afbeeldingen, animaties, menu s, hyperlinks, inlogformulieren, filmpjes, enzovoort. Al die bouwstenen kunnen op veel verschillende manieren gecombineerd worden tot een webpagina. 21

30 22 Basiscursus Joomla! 3 Zodra je bezoeker klikt op een link, stuurt hij eigenlijk een verzoek naar Joomla om stukjes en beetjes uit de database te halen om zo een volledige webpagina te presenteren. Als de sitebezoeker klikt op Home, ziet hij een pagina met menu s, een logo, afbeeldingen, introteksten en links. En als hij klikt op een Lees meer-link, wordt een nieuwe mix van de gegevens weergegeven: een volledig artikel, met dezelfde introtekst, met links naar gerelateerde artikelen, enzovoort. Voor jou als maker en beheerder van een website betekent dat dat je niet langer werkt met hele pagina s: achter de schermen van Joomla werk je aan de bouwstenen van die pagina s. Met die bouwstenen stel je combinaties samen. Wil je een pagina met vier rubrieken, teaserteksten, een hoofdmenu, een afbeelding en een inlogformulier? In Joomla stel je zelf die combinatie samen en maak je een homepage of een willekeurige andere pagina op maat, zonder dat je programmeerkennis nodig hebt. Figuur 3.1: Een Joomla-site bestaat uit de lay-out (1), de centrale content (2) en blokken daaromheen (3) Een webpagina bestaat in Joomla uit drie delen. Hierboven zie je de homepagina uit de standaardvoorbeeldsite van Joomla. Die bestaat uit een basislay-out (1), het blok met de centrale paginacontent (2) en zo veel extra blokken als je wilt (3). Voorbeelden van die laatste zijn de zoekmodule, de menu s (bovenaan en links), het blokje met een inlogformulier, enz. De speciale functieblokken rondom de centrale pagina-inhoud worden in Joomla modules genoemd. Modules kunnen heel uiteenlopende functionaliteit bevatten: menu s, polls, inlogvensters, dynamische lijsten, willekeurige afbeeldingen, diavoorstellingen, enzovoort.

31 3 De beheeromgeving van Joomla verkennen De beheeromgeving: jouw werkplek Een Joomla-site heeft twee gezichten; dat heb je al gezien na de installatie. Na de laatste stap kon je doorklikken naar de voorbeeldsite, maar ook naar de achterkant daarvan: de beheeromgeving. Die wordt ook wel de achterkant of backend van de site genoemd. Gewone gebruikers komen hier nooit terecht; standaard heeft alleen de beheerder van de site het recht om hier in te loggen. Een Joomla-site bouw en onderhoud je in die beheeromgeving. Oefening 3.1: Inloggen op de beheeromgeving 1 Ga naar de beheeromgeving van de voorbeeldsite. Die bereik je door in de browser het webadres in te tikken, gevolgd door een slash en het woord administrator. Dus: de achterkant van bereik je via www. voorbeeld.nl/administrator. 2 Je komt nu terecht in het inlogscherm. Voer je administrator-inlognaam in en het wachtwoord. Beide heb je zelf aangemaakt bij de installatie van Joomla (zie hoofdstuk 2). Figuur 3.2: Het inlogscherm van de Joomla-beheeromgeving 3 Klik op Inloggen. Je komt nu binnen in de beheeromgeving van de site, die toegang geeft tot alle functies die je nodig hebt als beheerder: toevoegen van content, menu s toevoegen of aanpassen, de lay-out veranderen, enzovoort. Standaard heeft alleen de sitebeheerder toestemming om in te loggen op de beheeromgeving. Later kun je als beheerder toegang verlenen aan anderen. Na de installatie (of na een upgrade) van Joomla kun je in de beheeromgeving een melding krijgen: U heeft post-installatieberichten. Klik op de knop Bekijk berichten om nieuws te lezen over Joomla en over keuzes die je kunt maken na de installatie. Zo biedt Joomla je de mogelijkheid om na de installatie de beveiliging van je site te verhogen door inloginstellingen aan te passen. In dit geval doen we geen verdere aanpassingen. Klik daarom na het lezen van de berichten op Verberg dit bericht. Klik op het Joomla-icoontje linksbovenaan om weer terug te keren naar de beheeromgeving.

32 24 Basiscursus Joomla! Hoe zit de beheeromgeving in elkaar? Na het inloggen kom je op de pagina Controlepaneel, het startscherm van de beheeromgeving. Die lijkt op het eerste gezicht misschien wat verwarrend: er zijn veel menu s en tientallen opties. Waar vind je wat? In figuur 3.3 zie je de vier belangrijkste onderdelen. Figuur 3.3: De belangrijkste onderdelen van de beheeromgeving 1 De menubalk Het belangrijkste deel van de beheeromgeving: de zeven items in dit dropdownmenu geven je toegang tot alle contentmanagementtools. Bij het werken aan je website zul je dit menu het meest gebruiken. Systeem: algemene site-instellingen regelen. Gebruikers: gebruikers beheren, nieuwe gebruikers toevoegen, toegangsrechten regelen. Menu's: de verschillende menu s op de site beheren. Inhoud: artikelen maken, ze indelen in categorieën en afbeeldingen (media) beheren. Componenten: het beheer van speciale functies, zoals banneradvertenties en contactpersonen.

33 3 De beheeromgeving van Joomla verkennen 25 Extensies: het beheer van extra s waarmee je functies aan de site toevoegt en van templates waarmee je de lay-out verandert. Help: links naar de onlinehulp van Joomla. In de praktijk zijn Inhoud en Menu s waarschijnlijk je meest gebruikte menu s. Die gebruik je voor het maken en updaten van artikelen en navigatiemenu s op je site. Helemaal linksboven aan de menubalk vind je een klein icoontje: het Joomlalogo. Waar je ook bent in de beheeromgeving, door te klikken op dit logo kom je altijd terug op de pagina Controlepaneel. Rechtsboven aan de menubalk staat de naam van je site. Dat is een andere handige snelkoppeling, waarmee je snel naar de voorkant van de website springt in een nieuwe browsertab. Ten slotte zie je helemaal in de rechterbovenhoek een tandwieltje. Als je daarop klikt kun je je gebruikersaccount aanpassen of uitloggen uit de beheeromgeving: Figuur 3.4: Klik op het tandwieltje om je account te bewerken of uit te loggen uit de beheeromgeving 2 Snelkoppelingen naar veelgebruikte functies Aan de linkerkant vind je een kolom met snelkoppelingen naar veelgebruikte functies, zoals Nieuw artikel toevoegen. Deze snelkoppelingen besparen je een langere route via het hoofdmenu: in plaats van bijvoorbeeld te klikken op Inhoud > Artikelen > Nieuw kom je nu in één keer op de gewenste pagina terecht. 3 Informatiepanelen Deze informatiepanelen geven je een overzicht van ingelogde gebruikers, populaire artikelen en recentelijk toegevoegde artikelen. Dat laatste is wel handig: als je kort geleden een artikel hebt toegevoegd dat je nog wilt bewerken, kun je dat hier direct openen, zonder eerst naar Inhoud > Artikelen te gaan.

34 26 Basiscursus Joomla! 3 4 Informatiebalk Helemaal onderaan vind je een informatiebalk die altijd in beeld blijft. Onderdelen van de informatiebalk: Bekijk website: bekijk de voorkant van de website in een nieuwe browsertab of nieuw venster. Dit is een alternatief voor klikken op de sitenaam die je rechtsbovenaan ziet. Bezoekers: informatie over het aantal bezoekers dat is ingelogd aan de voorkant van de site. Admins: het aantal gebruikers dat is ingelogd in de beheeromgeving. Op dit moment staat daar 1: jijzelf als beheerder bent ingelogd. Berichten (pictogram van een envelopje): aantal ongelezen privéberichten. Dat zijn interne berichten die je van andere gebruikers van de site hebt gekregen. Uitloggen: link om uit te loggen uit de beheeromgeving. 4 Submenu en menu Systeem Het submenu in de linkerkolom geeft je snel toegang tot de subonderdelen van de huidige pagina. Het is een aanvulling op de submenu s die je ziet wanneer je op de horizontale menubalk klikt. De knoppenbalk in de beheeromgeving In de beheeromgeving vind je verschillende soorten beheerschermen, zoals artikelbeheer, menubeheer enz. Alle schermen zijn ongeveer op dezelfde manier opgebouwd, met rechtsbovenaan een knoppenbalk. Hieronder zie je de bedieningsknoppen van het scherm Inhoud > Artikelbeheer: Artikelen: Figuur 3.5: De knoppenbalk van Artikelbeheer De knoppen die je hier ziet zoals Nieuw, Bewerken, Publiceren kom je in ongeveer dezelfde combinatie op verschillende plaatsen tegen: als je artikelen beheert, menu s of bijvoorbeeld categorieën. Dit betekenen ze (in dit voorbeeld gaan we uit van artikelen): Nieuw: maak een nieuw artikel. Bewerken: bewerk het artikel. Publiceren: maak een artikel dat in de beheeromgeving klaarstaat, zichtbaar op de site. Depubliceren: maak een artikel onzichtbaar voor sitebezoekers (zonder dat je het verwijdert uit de beheeromgeving). Speciaal: geldt alleen voor artikelen: maak het artikel zichtbaar op de homepage.

35 3 De beheeromgeving van Joomla verkennen 27 Archiveren: archiveer een artikel. Gearchiveerde artikelen zijn alleen toegankelijk via een speciale menulink naar het archief. Inchecken: als één contentbeheerder een artikel bewerkt, kan een ander datzelfde artikel niet tegelijk openen. Het artikel is checked out ; in de lijst met artikelen staat er een slotje bij. Soms staat een item ten onrechte aangemerkt als checked out in het systeem, bijvoorbeeld omdat een gebruiker het niet goed heeft afgesloten. Met Inchecken verwijder je het slotje van dat artikel. Prullenbak: verplaats naar de prullenbak. Batch: zet een vinkje bij een aantal artikelen en klik dan op Batch om al die artikelen tegelijkertijd te verplaatsen, te kopiëren of de toegangsrechten aan te passen. Help: naar de online hulppagina s gaan. Opties: algemene instellingen (bijvoorbeeld van artikelen) regelen. De indeling van de knoppenbalk varieert; je ziet steeds de combinatie van knoppen verschijnen die horen bij wat je nu aan het doen bent. Wanneer je een artikel selecteert en je klikt op de knop Bewerken in Artikelbeheer, zie je een set knoppen zoals weergegeven in figuur 3.6. Figuur 3.6: De knoppenbalk bij het bewerken van artikelen Je hebt hier een aantal opties die lijken op de mogelijkheden die je kent van tekstverwerkers. De knop Opslaan is bedoeld om tussentijds wijzigingen op te slaan. Je slaat de huidige pagina op, maar je blijft binnen deze pagina om bijvoorbeeld verder te kunnen werken aan het artikel. De knop Opslaan & sluiten is bedoeld om wijzigingen op te slaan en je werk af te ronden. Je slaat de huidige pagina op en komt terug op de bijbehorende algemene pagina. Als je bijvoorbeeld in een artikel klikt op Opslaan & Sluiten, ga je terug naar de lijst met artikelen. De knop Opslaan & nieuw is bedoeld om snel een serie items te maken (bijvoorbeeld nieuwe artikelen, of nieuwe menu-items). De knop bespaart je een paar klikken: Opslaan & nieuw slaat de huidige pagina op (bijvoorbeeld een artikel) en je komt meteen terecht op een nieuwe pagina met een leeg artikel. In één klik combineer je wat je anders in drie stappen doet (de pagina opslaan, teruggaan naar de lijst met artikelen en een nieuw artikel openen). De knop Opslaan als kopie is bedoeld om snel een kopie te maken van de huidige pagina, en die kopie mét inhoud vervolgens te bewerken. Stel bijvoorbeeld dat je een artikel hebt waarin alle instellingen (auteur, publicatiedatum, categorie enz.) al naar wens zijn ingevuld. Nu wil je een nieuw artikel maken met andere inhoud, maar met dezelfde instellingen. In het (al

36 28 Basiscursus Joomla! 3 eerder opgeslagen) moederartikel klik je op Opslaan als kopie. Nu wordt de huidige pagina opgeslagen als kopie van de originele pagina. Je komt vervolgens terecht in de kopie, waarin je kunt veranderen wat je wilt. Het origineel verandert daarmee niet. De knop Versies is beschikbaar bij artikelen en helpt je om eerdere versies van de artikeltekst te bekijken en te vergelijken. Handig als je een oudere tekst hebt vervangen of veranderd en je besluit om toch terug te gaan naar de oudere versie. De knop Sluiten is bedoeld om de pagina te sluiten zonder wijzigingen op te slaan. Het menu in de linkerkolom Figuur 3.7: Het submenu aan de linkerkant bevat opties die je ook kunt bereiken via het submenu bovenaan In de linkerkolom verschijnt een menu dat zich aanpast aan de pagina waar je bent. Als je bijvoorbeeld in het scherm Artikelbeheer bent, vind je hier de links naar onderdelen die je ook kunt vinden onder het hoofdmenu Inhoud > Artikelbeheer. 3.5 De mogelijkheden van de beheeromgeving uitproberen Hoogste tijd om de beheeromgeving eens nader te verkennen en een aantal functies uit te proberen. Je maakt hieronder eerst kennis met drie belangrijke soorten mogelijkheden die je in de beheeromgeving hebt; de andere leer je kennen in de volgende hoofdstukken. De oefeningen in dit boek voer je allemaal uit vanuit de beheeromgeving van jouw site. Vanaf nu ga ik ervan uit dat je, als je een oefening doet, bent ingelogd in de beheeromgeving (zoals beschreven in 3.3). Hoeveel menu s, schermen en knoppen er ook in de beheeromgeving zitten, in grote lijnen gaat het om deze drie soorten activiteiten die je als webbeheerder uitvoert:

37 3 De beheeromgeving van Joomla verkennen 29 1 content beheren, bijvoorbeeld: artikelen publiceren; 2 speciale functies beheren denk aan de extra mogelijkheden die extensies (uitbreidingen) bieden; 3 de instellingen van de site beheren. Om alvast een beeld te krijgen van de mogelijkheden, probeer je hierna elk van deze drie soorten activiteiten uit. Je maakt een artikel, past een speciale functie aan, en je verandert een site-instelling. Voorbeeld 1: content toevoegen De basis voor het beheren van een site is natuurlijk: werken met content. Hoe maak je content aan in Joomla? Oefening 3.2: Een artikel maken Je hebt waarschijnlijk gezien dat de voorbeeldsite al tientallen artikelen bevat. In deze oefening probeer je uit hoe je zelf een artikel toevoegt. 1 Ga naar Inhoud > Artikelen. 2 Klik in de knoppenbalk op de knop Nieuw (de groene knop). Het scherm Nieuw artikel toevoegen) opent. 3 In het vak Titel vul je een titel in, bijvoorbeeld Mijn eerste artikel. 4 Kies bij Speciaal (rechts van het artikelvenster) voor Ja. Dit zorgt ervoor dat het artikel wordt getoond op de homepage. 5 Typ wat tekst in de editor. Dit is een mini-tekstverwerker waarin je tekst kunt invoeren en opmaken. 6 Klik op de knop Opslaan in de knoppenbalk. Een melding verschijnt dat de wijzigingen zijn opgeslagen (Artikel opslaan geslaagd). Figuur 3.8: Een artikel toevoegen

38 30 Basiscursus Joomla! 3 7 Klik op Bekijk website (of op de naam van de site rechtsbovenaan in de beheeromgeving). Je ziet nu de homepage van de site. Bovenaan staat je artikel! Figuur 3.9: Het eerste artikel Voorbeeld 2: speciale functies toevoegen Je hebt nu gewone content een artikel toegevoegd aan de site. Maar in Joomla kun je ook een ander soort content aanmaken: met extensies (uitbreidingen) voeg je speciale functies toe. Denk bijvoorbeeld aan het afbeelden van een blokje met een inlogformulier of een blokje met links naar Meest gelezen arti kelen. Extensies zijn losse toevoegingen; dat wil zeggen dat je ze kunt downloaden op het web en vervolgens kunt toevoegen aan jouw Joomla-installatie. Doordat er heel veel extensies beschikbaar zijn, is Joomla dus bijna onbeperkt uitbreidbaar. Maar standaard worden er ook al wat (vaak eenvoudige) extensies meegeleverd met Joomla. In dit voorbeeld activeer je een van de meegeleverde extensies: Meest gelezen artikelen. Daarmee voeg je een lijstje toe dat automatisch wordt gevuld met hyperlinks naar de populairste artikelen op de site. Er zijn verschillende typen uitbreidingen, van heel simpele (plug-ins) via wat uitgebreidere (modules) tot mega-uitbreidingen (componenten). Je leest meer over extensies in hoofdstuk 8. Oefening 3.3: Voeg een extensie toe aan de site Je bent ingelogd in de beheeromgeving van de site en wilt een extensie toevoegen: een blokje met een aantal hyperlinks naar de meest gelezen artikelen op de site. Dat blokje is (in Joomla-termen) een module.

39 3 De beheeromgeving van Joomla verkennen 31 1 Ga naar Extensies > Modulebeheer. Het scherm ziet eruit als in figuur Figuur 3.10: De Modulebeheer toont een overzicht van alle modules die op de site in gebruik zijn 2 Klik op de knop Nieuw om een nieuw moduleblokje aan te maken. 3 Er verschijnt een scherm met namen van beschikbare modules. Klik op de naam van de module die je wilt gebruiken: Meest gelezen artikelen. Figuur 3.11: Kies de module die je wilt gebruiken uit de lijst

40 32 Basiscursus Joomla! 3 4 Nu verschijnt het detailscherm waarin je de instellingen van de module regelt. Vul die als volgt in: Titel: vul hier een titel in die boven het rijtje hyperlinks moet verschijnen, bijvoorbeeld Populair. Positie: kies hier de plaats op de pagina waar de module verschijnt. Klik op Typ of selecteer een positie, zodat een drop-downlijst verschijnt met alle beschikbare posities. Scrol door in de lijst tot je komt bij posities voor Protostar. Dat is de naam van de standaard-template; daaronder staan de plaatsen die beschikbaar zijn in die template. Kies nu Links [position-8]; dat betekent dat de module zal verschijnen in de linkerkolom. Figuur 3.12: In een drop-downlijst selecteer je op welke plaats op de webpagina (Positie) de module verschijnt. In het zoekvak kun je ook zoeken naar een positienaam (als je die al kent) Nu je de gewenste positie hebt gekozen, kom je weer terug op de pagina waar je de module-instellingen regelt. Klik op de tab Menutoewijzing om te bepalen op welke pagina s de module verschijnt. Kies voor Moduletoewijzing: Alleen op de geselecteerde pagina s. Standaard zijn alle pagina s geselecteerd; om dat te veranderen, klik je op Selecteren: Geen. Om de lange lijst met menu s korter te maken, klik je op het min-teken voor de menunaam; zo klappen de menu-items in. Nu zet je bij het Main Menu (het hoofdmenu) alleen een vinkje voor Home. Dat betekent dat de module alleen verschijnt op de homepage: Figuur 3.13: Selecteer op welke pagina de module verschijnt

41 3 De beheeromgeving van Joomla verkennen 33 Alle andere opties kun je onveranderd laten. Het scherm ziet er nu uit als in figuur Sla je wijzigingen op door te klikken op Opslaan. Klik op Bekijk website om het resultaat te zien. Er verschijnt een nieuw blokje in de rechterkolom. Daarin staan de meest gelezen artikelen. Het mooie van een module als deze is, dat je er verder geen omkijken meer naar hebt: als andere artikelen het meest worden aangeklikt door sitebezoekers, wordt de lijst met hyperlinks automatisch geüpdatet. Figuur 3.14: Zo ziet de module er op de site zelf uit Waar komt ineens die linkerkolom vandaan? Zoals je in figuur 3.14 ziet, is de middenkolom smaller geworden om plaats te maken voor een nieuwe kolom aan de linkerkant met daarin het blokje Populair met meest gelezen artikelen. Dat komt doordat Joomla (eigenlijk de huidige template) automatisch controleert of er content beschikbaar is voor die linkerkolom. Is er geen content, dan wordt er niets afgebeeld. Is er wel content, dan wordt de indeling vanzelf aangepast. Meer over templates lees je in hoofdstuk 10. De plaats van een module kun je eenvoudig veranderen. Wil je de lijst met meest gelezen artikelen liever rechts laten zien? Dat doe je als volgt: Open de module Meest gelezen inhoud (via Extensies > Modulebeheer). Kies op het tabblad Gegevens voor een andere Positie: Rechts [position-7]. Sla de wijziging op en bekijk het resultaat.

42 34 Basiscursus Joomla! 3 Figuur 3.15: Het blokje Populair verschijnt nu in de rechterkolom Modules kun je eenvoudig aan en uit zetten. Met andere woorden, je kunt ervoor zorgen dat ze wel beschikbaar blijven in de beheeromgeving, maar niet zichtbaar zijn voor de bezoeker. Om het blokje met meest gelezen artikelen weer onzichtbaar te maken, ga je terug naar Extensies > Modulebeheer, je klikt op de naam van de zojuist aangemaakte module (Populair) en verandert de waarde bij Status van Gepubliceerd naar Gedepubliceerd. Voorbeeld 3: site-instellingen aanpassen Je hebt tot nu toe twee dingen uitgeprobeerd in de beheeromgeving: een artikel toevoegen en een moduleblokje toevoegen. Wat je in de beheeromgeving ook kunt doen, is de site configureren. Dat wil zeggen dat je de instellingen naar wens aanpast. In principe zet je die instellingen één keer goed, en dan heb je er geen omkijken meer naar. Als voorbeeld pas je in oefening 3.4 een van de instellingen aan. Oefening 3.4: Instellingen van Joomla veranderen Als je bent ingelogd in de beheeromgeving, gebeurt het natuurlijk wel eens dat je je werk even onderbreekt. Standaard vraagt Joomla je dan na 15 minuten om opnieuw in te loggen met je naam en password. Het is handiger om niet zo snel uitgelogd te worden. Hoe verander je dat? 1 Ga in de beheeromgeving naar Systeem > Algemene instellingen. Je ziet het eerste van vijf tabbladen (Website, Systeem, Server, Rechten en Teksfilters). 2 Klik op de tab Systeem. Op deze pagina vind je het blokje Sessie-instellingen. 3 Verander de waarde onder Sessielevensduur van 15 naar 90. Dat betekent dat je niet na 15 minuten, maar pas na 90 minuten zonder activiteit opnieuw moet inloggen.

43 3 De beheeromgeving van Joomla verkennen 35 Figuur 3.16: De sessie-instellingen in het configuratiescherm 4 Klik op Opslaan in de knoppenbalk. Je blijft vanaf nu anderhalf uur ingelogd, ook als je geen activiteiten meer uitvoert in de beheeromgeving. Dat is in principe minder veilig (iedereen zou dan de website kunnen veranderen als je jouw computer een tijdje onbeheerd laat staan), maar in de praktijk zal dat niet snel een probleem zijn. Het voordeel is groter: je hoeft nu niet meer opnieuw in te loggen als je even van je plek bent. Je kunt ook even rondkijken naar de andere opties achter de tabs van Algemene instellingen, maar wees voorzichtig. Het merendeel van de instellingen kun je beter ongewijzigd laten. Verander bijvoorbeeld niet de serverinstellingen en database-instellingen. Maar je kunt gemakkelijk een aantal andere site-instellingen aanpassen: misschien wil je de Websitenaam veranderen (de naam die getoond wordt in de beheeromgeving van Joomla en in de titelbalk van de browser en die standaard ook op de site zelf verschijnt). Je leert later in dit boek meer over instellingen die belangrijk zijn.

44

45 4 De content indelen met categorieën en tags Joomla is geïnstalleerd en je hebt kennisgemaakt met de beheeromgeving. Hoogste tijd om te doen waar het in elke website vooral om draait: content 4 toevoegen! Dat gaat in Joomla altijd in drie stappen: eerst een indeling maken in categorieën, dan artikelen toevoegen binnen die categorieën en tot slot menu s maken die de content zichtbaar maken voor je bezoeker. Ook kun je tags toevoegen aan artikelen: dat is een andere manier om content te ordenen en je bezoekers te helpen om bepaalde content te vinden. In dit hoofdstuk gaat het om de eerste stap van die drie: categorieën maken. Je kunt pas contentpagina s (in Joomla-termen: artikelen) voor je site maken als je categorieën hebt. Meer over artikelen lees je in het volgende hoofdstuk; in het hoofdstuk daarna gaat het over menu s. 4.1 In dit hoofdstuk De site indelen in categorieën Categorieën en subcategorieën maken Categorieën verwijderen Tags gebruiken om artikelen beter vindbaar te maken 4.2 Stap 1: bepaal welke categorieën je nodig hebt In Joomla kun je websites bouwen in alle soorten en maten: van enkele pagina s tot duizenden pagina s. Hoe klein of groot je site ook wordt, je begint altijd met een plan. Als je een basisindeling hebt gemaakt, kun je de site gemakkelijk onderhouden en uitbreiden. Maak dus voor jezelf een overzicht van de belangrijkste onderdelen van de site. Kies een logische, simpele indeling. In figuur 4.1 zie je een voorbeeld: een site voor een vereniging. Dit is een heel simpele basisopbouw: een homepage, drie pagina s daaronder, en vervolgens verdere vertakkingen. Als de site groeit, is het mogelijk om meer vertakkingen toe te voegen. 37

46 38 Basiscursus Joomla! 3 Figuur 4.1: Een voorbeeld van een site-indeling Hoe vertaal je zo n sitemap naar Joomla? Dat zie je in figuur 4.2. Een Joomlasite bestaat in de basis altijd uit een homepage, categorieën (en subcategorieën) en artikelen. Alle onderdelen met een grijze achtergrond in het schema zijn categorieën. De rest van de site bestaat uit de homepage (de top van de structuur) en artikelen (die aan categorieën hangen). Figuur 4.2: De site-indeling vertaald naar Joomla En als je pagina s hebt die niet in een categorie thuishoren? Denk bijvoorbeeld aan een pagina als Colofon of Over ons. Geen probleem: je kunt een pagina in Joomla ook ongecategoriseerd (Uncategorised) maken. Zo n ongecategoriseerde categorie is standaard in Joomla aanwezig. Hoe je ongecategoriseerde pagina s gebruikt, lees je in hoofdstuk 5 en 6. Waarschijnlijk heb je ook nog andere pagina s op de site: geen artikelen, maar pagina s met meer functionaliteit dan alleen maar tekst en plaatjes. Denk aan een pagina waarop de bezoeker een contactformulier kan invullen of door een fotogalerij kan bladeren. Dat soort pagina s met extra functionaliteit maak je in Joomla met behulp van extensies. Je leert daar meer over in hoofdstuk 8.

47 4 De content indelen met categorieën en tags Stap 2: categorieën en subcategorieën maken Hierboven las je al dat categorieën de basis zijn voor al je content: je moet eerst categorieën hebben voordat je er artikelen aan kunt toewijzen. (Je kunt wel een artikel schrijven voor een niet-bestaande categorie, maar dan moet je daarna alsnog die categorie maken en het artikel weer openen om het aan die categorie toe te wijzen.) Joomla legt je trouwens geen beperkingen op bij het maken van categorieën. Je kunt aan elke categorie net zo veel subcategorieën toevoegen als je wilt. Denk aan een indeling in de categorieën automerken > Italiaanse merken > Alfa Romeo > modellen tot Natuurlijk is het niet handig om al te veel subniveaus te maken: hoe dieper de site, hoe onoverzichtelijker het wordt en hoe vaker bezoekers moeten doorklikken. Maar als je een uitgebreide site hebt met veel gestructureerde informatie, dan is het prettig dat je twee of meer subcategorieën kunt maken. In vorige versies van Joomla was dat indelingssysteem veel beperkter. Hoe zitten de categorieën van de voorbeeldwebsite in elkaar? Bij het installeren van Joomla heb je ook de voorbeeldsite geïnstalleerd. Om een indruk te krijgen van het werken met categorieën, kijken we hieronder eerst naar de content op die site. Daaraan kun je goed zien hoe het indelen in categorieën werkt. Oefening 4.1: Categorieën in de voorbeeldwebsite verkennen Alle content op de voorbeeldwebsite is onderdeel van één hoofdcategorie: Sample Data Content. Onder die categorie vallen alle artikelen op de site: de informatie over Joomla en alles in de voorbeeldsites. Dat kun je als volgt zien: 1 Ga naar Inhoud > Categorieën. 2 Je ziet nu standaard een lijst van maximaal 20 categorieën. Klik op de dropdownlijst waarop 20 staat (een knop rechts boven aan de lijst) en kies Alle. 3 Nu verschijnen alle categorieën van de site in één lange lijst.

48 40 Basiscursus Joomla! 3 Figuur 4.3: Alle categorieën van de site in één lijst in het scherm Categoriebeheer Hoe zie je nu wat hoofd- en subcategorieën zijn? De hoofdcategorie (Sample Data-Articles) staat helemaal aan de linkerkant. Voor de namen van subcategorieën staat een zwart lijntje en ze springen iets in: die subcategorieën zijn Joomla, Park Site en Fruit Shop Site. De subcategorieën daar weer van springen nog iets verder in. Je ziet dat op deze site de categorieën tot vijf niveaus diep gaan, bijvoorbeeld: Sample Data-Articles > Joomla > Extensions > Modules > Content Modules

49 4 De content indelen met categorieën en tags 41 In elk van deze categorieën kunnen artikelen zitten, maar de categorieën kunnen ook leeg zijn. In dit geval zitten er bijvoorbeeld artikelen in de categorie Joomla en in de categorie Content Modules. Oefening 4.2: Categorieën en subcategorieën maken Stel je voor dat de voorbeeldwebsite over Joomla de website is die jij beheert. Je wilt op die site ruimte maken voor nieuwe artikelen. Dat vraagt om een paar nieuwe categorieën. Hoe voeg je die toe? In deze oefening maak je een categorie en twee subcategorieën. Later kun je die categorieën met content vullen en ze zichtbaar maken via een menu. 1 Ga naar Inhoud > Categorieën en klik op Nieuw. Het scherm van figuur 4.4 verschijnt. Figuur 4.4: Een nieuwe categorie toevoegen 2 Vul als Titel in: Veelgestelde vragen. 3 Je kunt Hoofdcategorie (lager op het scherm, onder het vak Beschrijving) laten staan op Geen hoofd. Met andere woorden, de nieuwe categorie heeft geen hoofdcategorie boven zich; deze is zelf een categorie op hoofdniveau. 4 Achter Status staat: Gepubliceerd. Dat is nodig om de categorie zichtbaar te maken aan de voorkant van de site. Standaard staat dat goed. Ook de overi ge opties kun je onveranderd laten. 5 Je eerste categorie is klaar om opgeslagen te worden. Om dat te doen en tege lijk een subcategorie te maken, klik je nu op Opslaan & nieuw. De categorie Veelgestelde vragen wordt nu opgeslagen (daar verschijnt ook een melding van boven in het venster) én je krijgt direct een leeg scherm Categoriebeheer: Toevoegen nieuwe Artikelen categorie. Nu kun je meteen de volgende (sub)categorie maken. 6 In het veld Titel vul je in: Installatie.

50 42 Basiscursus Joomla! 3 7 Om dit tot een subcategorie te maken, moet je een Hoofdcategorie kiezen. Kies hier Veelgestelde vragen (zie figuur 4.5). Figuur 4.5: De nieuwe categorie is een kind van de categorie Activiteiten 8 Klik op Opslaan en nieuw om een tweede subcategorie te maken. 9 In het veld Titel vul je in: Content beheren. 10 Selecteer in het veld Hoofd weer de categorie Veelgestelde vragen. 11 Je hebt nu een tweede subcategorie gemaakt. Klik op Opslaan & sluiten om het huidige scherm te verlaten en terug te gaan naar Categoriebeheer. Scrol door naar beneden (en klik eventueel op de link naar de volgende pagina ) om in de lijst met categorieën het resultaat te zien (zie figuur 4.6). Figuur 4.6: In Categoriebeheer zie je welke categorieën en subcategorieën je hebt aangemaakt. Dat er twee subcategorieën zijn, zie je aan het liggende streepje voor de namen Je hebt nu een indeling in categorieën die alleen aan de achterkant van Joomla zichtbaar is. Op de site zelf is niets van de nieuwe categorieën te zien. Dat gebeurt later pas. Eerst moet je de nu nog lege categorieën vullen met content, vervolgens moet je menulinks toevoegen om de content in de categorieën ook zichtbaar te maken voor de bezoeker. Over die volgende stappen lees je meer in de volgende twee hoofdstukken. 4.4 Instellingen van categorieën aanpassen In het voorgaande heb je categorieën aangemaakt met de standaardinstellingen: je hebt alleen een titel en een moedercategorie opgegeven. Dat is genoeg, maar bij het maken (of bewerken) van categorieën heb je nog meer keuzes. Je vindt die via vier tabs in het bewerkscherm: Categorie, Publicatie, Rechten, Opties (zie figuur 4.7).

51 4 De content indelen met categorieën en tags 43 Figuur 4.7: De instellingen voor een categorie regel je via deze vier tabs: Categorie, Publicatie, Rechten en Opties Het scherm waarin je een categorie maakt of bewerkt, bestaat uit vier tabs: Categorie, Publicatie, Rechten en Opties. Daarboven vul je de basisinformatie in: Titel: de naam van de categorie Alias: niets invullen. Dit is de naam die Joomla intern gebruikt voor de categorie, onder andere in de URL (het webadres) van de pagina. Joomla neemt automatisch de Titel over, in kleine letters en met streepjes tussen de woorden. Categorie Belangrijke keuzes hier zijn: Beschrijving: invullen is niet verplicht, maar je kunt hier een toelichting schrijven op de categorie. Die beschrijving kun je daarna tonen boven aan categoriepagina s (pagina s met links naar de inhoud van de categorie; zie hoofdstuk 6). Hoofdcategorie: kies de categorie waaronder de (nieuwe) categorie valt. Tags: je kunt in Joomla aan artikelen, maar ook aan categorieën, tags toevoegen. Dat zijn labels die worden getoond bij de categorie. Als de site bezoeker erop klikt, krijgt hij alle categorieën te zien met diezelfde tag. Tags zijn vooral handig om toe te voegen aan artikelen; later in dit hoofdstuk (in 4.6) zie je daarvan een voorbeeld. Status: kies Gepubliceerd om de categorie te tonen, Ongepubliceerd om hem voor bezoekers te verbergen. Dat laatste kun je doen omdat je de categorie (aan de achterkant van de site) nog aan het bewerken en vullen bent. Pas als je klaar bent met de artikelen, kies je hier Gepubliceerd. Toegang, Taal: alleen belangrijk om de toegangsrechten voor de categorie te beperken en om de taal in te stellen bij een internationale site. Notitie. In het vak Notitie kun je een notitie voor jezelf zetten.

52 44 Basiscursus Joomla! 3 Publicatie Rechten Opties De meeste gegevens hier worden automatisch ingevuld, zoals de publicatiedatum. Verder is hier ruimte voor metadata. Dat is informatie die het onderwerp van de pagina beschrijft. Metadata komt terecht in de HTML-code; gewone gebruikers lezen de metadata niet, zoekmachines wel. Meta data invullen heeft (een beetje) invloed op zoekmachine resultaten. In de bijlage over zoekmachineoptimalisatie (SEO) lees je meer over metadata. Hier zie je een uitgebreid schema met de rechten voor deze categorie van verschillende gebruikersgroepen. Met deze rechten regel je bijvoorbeeld welke gebruikers categorieën mogen aanmaken of verwijderen. Geavanceerde opties. Hier kun je kiezen hoe de categorie standaard wordt weergegeven en je kunt een afbeelding aan de categorie toevoegen (om boven aan een categoriepagina te tonen). 4.5 Categorieën verwijderen Je hebt zojuist een paar categorieën toegevoegd. Hoe verwijder je categorieën die je niet meer nodig hebt? Dat gaat in twee stappen: eerst verplaats je de categorie naar de Prullenbak, daarna kun je de categorie definitief verwijderen. Om te zien hoe dat werkt, verwijder je in deze oefening een categorie uit de voorbeelddata. Oefening 4.3: Categorieën verwijderen 1 Ga naar Inhoud > Categorieën. Je komt in het scherm Categoriebeheer. Zet een vinkje in het selectievakje voor de naam van de categorie(en) die je wilt verwijderen. Kies bijvoorbeeld de categorie Protostar. 2 Klik in de knoppenbalk op de knop Prullenbak. 3 Je krijgt nu de melding 1 categorie naar prullenbak verplaatsen geslaagd en de categorie is verdwenen uit de lijst. Verwijderde items worden bewaard in de prullenbak; ze zijn nog niet definitief weg. 4 Als je wilt zien welke categorieën in de prullenbak zitten, klik je in Categoriebeheer op de knop Zoekmiddelen en vervolgens op Selecteer status. Kies in de keuzelijst voor Verplaatst naar prullenbak (zie figuur 4.8). Figuur 4.8: Via de keuzelijst Selecteer Status maak je items in de Prullenbak zichtbaar

53 4 De content indelen met categorieën en tags 45 5 Nu krijg je een overzicht van verwijderde categorieën; in dit geval is dat er één. Als je het verwijderen ongedaan wilt maken, selecteer dan de categorie(en) en klik in de knoppenbalk op Publiceren. De categorie verdwijnt uit de lijst en wordt teruggezet in de gewone lijst met categorieën. Als je categorieën definitief wilt verwijderen, selecteer dan de categorie(en) en klik op de knop Prullenbak legen in de knoppenbalk. Maar let op: dat kun je niet meer ongedaan maken. 6 Krijg je een melding dat je een categorie niet defintief kunt verwijderen? Dan bevat die categorie nog artikelen. Je kunt alleen categorieën wissen die leeg zijn. Verwijder eerst de artikelen in de categorie in het scherm Artikelbeheer: Artikelen. Selecteer daar (met de knop Zoekmiddelen > Selecteer categorie) alle artikelen uit die ene categorie, bekijk de inhoud van de Prullenbak en maak die leeg (Prullenbak legen). Nu kun je de categorie wel definitief wissen. Dat je categorieën in twee stappen moet verwijderen, behoedt je voor fouten: je kunt niet zomaar een categorie weggooien. Vergeet niet af en toe de tweede stap te zetten en categorieën te verwijderen, zodat je de prullenbak overzichtelijk houdt. 4.6 Tags gebruiken om content beter vindbaar te maken Sinds Joomla 3.1 is er een extra manier om inhoud te ordenen: met tags. Je kunt aan elk artikel een of meer tags toewijzen. Je kent dat waarschijnlijk van blogs, waar blogteksten vaak niet verder onderverdeeld worden in categorieën: de auteur koppelt er een of meer tags aan. Maar ook in andere websites kun je tags gebruiken om het gemakkelijker te maken voor bezoekers om specifieke inhoud te vinden: door bijvoorbeeld te klikken op de tag Joomla 3.3 bij een artikel krijgt de bezoeker een lijst te zien met alle artikelen over dat onderwerp. Hieronder zie je een voorbeeld van het gebruik. Oefening 4.4: Tags toevoegen aan een artikel In deze oefening maak je een paar tags aan bij de artikelen in de standaardvoorbeeldsite van Joomla. In dit voorbeeld gaan we uit van een website over Joomla. Sommige artikelen staan in een algemene categorie Joomla. Maar met tags kun je die artikelindeling verfijnen: je kunt bijvoorbeeld tags toewijzen over de versie (Joomla 2.5, Joomla 3.0, Joomla 3.3). Als je heel veel artikelen over Joomla zou hebben, kan de bezoeker zoeken naar artikelen die specifiek gaan over een bepaalde versie.

54 46 Basiscursus Joomla! 3 1 Ga naar Inhoud > Artikelen en zoek het artikel Using Joomla!. Open dat om het te bewerken. 2 Rechts van de teksteditor zie je het veld Tags. Typ daar de tekst Joomla 3.3. Je ziet dat Joomla nu gaat zoeken of die tag al bestaat. Figuur 4.9: Typ een tekst in het vak Tags om een nieuwe tag te maken of een bestaande tag te selecteren 3 Zodra je de tag hebt getypt, klik dan op Enter. Nu is de tag toegevoegd: Figuur 4.10: De nieuwe tag Joomla 3.3 is toegevoegd 4 Klik op Opslaan & sluiten. In de pagina Artikelbeheer: Artikelen kies je een ander artikel. Liefst een artikel dat in een andere categorie zit; in dit voorbeeld kies ik het artikel Administrator Components. Wijs ook hier de tag Joomla 3.3 toe. Als je klikt op het veld Tags, hoef je die niet meer te typen; je kunt de al bestaande tag meteen selecteren. Sla het artikel op. 5 Klik aan de voorkant van de site op de link naar het artikel Using Joomla. Je ziet dat de tag boven het artikel wordt afgebeeld: Figuur 4.11: Tags verschijnen op de website standaard boven elk getagd artikel 6 Door te klikken op de tag, krijg je een lijst te zien met alle artikelen die gelabeld zijn met Joomla 3.3. In dit geval is dat een bescheiden lijst van twee artikelen:

55 4 De content indelen met categorieën en tags 47 Figuur 4.12: Als de bezoeker klikt op de tag Joomla 3.3, verschijnt een lijst met alle artikelen met die tag Dit is in een notendop hoe je tags gebruikt: in het artikel voeg je ze toe, aan de voorkant van de site worden ze automatisch afgebeeld als link naar een lijst met getagde artikelen. De tagspagina aanpassen Standaard is de pagina met getagde artikelen nogal leeg: alleen een lijst met artikeltitels, zonder een paginatitel erboven. Maar dat kun je aanpassen. Ga daarvoor naar Componenten > Tags > Opties. Kies hier bij Tagnaam, Itemafbeelding en Itembeschrijving voor Toon. Bij Maximum aantal tekens kies je hoeveel tekens van de artikeltekst getoond worden; kies hier bijvoorbeeld 100. Na deze veranderingen zie je op de tagspagina meer informatie: de naam van de tag, de eerste afbeelding uit het artikel en een deel van de tekst per artikel: Figuur 4.13: De tagspagina heeft nu een titel (Joomla 3.3) en laat stukjes van de getagde artikelen zien Wat kun je nog meer doen met tags? Hierboven heb je gezien hoe tags werken. In je eigen site kun je tags zo uitgebreid of beperkt toepassen als je wilt. Misschien heb je aan categorieën al genoeg, en hoef je helemaal geen tags te gebruiken. Toch is het de moeite waard om de mogelijkheden te verkennen. Je kunt zelfs ervoor kiezen om alle content in één categorie ( artikelen ) te plaatsen, en alles verder in te delen met tags. Dat

56 48 Basiscursus Joomla! 3 kan zeker bij een kleine site of een blog handig zijn, omdat je tags makkelijk toevoegt terwijl je het artikel schrijft. Je hoeft dus niet van tevoren een vaste indeling te bedenken, zoals bij categorieën. Maar je kunt tags ook prima gebruiken als aanvulling op categorieën. Denk bijvoorbeeld aan een site over films: je hoofdindeling kun je maken met categorieën (drama s, documentaires, komedies, actiefilms) en tags gebruiken om je bezoeker te laten filteren op allerlei andere kenmerken, los van de categorieën: denk aan tags als romantisch, spannend, Oscarwinnaar, Top 100, 2013, 2014, favorieten, enzovoort. Met tags bied je de bezoeker dus veel meer manieren om groepjes content met gemeenschappelijke kenmerken te vinden. Hierboven zag je hoe de bezoeker pagina s met getagde artikelen te zien krijgt. Dat gebeurt nadat de bezoeker klikt op een tag bij een artikel. Maar je kunt ook menulinks maken die leiden naar pagina s met getagde artikelen. Een voorbeeld is de menulink van het type Tags > Lijst van getagde items. Met zulke menu links kun je een apart Tags -menu maken. Dat biedt de bezoeker een extra manier om door de content te navigeren, naast menu s met links naar categorieën. Een voorbeeld van menulinks naar tagpagina s zie je in paragraaf 6.5.

57 5 Contentpagina s maken Zodra je categorieën en subcategorieën hebt aangemaakt, kun je de content maken die in die categorieën thuishoort: contentpagina s, in Joomla artikelen 5 genoemd. In dit hoofdstuk lees je meer over het maken en aanpassen van artikelen. 5.1 In dit hoofdstuk Artikelen schrijven en bewerken in de artikeleditor Nieuwe artikelen zichtbaar maken op de site Afbeeldingen toevoegen Artikelen verdelen in intro en hoofdtekst Artikelen archiveren 5.2 Artikelen schrijven en bewerken in de artikeleditor Artikelen zijn waarschijnlijk de meest voorkomende contentpagina s. Het zijn standaardwebpagina s, die bestaan uit tekst en afbeeldingen. Later wil je misschien andere vormen van content (zoals fotoalbums of forums) toevoegen. Die mogelijkheden komen aan bod in hoofdstuk 8 over de uitbreidingen voor Joomla. In hoofdstuk 3 heb je al een voorproefje gekregen van hoe je een nieuw artikel maakt. Als je ingelogd bent in de beheeromgeving, zijn dit de twee basisstappen: Ga naar Inhoud > Artikelen en klik in het scherm Artikelbeheer op Nieuw. Schrijf het artikel, vul de noodzakelijke gegevens in (zoals titel en categorie) en klik op Opslaan. 49

58 50 Basiscursus Joomla! 3 Als je een bestaand artikel wilt bewerken, selecteer je in Artikelbeheer het artikel door op het selectievakje te klikken (naast de titel van het artikel) en te klikken op de knop Bewerken in de knoppenbalk. Een andere en snellere manier is klikken op de titel van het artikel: je komt dan meteen in het artikeleditorscherm. Of je nu een artikel maakt of bewerkt, je komt in beide gevallen terecht in het scherm van de artikeleditor. In de volgende oefening maak je kennis met de uitgebreide mogelijkheden die de editor biedt. Figuur 5.1: Het artikeleditorscherm Het scherm van de artikeleditor bestaat uit deze onderdelen: 1 Met de knoppen bovenaan kun je het artikel Opslaan, of het artikel opslaan en het editorscherm sluiten (Opslaan & sluiten), of je kunt ervoor kiezen om het artikel op te slaan en het scherm open te houden om een nieuw artikel in te voeren (Opslaan & nieuw). Annuleren staat voor wijzigingen annuleren. Als je een bestaand artikel bewerkt, heb je ook nog de knop Opslaan als kopie beschikbaar, die je de gelegenheid geeft om een kopie van het artikel op te slaan. Je kent deze knoppen van het maken van categorieën in het vorige hoofdstuk.

59 5 Contentpagina s maken 51 2 Eerst vul je de Titel van het artikel in; de Alias vult Joomla automatisch in op basis van de titel, zodra je het artikel opslaat. 3 Onder de tab Inhoud vind je het editorvenster. Het belangrijkste deel is de tekstverwerker. Je voert er tekst in en kunt die opmaken. Rechts van het editorvak vul je de artikelgegevens in: de Categorie waaronder het artikel valt en eventuele Tags. Verder kun je hier onder andere kiezen of het artikel Gepubliceerd is of niet, en of het Speciaal is (dus op de homepage verschijnt). 4 Naast de tab Inhoud vind je vijf andere tabs waar je uiteenlopende artikelopties regelt: Publicatie, onder andere met de optie om een start- en einddatum voor de publicatie te regelen, en om metagegevens in te voeren voor zoekmachines. Afbeeldingen en Links, waar je een afbeelding kunt kiezen om af te beelden bij het artikel, in de gewone weergave en bij de weergave van het artikel als introtekst. Meer daarover lees je in 5.6. Opties, waarmee je bepaalt welke gegevens allemaal zichtbaar zijn bij dit artikel, zoals auteursnaam en publicatiedatum. Instellen bewerkvenster, geavanceerde opties voor sitebeheerders. Rechten, om als sitebeheerder te bepalen welke gebruikersgroep wát mag doen met het artikel (bijvoorbeeld bewerken). In hoofdstuk 3 heb je al een heel eenvoudig artikel gemaakt met alle basisinstellingen onveranderd. Nu leer je meer over het werken met de Joomla-artikeleditor. Je maakt een nieuw artikel en past de opmaak en instellingen aan. In 5.8 lees je meer informatie over de beschikbare artikelopties. Oefening 5.1: Een nieuw artikel maken en toevoegen aan een categorie In het vorige hoofdstuk heb je een paar categorieën aangemaakt. In deze oefening maak je een nieuw artikel voor de categorie Voorbeeldcategorie > Subcategorie 1. Daarbij pas je de opmaak aan naar je smaak. 1 Ga naar Inhoud > Artikelbeheer en klik op Nieuw. 2 In het vak Titel schrijf je een titel, bijvoorbeeld Hoe installeer je Joomla? Selec teer de categorie die je in het vorige hoofdstuk hebt aangemaakt: onder Veelgestelde vragen de subcategorie Installatie. 3 De keuze bij Speciaal (onder Gegevens) kun je op Nee laten staan. Alleen als je wilt dat dit artikel te zien is op de homepage, klik je bij Speciaal op Ja. 4 Voer wat tekst in in het editorscherm. De teksteditor werkt op een vergelijkbare manier als tekstverwerkingsprogramma s; de meeste knoppen lijken erg op die in bijvoorbeeld Microsoft Word.

60 52 Basiscursus Joomla! 3 Figuur 5.2: Het scherm waarin je een nieuw artikel aanmaakt 5 Pas de opmaak van de tekst aan: a Selecteer de eerste alinea. Klik op de knop B (voor bold) in de knoppenbalk boven het tekstinvoerscherm. De eerste alinea wordt nu vet. b Maak en selecteer een tussenkopje. Klik op de keuzelijst die standaard op Alinea of Paragraph staat en selecteer de tekststijl Kop 2 (Heading 2). De tussenkop wordt nu wat groter weergegeven. Het resultaat is te zien in figuur 5.3. Figuur 5.3: De artikeltekst met aangepaste opmaak 6 De andere opties (zoals die onder de tabs Publicatie en Opties) kun je onveranderd laten. Klik op Opslaan & sluiten. De weergave in Joomla s tekstverwerker geeft je een redelijk beeld van de opmaak van het artikel, maar let op: de vormgeving zoals die wordt weergegeven op de site zelf zal anders zijn. Het lettertype, de kleur en de grootte daarvan ziet er anders uit wanneer je het artikel straks in de site bekijkt. De Joomla-editor is bedoeld om je een goede eerste indruk te geven van de opmaak (zoals vet, cursief, alinea s, koppen), maar voor de site zelf gelden specifieke opmaakcodes die zorgen voor de uiteindelijke lay-out die de webbezoeker ziet.

61 5 Contentpagina s maken 53 Tip: snel een reeks artikelen maken met Opslaan als kopie Wil je snel een aantal dummy-artikelen maken om een eerste versie van de website te vullen, dan kun je met de knop Opslaan als kopie kopieën maken van één artikel. Maak het eerste artikel en sla het op. Open nu dat artikel. In het scherm Artikelbeheer: Edit Article verschijnt in de toolbar nu ook een knop Opslaan als kopie. Die gebruik je zo: 1 Verander de titel van het artikel en desgewenst de categorie. 2 Klik op Opslaan als kopie. Nu is naast het originele artikel ook jouw nieuwe versie opgeslagen, met de andere titel. Met andere woorden: je hebt een nieuw artikel gemaakt met dezelfde dummy-inhoud. 3 Herhaal de stappen 1 en 2 zo vaak als nodig is om genoeg dummy-artikelen te hebben voor je site. Klik uiteindelijk op Opslaan & sluiten om het scherm te sluiten. Je ziet dan de lijst met nieuwe artikelen in het scherm Artikelbeheer. Let op: de knop Opslaan als kopie verschijnt niet als je vanaf niets een nieuw artikel schrijft. Je moet het artikel eerst opgeslagen hebben (Opslaan) of een bestaand artikel openen. Daarna kun je een aangepaste versie met Opslaan als kopie als kopie opslaan. Stijlen gebruiken bij de opmaak van teksten In de teksteditor zie je een keuzevak dat standaard op Paragraaf staat. Daarmee wijs je, net als bij een gewone tekstverwerker, opmaakstijlen toe aan geselec teerde tekst. De meestgebruikte stijlen zijn Paragraaf (Paragraph) voor gewone tekst en Kop 1 (Heading 1) tot en met 6. Hoe tekst met die stijlopmaak eruitziet, hangt af van de template die je gebruikt. Een template bevat de code die zorgt voor de lay-out en typografie van de site. Al die code vind je in de zogenoemde CSS-stylesheet; CSS is de opmaaktaal voor webpagina s. Naast de keuzelijst voor opmaakstijlen is er óók een keuzelijst Opmaak. Daar vind je nog meer opmaakmogelijkheden: bijvoorbeeld vet, schuin, onderstrepen. En als je doorklikt, vind je ook hier weer de koppen uit de keuzelijst Opmaak: Kop 1, enzovoort. In de standaardtemplate van Joomla heeft bijvoorbeeld de stijl Alinea/Paragraph het lettertype Arial; een Heading 2 is in het lettertype Open Sans. Wanneer je een andere template gebruikt, kan dat er heel anders uitzien: andere lettertypes, andere groottes en kleuren. Als je de lay-out en typografie helemaal naar je hand wilt zetten, kun je zelf de CSS-stylesheet aanpassen in de CSS-editor van Joomla. Daarover lees je meer in hoofdstuk 10 over templates.

62 54 Basiscursus Joomla! 3 Figuur 5.4: Via de menuoptie Opmaak kun je bijvoorbeeld woorden vet zetten of kopstijlen toewijzen Belangrijk: als je tekst wilt kopiëren uit een bestaand document naar de artikeleditor, verwijder dan eerst alle opmaak. Op die manier vermijd je dat onzichtbare codes meekomen die de lay-out van je artikel rommelig maken. Om dit te doen, open je de Kladblok-toepassing op je pc (of Teksteditor op een Mac) en plak je de tekst van de tekstverwerker in het Kladblok/Teksteditor-document. Zo krijg je een schoon bestand met tekst die je kunt kopiëren en plakken in de editor van Joomla. Klik met de rechtermuisknop in het tekstvenster en kies Plakken in het contextmenu. De mogelijkheden van de tekstverwerker uitbreiden De teksteditor die je zojuist hebt uitgeprobeerd, is eigenlijk een extensie die wordt meegeleverd met Joomla: TinyMCE. Standaard gebruikt Joomla echter maar een beperkt aantal van de mogelijkheden van deze tekstverwerker; zoals je ziet zijn er niet zo veel knoppen. Als je wat meer mogelijkheden wilt gebruiken, moet je een instelling van TinyMCE veranderen. Daarmee krijg je bijvoorbeeld meer mogelijkheden om te bepalen hoe afbeeldingen worden weergegeven in de tekst van een artikel. Uitbreiden van de mogelijkheden doe je zo: ga naar Extensies > Pluginbeheer en klik op Tekstverwerker TinyMCE om de instellingen te bewerken. Selecteer bij basisopties Functionaliteit: Uitgebreid en klik op Opslaan & sluiten. Als je nu een artikel opent, vind je extra knoppen in het editorscherm.

63 5 Contentpagina s maken 55 Figuur 5.5: De teksteditor TinyMCE in de stand Uitgebreid Een handige extra optie die je onder Bewerken vindt, is Paste as text (Plakken als tekst). Die vink je eenmalig aan. Nu kun je tekst vanuit Word of een andere tekstverwerker plakken zonder dat er ongewenste, vaak verborgen opmaakcodes meekomen. Hierna ga ik ervan uit dat je de TinyMCE gebruikt in met de instelling Functionaliteit: Uitgebreid. Je hebt bepaalde extra knoppen en mogelijkheden nodig om de oefeningen in dit boek te volgen. 5.3 Het artikel zichtbaar maken op de site Je hebt een artikel geschreven... maar als je de site bekijkt (klik op Bekijk website), zul je het nergens ontdekken. Hoe kan dat? De reden is dat er nog geen menulink is naar dit artikel. In Joomla bestaat een artikel pas echt, wanneer het via een menulink zichtbaar wordt gemaakt. In het volgende hoofdstuk leer je alles over menu s. Om alvast te zien hoe dit principe werkt dus hoe menulinks ervoor zorgen dat pagina s zichtbaar worden breng je nu vast een eerste menulink aan in het hoofdmenu van de site. Oefening 5.2: Menulink naar pagina maken 1 In de beheeromgeving ga je naar Menu s > Main Menu. Dit is het hoofdmenu dat met de voorbeelddata van Joomla wordt meegeïnstalleerd. Je ziet dit menu aan de voorkant van de site in de rechterkolom. Aan de voorkant van de site heeft dit menu de titel This site (zie figuur 5.6). 2 Je bent nu in het scherm Menubeheer: Menu-items. Klik op Nieuw om een nieuwe menulink toe te voegen. 3 Klik bij Menu-itemtype op de knop Selecteren en kies voor Artikelen en dan voor Individueel artikel. Je maakt een menulink naar een pagina met één artikel. 4 Klik bij Selecteer artikel op de knop Selecteren. Hier bepaal je naar welk artikel de menulink verwijst. Kies in het popupvenster voor het artikel Hoe installeer je Joomla?. Het popupvenster sluit. 5 Voer als Menutitel (naam van de menulink) in: Hoe installeren? (zie figuur 5.7).

64 56 Basiscursus Joomla! 3 Figuur 5.6: Links het Main Menu zoals het op de site zichtbaar is, rechts hoe je het ziet in de beheeromgeving. Alle menulinks op hoofdniveau (Home, Site Map, Login, Sample Sites, Site Administrator) zijn op de site zichtbaar in het menu met de menutitel This Site. Menulinks op een lager niveau zijn submenu-items: die zijn aan de voorkant van de site pas zichtbaar als de bezoeker klikt op een menulink op hoofdniveau. (Het menu About Joomla! in de voorbeeldsite is een ander menu, dat boven het Main Menu geplaatst is.) Figuur 5.7: Een menulink naar een artikel maken

65 5 Contentpagina s maken 57 6 Klik op Opslaan en vervolgens op Bekijk website. 7 Nu zie je in het menu This site een nieuwe link onderaan: Mijn tweede artikel. Klik je op die link, dan verschijnt de bijbehorende pagina (zie figuur 5.8). Figuur 5.8: De nieuwe link leidt naar een pagina met een artikel Je hebt nu een menulink gemaakt waarmee de bezoeker rechtstreeks naar een artikel springt, ongeacht hoe diep dat artikel zit in de categoriestructuur. Je kunt ook een menulink maken naar een categorie. Dan ziet de bezoeker eerst een overzichtspagina met links naar alle artikelen in een categorie, en kan doorklikken naar die artikelen. Je leest daar meer over in hoofdstuk 7 over menu s. 5.4 Afbeeldingen aan artikelen toevoegen Het artikel dat je hebt toegevoegd, bestaat alleen uit tekst. In deze oefening voeg je een afbeelding toe. Oefening 5.3: Afbeeldingen uploaden Stel, je hebt een aantal afbeeldingen voor de website op de harde schijf staan. Om ze toe te voegen aan een artikel, moet je de afbeeldingsbestanden eerst kopiëren (uploaden) naar de webserver. Daarvoor kun je gebruikmaken van het scherm Mediabeheer. 1 Ga in de beheeromgeving naar Inhoud > Mediabeheer. 2 Om te voorkomen dat al je afbeeldingen terechtkomen in één map op de webserver, maak je eerst een nieuwe map. Zo houd je overzicht en heb je straks niet tientallen of meer ongeordende afbeeldingen. In dit geval maak je een aparte map voorbeeldafbeeldingen aan. Klik eerst op Nieuwe map aanmaken (1 in figuur 5.9) in de knoppenbalk. Nu verschijnt een invulvak

66 58 Basiscursus Joomla! 3 (2). Tik de naam in het invulvak en klik nu op de tweede knop Nieuwe map aanmaken (3). De nieuwe map verschijnt in het venster eronder. Figuur 5.9: Vul eerst de naam van de nieuwe map in, klik op Map aanmaken, en de map wordt toegevoegd 3 Selecteer nu die nieuwe map (klik op de naam). De lege map opent. Nu kun je afbeeldingen naar die map uploaden. 4 Klik in de knoppenbalk op Uploaden. Er verschijnt een knop Bestanden kiezen waarmee je afbeeldingen kunt selecteren op je computer. Voor deze oefening kun je een willekeurig plaatje gebruiken; liefst een niet te grote jpg-afbeelding. Selecteer een of meer afbeeldingen in het popupscherm en klik op Openen. Het popupvenster sluit. Klik op de knop Upload starten om de afbeelding(en) te verplaatsen naar de webserver. Figuur 5.10: Na het uploaden (via de knop Upload starten) verschijnt een thumbnail van de afbeelding in Mediabeheer 5 In figuur 5.10 zie je het resultaat: de geüploade afbeelding verschijnt in het venster met afbeeldingsbestanden. In dit geval is de afbeelding laptop.jpg in Mediabeheer geüpload naar de map voorbeeldafbeeldingen. Boven aan het scherm verschijnt de melding Uploaden voltooid. Oefening 5.4: Afbeeldingen in het artikel plaatsen In de vorige oefening heb je een afbeelding geüpload naar de webserver. Nu kun je die in het artikel plaatsen:

67 5 Contentpagina s maken 59 1 Ga naar Inhoud > Artikelen en selecteer in het scherm Artikelbeheer het artikel Hoe installeer je Joomla? (klik op de artikeltitel om het te bewerken, of klik het selectievakje voor de artikeltitel aan en klik dan op de knop Bewerken). 2 Plaats de cursor helemaal aan het begin van de tweede alinea. Het begin of eind van een alinea is de beste plaats om een afbeelding in te voegen; de afbeelding kan op die manier goed in het artikel worden geplaatst. 3 Klik op de knop Afbeelding onder het editorscherm (zie figuur 5.11). Figuur 5.11: De knop waarmee je een afbeelding invoegt 4 In het popupscherm dat nu wordt geopend, selecteer je de map voorbeeldafbeeldingen. Nu kun je de afbeelding selecteren die je wilt invoegen (zie figuur 5.12). Figuur 5.12: Kies in het popupscherm de gewenste afbeelding Klik op het bestand laptop.jpg. In het vak URL van de afbeelding voegt Joomla dan automatisch de juiste bestandslocatie in. Verder kun je in dit popupscherm de volgende gegevens toevoegen (om alles te zien, moet je binnen het popupscherm scrollen): Laat de Uitlijning onveranderd; je kunt straks nog bepalen hoe de afbeelding ten opzichte van de tekst komt te staan. In het vak Beschrijving van de afbeelding neem je een beschrijving op. Deze tekst wordt niet weergegeven, maar informeert zoekmachines wat op de foto staat. In dit geval is laptop genoeg.

68 60 Basiscursus Joomla! 3 In het vak Titel van de afbeelding typ je een titel. Hier is laptop genoeg. Deze tekst wordt weergegeven wanneer de bezoeker met de muiscursor over de afbeelding gaat. Vink het vakje Onderschrift alleen aan als je wilt dat Joomla de titeltekst ook als een bijschrift laat zien onder de afbeelding. Klik op de knop Invoegen (rechtsbovenaan in het popupscherm). Het popupscherm sluit. 5 Selecteer de afbeelding en klik op de knop Links uitlijnen: Figuur 5.13: Selecteer de afbeelding en kies Links uitlijnen 6 Klik op Opslaan en vervolgens op Bekijk website om de voorkant te zien. Als je nu de menulink naar het artikel weer volgt, zie je hoe de afbeelding (figuur 5.14) is ingevoegd. Figuur 5.14: Je hebt een afbeelding ingevoegd in het artikel De afbeelding staat op de gewenste plaats, maar komt tegen de tekst aan. Dat zullen we in de volgende oefening aanpassen.

69 5 Contentpagina s maken 61 Als je nog een afbeelding wilt invoegen, herhaal dan de vorige stappen. Open het artikel om het te bewerken, plaats de cursor in een andere alinea en voeg een nieuwe afbeelding in. Je hoeft om foto s te uploaden niet per se Mediabeheer te gebruiken. Als je in de artikeleditor klikt op de knop Afbeelding, zie je dat je ook daar kunt kiezen voor het uploaden van afbeeldingen. Rechtstreeks vanuit een artikel een afbeelding uploaden is een snelle methode, maar met een beperking: je kunt afbeeldingen dan alleen naar een map uploaden die al bestaat. Oefening 5.5: De weergave van de afbeelding aanpassen Nadat je een afbeelding hebt ingevoegd, zie je aan de voorkant van de site pas goed hoe de weergave uitpakt, zoals de exacte plaatsing ten opzichte van de tekst. Als je wilt, kun je achteraf bijvoorbeeld de uitlijning aanpassen en wat extra ruimte maken tussen afbeelding en tekst. 1 Open het artikel in de artikeleditor. Klik op de afbeelding. Klik op het pictogram Insert/Edit image (Afbeelding invoegen/bewerken) in de knoppenbalk van de teksteditor (zie figuur 5.15), waarna een popup met afbeeldingseigenschappen verschijnt. Klik binnen die popup op de tab Geavanceerd. Figuur 5.15: Het popupscherm met afbeeldingseigenschappen. In dit voorbeeld is float:left al ingevuld ), doordat je eerder hebt gekozen voor Uitlijning Links. Bij Horizontale ruimte vul je 5 in om een horizontale goot van 5 pixels naast de afbeelding te maken 2 De Stijl staat goed; hier is float:left ingevuld doordat je al eerder voor een linkse uitlijniing hebt gekozen. In dit geval vul je ook een waarde in voor de Horizontale ruimte in pixels. Als je hier bijvoorbeeld 5 invult, leidt dat tot een goot van 5 pixels links en rechts van de afbeelding, waardoor deze los

70 62 Basiscursus Joomla! 3 komt te staan van de tekst uit het artikel. Klik op Ok om de wijzigingen toe te passen. 3 In de artikeleditor zie je de afbeelding nu zo: Figuur 5.16: De afbeelding verschijnt in het editorscherm 4 Klik op Opslaan en vervolgens op Bekijk website om de voorkant te zien. Als je nu de menulink naar het artikel weer volgt, zie je hoe de afbeelding (figuur 5.17) is ingevoegd. Figuur 5.17: De uitlijning en de witruimte rondom de afbeelding zijn aangepast De knop Insert/Edit Image (Afbeelding invoegen/bewerken) in de editor is niet geschikt voor het invoegen van afbeeldingen. Via deze knop kun je namelijk niet naar de afbeelding bladeren, maar moet je de exacte locatie (URL) invullen. Dat is de reden waarom er een aparte Joomla-knop Afbeelding is onder het editorscherm waarmee je makkelijk afbeeldingen invoegt.

71 5 Contentpagina s maken Artikelen verdelen in intro en hoofdtekst In de artikeleditor kun je niet alleen het artikel lay-outen en foto s toevoegen. Je kunt ook bepalen hoe het artikel op de pagina moet worden weergegeven: als één volledig artikel, of gesplitst in twee delen. Waarom zou je het laatste willen? Joomla kan dan de intro van het artikel apart publiceren, los van de hoofdtekst. In de praktijk komt dat vrij vaak voor. Het is bijvoorbeeld handig om op de homepage alleen de introteksten van artikelen te laten zien, met een knop Lees meer erbij. Oefening 5.6: Verdeel het artikel in tweeën 1 Ga naar Inhoud > Artikelen en open in Artikelbeheer het artikel dat je zojuist hebt gemaakt (Hoe installeer je Joomla?) om het te bewerken. 2 In het teksteditorscherm plaats je de cursor net na de laatste punt van de eerste (vet gezette) alinea. 3 Om aan te geven dat je na deze introtekst het artikel wilt splitsen, klik je op de knop Lees meer aan de onderkant van de editorscherm, waarna een rode stippellijn verschijnt (zie figuur 5.18). Figuur 5.18: Als je op de knop Lees meer klikt, verschijnt een stippellijn in het artikel 4 Om ervoor te zorgen dat het artikel op de homepage verschijnt, moet je nog één artikelinstelling wijzingen. Kies (rechts onder het kopje Gegevens) voor Speciaal: Ja. 5 Klik op Opslaan en vervolgens op Bekijk website. 6 Het extra artikel is op de homepage terechtgekomen, maar je moet er wel even naar doorklikken. Op de homepage zie je nu pagineringslinks: Figuur 5.19: Pagineringslinks onder aan de homepage Er is (volgens de huidige instellingen van de homepage) te veel content om op het scherm van de homepage te passen; nieuwe content schuift door naar een soort tweede homepage.

72 64 Basiscursus Joomla! 3 7 Klik op het pijltje Volgende om het vervolg van de homepage-content te zien. Voilà, je artikelintro verschijnt (figuur 5.20). Figuur 5.20: Het artikelintro met een knop Lees meer Als je klikt op Lees meer: Hoe installeer je Joomla?, dan kom je uit bij het volledige artikel. Waarschijnlijk wil je de indeling van de homepage nog verder aanpassen. Zo staat je nieuwe artikel nu op een tweede pagina achter de homepage, en zoals je ziet is het ook nog eens afgebeeld in een smalle kolom. Hoe je de homepage verder aanpast, lees je in het volgende hoofdstuk. Een artikel kan natuurlijk ook bestaan uit één doorlopende tekst. Vooral bij korte artikelen (denk aan blogbijdragen) is dat gebruikelijk. Maar vaak kun je artikelen beter splitsen in een intro en vervolgtekst. Zo kan Joomla het eerste deel apart publiceren. In het volgende hoofdstuk zul je zien dat dat niet alleen handig is op de homepage, maar ook op categoriepagina s. Dat zijn pagina s die een overzicht bieden van de inhoud van een categorie. 5.6 De velden Afbeeldingen en links gebruiken Als je een artikel maakt, zie je boven aan het editorscherm een tab Afbeeldingen en links. Wat is het doel daarvan? Hierboven heb je gezien dat je afbeeldingen (en elke gewenste tekst, dus ook hyperlinks) kunt invoegen in het normale editorscherm. Toch zijn de velden voor Afbeeldingen en links niet overbodig. Daarmee kun je namelijk vaste lay-outs maken: je kunt per artikel twee afbeeldingen toevoegen die Joomla altijd op een vaste positie plaatst, aan het begin van het artikel-intro en aan het begin van het hele artikel.

73 5 Contentpagina s maken 65 Dat is eenvoudiger, zeker als ook anderen dan jijzelf artikelen mogen toevoegen aan de site. De kans op fouten is kleiner, want je hoeft de afbeelding niet heel precies in de artikeltekst te plaatsen. Je hoeft hem alleen te selecteren en Joomla zorgt voor exact dezelfde positie bij alle artikelen. Behalve voor afbeeldingen zijn er ook drie velden voor hyperlinks beschikbaar bij elk artikel. Die zul je misschien minder vaak nodig hebben. Maar als je een of meer hyperlinks bij een artikel wilt publiceren, dan kun je die toevoegen via de hyperlinkvelden onder aan het artikeleditorscherm. Oefening 5.7: Afbeeldingen invoegen met Afbeeldingen en links Om uit te proberen hoe het werkt, maken we een nieuw artikel waarbij we afbeeldingen en links invoegen. 1 Ga naar Inhoud > Artikelen > Nieuw artikel toevoegen. 2 Als Titel vul je in: Test van afbeeldingen en links. Laat het artikel ongecategoriseerd. Selecteer bij Speciaal: Ja. 3 Voeg een paar alinea s tekst in. Plaats de cursor na de eerste alinea en klik op Lees meer. 4 De basis van het artikel is klaar. Onder de tab Afbeeldingen en links klik je nu bij Afbeelding introtekst op Selecteren. Kies een afbeelding uit de voorbeelddata van Joomla uit de map sampledata/parks/animals: 200px_phyllopteryx_taeniolatus1.jpg. Klik op Invoegen. Doe hetzelfde bij Afbeelding volledig artikel, maar voeg nu een grotere afbeelding in: 800px_phyllopteryx_taeniolatus1.jpg. 5 Je kunt nu klikken op het oogje bij de afbeeldingsvelden om een voorbeeld van de afbeelding te zien: Figuur 5.21: Een thumbnail van de intro-afbeelding bekijken 6 Kies bij Uitlijning afbeelding voor beide afbeeldingen: Links.

74 66 Basiscursus Joomla! 3 7 Tot slot gebruik je de velden Link A, Link B en Link C om hyperlinks in te voegen. Voor deze oefening kun je drie keer dezelfde link invullen, bijvoorbeeld Bij Link A tekst, Link B tekst en Link C tekst vul je de linktekst in die op de website verschijnt. Vul bijvoorbeeld in: Eerste link, Tweede link, Derde link. 8 Sla het artikel op. Klaar! Bekijk de voorkant van de site om het resultaat te zien: Figuur 5.22: De introtekst met afbeelding, geplaatst via Afbeeldingen en links Op de homepage verschijnt het artikel met een afbeelding aan de linkerkant. Als je doorklikt, zie je het volledige artikel, inclusief afbeelding op volledig formaat en drie hyperlinks boven het artikel: Figuur 5.23: Het artikel met afbeeldingen en links

75 5 Contentpagina s maken 67 Je kunt de weergave van het artikel nog verder aanpassen via de tab Opties van het artikel: daar kun je via Positionering van de links bepalen dat de links Onder het artikel staan. 5.7 Instellingen van artikelen aanpassen Hierboven heb je bij het maken van artikelen alleen de belangrijkste instellingen aangepast. Wanneer je een artikel maakt of bewerkt (Inhoud > Artikelen > Nieuw/Bewerken), kun je nog veel meer instellingen veranderen in het editorscherm (zie figuur 5.1). Die instellingen bepalen bijvoorbeeld welke artikeldetails worden getoond wanneer het artikel wordt gepubliceerd. Probeer de instellingen eens uit om te ontdekken welke combinatie het beste past bij bepaalde artikelen op je site. In bijgaande tabel zie je de belangrijkste opties. Tab Inhoud Tab Publicatie Tab Opties Hier schrijf je het artikel en vul je basisinformatie in. Belangrijk zijn: Titel: de titel van het artikel. Categorie: kies de categorie. Tags: eventuele tags (labels) die je aan het artikel hangt. Status: kies Gepubliceerd om het artikel te tonen, Gedepubliceerd om het voor bezoekers te verbergen. Pas als je klaar bent met het artikel, kies je dan Gepubliceerd. Speciaal: hier bepaal je of het artikel op de homepage komt (Ja) of niet. Hier kun je de naam van de auteur kiezen, als je die wilt afbeelden bij het artikel. Als je een artikel tijdelijk wilt publiceren, kun je hier een start- en einddatum kiezen. Ook kun je metadata invullen: informatie die het onderwerp van de pagina beschrijft. Metadata komen terecht in de HTML-code; gewone gebruikers lezen de metadata niet, zoekmachines wel. Metadata invullen heeft (een beetje) invloed op zoekmachineresultaten. In de bijlage over zoekmachineoptimalisatie (SEO) lees je meer over metadata. Hier kun je instellen welke gegevens allemaal wel of niet moeten worden getoond bij het artikel, zoals de auteursnaam en de publicatiedatum. Standaard toont Joomla veel van deze gegevens wél; als je de keuze hier op Gebruik algemeen laat staan, volgt Joomla de standaardinstellingen.

76 68 Basiscursus Joomla! 3 Tab Instellen bewerkvenster Rechten Dit is een geavanceerde optie: hier bepaal je als sitebeheerder of je de vorige twee tabs (Publicatie opties en Artikel opties) wilt verbergen voor andere gebruikers in dit artikelscherm. Ook kun je desgewenst Afbeeldingen en links (zie hierboven) verbergen. Meer over gebruikersrechten lees je in hoofdstuk 9. Hier zie je een uitgebreid schema met de rechten voor dit artikel voor verschillende gebruikersgroepen. Met deze rechten regel je bijvoorbeeld welke gebruikers het artikel mogen bewerken. Met de vele artikelopties kun je per artikel keuzes maken die afwijken van de algemene instellingen. De algemene instellingen bepaal je via Inhoud > Artikelen > Opties. Daarmee kies je die instellingen in één keer voor de hele site. Daar kun je de publicatiedatum bijvoorbeeld verbergen voor alle artikelen. Maar als je bij je nieuwsartikelen wél de publicatiedatum wilt tonen, en bij gewone artikelen niet, dan zet je bij nieuwsartikelen Toon aanmaakdatum op Toon. 5.8 Artikelen verwijderen Artikelen verwijderen gaat op dezelfde manier als het verwijderen van categorieën (zie 4.5). Eerst verplaats je het artikel naar de Prullenbak, daarna verwijder je het definitief. Dit zijn de stappen: 1 Ga naar Inhoud > Artikelen. Zet een vinkje in het selectievakje voor de naam van het artikel of de artikelen die je wilt verwijderen. Klik in de knoppenbalk op de knop Prullenbak. 2 Om de inhoud van prullenbak te zien, klik je in Artikelbeheer op de knop Zoekmiddelen, zodat de keuzelijst Selecteer status zichtbaar wordt. Selec teer de status Verplaatst naar de prullenbak. Om daarna een artikel definitief te verwijderen, selecteer je het en klik je op de knop Prullenbak legen in de knoppenbalk. Wil je het artikel toch niet verwijderen, dan klik je op Publiceren om het weer op de site te plaatsen. 5.9 Artikelen archiveren Als je oudere artikelen niet tussen de actuele content wilt laten staan, kun je die artikelen archiveren. Gearchiveerde artikelen zijn nog steeds beschikbaar, maar ze zijn niet langer onderdeel van de normale site-inhoud. Je voegt een artikel als volgt toe aan het archief:

77 5 Contentpagina s maken 69 1 Ga naar Inhoud > Artikelen. Selecteer in het scherm Artikelbeheer het artikel of de artikelen die je wilt archiveren: zet een vinkje in het selectievakje ervoor. 2 Klik op de knop Archiveren in de knoppenbalk. Er verschijnt een bericht om te bevestigen dat de artikelen zijn gearchiveerd. Om te zien welke artikelen gearchiveerd zijn, selecteer je in het scherm Artikelbeheer onder Zoekmiddelen in de keuzelijst Status: Gearchiveerd (zie figuur 5.24). Figuur 5.24: Gearchiveerde artikelen tonen via de keuzelijst Selecteer status Om een artikel uit het archief terug te halen, selecteer je het artikel door een vinkje te zetten in het selectievakje voor de titel. Verander de Status nu van Gearchiveerd naar Gepubliceerd. Klik op Opslaan om de verandering te bewaren. Om het archief zichtbaar te maken voor een bezoeker, maak je een menulink aan. Ga naar Menu s > Main Menu en klik op Nieuw. Bij Menu-itemtype kies je voor Artikelen: Gearchiveerde artikelen. Geef de menulink een Menutitel (bijvoorbeeld Archief) en sla de nieuwe link op. Vanaf nu bereikt de bezoeker je artikelen die gearchiveerd zijn via de link Archief.

78 70 Basiscursus Joomla! 3 Figuur 5.25: Op de pagina Archief kan de bezoeker via een keuzelijst bovenaan de artikelen sorteren op datum Als je de weergave van de pagina met artikelen uit het archief wilt aanpassen, kijk dan eens naar de opties van de menulink die je net gemaakt hebt. Onder de tabs Archiveren en Opties kun je onder andere de volgorde en het aantal artikelen op de pagina instellen.

79 6 Homepages en categoriepagina s maken In de vorige hoofdstukken heb je de basis gelegd voor je site. Je hebt categorieën en artikelen gemaakt. Hoe help je de bezoekers om die content 6 ook daadwerkelijk te verkennen? Dat doe je met een aantrekkelijke homepage. In dit hoofdstuk lees je hoe je de homepage vult en indeelt. Ook lees je hoe je overzichtspagina s maakt: een soort homepages op een lager niveau. Die bieden overzicht van de inhoud van alle artikelen in een categorie, of alle artikelen met bepaalde tags. 6.1 In dit hoofdstuk Bepalen wat op de homepage komt De indeling van de homepage veranderen Categoriepagina s maken Overzichtspagina s maken met getagde artikelen 6.2 Bepalen welke informatie op de homepage komt Centraal op de homepage van een Joomla-site staat standaard een aantal intro s van artikelen op de site met Lees meer -links. Als je Joomla installeert met voorbeelddata van het type Test Engelse voorbeelddata, krijg je een homepage met vier intro s (zie figuur 6.1). Hoe bepaal je wat er op de homepage verschijnt? Standaard staat de homepage zo ingesteld dat er vier artikelen worden getoond. Hoeveel er artikelen op de homepage zichtbaar zijn, bepaal je via de instellingen van de menulink Home. Die is van invloed op wat er verschijnt in het centrale deel van de homepage, de mainbody. Hoe je de instellingen van de menulink Home verandert, lees je in paragraaf 6.3. Welke artikelen (of intro s of hyperlinks naar artikelen) er in de mainbody van de homepage staan, bepaal je via de instellingen van die artikelen zelf. Bij elk artikel kun je aangeven of het Speciaal (Featured) moet zijn. In de volgende oefeningen pas je die instellingen aan. 71

80 72 Basiscursus Joomla! 3 Figuur 6.1: De standaardhomepage in de Joomla-voorbeeldsite Buiten de mainbody staat er nog meer op de homepage: het logo, menu s, een inlogblokje en dergelijke. Die blokken (modules) kunnen alleen op de homepage staan, maar dat hoeft niet. Hoe je die modules toevoegt en aanpast, komt later in dit boek aan de orde, in hoofdstuk 8. Oefening 6.1: Bestaande items van de homepage verwijderen Om te zien hoe je een homepage naar jouw eigen voorkeur kunt inrichten, passen we de homepage van de voorbeeldsite aan. Als je de oefeningen in de vorige hoofdstukken hebt gemaakt, staan daar naast de meegeleverde voorbeeldartikelen ook een paar artikelen die je zelf hebt toegevoegd. Om ruimte te maken voor een eigen homepage, verwijder je nu enkele items van de homepage. 1 Ga naar Inhoud > Speciale artikelen. 2 Zet een vinkje voor de artikelen die je wilt verwijderen van de homepage. In dit voorbeeld vinken we de vier bestaande voorbeeldartikelen over Joomla aan. 3 Klik op Verwijderen in de knoppenbalk. Daarmee verwijder je niet de artikelen zelf (ze komen dus niet in de Prullenbak terecht), maar je verwijdert ze uit de lijst Speciale artikelen en ze worden weer gewone artikelen.

81 6 Homepages en categoriepagina s maken 73 Figuur 6.2: Artikelen verwijderen uit de lijst met Speciale artikelen 4 Klik op Bekijk website. In figuur 6.3 is te zien dat de homepage nu nog maar drie artikelen bevat. Figuur 6.3: De homepage met twee artikelen

82 74 Basiscursus Joomla! 3 Oefening 6.2: Artikelen toevoegen aan de homepage Met drie artikelen is de homepage te leeg. In deze oefening voeg je een artikel toe. 1 Ga naar Inhoud > Speciale artikelen. Je ziet nu welke artikelen al op de homepage staan; in dit geval zijn dat er drie. Om artikelen toe te voegen, klik je in het menu aan de linkerkant op Artikelen. Je komt dan uit bij de lijst met artikelen in Artikelbeheer. 2 Klik bij elk artikel dat je op de homepage wilt plaatsen op het grijze sterretje in de kolom Status. Het grijze sterretje wordt oranje (zie figuur 6.4). Figuur 6.4: Alleen artikelen die gemarkeerd zijn als Speciaal, verschijnen op de homepage 3 Klik op Bekijk website. Het geselecteerde artikel staat nu op de homepage. Herhaal de vorige twee stappen voor elk van de artikelen die je aan de homepage wilt toevoegen. Figuur 6.5: Een nieuwe selectie artikelen op de homepage In dit voorbeeld (figuur 6.5) zijn vier artikelen geselecteerd voor de homepage.

83 6 Homepages en categoriepagina s maken 75 Welke artikelen op de homepage verschijnen, kun je op twee plaatsen bepalen: in de lijst met artikelen in Artikelbeheer, zoals je net hebt gedaan. Maar het kan ook bij de instellingen van individuele artikelen zelf. Zodra je een artikel schrijft of bewerkt, kun je meteen aanklikken dat het op de homepage moet komen. Kies bij Gegevens voor Speciaal: Ja. Kom je op Engelstalige sites over Joomla de termen featured en featured articles tegen? Dat is wat in de Nederlandse versie speciaal en speciale artikelen heet. Oefening 6.3: De volgorde van items op de homepage veranderen Op dit moment staat het artikel Test van afbeeldingen en links bovenaan op de homepage. In deze oefening verander je de volgorde van items. 1 Om te beginnen moet je ervoor zorgen dat artikelen op de homepage worden getoond in precies dezelfde volgorde als in de beheeromgeving (in de lijst met speciale artikelen). Je bepaalt dat via de instellingen van de menulink Home (die de speciale artikelen laat zien). Ga naar Menu s > Main Menu > Home. Op het tabblad Weergave kies je nu bij Volgorde categorieën: Geen volgorde. Bij Volgorde artikelen staat de instelling al goed: Volgorde speciale artikelen. Sla je aanpassing op. 2 Ga naar Inhoud > Speciale artikelen. 3 Controleer of de tabel is gesorteerd op Volgorde oplopend. Dat zie je rechtsboven de tabel staan (zie ook figuur 6.6). Alleen als de tabel op Volgorde oplopend is geordend (en niet bijvoorbeeld op Titel), kun je de volgorde handmatig aanpassen. 4 Klik op de pijltjes in de kolom Volgorde. Je kunt het artikel nu verslepen in de lijst. Het geselecteerde artikel wordt groen wanneer je het oppakt : Figuur 6.6: Een artikel verslepen naar een andere positie 5 In dit voorbeeld verplaatsen we het artikel Mijn eerste artikel naar de eerste positie. 6 Klik op Bekijk website. De artikelen verschijnen nu in de nieuwe volgorde (zie figuur 6.6).

84 76 Basiscursus Joomla! 3 Figuur 6.7: De volgorde van items op de homepage is aangepast Waarom was hierboven stap 1 nodig? Omdat Joomla alleen de handmatig gekozen volgorde aanhoudt als je geen andere volgordekeuzes maakt bij Menu s > Main Menu > Home onder Weergave. De Volgorde categorieën moet staan op Geen volgorde, zodat de homepage-artikelen niet per categorie worden geordend. De Volgorde artikelen moet staan op Volgorde speciale artikelen, zodat de homepage-artikelen wel de volgorde krijgen uit de lijst met Speciale artikelen. 6.3 De indeling van de homepage veranderen Standaard staat op de homepage één artikel over de volle breedte, en daaronder drie artikelen in kolommen. Die indeling kun je natuurlijk aanpassen. Dat doe je op een manier die je waarschijnlijk niet verwacht: door de instellingen van de menulink Home aan te passen. In de volgende oefening verander je de indeling van de homepage. De menulink bepaalt hoe de pagina eruitziet Als je de indeling van de homepage wilt aanpassen, doe je dat door de link naar de homepage aan te passen. Dat geldt in het algemeen in Joomla: de instellingen van de menulink bepalen welke pagina de bezoeker voorgeschoteld krijgt. Dat is waarschijnlijk anders dan wat je gewend bent: normaal gesproken zijn menulinks niet meer dan links naar een bestaande pagina. In het hoofdstuk over menu s zul je nog meer voorbeelden zien van Joomla s eigenaardige opvatting van menulinks: het type menulink en de instellingen die je bij het maken van de menulink kiest bepaalt hoe de pagina eruitziet. Een pagina kan er dus heel anders uitzien en heel andere inhoud bevatten wanneer je andere keuzes maakt bij het maken van een link.

85 6 Homepages en categoriepagina s maken 77 In dit hoofdstuk zie je aan twee voorbeelden hoe dat werkt: eerst verander je hieronder de homepage-indeling door de link naar de homepage aan te passen. Verderop in dit hoofdstuk maak je een pagina aan met een overzicht van de inhoud van een categorie opnieuw door alleen maar een menulink naar dat type pagina aan te maken. Oefening 6.4: De homepage indelen Stel je voor, je wilt de homepage wat overzichtelijker maken. Je beslist maximaal twee introteksten te tonen in maar één kolom. Daaronder wil je enkele hyperlinks plaatsen naar andere artikelen. 1 Ga naar Menu s > Main Menu en klik op de menulink Home. Figuur 6.8: De Geavanceerde opties van de link Home aanpassen 2 Klik op de tab Weergave (zie figuur 6.8) Hier staan de standaardweergaveinstellingen. Er is 1 Hoofdartikel (weergegeven over de volle kolombreedte), er zijn 3 Intro-artikelen, die weergegeven worden in 3 Kolommen. Daaronder volgen 0 Links. Wijzig de waarden als volgt: # Hoofdartikelen: 2 (twee artikelen over volle kolombreedte). # Intro-artikelen: 0 (geen artikelen in méér dan een kolom). # Kolommen: 0 # Links: 10. Dat laatste betekent: als er meer dan twee artikelen zijn geselecteerd voor de homepage, verschijnen de titels vanaf het derde artikel in een rij van maximaal 10 hyperlinks. 3 Sla je wijzigingen op en klik op Bekijk website om de effecten aan de voorkant te zien (zie figuur 6.9).

86 78 Basiscursus Joomla! 3 Figuur 6.9: De indeling van artikelen op de homepage is aangepast Er zijn nu twee introteksten over de volle breedte. Omdat tot op heden in totaal vier artikelen zijn toegewezen aan de homepage (vier artikelen zijn Speciaal ), zie je onder de twee introteksten ook nog twee links naar artikelen. Als je meer artikelen toewijst aan de homepage, zal deze lijst met links groeien tot een maximum van tien hyperlinks. Joomla heeft automatisch pagineringslinks onder aan de pagina gezet. Het idee is dat de bezoeker op die manier kan doorbladeren naar vervolgpagina s met daarop alle artikelen die op de eerste pagina alleen in het rijtje hyperlinks worden getoond. Maar zo n meerdelige homepage kan onoverzichtelijk overkomen, dus je kunt paginering ook uitzetten via de menulink Home: ga naar de tab Weergave > Paginering en kies voor Verberg. Hoe pas je de homepage verder aan? In het menu-editorscherm van de Home-menulink vind je een groot aantal andere opties die je kunt gebruiken om de homepage-indeling aan te passen: behalve de tab Weergave is vooral de tab Opties van belang. De opties onder Weergave bepalen de indeling van de homepage zelf, de Opties bepalen de weergave van de afzonderlijke artikelen die op de homepage voorkomen. Zo kun je bijvoorbeeld bepalen of bij de artikelen ook de datum moet worden

87 6 Homepages en categoriepagina s maken 79 vermeld. Het loont de moeite om de verschillende instellingen eens uit te proberen; je kunt de indeling en de weergave van de homepage er flink mee beïnvloeden. 6.4 Categoriepagina s maken Als je beschikt over een categorie met artikelen erin, hoe maak je die artikelen dan bereikbaar voor je bezoeker? Je kunt voor elke artikelpagina een eigen menulink maken (hoe je dat doet, zag je in hoofdstuk 5). Maar in Joomla maak je de inhoud van categorieën gemakkelijker bereikbaar door een menulink te maken naar die categorie zelf. De categoriepagina die je daarmee maakt, wordt automatisch gevuld met links naar alle categorie-inhoud. Categoriepagina s kun je zien als een soort homepages op een lager niveau. De homepage is bedoeld om een snel overzicht te geven van de belangrijkste content van de hele site, categoriepagina s doen hetzelfde voor categorieën. Ze worden ook wel overzichtspagina s genoemd. Hoe komt de bezoeker terecht op zo n categoriepagina? In principe leidt Joomla de bezoeker in drie stappen naar artikelcontent. Je zie die stappen in figuur 6.10 geïllustreerd. Figuur 6.10: De drie stappen van homepage naar artikel Wat er op categoriepagina s staat, helpt je bezoeker om de artikelen te vinden in een of meer categorieën. Hoe zo n categoriepagina er precies uitziet en wat erop staat, bepaal je grotendeels zelf: de pagina kan een aantal artikelintro s bevatten met lees meer -links, maar kan ook een eenvoudige opsomming zijn van hyperlinks naar artikelen. Hoe maak je categoriepagina s? Daarop gaan we hierna in. Een categoriepagina maken In oefening 6.5 maak je een categoriepagina voor de categorie artikelen die je in hoofdstuk 4 hebt aangemaakt. Eerst voeg je een paar artikelen aan die categorie toe, dan maak je een menulink aan waarmee je de inhoud van de categorie kunt tonen. Oefening 6.5: Artikelen toevoegen en een link naar een categoriepagina maken In hoofdstuk 4 heb je een categorie Veelgestelde vragen en twee subcategorieën daarbij aangemaakt: Content beheren en Installatie. In hoofdstuk 5 heb je aan

88 80 Basiscursus Joomla! 3 de eerste subcategorie een artikel toegevoegd. Nu voeg je eerst nog een paar artikelen toe, zodat je die straks kunt tonen op je nieuwe categoriepagina. Stap 1: een aantal voorbeeldartikelen toevoegen aan de voorbeeldcategorie 1 Ga naar Inhoud > Artikelen > Nieuw artikel toevoegen. 2 Vul het editorscherm in zoals je in figuur 6.11 ziet. Vul als Titel in: Installatietips. Kies als Categorie: Installatie. Figuur 6.11: Een nieuw artikel aanmaken 3 Typ of plak wat willekeurige voorbeeldtekst in het editorscherm. 4 Plaats de cursor na de eerste alinea en klik op de knop Lees meer (onder de artikeltekst) om een scheiding aan te brengen tussen introtekst en hoofdtekst (zie 5.5). 5 Klik op Opslaan in de knoppenbalk. 6 Schrijf in hetzelfde scherm een nieuw artikel door het huidige artikel aan te passen. Verander alleen wat nodig is: vul een andere titel in (Na de installatie) en maak het veld Alias leeg (Joomla gebruikt de inhoud van dat veld onder andere om mooie URL s te maken en vult de alias bij het opslaan auto matisch in). Klik op Opslaan als kopie. Nu is het tweede artikel opgeslagen. Controleer dat de Status van het artikel Gepubliceerd is en sla het artikel definitief op. 7 Herhaal stap 6 een paar keer, totdat je drie of vier artikelen hebt in de categorie. 8 Als je klaar bent met je laatste artikel, klik je op Opslaan & sluiten, waarna het scherm gesloten wordt.

89 6 Homepages en categoriepagina s maken 81 Je hebt nu een aantal artikelen in de categorie Installatie. Als je nog even wilt controleren of die artikelen ook echt goed zijn opgeslagen, kijk dan in het scherm Artikelbeheer. Klik op Zoekmiddelen om het filter Selecteer categorie zichtbaar te maken; selecteer je de categorie Installatie. Dan toont Joomla uitsluitend artikelen in die categorie (zie figuur 6.12). Figuur 6.12: Alleen de artikelen uit de categorie Subcategorie 1 worden getoond Stap 2: een categoriepagina maken In de volgende stap maak je een categoriepagina die een de bezoeker overzicht geeft over alle nieuwe artikelen. Je voegt een link naar zo n pagina toe aan het hoofdmenu. 1 Ga naar Menu s > Main Menu en klik op Nieuw om een nieuwe menulink toe te voegen. 2 Klik naast het vak Menu-itemtype op de knop Selecteren. Kies in het popupvenster Categorieblog (onder Artikelen). 3 Bij Kies een categorie selecteer je Installeren. 4 In het vak Menutitel vul je in: Joomla installeren. 5 Klik op Opslaan en klik op Bekijk website om het resultaat te zien. 6 Klik aan de voorkant van de site op de nieuwe link in het hoofdmenu. Nu verschijnt een overzicht van de categorie (zie figuur 6.13).

90 82 Basiscursus Joomla! 3 Figuur 6.13: De nieuwe menulink leidt naar een overzicht van de inhoud van de categorie In dit geval bevat de categorie artikelen die allemaal verdeeld zijn in een intro, een Lees meer-lijn en vervolgtekst. Daarom beeldt Joomla onder alle intro s een link af naar het volledige artikel.

91 6 Homepages en categoriepagina s maken 83 Indeling aanpassen? Verander de menulink Hierboven zag je hoe je een link maakt naar een pagina met een overzicht van een categorie. Met de standaardinstellingen van zo n link krijg je als resultaat een pagina met de lay-out die je hiervoor zag. Bovenaan staat één artikel in één brede kolom, dan enkele artikelen in twee kolommen, dan eventueel nog een aantal hyperlinks. Je kunt de categorie-inhoud anders over de pagina verdelen door in de menulink de instellingen te veranderen. Kijk nog maar eens naar de menulink die je zojuist hebt gemaakt: ga naar Menu s > Main Menu en open de link Joomla installeren (klik op de naam van de link). Klik vervolgens op de tab Blogweergave om het paneel te openen met de verschillende weergaveopties voor de blogweergave (zie figuur 6.14). Figuur 6.14: In dit deel van het scherm bepaal je de weergave van een Categorieblog Deze vier velden zijn leeg; standaard nemen ze de algemene waarden over die je invult via Inhoud > Artikelen > Opties > Weergave blog/speciale artikelen. Experimenteer eens met deze vier getallen: die bepalen voor een groot deel hoe de pagina eruitziet. Je kent deze opties waarschijnlijk al van de homepage-indeling (dat is eigenlijk ook een blog lay-out). Als je de getallen invult met O hoofdartikelen, 4 intro-artikelen over 2 kolommen, worden de eerste vier intro s verdeeld over twee kolommen, zoals te zien in figuur Als je een categoriepagina nog meer wil aanpassen, vind je nog veel meer instellingen en opties als je de menulink bewerkt (dus in dit geval de menulink Joomla installeren). Kijk bijvoorbeeld onder de tab Categorie. Als je met de muis over de opties gaat, krijg je een korte uitleg van de betekenis. Het is bijvoorbeeld de moeite waard om de optie Subcategorieniveaus uit te proberen; daarmee kun je op de categoriepagina ook de inhoud van subcategorieën tonen.

92 84 Basiscursus Joomla! 3 Figuur 6.15: De blogweergave aangepast Figuur 6.16: De Categorie-opties van het menu-itemtype Categorieblog

93 6 Homepages en categoriepagina s maken 85 Een categoriepagina ziet er heel anders uit wanneer je bij het maken van een menu-item een ander Menu-itemtype kiest: niet Categorieblog, maar Categorielijst. Vergeleken met de blog-weergave is de lijstweergave wat eenvoudiger. In plaats van een reeks intro s en lees meer-links ziet de bezoeker alleen een aantal links naar categorieën of artikelen (zie figuur 6.17). Figuur 6.17: Een andere categoriepagina: de Categorielijst Tip: bekijk de categoriepagina s in de voorbeeldsite In de voorbeeldsite zitten veel (Engelstalige) voorbeeldartikelen die een beeld geven van wat er mogelijk is met Joomla. De voorbeeldmenu s en -artikelen laten ook zien op welke manier Joomla de inhoud van categorieën kan weergeven. Die verschillende categorieweergaven vind je in het menu About Joomla! Klik op de menulinks Using Joomla > Using Extensions > Components > Content Component. Als je de verschillende links hier verkent, zie je voorbeelden van de Categorieblog-weergave (Article Category Blog) en van de Categorielijst-weergave (Article Category List). Een laatste type categoriepagina zie je via de link Article Categories. Dat is een lijst met links naar meerdere categorieën, geschikt voor bijvoorbeeld een sitemap. Als je eens met die weergave wil experimenteren, maak dan een menulink aan van het type Lijst van alle categorieën. 6.5 Overzichtspagina s maken met getagde artikelen In hoofdstuk 4 heb je gezien hoe je tags aan artikelen toevoegt. Door op een tag te klikken, kan de bezoeker van de site bladeren door alle artikelen met dezelf de tag. Een andere manier om getagde artikelen weer te geven is door een menulink te maken naar een tagpagina. Joomla beschikt over een paar menuitemtypes waarmee je zo n pagina maakt. Je kunt die pagina s vergelijken met overzichtspagina s van categorieën.

94 86 Basiscursus Joomla! 3 In de onderstaande oefening maak je zo n overzichtspagina met getagde artikelen. Oefening 6.6: Een menulink maken van het type Getagde Items In de testwebsite heb je eerder een paar artikelen getagd met versienummers van Joomla: de tags Joomla 2.5 en Joomla 3.3. We maken nu een menulink naar een pagina met alle content die de tag Joomla 3.3 heeft. 1 Ga naar Menu s > Main Menu en maak een nieuwe menulink. Als Menu Item Type kies je (onder het kopje Tags) voor Getagde items: Figuur 6.18: Maak een menulink van het type Getagde items 2 Als Menutitel typ je: Joomla In het veld Tag kies je voor de bestaande tag Joomla 3.3 en als Inhoudstype kies je Artikel: Figuur 6.19: Een andere categoriepagina: de Categorielijst 4 Klik op de tab Item opties. Daar bepaal je wat de bezoeker via deze menulink precies te zien krijgt per getagd item: alleen een artikeltitel, of meer. Omdat een pagina met alleen een rijtje artikeltitels niet zoveel zegt, veranderen we een paar instellingen: zet Itemafbeelding op Toon en Itembeschrijving op Toon. Kies bij Maximum aantal tekens voor 200, zodat Joomla per artikel een paar regels van de artikeltekst laat zien.

95 6 Homepages en categoriepagina s maken 87 Sla je wijzigingen op en bekijk het resultaat op de site. Als je klikt op de nieuwe link Joomla 3.3, zie je een pagina met een lijst getagde artikelen: Figuur 6.20: Het resultaat van de menulink Getagde items: een pagina met artikelen met de tag Joomla 3.3 Je hebt nu een pagina gemaakt met getagde artikelen. In feite is het resultaat vergelijkbaar met wat een bezoeker ziet als hij klikt op de tag Joomla 3.3 bij een artikel. Maar door een menu te maken met menulinks naar getagde items, kun je eenvoudig lijsten maken met tags die je belangrijk vindt. Denk aan een recep tensite, waarop je een lijstje tags aanbiedt zoals vegetarisch, vlees, vis enzovoort. Menulinks naar tagpagina s bieden je bovendien de mogelijkheid om combinaties van tags te laten zien: bijvoorbeeld alle pagina s laten zien met de tags vegetarisch én pasta, om alle vegetarische pastarecepten te tonen. Of op de site over Joomla: daar zou je alle artikelen kunnen selecteren die over Joomla en (bijvoorbeeld) vormgeving gaan, zodat de bezoeker een overzicht krijgt van alle pagina s over de vormgeving van sites gemaakt met Joomla. Experimenteer dus gerust eens met de menulinks naar pagina s met getagde items; ze bieden je een krachtig middel om je bezoeker heel specifieke selecties van artikelen te laten zien.

96

97 7 Menu s en hyperlinks maken In de vorige hoofdstukken heb je al gezien dat menu s in Joomla veel meer zijn dan een rijtje hyperlinks. Een menulink verwijst niet gewoon naar een 7 bestaande pagina, een menulink bepaalt ook hoe de pagina eruitziet. Maar voor je bezoekers zijn menu s natuurlijk gewoon een middel om door de site te navigeren. Hoe maak je menu s en wat voor soorten menulinks kun je kiezen? 7.1 In dit hoofdstuk Een nieuw menu maken Een menu aanpassen Verschillende soorten menulinks maken Een hyperlink toevoegen aan een artikel 7.2 Een nieuw menu maken Je kunt meer dan één menu tegelijk hebben in een Joomla-site. De voorbeeldsite heeft bijvoorbeeld een horizontaal menu helemaal bovenaan en twee menu s in de linkerkolom: About Joomla! en This Site (zie figuur 7.1). Figuur 7.1: Verschillende menu s in de voorbeeldsite 89

98 90 Basiscursus Joomla! 3 Aan de achterkant van het systeem zie je welke menu s actief zijn: ga naar Menu s > Menubeheer. Daar zie je hoe bijvoorbeeld het Main Menu (dat is het menu dat aan de voorkant van de site de titel This Site heeft), het menu Top (het horizontale menu bovenaan) en About Joomla (het menu dat aan de voorkant ook zo heet). Er is nog meer, zoals het User Menu, dat alleen ingelogde gebruikers zien. En er zijn twee menu s die horen bij de meegeïnstalleerde voorbeeldsites, Australian Parks en Fruit Shop. Je hebt minimaal één menu nodig, het Main Menu, om Joomla goed te laten functioneren. Oefening 7.1: Een nieuw menu aanmaken, vullen en plaatsen 1 Ga naar Menu s > Menubeheer. Klik op de knop Nieuw. 2 Vul de naam in van het nieuwe menu (Extra menu in figuur 7.2). Als Menutype vul je in extramenu. Dit is een naam die Joomla intern gebruikt. Gebruik hier geen spaties of bijzondere tekens in. Tot slot kun je een Beschrijving toevoegen. Figuur 7.2: De gegevens van het nieuwe menu invullen 3 Klik op Opslaan & sluiten. Je hebt nu een leeg menu aangemaakt in de beheeromgeving van je site. Je komt nu weer in het scherm Menubeheer. 4 Onderaan vind je het nieuwe Extra menu. Klik op de naam om het menu te bewerken, zodat je menu-items kunt toevoegen aan het lege menu. Je komt nu in het scherm Menubeheer: Menu-items (zie figuur 7.3). 5 Klik op Nieuw om een menu-item toe te voegen. Je komt nu in het scherm Menubeheer: Nieuw menu-item. Daar vul je achtereenvolgens in: a Menu-itemtype: klik op Selecteren en kies Artikelen > Individueel artikel. We maken even een link naar een artikel. b Bij Selecteer artikel moet je het artikel kiezen waar je naar wilt linken. Klik op Selecteren en selecteer een (willekeurig) doelartikel door te klikken op de titel ervan. c Menutitel: vul hier de naam van de menulink in. Bijvoorbeeld: Menulink 1.

99 7 Menu s en hyperlinks maken 91 Figuur 7.3: Het scherm met menu-items van het Extra menu is nu nog leeg Het scherm ziet er nu uit als in figuur 7.4. Figuur 7.4: De instellingen van het nieuwe menu-item 6 De overige velden hoef je niet in te vullen of te veranderen. Klik op Opslaan & sluiten om het nieuwe menu-item te bewaren. Als je meer links wilt toevoegen, herhaal je de stappen 5 en 6. Het menu zichtbaar maken op de site Je hebt nu een menu én je hebt hyperlinks toegevoegd. Maar als je aan de voorkant van de site kijkt, is er nog niets te zien van je werk. Dat klopt: je moet tenslotte nog aangeven waar je menu moet verschijnen. Dat doe je niet bij de menuinstellingen zelf, want die hebben alleen betrekking op de inhoud van het menu. Bepalen hoe en waar het menu verschijnt, regel je via Modulebeheer. De reden: elk menublokje is een module. In de volgende twee stappen maak je een module aan voor het nieuwe menu en pas je de instellingen aan.

100 92 Basiscursus Joomla! 3 1 Ga naar Menu s > Menubeheer en klik bij Extra menu op de link Voeg een module toe voor dit menutype. Figuur 7.5: Via het scherm Menubeheer: Menu s kun je een module aanmaken voor een nieuw menu 2 Je ziet nu het scherm Modulebeheer: Module Menu. (Dat is een snellere manier om terecht te komen op de pagina die je ook kunt bereiken via Extensies > Modulebeheer > Nieuw > Menu.) 3 In het scherm Modulebeheer: Module Menu (figuur 7.6) regel je de volgende instellingen: a Vul de Titel in die boven het menu verschijnt, bijvoorbeeld Test van een menu. b Kies de Positie waar het menu verschijnt. Je maakt hier een keuze uit de posities die in deze template beschikbaar zijn voor modules. In dit geval is Rechts [position-7] goed; dat is de rechterkolom waar ook overige menu s staan. c Bij de optie Selecteer menu is het zojuist aangemaakte menu al geselecteerd: Extra menu. Figuur 7.6: De instellingen van de nieuwe module De overige instellingen kun je onveranderd laten. Belangrijk is de tab Menutoewijzing: daar kun je aanpassen op welke pagina s het menu verschijnt. In dit geval is de standaardinstelling (Op alle pagina s) goed.

101 7 Menu s en hyperlinks maken 93 4 Klik op Opslaan en klik op Bekijk website om het resultaat te zien (zie figuur 7.7). Figuur 7.7: Het resultaat: een nieuw menu verschijnt Een menu maken en aanpassen doe je dus deels via Menubeheer, deels via Modulebeheer. Alles wat te maken heeft met de inhoud van het menu regel je in Menubeheer, alles wat te maken heeft met de weergave regel je in Modulebeheer. Let erop dat de naam van de module niet dezelfde hoeft te zijn als de naam van het menu: in Modulebeheer vind je de menumodule met de titel This Site, terwijl die in Menubeheer te vinden is als het Main Menu. 7.3 Een menu aanpassen Zojuist heb je een menu geplaatst met de standaardinstellingen. Hierna passen we de instellingen aan: we veranderen de volgorde van menulinks en halen de titel boven het menu weg. Oefening 7.2: De volgorde van de menu-items veranderen Standaard wordt een nieuw menu-item toegevoegd aan het einde van het bestaande menu. In deze oefening pas je de volgorde handmatig aan. 1 Ga naar Menu s > Extra menu. 2 Klik op de drie verticale blokjes helemaal links van Menulink 2. De cursor wordt een kruis; je kunt de menulink nu verslepen. Figuur 7.8: Klik op een van de pijltjes om de volgorde van menu-items te veranderen

102 94 Basiscursus Joomla! 3 3 Verander de volgorde zodat Menulink 2 bovenaan komt te staan. De nieuwe volgorde-instellingen worden vanzelf opgeslagen. Aan de voorkant van de site worden de menu-items nu weergegeven in de volgorde die je hebt gekozen (zie figuur 7.9). Figuur 7.9: De volgorde van menu-items is aangepast Oefening 7.3: De titel veranderen en de plaats van het menu wijzigen De titel en positie van het menublokje zijn instellingen die je niet verandert bij het Menubeheer, maar bij Modulebeheer. 1 Ga naar Extensies > Modulebeheer. 2 Klik op de titel van de module (Test van een menu) om de eigenschappen van het menu te bewerken. 3 Verander de instelling van Toon Titel naar Verberg. 4 Verander Volgorde naar Login Form. Dat betekent dat de module nu helemaal onderaan komt te staan in de linkerkolom. Figuur 7.10: De instellingen van de menumodule zijn aangepast Klik op Opslaan & sluiten en klik op Bekijk website om het resultaat te zien. Het menu verschijnt nu, zonder titel, onder aan de kolom (zie figuur 7.11).

103 7 Menu s en hyperlinks maken 95 Figuur 7.11: Het resultaat: het menu is aangepast Bij de module-instellingen kun je nog meer veranderen, je kunt bijvoorbeeld een start- en einddatum voor publicatie van de module kiezen. Dat zul je bij een menumodule niet snel gebruiken, maar het kan bijvoorbeeld handig zijn bij een module die een tijdelijke banner laat zien. 7.4 Een horizontaal drop-downmenu gebruiken In Joomla 3.3 kun je het beste het horizontale menu Top als hoofdmenu kiezen en dus niet het menu in de rechterkolom. Als de site wordt weergegeven op een smartphone of tablet, blijft namelijk het menu Top altijd zichtbaar boven aan de pagina. Je kunt dat controleren door het browserscherm kleiner te maken: dan verandert de lay-out, maar het topmenu blijft bovenaan (figuur 7.12). Figuur 7.12: De website in de aangepaste lay-out voor kleine schermen (zoals smartphones). Alle content staat in één kolom, het menu Top blijft zichtbaar

104 96 Basiscursus Joomla! 3 Oefening 7.4: Het topmenu als hoofdmenu gebruiken In deze oefening maak je van het topmenu je standaardmenu: je vult het menu met de links die altijd in beeld moeten blijven. 1 Ga naar Extensies > Modulebeheer. Open het menu Top. 2 Kies bij Selecteer menu. Selecteer hier welk menu door deze module moet worden weergegeven: in plaats van het menu Top is dat Main Menu (figuur 7.13). Figuur 7.13: Selecteer welke menu-inhoud deze menumodule moet weergeven: de inhoud van Main Menu 3 Kies bij Eindniveau voor Alle, zodat ook eventuele submenulinks worden getoond. Kies bij Toon submenu-items voor Ja. Bekijk de veranderingen aan de voorkant. Zoals je ziet toont het topmenu nu de links uit het main menu. Eventuele submenulinks verschijnen in een dropdown (figuur 7.14). Figuur 7.14: Het menu Top toont nu de links van het Main Menu

105 7 Menu s en hyperlinks maken 97 Het resultaat van deze switch is dat alle belangrijke links nu zichtbaar zijn op de meest prominente plaats, en ook zichtbaar blijven op smartphones of tablets. Als je een menu als dit wil gebruiken, moet het nog wel even worden opgeruimd; er zijn nu te veel hyperlinks. Ze passen niet allemaal in één horizontale rij. Via Menu s > Main Menu kun je menulinks verwijderen, depubliceren of verplaatsen (met de optie Batch). Op dit moment bevat de site tweemaal hetzelfde menu: je hebt immers ingesteld dat het topmenu de menulinks toont van het al bestaande Main Menu (This Site). Daarom moet je er nu nog voor zorgen dat het Main Menu (met de titel This Site) de menulinks toont die oorspronkelijk waren toegewezen aan het topmenu. Ga naar Modulebeheer, open het menu This Site, en kies bij Selecteer menu: Top. Sla die aanpassing op, en je ziet dat de menulinks die voorheen in het topmenu verschenen, nu in de rechterkolom zichtbaar zijn: Figuur 7.15: Het menu This Site toont de drie menulinks die oorspronkelijk waren toegewezen aan het menu Top 7.5 Verschillende soorten menulinks maken De belangrijkste manieren om menulinks te maken naar contentpagina s zijn al eerder in dit boek aan de orde geweest. Zo heb je in hoofdstuk 4 al gezien hoe je een link maakt naar een artikel en naar een categoriepagina. Dit zijn de basisstappen om een menu-item toe te voegen: 1 Ga in de beheeromgeving naar Menu s en klik op de naam van het menu, bijvoorbeeld Main Menu. 2 In het volgende scherm klik je op Nieuw in de knoppenbalk. In het scherm Nieuw Menu-item vul je de Menutitel in: de tekst van de menulink. 3 Bij Menu-itemtype klik je op Selecteren om uit te kiezen wat voor link je wilt maken. Figuur 7.16 laat het popup-scherm met deze lijst zien.

106 98 Basiscursus Joomla! 3 Figuur 7.16: De lijst met mogelijke soorten menulinks. Klik op de namen van deze categorieën om de menu-itemtypen te zien die erbij horen. In de praktijk zul je vooral de linktypes onder Artikelen veel gebruiken; dat zijn de links naar soorten contentpagina s Hieronder zie je welke keuzes je hebt wanneer je een menulink aanmaakt: de belangrijkste groepen menu-itemtypes. Artikelen Dit is de groep menulinks die je waarschijnlijk het meest zult gebruiken. Het gaat om links naar gewone content (artikelen). Voorbeelden van menulinks naar artikelen heb je al gezien in hoofdstuk 5, voorbeelden van menulinks naar categorieën met artikelen heb je gezien in hoofdstuk 6. Categorieblog, Categorielijst: een link die een pagina laat zien met een overzicht van de artikelen in de categorie. Een Categorieblog laat op één pagi na verschillende hele artikelen zien, of hun intro s. Een Categorielijst laat een lijst zien met artikeltitels. Gearchiveerde artikelen: link naar gearchiveerde artikelen. Dit gebruik je alleen als je eerst artikelen gearchiveerd hebt met de knop Archiveren in Artikelbeheer. Individueel artikel: een link naar één artikel. Lijst van alle categorieën: handig om bijvoorbeeld een sitemap te maken. Je laat op één pagina alle subcategorieën zien vanaf een bepaald catego rieniveau. Joomla toont dan alle categorieën onder elkaar. Maak artikel: alleen nodig als je ingelogde gebruikers de mogelijkheid wilt bieden om zelf een artikel te schrijven. Speciale artikelen: deze link gebruikt Joomla standaard voor de homepage. Artikelen die je hebt geselecteerd als Speciaal vaak zullen dat actuele artikelen zijn of artikelen uit de nieuwsrubriek komen terecht op de pagina met deze link. Contactpersonen Hoort bij het adresboek van contacten dat je kunt bijhouden via Componenten > Contactpersonen. Doel: als je veel contactpersonen voor je organisatie

107 7 Menu s en hyperlinks maken 99 online wilt zetten, kun je die systematisch en doorzoekbaar presenteren. Eerst maak je categorieën contactpersonen aan, dan voer je hun contactgegevens in, en met de menulinks hier maak je al deze informatie zichtbaar. Gebruikersbeheer De menulinks hier gebruik je om pagina s te maken waarop geregistreerde gebruikers inloggen, zich registreren, hun profiel aanpassen, enzovoort. Instellingenbeheer Alleen van belang als je ingelogde gebruikers het recht wil geven om de instellingen van de website of de websitelay-out aan te passen. Met deze menulink komen ze dan op een pagina waar ze die instellingen kunnen regelen. Nieuwsfeeds Om links te maken naar pagina s met nieuwsfeeds: nieuws dat vanuit andere sites op jouw site wordt binnengehaald. Maak eerst via Componenten > Nieuwsfeeds categorieën en links naar newsfeeds aan, vervolgens kun je die feeds hier zichtbaar maken met menulinks. In de voorbeelddata zijn al wat nieuwsfeeds over Joomla aangemaakt. Als je een link naar een nieuwsfeed aanmaakt en daarbij als Feed de Sample-Data-Newsfeeds selecteert, kun je Joomla-nieuws op je site tonen. Slim zoeken Hiermee maak je een link aan naar de zoekpagina van de site. Slim zoeken is Joomla s zoekmachine, die werkt zoals Google: als de bezoeker een woord intypt, vult Joomla automatisch suggesties aan. Systeemlinks Gebruik Externe URL om een link te maken naar een webpagina op een andere site. Menu-item Alias is een kopie van een link naar een bestaand menuitem, gebruikt als je vanuit twee menu s naar één doelpagina wilt linken. Menukop en Scheidingsteken zijn geen menulinks; ze bieden je de mogelijkheid om een kopje, tekstje of afbeelding in het menu te tonen. Zo kun je de verschillende onderdelen van het menu visueel scheiden, bijvoorbeeld als je groepjes menulinks wil maken. Weblinks Bedoeld om links te maken naar pagina s met weblinks (links naar andere sites). Maak eerst via Componenten > Weblinks categorieën en links naar sites aan, vervolgens kun je die hier zichtbaar maken via menulinks. Wrapper Dit is een speciaal linktype. Als je een andere site wilt laten zien binnen jouw webpagina (in een zogenoemd iframe), dan maak je een link naar zo n paginain-een-pagina aan met Iframe Wrapper.

108 100 Basiscursus Joomla! 3 Zoeken Hiermee maak je een link aan naar de zoekpagina van de site. Gebruik bij voorkeur het menu-itemtype Slim zoeken; het oude systeem Zoeken is alleen nog aanwezig voor het geval de nieuwe techniek (bijvoorbeeld op zeer grote sites) niet goed zou werken. 7.6 Een hyperlink binnen een artikel toevoegen Hiervoor las je hoe je links aanmaakt binnen een menu. Maar soms wil je vanuit de tekst van een artikel rechtstreeks linken naar een ander artikel. Hoe doe je dat? Sinds Joomla 1.6 is daarvoor een knop Artikel aanwezig onder het artikeleditorscherm (zie figuur 7.17). Figuur 7.17: Met de knop Artikel maak je een link naar een artikel Als je deze knop gebruikt om een link in te voegen naar een artikel, maakt Joomla automatisch de linktekst aan. De titel van de doelpagina (bijvoorbeeld Voorbeeldartikel) wordt op de cursorpositie ingevoegd als tekst van de hyperlink. Oefening 7.5: Een titel van een artikel als hyperlink invoegen In deze oefening maak je een hyperlink in een artikel naar een ander artikel in je site. 1 Ga naar Inhoud > Artikelen en open in het scherm Artikelbeheer een arti kel om het te bewerken. 2 In het artikeleditorscherm plaats je de muiscursor ergens in het artikel waar de nieuwe linktekst moet verschijnen. 3 Klik op de knop Artikel om een popupscherm (figuur 7.18) te openen met een lijst met alle artikelen in de site. Om overzicht te krijgen in de lange lijst, kies je bij Selecteer categorie voor de categorie waarin het doelartikel zit, bijvoorbeeld Veelgestelde vragen. Nu zie je alleen de artikelen in die categorie en de subcategorieën daarvan: 4 Klik op de titel van het artikel. In dit voorbeeld kiezen we het artikel Na de installatie. 5 Het popupscherm sluit en de titel van het artikel wordt ingevoegd in het huidige artikel als een hyperlink (zie figuur 7.19). 6 Sla het artikel op om de wijzigingen te bewaren. Als je het artikel nu aan de voorkant van de site bekijkt, bevat de tekst de nieuwe hyperlink.

109 7 Menu s en hyperlinks maken 101 Figuur 7.18: Selecteer het artikel waarnaar je wilt linken Figuur 7.19: De hyperlink verschijnt op de cursorpositie in het artikel Standaard voegt Joomla als hyperlinktekst de titel in van het doelartikel. Dat kun je veranderen: plaats de cursor in de link en klik in de editor op de knop Invoegen/bewerken link. Nu kun je de Tekst om weer te geven wijzigen: Figuur 7.20: De tekst van de hyperlink wijzigen

110

111 8 De site uitbreiden met extensies Met extensies kleine stukjes aanvullende software kun je op een gemakkelijke manier Joomla s basismogelijkheden uitbreiden. Bijvoorbeeld 8 door een gastenboek of een fotogallery toe te voegen. Er zijn duizenden extensies beschikbaar voor de huidige versie van Joomla. Hoe werk je met extensies? 8.1 In dit hoofdstuk Drie soorten extensies: componenten, modules, plugins Werken met ingebouwde modules: NewsFlash Werken met extensies: een fotogallery toevoegen Extensies up-to-date houden 8.2 Soorten extensies Extensies zijn er in drie soorten. Van groot naar klein zijn dat: componenten, modules en plugins. Hoewel extensies uitbreidingen van het cms zijn, zitten er al heel wat standaard in Joomla ingebouwd. De zoekfunctie en het Menusysteem van Joomla zijn voorbeelden van deze voorgeïnstalleerde extensies. Componenten Componenten zijn de meest uitgebreide extensies, vaak met veel mogelijkheden en instellingen. Je beheert ze via het speciale menu Componenten in de beheeromgeving (dus niet via Extensies). Met de component Advertenties (in het Engels Banners) kun je bijvoorbeeld banneradvertenties op de site beheren. Met Contactpersonen kun je contactinformatie toevoegen en beheren en links maken naar pagina s met informatie over contactpersonen. Onmisbaar is Joomla! Update, dat automatisch controleert op updates en die in één klik voor je installeert. Een speciale component is Verwijzingsbeheer (in het Engels Redirect) die helpt als je webpagina s hebt vernieuwd of verplaatst en oude URL s (bijvoorbeeld 103

112 104 Basiscursus Joomla! 3 niet meer werken. Je kunt dan bezoekers die het oude adres intypen automatisch doorleiden naar Figuur 8.1: Het menu Componenten Modules Modules zijn blokjes op de webpagina die een speciale functie vervullen, zoals de menumodule. Je beheert modules via Extensies > Modulebeheer. Figuur 8.2: De beschikbare moduleposities in de standaardtemplate

113 8 De site uitbreiden met extensies 105 Modules verschijnen in posities op het scherm: bovenaan, in de linker- en rechterkolom, of in de footer. In figuur 8.2 zie je welke posities beschikbaar zijn in de standaardtemplate van Joomla 3, Protostar. Zoals je ziet, kun je meer dan één module plaatsen per position: position-7 bevat verschillende modules. Standaard is in Joomla al een groot aantal verschillende modules beschikbaar die je op die posities kunt plaatsen. Welke modules dat zijn, kun je zien als je in de beheeromgeving naar Extensies > Modulebeheer gaat. Je ziet daar welke modules al aan het werk zijn op de site, en als je op Nieuw klikt, krijg je een alfabetisch overzicht van alle beschikbare modules. Als je wilt weten wat al die modules precies doen, vind je bij elke module een korte uitleg. Een voorbeeld zie je in figuur 8.3. Figuur 8.3: De lijst met beschikbare standaard-moduletypen

114 106 Basiscursus Joomla! 3 Plugins Plugins ten slotte zijn kleine uitbreidingen, handigheidjes zoals een extra knop in de teksteditor die het gemakkelijker maakt om bijvoorbeeld met een speciale code een filmpje in de webpagina in te voegen. Welke plugins geïnstalleerd zijn, kun je zien via Extensies > Pluginbeheer. In dit hoofdstuk ligt de nadruk op het werken met de twee uitgebreidere soorten extensies: modules en componenten. 8.3 Werken met de meegeleverde extensies: module Aangepaste HTML Hierboven zag je al dat Joomla standaard al een groot aantal extensies bevat. Hoe pas je die toe? Als voorbeeld pas je in oefening 8.1 een module aan die standaard aanwezig is op de voorbeeldsite. Oefening 8.1: Headerafbeelding aanpassen met Aangepaste HTML Standaard bevat Joomla een natuurafbeelding boven aan de pagina; die afbeelding staat in een module. Hieronder zie je hoe je die module en daarmee de afbeelding aanpast. 1 Ga naar Extensies > Modulebeheer. Zoek in de lijst naar de module met de titel Image Module. Je kunt het zoekvak bovenaan gebruiken om deze sneller te vinden. Het is een module van het type Aangepaste HTML, wat wil zeggen dat je de inhoud van deze module zelf kunt bepalen: je kunt willekeurige content (tekst, afbeeldingen) in een editor invoegen en die tonen op een modulepositie. 2 Klik op de titel van de Image Module om de eigenschappen te bewerken. 3 Je ziet nu een editorvak waarin de inhoud van de module staat. In dit geval is dat alleen een afbeelding, de rode natuurfoto. Figuur 8.4: De module Aangepaste HTML bevat een foto

115 8 De site uitbreiden met extensies Klik op de foto om deze te selecteren en klik op de knop Afbeelding. In het popupscherm dat nu verschijnt, kies je de map headers en vervolgens blue-flower.jpg. Kies Invoegen. 5 Nu willen we nog iets veranderen: de afbeelding verschijnt op alle pagina s en neemt daarmee veel ruimte in. Klik op de tab Menutoewijzing en kies Alleen op de geselecteerde pagina s en selecteer vervolgens alleen de link Home in het Main Menu. Klik op Opslaan & sluiten. Vanaf nu verschijnt er een andere afbeelding en zie je die alleen nog maar op de homepage. Figuur 8.5: Boven aan de homepage verschijnt nu een andere afbeelding Oefening 8.2: Afbeeldingen laten roteren met de module Willekeurige afbeelding Zoals je hiervoor gezien hebt, is Aangepaste HTML een flexibele module: wat je maar wilt, kun je afbeelden in een modulepositie. Maar de module is niet dynamisch; hij bevat geen extra functionaliteit. Wat als je bijvoorbeeld de bezoeker elke keer een willekeurige andere afbeelding wil laten zien (een rotating banner )? Dan kun je gebruikmaken van de module Willekeurige afbeelding. Het werkt zo: 1 Ga naar Extensies > Modulebeheer en klik op het groene vinkje voor Image Module. Die heb je nu uitgezet (gedepubliceerd). Klik in de knoppenbalk op Nieuw om een nieuwe module te maken en klik op Willekeurige afbeelding. 2 Nu verschijnt het scherm Modulebeheer: Module Willekeurige afbeelding. Hier regel je de instellingen van de module. Vul het scherm als volgt in: a Kies als Titel: headerafbeelding. b Toon titel: Verberg. c Positie: onder de templatenaam Protostar kies je Middenboven [position-3].

116 108 Basiscursus Joomla! 3 3 Vul bij Afbeeldingen map in: images/headers. Dat is de map waarin standaard al een aantal voorbeeldafbeeldingen staan. 4 Vul in het vak Breedte (px) in: 100%. Dat zorgt ervoor dat de afbeelding op volle beschikbare breedte wordt afgebeeld. 5 Regel tot slot desgewenst de Menutoewijzing (bijvoorbeeld alleen op de homepage). Sla je wijzigingen op. Vanaf nu zie je op de site steeds een andere afbeelding boven aan de homepage. Als je de pagina opnieuw laadt (met F5), toont Joomla een ander beeld uit de map headers. Figuur 8.6: Boven aan de homepage verschijnt nu een willekeurige afbeelding Instellingen van modules aanpassen In het voorgaande heb je gezien hoe je instellingen van de modules Aangepaste HTML en Willekeurige afbeelding aanpast. Voor elke module regel je de instellingen op een vergelijkbare manier: via Extensies > Modulebeheer. Door op de naam van de module te klikken, kom je in het scherm waar je alle instellingen kunt aanpassen. Hierna kijken we wat uitgebreider naar dat scherm. Als voorbeeld kijken we naar de module Willekeurige afbeelding, maar je zult zien dat de schermen met instellingen van andere modules in grote lijnen op dezelfde manier zijn ingedeeld. Op het standaard-tabblad Module kun je onder andere aangeven: Titel: wat de titel is van de module en of die getoond moet worden of niet; Positie op de pagina: je kunt hier kiezen uit de beschikbare posities in de template; Status: of de module gepubliceerd is. Zorg dat dit op Gepubliceerd staat om de module zichtbaar te maken op de site; Volgorde: volgorde van modules op diezelfde modulepositie; Start Publiceren en Stop Publiceren: eventueel een begin- en einddatum voor het publiceren van de module. Op de andere tabbladen, zoals Geavanceerd, maak je keuzes die specifiek zijn voor deze module. Hier kunnen tientallen opties beschikbaar zijn, afhankelijk van de module. Bij Menutoewijzing bepaal je op welke pagina s de module zichtbaar is: je kunt hier elke pagina kiezen die via een menulink bereikbaar is.

117 8 De site uitbreiden met extensies 109 Figuur 8.7: De instellingen van een module regel je op deze pagina en via de tabs Menutoewijzing, Geavanceerd, enzovoort 8.4 Extensies downloaden en toevoegen aan de site Standaard worden met Joomla al verschillende extensies meegeïnstalleerd, maar je vindt vele extra extensies die door derden ontwikkeld zijn op Er zijn twee manieren om extensies te installeren. Standaard-installatiemethode: downloaden en installeren Zo n extensie voeg je in een paar klikken toe aan je eigen website. Dit zijn de stappen: 1 Download de extensie. Deze is meestal ingepakt in een zipbestand. 2 Ga naar Extensies > Extensiebeheer. 3 In het vak Upload Pakketbestand vind je een knop Bestand kiezen (Browse). Klik op die knop en selecteer het zipbestand dat op je pc staat. 4 Klik op Uploaden & installeren om de extensie te installeren. Zodra de installatie is afgerond, verschijnt een melding. Na installatie kun je in de beheeromgeving de instellingen van de extensie regelen.

118 110 Basiscursus Joomla! 3 Snelle installatiemethode: met de tab Installeren vanaf web De vier stappen hierboven zijn de beproefde methode om uitbreidingen toe te voegen aan Joomla. Maar in de huidige versie van Joomla kan het in de meeste gevallen nog eenvoudiger. Als je voor het eerst naar Extensies > Extensiebeheer gaat, zie je dat je wordt gevraagd om een tab Installeren vanaf web toe te voegen. Figuur 8.8: De tab Installeren vanaf web voeg je eenmalig toe door te klikken op deze knop Klik op die knop om uitbreidingen direct te kunnen installeren vanuit Joomla zelf, vanuit een soort App Store. Het resultaat is dat je in de beheeromgeving op zoek kunt gaan naar extensies en ze vaak met één klik kunt dowloaden, of zelfs downloaden én installeren. (Alleen als een extensie die nieuwe methode niet ondersteunt, gebruik je de oude methode.) Figuur 8.9: De tab Installeren vanaf web maakt het makkelijk om extensies te vinden en te installeren Oefening 8.3: Een fotogallery-extensie toevoegen aan de site Stel je voor, je hebt een aantal foto s die je op een aantrekkelijke manier op de site wilt laten zien. Standaard kun je in Joomla wel een simpele fotogallery maken door de bezoeker te laten bladeren door artikelen die uit foto s bestaan: kijk maar eens naar de voorbeeldsite over Nationale Parken. Maar tegenwoordig zijn webbezoekers wel wat mooiers gewend. Daarom installeren we een extensie die het mogelijk maakt om foto s op een betere manier te laten zien.

119 8 De site uitbreiden met extensies 111 De extensie downloaden en installeren We installeren de plugin Simple Image Gallery Extended. Je kunt die vinden op de extensiesite van Joomla, maar in dit geval gebruiken we natuurlijk de snelle installatiemethode. 1 Ga naar Extensies > Extensiebeheer. Je komt terecht op de tab Installeren vanaf web. Typ in het zoekvak simple image gallery extended en tik op Enter (of klik op het loepje). Je krijgt meteen de goede extensie te zien: Figuur 8.10: De extensie SIGE vreschijnt als zoekresultaat in Installeren vanaf web. 2 Klik op de naam van de extensie en klik op de knop Download. Je komt nu op de site van de maker van de extensie. Klik daar op de link naar de meest recente versie van de gallery. In dit geval is dat SIGE Simple Image Gallery Extended Joomla! 3 (zie figuur 8.11). Figuur 8.11: Selecteer de Download-link van de meest recente versie 3 Vink aan dat je het eens bent met de licentie en klik opnieuw op Download om de extensie op de slaan op je computer. Het bestand heet plg_sige_v3-2. zip. Sla het bestand op waar je het makkelijk kunt terugvinden, bijvoorbeeld op de desktop.

120 112 Basiscursus Joomla! 3 4 Ga in de beheeromgeving van de site naar Extensies > Extensiebeheer. 5 Klik op Upload Pakketbestand. Klik op Bestand kiezen, selecteer het gedownloade bestand op je computer, en klik op Openen. 6 Klik op Uploaden & Installeren. Je ziet nu een melding (figuur 8.12) dat de installatie geslaagd is. Figuur 8.12: Simple Image Gallery is succesvol geïnstalleerd 7 Simple Image Gallery is een plugin. Na installatie moet je die nog inschakelen. Ga naar Extensies > Pluginbeheer en klik op het kruisje bij Content Simple Image Gallery Extended. Het verandert in een vinkje. Je kunt ook op de titel van de plugin klikken om de instellingen aan te passen, maar voor dit voorbeeld staan de standaardinstellingen goed. Oefening 8.4: De gallery zichtbaar maken op de site Je hebt de plugin geïnstalleerd. Hoe laat je nu een gallery zien op de site? De plugin is bedoeld om een fotogallery op te nemen binnen een artikel. Het werkt zo: 1 Ga naar Inhoud > Artikelen en maak of open een artikel. In dit voorbeeld heb ik het (willekeurige) artikel Captcha geopend. 2 Plaats je cursor in het editorscherm op de plaats in het artikel waar je de foto s wilt hebben. Daar typ je gewoon, als een regel tekst in het artikel een code: {gallery}headers{/gallery}. Die zit zo in elkaar: tussen {gallery} en {/gallery} staat de naam van de map waarin de afbeeldingen zich bevinden, gerekend vanaf Joomla s standaardmap images. In dit geval roepen we dus de afbeeldingen aan die zich in de map images/headers bevinden. 3 Sla het artikel op. Klaar: als je het nu aan de voorkant van de site bekijkt, zie je dat in het artikel alle afbeeldingen uit de map als verkleinde afbeeldingen worden getoond. Figuur 8.13: De plugin Simple Image Gallery toont afbeeldingen uit een map als thumbnails

121 8 De site uitbreiden met extensies 113 Als de bezoeker klikt op een van de afbeeldingen, verschijnt die in een popup: een lightbox. De bezoeker kan daarin weer doorbladeren naar de andere afbeeldingen. Figuur 8.14: Als je klikt op een thumbnail, toont Simple Image Gallery afbeeldingen op volledige grootte In dit geval maken we gebruik van de voorbeeldfoto s die standaard al bij Joomla geïnstalleerd zijn. Als je je eigen foto s wilt laten zien, upload je foto s naar bijvoorbeeld images/mijnfotos. De code voor je artikel wordt dan: {gallery} mijnfotos{/gallery}. Hoe je een map aanmaakt en foto s uploadt, lees je in 5.4. De link naar de site van Simple Image Gallery die onder aan de gallery verschijnt, kun je uitschakelen via de opties van de plugin: kies voor Show link to author: Nee. 8.5 Meer extensies vinden Afgezien van de extensies die deel uitmaken van de standaard Joomla-installatie, zijn er heel veel extensies ontwikkeld door derden. De meeste staan vermeld op Het is aan te raden om zo nu en dan rond te kijken op de extensiesite van Joomla; er komen voortdurend nieuwe uitbreidingen bij. Kijk bijvoorbeeld eens bij de Editor s Picks en bij de meest populaire extensies. Het commentaar van andere gebruikers geeft vaak een goede indicatie of een extensie betrouwbaar werkt en of de ondersteuning door de ontwikkelaar goed is. Tip: extensies updaten Het is belangrijk om niet te blijven werken met verouderde extensies: ontwikkelaars brengen vaak updates in om bijvoorbeeld veiligheidslekken in hun software te dichten. Gelukkig hoef je niet meer handmatig te controleren of er updates zijn voor de extensies die je hebt geïnstalleerd. Joomla houdt zowel voor het cms zelf als voor de extensies bij of er updates beschikbaar zijn. Of dat zo is, zie je aan de quick icons in het controlepaneel.

122 114 Basiscursus Joomla! 3 Figuur 8.15: In dit geval zijn er geen updates beschikbaar. Als die er wel zijn, klik je op de melding om de update meteen uit te voeren Als er updates beschikbaar zijn, klik je op de melding. Maar je kunt ook handmatig checken of er updates zijn voor uitbreidingen: ga naar Extensies > Extensiebeheer, klik op Updaten in het menu aan de linkerkant en klik Vind updates. Je krijgt een melding als er updates zijn. Dan kun je de gewenste updates installeren door ze aan te vinken en te klikken op Updaten in de knoppenbalk (dus niet op Updaten in het linkermenu!). Je krijgt daarna de melding dat de beschikbare updates succesvol zijn geïnstalleerd.

123 9 Gebruikersbeheer: gebruikers laten inloggen Als je een dynamische site maakt, wil je die waarschijnlijk niet alléén beheren. Joomla biedt je de mogelijkheid om andere gebruikers rechten te geven om 9 content te bekijken, maar ook om die te bewerken of zelf aan te maken. In Joomla kun je die gebruikersrechten zeer gedetailleerd regelen. Wat zijn de meestgebruikte toepassingen van gebruikersbeheer? 9.1 In dit hoofdstuk Gebruikersaccounts aanmaken Inloggen als gebruiker Zelfregistratie mogelijk maken Content zichtbaar maken voor geregistreerde gebruikers 9.2 Gebruikersaccounts aanmaken Na de installatie van Joomla is er één gebruiker: de Super User. Ga naar Gebruikers > Gebruikersbeheer om de bestaande gebruiker(s) te zien. Klik op de naam van de ene gebruiker om de gegevens te zien (zie figuur 9.1): de Naam (Super User), de Inlognaam (in dit geval is dat admin, maar een creatievere naam is veiliger), het mailadres en of deze account geblokkeerd is (Blokkeer deze gebruiker). Bovendien kun je via de tab Toegewezen gebruikersgroepen bekijken tot welke gebruikersgroepen deze gebruiker behoort; in dit geval is dat Super Users (de gebruiker heeft alle denkbare rechten aan de achterkant van de site). Verschillende soorten accounts In Gebruikersbeheer kun je nieuwe gebruikers maken en deze toewijzen aan een specifieke gebruikersgroep. Standaard zijn er vijf groepen beschikbaar, elk met hun eigen set van rechten. 115

124 116 Basiscursus Joomla! 3 Figuur 9.1: In Gebruikersbeheer kun je gebruikers en hun accountgegevens beheren Als je wilt, kun je in Joomla zo veel soorten gebruikers aanmaken als je wil, elk met heel specifieke rechten. Het systeem van gebruikersrechten (Access Control Levels of ACL) is in Joomla enorm uitgebreid. Als je bijvoorbeeld wilt dat een specifieke groep gebruikers precies één pagina op de site kan bewerken, en verder niet, dan kun je dat zo instellen. Dit systeem is echter behoorlijk complex; je moet goede redenen hebben om het te gebruiken en je moet tijd investeren om een goed schema van gebruikers en rechten te ontwerpen, voordat je dat in Joomla doorvoert. Als je daar meer over wil weten, zoek op het web dan eens naar joomla gebruikersrechten. Maar het is aan te raden om eerst te kijken of je niet toekunt met de basismogelijkheden van groepen en rechten; die zijn voor veel sites genoeg. De eerste groep: geregistreerde gebruikers Dit zijn normale bezoekers van de site, maar zij hebben zich geregistreerd (een account aangemaakt met naam en wachtwoord). Nadat ze zijn aangemeld met hun accountgegevens, kunnen zij content bekijken die verborgen is voor gewone bezoekers van de site. Als beheerder van de site kun je namelijk het toegangsniveau voor alle soorten content (zoals artikelen, modules en menuitems) instellen op Registered (Geregisteerd). Een voorbeeld zie je in figuur 9.2: via de optie Toegang stel je in dat een artikel alleen zichtbaar is voor geregistreerde gebruikers. Geregistreerde gebruikers hebben speciale toegangsrechten, maar ze kunnen geen content bijdragen.

125 9 Gebruikersbeheer: gebruikers laten inloggen 117 Figuur 9.2: Dit artikel wordt alleen voor geregistreerde gebruikers toegankelijk Naast het toegangsniveau Public (Publiek, iedereen) Registered (Geregistreerd, ingelogde gebruikers) is er ook een niveau Guest (Gast). Wat is het verschil? Gasten zijn gebruikers die niet zijn ingelogd. Maar alle content op het niveau Guest wordt verborgen nadat gebruikers zich hebben aangemeld. Zo kun je dus content verbergen voor niet-ingelogde gebruikers en tonen aan gebruikers die niet ingelogd zijn. Denk aan een een module met de tekst Nu aanmelden : die kun je verbergen voor mensen die al zijn ingelogd door het toegangsniveau in te stellen op Guest. Tweede groep: gebruikers die content mogen bijdragen aan de voorkant Tot nu toe heb je alleen gezien dat je zelf (als beheerder) content kunt maken en bewerken in de beheeromgeving. Maar het is ook mogelijk om in te loggen aan de voorkant, en om artikelen rechtstreeks in de site te bewerken. We bekijken later in dit hoofdstuk hoe dat werkt. De gedachte erachter is dat het de drempel verlaagt om content bij te dragen. Gebruikers hoeven niet de achterkant te leren kennen en kunnen artikelen direct aanmaken of bewerken in een om geving die ze al kennen, de gewone voorkant van de site. Dit zijn de drie typen gebruikers die kunnen inloggen in de gewone site, elk met hun eigen toegangsniveaus: Authors kunnen nieuwe content aanmaken, maar die moet worden goedgekeurd door een publisher of iemand die hoger in rang is. Auteurs kunnen bestaande artikelen niet bewerken.

126 118 Basiscursus Joomla! 3 Editors (Redacteuren) kunnen nieuwe artikelen aanmaken en bestaande artikelen bewerken. Een publisher of hoger moet het artikel goedkeuren voordat het gepubliceerd wordt. Publishers (Hoofdredacteuren) kunnen artikelen indienen, bewerken en publiceren. In feite is dit de meest praktische van deze drie soorten gebruikers; de andere twee kunnen immers niet zelf content publiceren, en dat kan lastig zijn. Derde groep: gebruikers die content mogen bijdragen in de beheeromgeving Ten slotte zijn er drie soorten beheeromgevinggebruikers. Zij hebben alle rechten van de vorige groep, maar ze mogen ook inloggen in de beheeromgeving. Zij kunnen daar content beheren en administratieve taken uitvoeren: Managers kunnen alles doen wat publishers kunnen, maar ze mogen ook in de beheeromgeving artikelen toevoegen of verwijderen, en ze kunnen categorieën maken en beheren. Administrators kunnen alles doen wat managers kunnen en hebben toegang tot meer beheerfuncties. Zij kunnen gebruikers beheren, extensies toevoegen, of templates wijzigen. Super Users hebben geen beperkingen. Ze mogen alles doen in de beheeromgeving. Oefening 9.1: Een nieuwe gebruiker aanmaken Stel, je wil een webteam creëren: een aantal mensen die de content van de site onderhouden. In deze oefening maak je gebruikersaccounts aan voor deze teamleden. 1 Ga naar Gebruikers > Gebruikersbeheer. Om een nieuwe gebruiker toe te voegen, klik je op de knop Nieuw in de knoppenbalk. 2 In het scherm Toevoegen nieuwe gebruiker (figuur 9.3) vul je de gebruikersgegevens in. Figuur 9.3: De nieuwe gebruiker is toegewezen aan de gebruikersgroep Publisher

127 9 Gebruikersbeheer: gebruikers laten inloggen 119 In dit voorbeeld hebben we gebruiker Contentbeheerder toegevoegd, met als inlognaam contentbeheerder. Voer een wachtwoord in en een geldig adres voor de nieuwe gebruiker. 3 Klik op de tab Toegewezen gebruikersgroepen om te bepalen in welke groep de nieuwe gebruiker komt. Zet een vinkje voor Publisher. Klik op Opslaan & sluiten om de gegevens van de gebruiker op te slaan. In Gebruikersbeheer zie je nu de nieuwe gebruiker (zie figuur 9.4). Figuur 9.4: De nieuwe gebruiker is toegevoegd 9.3 Inloggen als nieuwe gebruiker Om te controleren of de nieuwe gebruiker kan inloggen, ga je naar de voorkant van de site. Daar kun je inloggen met de gebruikersnaam (content beheerder) en het wachtwoord van de nieuwe gebruiker die je juist hebt aangemaakt. Onder het hoofdmenu vind je standaard het inlogformulier van Joomla (figuur 9.5). Figuur 9.5: Het inlogformulier in de standaardvoorbeeldsite van Joomla 4 Log in met naam (contentbeheerder) en het wachtwoord dat je net hebt aangemaakt. Klik op Inloggen. 5 Je ziet nu bij alle artikelen op de voorpagina de knop met een tandwieltje erop. Normaal is die alleen bedoeld voor functies die voor elke bezoeker beschikbaar zijn, zoals de pagina printen. Maar nu schuilt achter deze knop andere functionaliteit: klik erop om de link Bewerk te tonen. Figuur 9.6: Klik op het pictogrammen naast de titel om een artikel te bewerken

128 120 Basiscursus Joomla! 3 6 Als je op Bewerk klikt, kun je het artikel direct bewerken: de webpagina verandert in een editor! Figuur 9.7: Een artikel bewerken aan de voorkant van de site Een grote verbetering in Joomla 3.x is dat gebruikers met de juiste rechten niet alleen artikelen kunnen toevoegen of bewerken aan de voorkant van de site. Wie administrator of hoger is, kan ook andere site-inhoud aan de voorkant van de site aanpassen: modules. Als je met de muis over een moduleblokje gaat, wordt een bewerkknop zichtbaar. Klik daarop om de module te bewerken: Figuur 9.8: Een module openen om deze te bewerken aan de voorkant van de site Het voordeel van artikelen én modules beheren vanaf de voorkant van de site is dat je per pagina een compleet beeld hebt van de site zoals de bezoeker deze ziet, en direct kunt beslissen om een moduleblokje aan te passen. Dat is veel gebruiksvriendelijker dan modules beheren vanuit de beheeromgeving: daar heb je geen totaalbeeld van alle modules op de uiteindelijke webpagina. Je beheert modules immers vanuit Modulebeheer.

129 9 Gebruikersbeheer: gebruikers laten inloggen 121 Het gebruikersmenu Zodra je ingelogd bent in de site, verschijnt bovendien op de homepage een nieuw menu, User Menu (Gebruikersmenu). Via de links in dat menu kun je je eigen gebruikersaccount beheren. Bovendien zie je een link Submit an article, die je de gelegenheid geeft om een nieuw artikel aan te maken (zie figuur 9.9). Figuur 9.9: Zodra je ingelogd bent in de site, verschijnt een User Menu waarmee je gebruikersinstellingen aanpast In dit voorbeeld is het User Menu zichtbaar dat onderdeel is van de Engels talige voorbeelddata van Joomla. De menumodule is zo ingesteld dat deze alleen zichtbaar is voor geregistreerde gebruikers. Als je dit menu wil gebruiken, kun je de linktitels vertalen via Menu s > User menu > [naam van de menulink]. De naam User Menu verander je via Extensies > Modulebeheer > User Menu. Zelf een inlogformulier toevoegen Het blokje met het inlogformulier is een module die al geïnstalleerd is wanneer je Joomla met voorbeelddata installeert. Is de module niet aanwezig, dan kun je die gewoon zelf aanzetten. 1 Ga naar Extensies > Modulebeheer. Klik op Nieuw en selecteer Inloggen. Je komt nu in het scherm Modulebeheer: Module Inloggen. 2 Voer een Titel in (bijvoorbeeld Login), kies een positie (bijvoorbeeld Rechts [position-7] om in de rechterkolom te publiceren). Laat Toegang op Public staan, want anders zou de module pas verschijnen nadat iemand ingelogd is maar bezoekers hebben de module nodig om te kunnen inloggen! 3 In dit voorbeeld laten we verdere instellingen ongewijzigd. Klik op Opslaan en klik op Bekijk website. Het inlogformulier verschijnt nu links op de pagina. Je hebt nu toegang tot de site mogelijk gemaakt via een inlogformulier. Misschien heb je gemerkt dat, zodra je dit formulier toevoegt, daaronder ook een link verschijnt die bezoekers uitnodigt om een account te maken. Standaard is Joomla geconfigureerd om zelfregistratie door gebruikers mogelijk te maken (zie ook 9.4). Wil je dat niet, ga dan naar Gebruikers > Gebruikersbeheer en klik op Opties. Zorg ervoor dat Gebruikersregistratie toestaan op Nee staat.

130 122 Basiscursus Joomla! Zelfregistratie van bezoekers mogelijk maken In de vorige paragraaf heb je zelf een nieuwe gebruikersaccount toegevoegd in de beheeromgeving, met behulp van Gebruikersbeheer. Je kunt ook gebruikers in staat stellen zelf een account aan te maken. Zo kunnen ze zichzelf registreren, zonder dat de beheerder van deze site daar omkijken naar heeft. (Natuurlijk is de beheerder nog altijd de baas, want die heeft de mogelijkheid om gebruikers te blokkeren of te verwijderen.) Geregistreerde gebruikers mogen in principe niet bijdragen aan de site, maar hebben toegang tot delen van de site waar de toegang is ingesteld op Registered (Geregistreerd). Zodra je in Joomla een inlogformulier (de inlogmodule) toevoegt, maak je vanzelf registratie mogelijk. Standaard biedt de inlogmodule namelijk niet alleen de mogelijkheid om in te loggen, maar ook om een nieuwe account te maken (zie figuur 9.10). Figuur 9.10: Via de link Registreer op het inlogformulier kan de bezoeker ook een nieuwe account aanmaken Wil je geen inlogmoduleblokje op de site, maar wel de mogelijkheid bieden om in te loggen, dan kun je ook een menulink toevoegen die leidt naar een inlogpagina. Om dat te doen voor het horizontale menu bovenaan, ga ja naar Menu s > Top Menu, klik je op Nieuw en kies je bij Menu-itemtype: Gebruikersbeheer > Inlogformulier. Voeg een titel toe voor de link (bijvoorbeeld Login) en klik op Opslaan. Registreren als gebriuker Als je klikt op de link Registreer in het inlogblokje (of op Nog geen account? als je een menulink naar een inlogpagina hebt gemaakt) kom je terecht op de registratiepagina (figuur 9.11). Om je te registreren vul je hier je gegevens in, inclusief een geldig mailadres. Tot slot klik je op Registreren.

131 9 Gebruikersbeheer: gebruikers laten inloggen 123 Figuur 9.11: Vul hier je naam, een gebruikersnaam, wachtwoord en adres in Als je op Registreren hebt geklikt, krijg je een melding dat er een mail met een activeringslink is gestuurd naar het opgegeven mailadres. Je ontvangt dus een mail met daarin een link waarop je moet klikken om de nieuwe gebruikersaccount te activeren. Zodra je dat gedaan hebt, kun je als geregistreerde gebruiker inloggen in de site, via het inlogformulier. 9.5 Speciale content aanbieden aan geregistreerde gebruikers Als je zelfregistratie mogelijk maakt, moet je geregistreerde gebruikers natuurlijk wel wat te bieden hebben. Dat doe je door het toegangsniveau Registered (geregistreerd) in plaats van Public (publiek toegankelijk) toe te kennen aan de content die je alleen voor geregistreerde bezoekers zichtbaar wil maken. Die content wordt verborgen voor gewone gebruikers. De meeste bouwstenen van een Joomla-site kun je instellen op een specifiek toegangsniveau. Je kunt bijvoorbeeld een pagina instellen als Registered, maar dat kun je ook doen met een module of alle inhoud van een bepaalde categorie. Dit betekent dat je site er heel anders uit kan zien voor verschillende typen gebruikers. Gewone gebruikers zien alleen een basiswebsite, geregistreerde gebruikers hebben dezelfde content, plus extra artikelen, menu s of modules. Oefening 9.2: Content verbergen voor niet-geregistreerde gebruikers Standaard is elk menu-item zichtbaar: de toegangsrechten staan op Public (zie figuur 9.12).

132 124 Basiscursus Joomla! 3 Figuur 9.12: In het menu About Joomla! zijn vier links zichtbaar. Een daarvan gaan we verbergen voor niet-ingelogde bezoekers Stel dat je in het menu About Joomla! de link naar Using Joomla! wilt verbergen, zodat deze alleen voor geregistreerde gebruikers (en gebruikers met meer rechten) zichtbaar is. 1 Ga in de beheeromgeving naar Menu s > About Joomla! en klik op de link Using Joomla!. Figuur 9.13: Verander bij de menulink-instellingen Toegang van Public naar Registered 2 Bij Toegang selecteer je nu Registered (zie figuur 9.13). Klik op Opslaan & sluiten om je bewerkingen op te slaan. Dat is alles. Door deze menulink aan te passen, heb je een menu-item verborgen voor niet-geregistreerde gebruikers. In figuur 9.13 zie je dat het menu About Joomla! aan de voorkant van de site één link minder heeft.

133 9 Gebruikersbeheer: gebruikers laten inloggen 125 Figuur 9.14: De link Using Joomla! is onzichtbaar. Pas als je aan de voorkant van de site bent ingelogd als geregistreerde gebruiker, verschijnt deze link weer Als je nu een account maakt voor een geregistreerde gebruiker en vervolgens inlogt, zie je de vier menulinks weer. Ook als je inlogt met de gegevens van de gebruiker Contentbeheerder die je eerder in dit hoofdstuk hebt aangemaakt, zie je alles weer. Die gebruiker heeft namelijk de rechten van een Publisher, en ziet daardoor na inloggen ook alles wat geregistreerde bezoekers zien.

134

135 10 Templates: de vormgeving van de site aanpassen Een van de sterke kanten van Joomla is dat je in een handomdraai het uiterlijk van de site volledig kunt veranderen. Voor de hele site of zelfs per pagina kun je een template toewijzen waarmee je de lay-out en de typografie helemaal op maat maakt. Hoe kom je aan templates, hoe pas je ze toe en hoe pas je ze aan? In dit hoofdstuk Wat is een template? De standaardtemplate aanpassen Een andere template activeren Een nieuwe template downloaden en installeren 10.2 Wat is een template? Een Joomla-template bestaat uit een aantal bestanden die de HTML- en CSScode bevatten en bepalen hoe je website eruitziet. HTML is de code die wordt gebruikt om webpagina s te bouwen, CSS (Cascading Style Sheets) wordt gebruikt om de vormgeving te regelen. Als je HTML beschouwt als de bakstenen en het cement van je site, dan vormt CSS de verf en het behang. Behalve HTML en CSS bevat een Joomla-template ook nog wat specifieke instructies (geschreven in de PHP-taal) die vertellen waar Joomla wat moet afbeelden binnen de HTML-pagina. De template bevat dus instructies in PHP die Joomla vertellen waar de centrale content komt, waar menu s staan en op welke posities modules staan. Joomla 3 maakt voor de voor- en achterkant van de site gebruik van Twitter Bootstrap, een veelgebruikte gereedschapskist met standaard-bouwstenen voor webdesign: van pagina-lay-outs tot bijvoorbeeld menu s, knoppen en formulieren. Voor Joomlagebruikers is het voordeel dat de beheeromgeving nu 127

136 128 Basiscursus Joomla! 3 overzichtelijker en consistent is vormgegeven. Maar bovendien zijn templates die de Bootstrap-standaard volgen, gebaseerd op de modernste technieken en automatisch geschikt voor alle browsers en voor alle apparaten De standaardtemplate aanpassen De standaardtemplate van Joomla 3 is Protostar. Hoe die eruitziet, kun je gedeeltelijk beïnvloeden zonder dat je aan de code hoeft te komen. De template bevat verschillende opties die je naar smaak kunt aanpassen. Oefening 10.1: Logo en kleuren aanpassen 1 Ga naar Extensies > Templatebeheer. In het linkermenu zie je twee opties: Stijlen en Templates; je bent nu op de pagina Stijlen. Klik op de link protostar Default. Dit is de naam van de standaardtemplate. Je komt nu in het scherm Templatebeheer: Stijl bewerken, weergegeven in figuur Figuur 10.1: Het scherm Templates Manager: Edit Style Hier kun je de kleuren en het logo van de site aanpassen: 2 Klik op het tabblad Geavanceerd. 3 Klik op Templatekleur om een andere kleur te kiezen voor de accenten op de website: de gekleurde lijn boven aan de pagina, de kleur van menulinks en koppen. Er verschijnt een kleurenpalet waarin je een kleur naar keuze kunt aanklikken. Klik binnen het palet eerst op Select om je keuze te bevestigen. 4 Doe hetzelfde bij Achtergrondkleur, de kleur voor de achtergrond van de pagina (die standaard lichtgrijs is). 5 Klik bij de optie Logo op Selecteren. In het popupscherm dat nu verschijnt kun je een bestaande figuur (een logo) vanaf je computer uploaden. In het vak Bestanden uploaden klik je op Bestanden kiezen. Selecteer het logobestand en klik op Upload starten. Je krijgt de melding Uploaden voltooid. 6 Selecteer het logo en klik op Invoegen (zie figuur 10.2).

137 10 Templates: de vormgeving van de site aanpassen 129 Figuur 10.2: Rechtsboven in het popupscherm vind je de knop Invoegen 7 Je komt terug op de pagina Stijl bewerken. Pas nu de Beschrijving aan: geef een korte beschrijving die onder het logo verschijnt. 8 Klik op Opslaan & sluiten en klik vervolgens op Bekijk website om het resultaat te bekijken. De uitstraling is flink veranderd door het logo en de nieuwe voor- en achtergrondkleuren (zie figuur 10.3). Figuur 10.3: Dezelfde template, nu met een logo en met een ander kleurschema

138 130 Basiscursus Joomla! 3 Experimenteer eens met de instellingen. Je kunt er bijvoorbeeld ook voor kiezen, een ander font te gebruiken voor de koppen. Standaard gebruikt Protostar het lettertype Open Sans, een gratis beschikbaar lettertype uit de bibliotheek van Google Fonts. Maar je kunt elk van de honderden andere Google Fonts toepassen. Welke dat zijn, zie je op Vul de gekozen fontnaam in bij Google Font naam onder Geavanceerde opties. Hieronder zie je het effect: doordat we de fontnaam Oldenburg hebben ingetikt, worden alle koppen in dit lettertype afgebeeld (zie figuur 10.4). Figuur 10.4: Met Google Webfonts gebruik je eenvoudig een ander lettertype voor koppen 10.4 Een nieuwe template downloaden en installeren Met Joomla worden een paar templates meegeleverd. Hoe ze eruitzien, kun je bekijken via Extensies > Templatebeheer > menuoptie Templates. Figuur 10.5: Het overzicht van geïnstalleerde templates

139 10 Templates: de vormgeving van de site aanpassen 131 Klik op een van de verkleinde afbeeldingen (thumbnails) om een grotere weergave te zien. Er zijn templates voor de beheeromgeving (Locatie: Beheergedeelte) en voor de voorkant van de site (Locatie: Website). De template Protostar is standaard in gebruik. De template Beez3 is ook bedoeld voor de voorkant van de site; het is een update van de template die standaard werd gebruikt in vorige versies van Joomla. De template Isis wordt standaard gebruikt in de beheeromgeving; de template Hathor is een alternatief. Als je een andere template wilt activeren, dan doe je dat op de pagina Stijlen: klik op het sterretje in de kolom Standaard om bijvoorbeeld te zien hoe de site eruitziet met Beez3 als template. Je kunt eenvoudig weer terugschakelen naar Protostar. Wil je iets anders, dan kun je kiezen uit een enorm groot aanbod Joomla-templates op het web. Hierna download en installeer je een gratis template. Oefening 10.2: Een nieuwe template downloaden en activeren Hieronder installeer je een nieuwe template van het web, een template die aan alle bovenstaande eisen voldoet. Een Joomla-template bestaat uit een aantal bestanden die in een gecomprimeerd formaat (meestal een zipbestand) worden aangeboden; dat zipbestand kun je vervolgens direct via Joomla zelf uploaden en installeren. 1 Ga naar Joomla-Templates/Future/View-Category. Dit is een templates Joomla 3.0 en hoger. Klik op de Download-knop op de pagina. Sla het ingepakte templatebestand (IT_Future-v3.0.1-(unzip-first) zip) op. Kies een plek waar je het gemakkelijk terug kunt vinden, bijvoorbeeld de desktop. 2 Het zipbestand bevat zelf weer verschillende andere bestanden: de template, documentatie, en ook nog enkele gratis meegeleverde extensies. Pak het zipbestand uit, zodat je de volgende bestanden krijgt: Figuur 10.6: Alle bestanden in het templatepakket

140 132 Basiscursus Joomla! 3 3 Het bestand tpl_ice_future.zip is waar het om draait; dit is de template. Maar pak ook vast de volgende bestanden uit: IceMegaMenu_Unzip_First. zip en IceCarousel_Unzip_First.zip. Dat zijn extensies die je in de template kunt gebruiken voor het menu en voor een slideshow. Het bestand Clone_ Installer-(Joomla-3.0.2).zip heb je niet nodig (daarmee installeer je zowel Joomla als de template, wanneer je vanaf nul begint). 4 Ga naar Extensies > Extensiebeheer. Klik op Upload pakketbestand en dan op de knop Bestand kiezen en blader naar het bestand tpl_ice_future. zip op je computer. Selecteer dit en klik op Uploaden & installeren. Als dat gebeurd is, zie je het bericht: Template installeren is geslaagd. Om de nieuwe template aan te zetten, ga je naar Extensies > Templatebeheer. In de lijst met templates (figuur 10.7) zie je dat Ice Future is toegevoegd. Figuur 10.7: De nieuwe template is na installatie beschikbaar in de lijst met templates. 5 Zet een vinkje in het selectievakje voor ice_future Standaard. Klik op de knop Standaard in de knoppenbalk. Je kunt hetzelfde ook sneller doen door direct te klikken op de knop met het sterretje in de kolom Standaard. 6 Klik op Bekijk website. De nieuwe template is nu actief (zie figuur 10.8). De template ziet er nog kaal uit, maar dat veranderen we zo. Zoals je merkt, werkt het installeren van een template op vrijwel dezelfde manier als het installeren van een module of andere extensie. Een klik op de knop Uploaden & installeren zorgt ervoor dat alle templatebestanden worden geüpload, dat ze worden uitgepakt en op de juiste plaats in de Joomla-mappen op de webserver worden geplaatst. Na de installatie pas je de instellingen naar wens aan.

141 10 Templates: de vormgeving van de site aanpassen 133 Figuur 10.8: De nieuwe template is actief, maar de modules zijn nog niet zichtbaar 10.5 De gedownloade template aanpassen Als je een andere template activeert, zul je vaak zien dat niet alle contentblokken meteen op de goede plaats terechtkomen. Dat komt doordat verschillende templates verschillende moduleposities bevatten. Een template bevat posities, aangeduid als left, position-1, enzovoort. In dit geval bevat de nieuwe template niet precies dezelfde posities als de standaardtemplate van Joomla. Daarom is niet alle content na de installatie van de nieuwe template zichtbaar. Zo zijn er ineens geen menu s meer! Geen nood, de menu s zijn nog gewoon aanwezig. Je moet ze alleen opnieuw zichtbaar maken, en dat is een kwestie van een paar instellingen wijzigen. Je moet de niet-afgebeelde onderdelen toewijzen aan de juiste, nieuwe posities. In figuur 10.9 zie je welke posities beschikbaar zijn in de nieuwe template. Hoe weet je welke posities de ontwerper beschikbaar heeft gesteld in een specifieke template? Veel templates worden geleverd met documentatie, waarbij meestal ook een overzicht van de moduleposities te vinden is. Maar je kunt deze posities ook zelf in beeld krijgen. Ga naar Templatebeheer en klik op Opties. Controleer of Voorbeeld module posities op Ingeschakeld staat. Klik op Opslaan & sluiten. Ga vervolgens in Templatebeheer in het linkermenu naar Templates. In de lijst met templates klik je op de link Voorbeeld naast de afbeelding van de template. Nu verschijnt een voorbeeld van de template, met daarin (in rode letters) de namen van moduleposities, zoals left of position-1. Als je met deze template gaat werken, is het handig om een printje of een schermafdruk van dat overzicht beschikbaar van te houden.

142 134 Basiscursus Joomla! 3 Figuur 10.9: De beschikbare posities in de nieuwe template Oefening 10.3: De opties van de template aanpassen Om te beginnen gebruiken we de ingebouwde opties van de template om een paar instellingen aan te passen. Zo kun je via deze opties een logobestand toevoegen. 1 Ga naar Extensies > Templatebeheer en open de template Ice Future. Bij de Opties kun je uiteenlopende instellingen regelen. 2 Bij Site Logo kies je een logobestand. Als je werkt met de voorbeeldbestanden bij dit boek, gebruik dan voorbeeldlogo_2.png. Selecteer en upload het bestand en voeg het in.

143 10 Templates: de vormgeving van de site aanpassen 135 Figuur 10.10: Zo ziet het nieuwe logo eruit op de site 3 Bij de optie Template Style kun je kiezen uit verschillende kleurenschema s. In dit voorbeeld laten we Style 1 (met een blauwe achtergrondkleur voor menu s) onveranderd. 4 De links naar Facebook en Twitter kun je naar wens aanpassen of uitzetten. 5 De optie om het IceTheme logo af te beelden je beter uitzetten: kies voor No. Oefening 10.4: De meegeleverde menumodule activeren De gedownloade template, Ice Future, wordt geleverd met een paar extra modu les. Die hoef je niet te gebruiken, maar bijvoorbeeld het megamenu bevat wel veel nuttige extra s die de standaard menumodule van Joomla niet heeft. Je hebt de megamenu-module tegelijk met de template gedownload. Pak het zipbestand met de module eerst uit. Daarna kun je de module als volgt inschakelen: 1 Ga naar Extensies > Extensiebeheer. Klik op Upload pakketbestand, blader naar mod_icemegamenu_v zip en installeer deze. Selecteer ook de plugin plg_icemegamenu_v zip en installeer ook deze. De meegeleverde module mod_ice_carousel_v zip gebruiken we niet; die is bedoeld voor een slideshow boven aan de pagina. 2 Schakel de plugin in: via Extensies > Pluginbeheer zoek je de IceMega- Menu Plugin. Kik op het rode kruisje bij Status. Het verandert in een vinkje. 3 Ga naar Extensies > Modulebeheer en open de Ice MegaMenu module. Verander de instellingen als volgt: Zet Status op Gepubliceerd en kies bij Positie voor Mainmenu [mainmenu]. Bij General Menu Configuration: kies bij Select Menu voor Main Menu. Kies ten slotte bij Menutoewijzing voor Op alle pagina s. 4 Sla je aanpassingen op. Het horizontale drop-downmenu verschijnt nu in de balk bovenaan (figuur 10.11). Figuur 10.11: De site beschikt nu over een drop-downmenu

144 136 Basiscursus Joomla! 3 Je hebt nu de instellingen van de template aangepast en de menumodule geactiveerd en op de juiste plek gezet. Maar er waren nog meer modules actief op de site; ook die moet je nog zichtbaar maken. Oefening 10.5: Modules op de goede plaats zetten Tot slot zet je een aantal modules op de juiste posities in de nieuwe template. 1 Ga naar Extensies > Modulebeheer. In de keuzelijst Selecteer type kies je voor Menu. Zo verschijnen uitsluitend de verschillende menu s op de site in de modulelijst. 2 Klik op de titel van het menu This Site om de module-eigenschappen te bewerken. 3 Kies een nieuwe Positie uit de keuzelijst: right. Sla deze aanpassing op. 4 Herhaal de vorige drie stappen om andere modules aan nieuwe posities toe te wijzen: a Wijs het menu About Joomla toe aan footer1. b Wijs de module Inloggen toe aan footer2. c Wijs de module Headerafbeelding (moduletype Willekeurige afbeelding) toe aan icecarousel. 5 Klik op Opslaan & sluiten en klik op Bekijk website. De modules zijn terug (zie figuur 10.12). Figuur 10.12: Het menu This Site is weer zichtbaar; de module Willekeurige afbeelding verschijnt boven aan de pagina

145 10 Templates: de vormgeving van de site aanpassen 137 Figuur 10.13: Als je het browserscherm verkleint, zie je hoe de vormgeving zich aanpast. Ook op tablets en smartphones wordt de site dus goed weergegeven. Klik op het icoon rechtsbovenaan om het menu te openen Zelf de CSS-code aanpassen? Tot nu toe heb je de vormgeving aangepast door gebruik te maken van de ingebouwde variatiemogelijkheden van de template. Als je volledige controle wilt over hoe je site eruitziet, dan kun je ofwel zelf een template bouwen (maar dan moet je veel kennis hebben van HTML en CSS) of een bestaande template aanpassen. Dat laatste is een stuk laagdrempeliger. Met name het aanpassen van de vormgeving via CSS is goed te doen, zeker als het je er alleen om gaat kleuren, lettertypen, afbeeldingen en dergelijke aan te passen. Je kunt de stylesheets (de meeste templates hebben er meerdere) rechtstreeks in Joomla bewerken: ga naar Extensies > Templatebeheer, klik in het linkermenu op Templates en klik op de link van de template (bijvoorbeeld Protostar gegevens en bestanden). Rechts zie je een kolom Stylesheets. Als je op de naam van de stylesheet (bijvoorbeeld template.css) klikt, kun je de broncode van de stylesheet direct in Joomla openen om stijlen aan te passen en je aanpassingen te bewaren. Een voorbeeld: stel dat je de achtergrondkleur van de nieuwe template te donker vindt. Via Templatebeheer > menuoptie Templates > Ice_future gegevens en bestanden kom je terecht in de editor met de stijlen voor deze template. Klik op de map css en op de bestandsnaam template.css.

146 138 Basiscursus Joomla! 3 Figuur 10.14: Je kunt de stijlen (css) van de template direct in Joomla bewerken Je vindt daar de stijl van de body (dat is de hele HTML-pagina) die als background een bepaald kleurnummer heeft: #FEFEF2. Dat is de huidige grijze kleur. Vervang die door elke andere gewenste kleur, bijvoorbeeld background gebroken wit: #F6F9ED. Vervang op dezelfde manier de grijze backgroundkleur van het logovak: die vind je bij #logo. Sla je wijzigingen op, aan de voorkant van de site zie je direct het verschil (druk eventueel op F5 om het browserscherm te verversen): Figuur 10.15: Een andere achtergrondkleur voor de pagina regel je door het kleurnummer te wijzigen. Zoek op het web naar css kleurcodes om overzichten te vinden van kleurnummers Je hebt voor zulke aanpassingen geen specifieke kennis van Joomla nodig, maar van CSS. Als je meer wilt weten over CSS, zoek op het web dan eens op CSS tutorials. Er is heel veel informatie te vinden op het web, ook in het Nederlands.

147 10 Templates: de vormgeving van de site aanpassen 139 Meer doen met het megamenu In principe bevat een template alleen maar de opmaakcodes voor je website, maar sommige templatemakers stoppen veel meer functionaliteit in hun templates. In het voorbeeld dat je in dit hoofdstuk gezien hebt, wordt de template geleverd met een gratis extensie: Ice MegaMenu. Doordat je bij deze template deze megamenu-uitbreiding hebt geïnstalleerd, heeft elke menuoptie van het Main Menu nu extra mogelijkheden. Een megamenu stelt je in staat om meer inhoud in een menu op te nemen, bijvoorbeeld beschrijvingen bij menulinks, en drop-downmenu s met twee of meer kolommen. Open een menulink met submenulinks (bijvoorbeeld de link Sample Sites) en kijk bij Geavanceerde opties: daar vind je IceMegaMenu Parameters. Hier kun je een SubTitle invullen (een toelichtende tekst onder de menulink) en je kunt het aantal kolommen per submenu aangeven. Voor elke menulink kun je op deze manier de indeling aanpassen en extra informatie toevoegen. Het effect ziet er zo uit: Figuur 10.16: Een ander achtergrondkleur regel je door het kleurnummer te wijzigen. Zoek op het web naar css kleurcodes om overzichten te vinden van kleurnummers 10.6 Waar vind je templates? Als je het web doorzoekt op Joomla template, dan krijg je een duizelingwekkend aantal resultaten. Vaak werkt het beter om gericht te zoeken in speciale sites met Joomla-templates. Een goed startpunt zijn internationale templatesites zoals com en of Joomla-downloadsites zoals het Duitse www. joomlaos.de. Deze sites bieden honderden templates. Blader door de collecties en bekijk live previews. Kijk ook eens naar sites van professionele Joomla-templateontwikkelaars, zoals en Een andere bron is deze site maakt het vinden van de juiste template makkelijker doordat je een zoekopdracht kunt uitvoeren op basis van allerlei criteria (gratis of niet, soort menu op de site, naam van de ontwikkelaars etc.).

148 140 Basiscursus Joomla! 3 Veel sjablonen worden aangeboden door commerciële ontwikkelaars, een aantal templateclubs geven je gelegenheid om templates te downloaden voor een abonnementstarief. Maar je kunt ook veel kwaliteitstemplates vinden die niets kosten. Waar moet je op letten als je een template zoekt? Bij het zoeken naar templates is het belangrijk om erop te letten dat die voldoende te bieden heeft. Tenslotte is de standaardtemplate van Joomla al behoorlijk veelzijdig. De template Protostar is geschikt voor smartphones en tablets, je kunt kleuren en lettertypen aanpassen, en hij bevat veel moduleposities die je veel vrijheid geven om zelf de pagina-indeling te bepalen. Als je op zoek bent naar een andere template, hou er dan rekening mee dat ook die aan dat soort basiseisen moet voldoen. Tegelijkertijd moet de template ook weer niet te gecompliceerd zijn; sommige ontwikkelaars van templates stoppen tientallen extra s in de template. Dat laatste is niet alleen maar een voordeel; het betekent dat je je flink moet verdiepen in de template en soms ook dat de site trager wordt door de vele ingebouwde scripts. Let bij het zoeken naar een template op de volgende eisen: Zoek je een gratis template? Let erop dat makers van gratis templates je soms verplichten om een copyright-link op te nemen naar de website van de maker. Soms bevatten de templates zelfs code die je verhindert om de copyrightregel te verwijderen. Maar templates die én gratis zijn én geen verplichtingen op dit gebied meebrengen, zijn er wel. Vaak is het een kwestie van uitproberen. Moet de template geschikt zijn voor alle schermformaten en alle apparaten, van smartphone tot pc? Let er dan op dat bij de eigenschappen staat dat de template responsive is. De template moet veel opties bevatten of eenvoudig aan te passen zijn: opties zijn bijvoorbeeld verschillende ingebouwde kleurenschema s. Maar pas op voor zeer uitgebreide templates met veel eye candy en tientallen opties: ze zijn vaak moeilijker aan te passen en kunnen ook de site langzamer maken. De template moet in elk geval geschikt zijn voor Joomla 3.0 en hoger. Nog beter is een template die helemaal op maat is gemaakt voor de nieuwste versie van Joomla. Templates voor oudere versies dan 3.0 werken niet.

149 11 En nu verder! In de vorige hoofdstukken heb je alle vaardigheden geoefend om zelf een website te bouwen. Daarbij heb je gewerkt met de voorbeeldsite die met Joomla wordt meegeleverd. Hoe maak je de vertaling naar jouw eigen 11 website? Daarvoor vind je hieronder een checklist. Maar eerst lees je hoe je de voorbeeldsite leegmaakt, zodat je een opgeruimde basis hebt voor je eigen website De voorbeelddata verwijderen Als je voor het eerst Joomla installeert, heb je veel aan de voorbeelddata die je mee kunt installeren. Maar zodra je zelf je eigen site wilt bouwen, wil je natuurlijk die voorbeeldcategorieën, -artikelen en modules kwijt. Jammer genoeg is er geen mogelijkheid om die in één klik te verwijderen. Er zijn twee methoden: je kunt Joomla opnieuw installeren zonder voorbeelddata, of je kunt stap voor stap alle voorbeeldcontent binnen Joomla verwijderen. Hieronder lees je hoe je dat laatste doet. We gaan bij deze stappen uit van een standaardinstallatie van Joomla, inclusief voorbeelddata. Oefening 11.1: Voorbeelddata verwijderen 1 Ga naar Inhoud > Artikelen. Je komt in het scherm Artikelbeheer. 2 In de keuzelijst met het nummer 20 boven aan het scherm kies je Alle. Nu worden alle artikelen getoond op één scherm. 3 Zet een vinkje in het vakje boven aan de lijst (links van de kolomnaam Status). In figuur 11.1 is te zien dat daarmee alle items in de kolom geselecteerd zijn. 4 Klik op de knop Prullenbak in de knoppenbalk. Je ziet nu een melding dat de artikelen naar de prullenbak zijn verplaatst. 5 Als artikelen in de prullenbak zitten, zitten ze nog steeds in Joomla s database. Om ze definitief te verwijderen, klik je op de knop Zoekmiddelen; in de keuzelijst Selecteer status kies je Verplaatst naar prullenbak (zie figuur 11.2). 141

150 142 Basiscursus Joomla! 3 Figuur 11.1: Alle artikelen zijn geselecteerd Figuur 11.2: Bekijk de inhoud van de prullenbak door te kiezen voor Selecteer Status > Prullenbak Je ziet nu alle artikelen die in de prullenbak zitten. Selecteer opnieuw alle items en klik op de knop Prullenbak legen. Nu verwijder je de categorieën. Dat gaat op vrijwel dezelfde manier: 1 Klik in Artikelbeheer op de menulink Categorieën (in het menu aan de linkerkant) om naar het scherm Categoriebeheer te gaan. 2 In de keuzelijst boven aan het scherm kies je weer Alle. Nu worden alle categorieën getoond. 3 Zet een vinkje in het selectievakje helemaal boven aan de lijst. Nu zijn alle items in de kolom geselecteerd. Deselecteer vervolgens de categorie Uncategorised; die blijft bedoeld voor artikelen die je niet categoriseert. 4 Klik op de knop Prullenbak in de knoppenbalk. Je ziet nu een melding dat de artikelen naar de prullenbak zijn verplaatst. 5 Om de categorieën definitief te verwijderen, klik je op Zoekmiddelen en vervolgens in de keuzelijst Selecteer Status op Prullenbak. Je ziet nu alle categorieën die in de Prullenbak zitten. Selecteer opnieuw alle items en klik op de knop Prullenbak legen. 6 Klik op Bekijk website. Vrijwel alle content is verdwenen, op de menu s en de inlogmodule na (zie figuur 11.3). In dit voorbeeld zie je de template die je in hoofdstuk 10 hebt geïnstalleerd.

151 11 En nu verder! 143 Figuur 11.3: De site is bijna leeg, op de menu s en andere modules na Nu verwijder je de menu s die je niet nodig hebt: 1 Ga naar Menu s > Menubeheer. In de lijst met menu s zet je een vinkje voor de menu s die je niet meer nodig hebt. Overbodige voorbeeldmenu s zijn About Joomla, Australian Parks en Fruit Shop. Het Main Menu is een basismenu dat je niet mag verwijderen. Mogelijk wil je ook User Menu (voor ingelogde gebruikers) en Top (het horizontale menu bovenaan) behouden. Je kunt die gebruiken als je eigen gebruikersmenu en als (basis voor) je eigen horizontaal menu bovenaan. 2 Als je nu op Verwijderen klikt, krijg je een waarschuwing. Klik op OK. Je behoudt het Main Menu en het menu Top, maar de menulinks erin kun je verwijderen. Dat gaat op de manier die je ondertussen kent van het verwijderen van artikelen of categorieën. 1 Ga naar Menu s > Main Menu. Selecteer alle items en klik op Prullenbak. Alle items worden nu verwijderd, op Home na: die link is nodig om Joomla goed te laten werken.

152 144 Basiscursus Joomla! 3 2 Om de menu-items uit de prullenbak te verwijderen, kies je in de keuzelijst Selecteer Status voor Prullenbak. Selecteer weer alle items en klik op Prullenbak legen. 3 Je kunt nu ook de inhoud van het TopMenu leegmaken op dezelfde manier (ga naar Menu Items, selecteer het menu Top, selecteer alle items en klik op Prullenbak). Je houdt dan een lege menumodule over op de goede plaats, waarin je zelf weer menulinks aan kunt brengen. Het resultaat ziet er aan de voorkant uit als in figuur Figuur 11.4: Een lege Joomla-site Inlogformulier van de homepage verwijderen Onder aan de homepage staat nog het inlogformulier. Dat zul je misschien nu of later willen gebruiken als je de site wil openstellen voor geregistreerde gebruikers. Wil je het inlogformulier van de homepage verwijderen, ga dan naar Extensies > Modulebeheer. In de keuzelijst Selecteer type kies je voor Inloggen. Selecteer het Login Form op position-7 en kies voor Depubliceren. Je kunt het altijd (via de optie Publiceren) weer activeren. De voorbeeldsite bevat nog meer modules die je kunt verwijderen, omdat ze niet worden gebruikt. Door ze te verwijderen, gooi je niet de modulefunctionaliteit zelf weg (eenzelfde module kun je in Modulebeheer met Nieuw altijd weer aanmaken), maar je verwijdert alleen de specifieke modules die zijn toegepast op de site (én hun instellingen). Pas op: gooi geen modules weg die wél in gebruik zijn. Laat bijvoorbeeld de zoekmodule, de menumodule en de loginmodule altijd staan.

153 11 En nu verder! 145 Overbodige templates verwijderen Het is aan te raden om templates die je niet gebruikt, te verwijderen. Ze leveren overbodige ballast op: als je bijvoorbeeld een modulepositie kiest, verschijnt een enorme lijst met posities uit alle templates. Om templates te verwijderen, ga je naar Extensies > Extensiebeheer. Klik in het menu aan de linkerkant op Beheren. Er verschijnt een lange lijst met extensies. Wil je alleen templates zien, kies dan bij Selecteer type voor Template. Selecteer de templates die je kwijt wilt en klik op Deïnstalleren Verder bouwen aan je eigen site Als je de voorbeelddata hebt verwijderd, volg je de stappen die beschreven zijn vanaf hoofdstuk 4. In het kort: Denk na over de indeling: maak een schema voor de indeling van de site. Vertaal dat schema naar Joomla: maak in Joomla categorieën en subcategorieën aan. Zo heb je een raamwerk voor je content. Zorg voor content. Vaak maak je eerst dummy-content, nepartikelen die ongeveer weergeven hoe de contentpagina s eruit komen te zien. Zo kun je je eerst concentreren op de indeling en vormgeving van de site, en pas aan het eind de dummy-artikelen vervangen door echte tekst. Zorg voor doorklikpagina s en menu s. Maak de pagina s die bedoeld zijn om de lezer te laten doorklikken naar de content (de homepage en categoriepagina s) en maak menu s om de lezer gemakkelijk de site binnen te leiden. Voeg extra s toe. Gebruik meegeleverde extensies of installeer extensies om bijvoorbeeld een fotogallery te tonen. Regel het gebruikersbeheer. Maak gebruikersaccounts aan en maak eventueel zelfregistratie mogelijk voor bezoekers. Zet de vormgeving naar je hand. Gebruik de basistemplate, pas die aan of download een template van het web. Hoofdstuk 4 Hoofdstuk 5 Hoofdstuk 6 en 7 Hoofdstuk 8 Hoofdstuk 9 Hoofdstuk Handige websites Als je meer wilt leren over websites bouwen met Joomla, vind je veel informatie op de volgende websites: De internationale, Engelstalige website Tip: kijk regelmatig naar nieuwe edities van het Joomla-magazine, een online magazine met nieuws en praktijktips.

154 146 Basiscursus Joomla! 3 Nederlandstalige Joomla-sites en forums: en joomlanl.nl. De website bij dit boek: Hier kun je ook terecht voor aanvullingen en downloads. Mijn boek Tips en tools voor Joomla is bedoeld om je kennis uit te breiden en nog meer uit Joomla te halen. Het verschijnt in de loop van Zo krijg je bijvoorbeeld praktische tips voor de keuze en het gebruik van de beste Joomlaextensies.

155 A De site beveiligen Je hebt een mooie site, je hebt het ontwerp aangepast en content toegevoegd. Hoe voorkom je dat al dat werk verloren gaat doordat je site gehackt wordt A of door technische problemen? Wees gerust, de meeste Joomla-sites draaien al jarenlang zonder problemen. Toch is het is een goed idee om een aantal voorzorgsmaatregelen te treffen om alle risico s te minimaliseren. Hoe bescherm je je site en hoe krijg je je site weer snel online wanneer er iets verkeerd is gegaan? Deze bijlage bevat een aantal tips en best practices om je site gezond te houden. Kies een goede webhost Hierna lees je wat je kunt doen om je site veilig te maken. Maar er zijn ook enkele veiligheidsmaatregelen die je webhostingbedrijf moet nemen. Het gebruikelijkst is een zogenoemde shared hosting account, waarbij meerdere sites worden gehost op één servercomputer. Dat is veel goedkoper dan het huren van een dedicated server, maar het gaat gepaard met een aantal veiligheidsrisico s. Goede webhostingbedrijven nemen voorzorgsmaatregelen om deze risico s te minimaliseren. Als je een webhost selecteert, kijk dan of deze een goede reputatie heeft als het gaat om veiligheid. Je kunt webhosts vergelijken op sites als A.1 Regelmatig updaten De ontwikkelaars van Joomla brengen regelmatig updates uit om bugs en veiligheidsproblemen op te lossen. Joomla 3 maakt het makkelijk om updates bij te houden; je vindt aankondigingen in het Controlepaneel onder aan de lijst met Quick Icons : Figuur A.1: In het controlepaneel zie je of updates beschikbaar zijn 147

156 148 Basiscursus Joomla! 3 Klik op de link als er updates gemeld worden; je kunt die dan meteen installeren. A.2 De standaardgebruikersnaam wijzigen Bij het installeren van Joomla is de standaardgebruikersnaam van je inlogaccount admin. Je kunt die naam al meteen bij het installeren veranderen. Zo maak je het veel moeilijker voor kwaadwillenden om de toegang tot de site te krijgen. Immers, ze kunnen dan niet meer je gebruikersnaam raden. Heb je de gebruikersnaam niet veranderd bij het installeren, doe het dan alsnog: 1 Ga in de beheeromgeving van de site naar Gebruikers > Gebruikersbeheer. 2 Klik op de gebruikersnaam Super User. 3 In het volgende scherm kun je je gebruikersprofiel bewerken. Hier voer je een nieuwe Inlognaam in. 4 Klik op Opslaan om de wijzigingen toe te passen. 5 Log uit en log in op de beheeromgeving met de nieuwe gebruikersnaam. A.3 Sterke wachtwoorden gebruiken Kies een wachtwoord dat niet makkelijk te raden is. Het is het beste om een wachtwoord te gebruiken dat niet te kort is; 8 of meer tekens is prima. Gebruik een combinatie van hoofdletters, kleine letters, cijfers en speciale tekens (zoals # Kies niet dezelfde gebruikersnaam en wachtwoord die je ook gebruikt voor andere online-accounts, en verander regelmatig je wachtwoord. Je kunt een nieuw wachtwoord op elk gewenst moment in Gebruikersbeheer invoeren, op dezelfde manier als waarop je een inlognaam aanpast (zie 12.2). A.4 Mappen en bestanden beschermen Uiteraard wil je niet dat iedereen zomaar toegang heeft tot de Joomla-bestanden en mappen op de webserver. In dat geval zouden hackers immers zomaar bestanden kunnen openen en veranderen of vervangen. Daarom is het mogelijk om bestanden en mappen te beveiligen door het instellen van toegangsrechten. Dat doe je door de zogenoemde CHMOD-instellingen van bestanden en mappen aan te passen. CHMOD-instellingen vertellen de webserver wie toegang heeft tot een bestand of map, en of diegene het bestand mag lezen, mag bewerken of uitvoeren.

157 A De site beveiligen 149 Zodra je site goed werkt, kun je gebruikmaken van CHMOD om de bestandsrechten te wijzigen. Dat doe je niet met Joomla, maar met FTP-software (voor meer informatie over FTP-programma s, zie hoofdstuk 1 over het installeren van Joomla). Hoe pas je CHMOD-instellingen aan? 1 Klik in het FTP-programma met de rechtermuisknop op de naam van het bestand dat of de map die beveiligd moet worden. 2 In het contextmenu selecteer je Eigenschappen. 3 Nu zie je een popupscherm. Hier kun je toegangsrechten veranderen door de gewenste opties aan te vinken. In figuur A.2 zie je hoe dat werkt in het programma WS FTP, maar in andere programma s gebeurt dat op een vergelijkbare manier. Figuur A.2: De toegangsrechten van het bestand configuration.php aanpassen Je kunt toegangsrechten instellen voor de Owner (eigenaar) van een bestand, voor de Group (groepsleden) en voor Public (iedereen op het web). De eerste twee ben je als beheerder van de site zelf, met de laatste moet je heel voorzichtig zijn. In WS FTP verandert zodra je de toegangsrechten aanpast, ook de waarde in het veld Manual (hierboven 644; de eerste 0 in 0644 telt niet mee). Elke combinatie van instellingen correspondeert met een bepaald nummer. Welke bestanden moet je beschermen en welke CHMOD-instellingen zijn goed? Een paar tips. De standaardpermissies voor bestanden staan op 644. Dat is een veilige waarde. Als je zelf een bestand wilt wijzigen, kun je de toegangsrechten tijdelijk veranderen in 775. Zodra je klaar bent, ga je terug naar 644. Configuratiebestanden (zoals configuration.php) zijn extra kwetsbaar, want ze bevatten gebruikersnaam en wachtwoord. Zorg ervoor dat de CHMOD-waarde van configuration.php is ingesteld op 644.

158 150 Basiscursus Joomla! 3 Voor mappen is 750 een veilige waarde. Maar sommige extensies willen toegang hebben tot bepaalde mappen; dan kan 750 resulteren in foutmeldingen. In dit geval stel je de toegangsrechten in op 755. Laat nooit toegangsrechten voor een bestand of map ingesteld op 777: dit maakt het voor iedereen mogelijk om het bestand te veranderen. A.5 Back-ups maken Wat voor voorzorgsmaatregelen je ook neemt, het is goed om altijd een backup klaar te hebben. Zo kun je bij eventuele problemen snel je website herstellen. Er zijn een paar extensies voor Joomla om het back-upproces te vereenvoudigen. Het populairst is Akeeba Backup. Deze gratis extensie maakt een back-up van alle benodigde bestanden (alle Joomla-bestanden en de inhoud van de data base) om de site te kunnen herstellen naar zijn originele staat. Het is trouwens ook mogelijk om met het back-upbestand de site terug te zetten naar een willekeurige locatie (dus niet alleen op de oorspronkelijke locatie). Een back-up maken Hoe installeer je Akeeba Backup en maak je een back-up? Ga naar Extensies > Extensiebeheer en zoek in de tab Installeren vanaf web naar Akeeba. De extensie Akeeba Backup is de eerste treffer. Selecteer die en klik op Install: Figuur A.3: Akeeba Backup Installeren vanuit de tab Installeren vanaf web Bevestig je keuze door op Installeren te klikken. De installatie verloopt volautomatisch.

159 A De site beveiligen 151 Ga naar Componenten > Akeeba Backup. Je komt in de administratieomgeving van Akeeba. Klik op de knop om de voorwaarden te accepteren, waarna Akeeba een paar tests uitvoert. Zodra dat klaar is, krijg je de melding dat je een back-up kunt maken: Figuur A.4: Akeeba Backup Is klaar voor een back-up Klik op de tab Backup Now en vervolgens op de knop Backup Now om een back-up te maken met de standaardinstellingen. De back-up start direct (zie figuur A.5). Figuur A.5: De back-up wordt gemaakt Tot slot krijg je de melding als de back-up klaar is. Klik op Manage Backups. Om het back-upbestand op je computer te bewaren, klik je op het back-upbestand (de knop Part 00) en klik op de knop Download.