CMS32 >CONTENT MANAGEMENT SYSTEMS ADDENDUM LEERJAAR 1 GRAFISCH LYCEUM ROTTERDAM 2014 SAMENSTELLER: PAUL KUYT
INHOUDSOPGAVE Inleiding... 3 Werkwijze en beoordeling... 4 Planning... 5 CMS Basics... 6 Soorten CMS... 7 Voor en nadelen... 8 Hoe moet je kiezen... 8 Opdracht 1 (2pt)... 8 De grote drie... 9 Keuze voor Wordpress... 10 Wordpress.com of Wordpress self-hosting... 10 Installatie webserver met wordpress... 11 De installatie, stap voor stap... 11 Sitesettings in Dreamweaver... 14 Het Wordpress Dashboard... 17 Basic... 17 Onderdelen dashboard:... 18 Opdracht 2 (1pt)... 18 Opdracht 3 (2pt)... 19 Content schrijven en organiseren... 21 Posts... 21 Pages... 22 Static homepage... 24 Opdracht 4 (2pt)... 24 Themes... 25 Standaard Theme... 25 Themes importeren... 25 Theme handmatig installeren... 26 Responsive themes... 27 Het theme aanpassen... 27 Vlakken... 28 Opdracht 5 (4pt)... 29 1
Plugins... 30 Een plugin installeren... 31 Opdracht 6 (2pt)... 34 Opdracht 7 (6pt)... 34 2
INLEIDING In deze module maak je kennis met het begrip content management systeem. Uit wikipedia: Een content-beheersysteem of contentmanagementsysteem is een softwaretoepassing, meestal een web-applicatie, die het mogelijk maakt dat mensen eenvoudig, zonder veel technische kennis, documenten en gegevens op internet kunnen publiceren. Wanneer je het voor de gebruiker van de website mogelijk maakt om de inhoud van de pagina te beïnvloeden kun je spreken van een CMS. In feite heb je dit al gedaan door in voorgaande modules gegevens met php voor een gebruiker beschikbaar te maken. Dus je hebt al een heel primitief cms gemaakt, misschien zonder het zelf te beseffen. Echter wanneer je het in het vakjargon hebt over de term CMS bedoelt men vrijwel altijd een applicatie waarmee je de inhoud van een site zelf kunt vormgeven en presenteren op het web. Nadat we eerst wat basiskennis over CMS-en hebben opgedaan gaan we in deze reader met Wordpress werken. Wordpress is een erg uitgebreid cms. Het is oorspronkelijk ontworpen als een blog toepassing, maar het aantal mogelijkheden om het aan te passen is groot genoeg om er ook andere applicaties mee te maken. 3
WERKWIJZE EN BEOORDELING CMS32 GRAFISCH LYCEUM ROTTERDAM Je krijgt tijdens deze lessen instructie, voorbeelden en opdrachten. Na een inleiding en een instructie maak je één of meerdere oefeningen of opdrachten. Het is echt heel belangrijk dat je actief met de lesstof omgaat en evt. voorbeelden nauwkeurig bestudeert en op zoek gaat naar antwoorden op het web. In de praktijk moet je zo nu en dan ook zelf zoeken naar oplossingen. Dat is heel normaal en hoort bij je vak. Met de opdrachten die je maakt verdien je punten. Opdrachten worden in deze reader als volgt gemarkeerd: Opdracht x ( pt) Deze reader bevat ook oefeningen, die zijn als volgt gemarkeerd: Oefening Oefeningen zijn voor jezelf om te oefenen, je verdient daar geen punten mee, maar sla ze niet over, want je hebt ze vaak nodig om een opdracht te kunnen maken. De beoordeling wordt gedaan door de opdrachten in de klas af te laten tekenen zodat je punten kunt verdienen. Iedere opdracht heeft een maximaal aantal punten, dat aantal staat bij de opdracht vermeld. De docent kan aan de hand van jouw werk besluiten hoeveel punten je toegekend krijgt. De bedoeling van deze module is dat je kennismaakt met CMS, met Wordpress in het bijzonder, dat je ermee kunt werken zodat je uiteindelijk kunt inschatten of bij een bepaald project eigen code of een kant-en-klaar cms de meest geschikte keuze is. Het maximaal aantal te behalen punten per opdracht zie je hieronder. Opd 1 Opd 2 Opd 3 Opd 4 Opd 5 Opd 6 Opd 7 2 pt 1 pt 2 pt 2 pt 4 pt 2 pt 6 pt Je score is: totaal aantal behaalde punten /? 4
PLANNING Week 1 CMS Basics, opdracht 1. Week 2 De grote drie, Wordpress installeren. Week 3 Wordpress dashboard, opdracht 2 en opdracht 3 Week 4 Content schrijven en organiseren, Themes, opdracht 4, opdracht 5 Week 5 Plugins, opdracht 6 Week 6 Opdracht 7 Week 7 5
CMS BASICS Het basisprincipe van ieder CMS is het volgende: Adminpanel Database De content (tekst, verwijzingen naar afbeeldingen etc.) zit in een database. Dit zorgt ervoor dat deze content op verschillende manieren in de site gebruikt kan worden. Daarnaast heeft ieder CMS een adminpanel, dat is een apart gedeelte van de site waar je de data van je site kunt managen. Je kunt er data toevoegen, verwijderen, afbeeldingen uploaden of bepalen waar en op welke manier je de content wilt publiceren. Deze admin is bereikbaar met een browser. Het framework van het cms zorgt ervoor dat de data op een georganiseerde manier gepubliceerd kan worden door middel van templates of themes. Adminpanel Database Output CMS Framework Sommige Cms systemen hebben kant en klare themes of templates, anderen doen meer een beroep op de gebruiker om deze templates zelf te maken. Een CMS zal ook altijd een site navigatie aanbrengen en ervoor zorgen dat je de content op een logische manier kunt ordenen. 6
SOORTEN CMS Er zijn erg veel CMS-en beschikbaar op internet. Het is niet de bedoeling om deze allemaal uit te leggen, maar het is misschien wel goed voor het totaalbeeld om er een paar meer te noemen dan alleen Wordpress of Joomla! Je kunt ze op de volgende manier categoriseren. Bedrijfs CMS: Misschien realiseer je het niet onmiddellijk maar de POLS applicatie en je cijferregistratie en je feedback op thema s zijn allemaal onderdeel van het GLR CMS. Daaronder vallen ook applicaties die niet webbased zijn maar wel dezelfde database als bron gebruiken. Portal CMS: Is een cms zonder een strikte focus op een bepaald soort toepassing. Deze cms zijn vrij algemeen in hun functionaliteit en bieden je de mogelijkheid om vanuit een algemene opzet je site op eigen manier te structureren. Voorbeelden daarvan zijn: Blogs: De primaire focus van dit soort cms is het publiceren van artikelen met tekst en afbeeldingen. Voorbeelden daarvan zijn: E-learning: Dit type CMS richt zich met name op gebruik in een onderwijsomgeving. Sommige hebben de mogelijkheid om toetsen te maken, leerplannen op te stellen etc. Voorbeelden daarvan zijn: E-commerce: Dit type cms richt zich met name op sites waarmee iets verkocht moet worden. Ze hebben bijvoorbeeld ingebouwde shopping-cart onderdelen en afreken modules beschikbaar. Voorbeelden daarvan zijn: Het spreekt voor zich dat een cms waar de focus op een bepaalde gebruikstoepassing zit ook voor andere doeleinden ingericht kan worden. Je kan van Joomla! Een prima leeromgeving maken en van wordpress een goede portal. De mogelijkheden om een cms uit te breiden met plugins zijn erg groot. De opzet van deze reader is je kennis te laten maken met het begrip CMS en met een CMS wat te gaan experimenteren zodat je het basisprincipe leert kennen, niet om je met ieder cms kennis te laten maken (zou ook niet kunnen, het zijn er echt teveel). Dit overzicht is dan ook bedoeld om je te laten zien dat er een groot aanbod is aan systemen. 7
VOOR EN NADELEN Er zijn voor- en nadelen aan het gebruik van een CMS. Het voordeel is dat je binnen heel korte tijd een site in de lucht kan helpen met hele behoorlijke functionaliteit. De beveiliging is op orde, je hebt meteen een uitgebreide admin, kortom een hele complete set. Dit kan heel kosten efficiënt zijn. Het nadeel kan zijn dat een cms als het ware een confectiepak is; je bent gebonden aan de mogelijkheden, sjablonen en plugins van het cms zelf. Om aan dat confectiepak te ontsnappen heb je toch wel wat kennis van html en css nodig en als je zelf functionaliteit wilt toevoegen ook nog een behoorlijke php kennis. Het duurt ook wel even voordat je een CMS goed begrijpt en er zo mee kan spelen dat je site precies dat is wat je wilt. Voordat je kiest voor een zelfbouw site of cms moet je goed in kaart hebben wat je wilt, nu en in de toekomst. HOE MOET JE KIEZEN Als je op zoek bent naar een geschikt CMS voor jouw website zul je merken dat op vrijwel iedere homepage van ieder cms systeem staat dat het veel functionaliteit heeft en heel gemakkelijk in gebruik is. Daarnaast zijn er verschillen tussen open-source en proprietary systems. (proprietary is wanneer een systeem met ondersteuning eigendom is van een firma, bijvoorbeeld microsoft). Wat het beste voor je is hangt af van wat je wilt bereiken. Er zijn wel vergelijkingssites op het web waar je meer informatie kunt vinden en (logisch) de verschillende cms met elkaar kunt vergelijken. Hier zijn er enkele: http://cmsmatrix.org http://php.opensourcecms.com Opdracht 1 (2pt) Case 1: De groenteboer op de hoek, heeft grootse plannen voor zijn zaak. Omdat er in de omgeving veel verzorgingstehuizen zijn en de inwoners daarvan slecht ter been wil hij een website opzetten waar mensen groente/fruitpakketten kunnen bestellen. Afrekenen, hoeft niet op de site, kan wel, maar aan de deur mag ook worden betaald. Hij heeft jou de opdracht gegeven om een site te maken waarmee dat allemaal kan. Jij hebt besloten hiervoor een cms te gebruiken. Maar welke kun je daar het beste voor kiezen? Kies 3 meest geschikte cms voor jouw doel. Onderbouw je keuze met behulp van bovenstaande sites. Case 2: Je wilt naast facebook en twitter zelf een social network site opzetten, maar helemaal vanaf de grond af programmeren is echt teveel werk en te moeilijk. Je wilt dat je gebruikers profielen kunnen opzetten, berichten kunnen posten etc. Zijn er ook CMS waarmee je een social network kunt opzetten en zo ja, welke zou jij kiezen? Onderbouw je antwoord. Per case een uitgebreide onderbouwing schrijven. Voor de docent: De opzet van deze opdracht is ervoor te zorgen dat de student op de vergelijkingssite ziet hoeveel aanbod er op de markt is en een grove schifting kan maken. Veel factoren spelen een rol: een heel belangrijke is ondersteuning met gebruikersfora, uitbreidingsmogelijkheden etc 8
DE GROTE DRIE Op dit moment zijn er drie CMS-en die het meest worden gebruikt. Dat zijn: Uit: hostingvergelijken.eu Joomla is een erg populair CMS onder zowel professionele webmasters als privé webmasters. In 2005 kwam de eerste versie Joomla 1.0 uit wat vervolgens binnen één jaar 2,5 miljoen keer is gedownload. Inmiddels is de open source software ruim 20 miljoen keer gedownload en zijn er meer dan 7.000 extensies beschikbaar. Joomla is ook erg geliefd voor het beheren van eenvoudige webshops. Uit: hostingvergelijken.eu Drupal is geheel open-source en daarom volledig gratis te gebruiken. In 2010 waren er ruim 7 miljoen websites die draaiden op Drupal, inmiddels zal dit weer iets zijn opgelopen. Drupal richt zich in tegenstelling tot WordPress en Joomla vooral op de meer gecompliceerde websites. Drupal is een uitgebreide variant op Joomla, er kan meer, veel meer. Maar deze functionaliteiten brengen ook moeilijkheden met zich mee. Uit: hostingvergelijken.eu De populairste CMS voor het beheren van websites is toch nog steeds WordPress. Volgens recent onderzoek wordt WordPress gebruikt op 14% van de 1 miljoen grootste websites ter wereld. Het populairste voorbeeld van WordPress is de website van CNN die geheel op WordPress is gebaseerd. Ondanks dat veel normale websites WordPress gebruiken is de software nog steeds gericht op bloggers. Websites worden dus nog steeds opgebouwd uit pages and posts. Dit kan soms bij een nietblog website lastig zijn. Het zijn CMS met een grote gebruikerscommunity, veel mogelijkheden, add ons of plug-ins. Bij veel providers krijg je een zgn. one click installatie aangeboden, zodat het heel eenvoudig is om je cms op te zetten. Onderstaand een screenshot uit een plesk-account: 9
KEUZE VOOR WORDPRESS Hoewel Wordpress aanvankelijk bedoeld is als blogging platform is het in de loop van de jaren uitgegroeid tot een uitgebreid CMS waarmee naar schatting 25 miljoen websites zijn gemaakt. Bij dit enorme aantal gebruikers vallen Drupal en Joomla! een beetje in het niet. Wordpress is zo groot geworden omdat het type sites wat je ermee kunt maken veel voorkomt: een eenvoudige presentatie-site. Wordpress heeft geen duidelijke technische voordelen ten opzichte van Drupal of Joomla!, maar het is wel gemakkelijk te installeren en biedt eenvoudige mogelijkheden om snel online te zijn. In deze module hebben we voor Wordpress gekozen omdat het een erg geschikt CMS is om mee te beginnen. De basis van Wordpress is redelijk eenvoudig. Er zijn veel themes beschikbaar, waarmee je het uiterlijk van de site gemakkelijk kunt veranderen, ook al heb je reeds content toegevoegd. Er zijn veel plug-ins waarmee je de functionaliteit van Wordpress kunt uitbreiden. Je hebt veel keuze bij het bepalen wie-wat-mag op de site (5 gebruikersrollen). Er is een grote online community waar je terecht kunt om een antwoord op je vragen te vinden. Wanneer je straks met deze module klaar bent begrijp je niet alleen Wordpress een stuk beter, maar zijn andere CMS en een stuk eenvoudiger te begrijpen omdat ze allemaal vanuit eenzelfde basis werken. (zie pag. 5). WORDPRESS.COM OF WORDPRESS SELF-HOSTING Je kunt op 2 manieren gebruik maken van Wordpress: In the cloud met Wordpress.com Zelf hosten op je eigen server In het geval dat je kiest voor Wordpress.com maak je gebruik van een internetdienst die je in staat stelt om online je website samen te stellen en te publiceren. Voordelen daarvan zijn dat je niet je eigen provider hoeft te regelen, je minder kwetsbaar bent voor storingen, want het hosten wordt voor je geregeld in the cloud. Mogelijk nadeel is dat je niet alles mag wat je maar wilt, geen plugins gebruiken, beperkt aantal thema s etc.b beperkte functionaliteit Wanneer je Wordpress zelf host ben je veel vrijer, maar heb je ook meer zorgen als er iets fout gaat. Voor deze module hebben we gekozen voor selfhosting omdat je daardoor beter leert hoe Wordpress in elkaar steekt en je zoveel mogelijk kunt ontdekken wat je ermee kunt doen. Wil je meer weten over Wordpress.com? Ga naar http://wordpress.com. 10
INSTALLATIE WEBSERVER MET WORDPRESS Voordat je met Wordpress kunt werken moet je het installeren. Dat doe je op de glr-imd.nl webserver. Daar heb je al een account, en zo niet vraag dan je docent er 1 voor je te maken. DE INSTALLATIE, STAP VOOR STAP Je kan altijd Wordpress downloaden en zelf installeren door de nodige files te uploaden, maar vaak bieden providers een install aan. Zo is dat ook voor het glr-imd.nl domein. Met behulp van Cpanel kun je een installer voor Wordpress aan het werk zetten. Dat doe je met de volgende stappen: Log in bij Cpanel en ga naar de sectie Software/Services. Kies "Site Software". Klik op Wordpress. Formulier vervolgens invullen: (alleen User, Pass en je glr-mail, laat de rest ongewijzigd). 11
Kies dan "Installeren". Belangrijk is wel dat er nog een database aangemaakt kan worden. In je glr-imd account heb je rechten om 2 databases te maken. Als je er al twee hebt, dan moet je er 1 deleten. Als alles goed gaat is dit het resultaat: De bovenste link leidt naar je wordpress installatie. 12
Je komt op de Wordpress basispagina. Als je als beheerder van je Wordpress CMS content wilt veranderen dan doe je dat via de admin inlog. Ga naar http://ustudentnummer.glr-imd.nl/wordpress/wp-admin. Daar kun je inloggen met de User en Pass die je bij de installatie hebt ingevuld. Deze brengt je naar het Wordpress Dashboard. Hier komen we in een volgend hoofdstuk op terug. 13
SITESETTINGS IN DREAMWEAVER CMS32 GRAFISCH LYCEUM ROTTERDAM Je zou in principe best zonder dreamweaver aan de slag kunnen, want via het Dashboard heb je erg veel mogelijkheden om je wordpress site vorm te geven. Toch gaan we ervoor zorgen dat je ook kunt zien welke files er bij de install op de glr-imd server terecht zijn gekomen. Sommige van die files gaan we later ook rechtstreeks bewerken (zonder dashboard). Maak eerst op je netwerkschijf een map cms32 aan. Maak daarna in Dreamweaver de volgende site aan: Local: 14
Servers: Als je deze instellingen hebt overgenomen en opgeslagen dan zie je in het rechterpanel van Dreamweaver de inhoud van de cms32 map. (die is dus nu leeg) en aan de linkerkant (server) zie je dat er een map wordpress is bijgekomen. Daarin staan alle files die tijdens de installatie op de server zijn gezet. Exporteer deze site-instelling, zodat je hem bij een volgende les gemakkelijk weer kan instellen. Op het moment dat we direct in de files van Wordpress gaan sleutelen hebben we deze instellingen weer nodig. Nu kijken we eerst even verder naar het Dashboard van Wordpress. 15
16
HET WORDPRESS DASHBOARD CMS32 GRAFISCH LYCEUM ROTTERDAM Wordpress is in de eerste instantie ontworpen als blog applicatie. Een blog bestaat uit tekstberichten/beelditems die een regelmatig verslag doen van wat de blogger bezighoudt. In het Dashboard kan de blogger de site naar wens aanpassen: o.a. berichten toevoegen, aanpassen of verwijderen, het uiterlijk van de site veranderen en zelfs gebruikersrechten instellen. Wordpress wordt inmiddels allang niet meer alleen maar gebruikt om te bloggen. Je kunt in het dashboard zoveel dingen veranderen dat de site er niet meer als blogger-applicatie uitziet maar als bijvoorbeeld een webshop of een portfoliosite. In dit hoofdstuk verkennen we globaal het dashboard en we pikken er een paar belangrijke details uit. BASIC Een wordpress installatie heeft 2 hoofdonderdelen: De site zelf, zoals je bezoekers de site zien, ook wel de front-end genoemd. Het adminpanel of Dashboard, ook wel de back-end genoemd Je kunt gemakkelijk heen en weer switchen tussen beide weergaves met: Naar de siteweergave En als je in de site bent met: 17
ONDERDELEN DASHBOARD: Dit is het totale dashboard: Er zijn in het Dashboard twee belangrijke onderdelen: CMS32 GRAFISCH LYCEUM ROTTERDAM Het Menu De Wordpress toolbar Het menu is als het ware de ruggengraat van het Dashboard, hier bevinden zich de belangrijkste opties om Wordpress te besturen. De Wordpress toolbar is een snelmenu waarin je veel voorkomende acties gemakkelijk in kunt terugvinden. Met deze toolbar kun je bijvoorbeeld op een heel gemakkelijke manier bijvoorbeeld een item aan je blog toevoegen. Als je kiest voor: New ->post kun je een blog-item snel toevoegen. Voor nu is het handig om een nieuwe user toe te voegen. De reden dat we dat doen is dat bij iedere post de naam van de user komt te staan en dan is de naam admin niet mooi. Je kunt echter de admin niet zomaar verwijderen of een nieuwe naam geven. Je kunt wel een nieuwe gebruiker maken en deze de administrator rol geven. Dat ga je in de volgende opdracht doen. Opdracht 2 (1pt) Maak een nieuwe gebruiker en geef deze de administrator rol. Log admin uit en log in met de gegevens van de nieuwe gebruiker. Maak vervolgens 2 berichten. Publiceer de ene en bewaar de andere. Ga in de database op zoek waar de berichten worden opgeslagen. Welke tabel staat je tekst? Waar in je database wordt gemarkeerd of een bericht wel of niet gepubliceerd wordt? Waar zijn de gebruikers opgeslagen? (maak screenshots). Het hele idee van een Content Management Systeem (dat geldt niet alleen voor Wordpress, maar ook voor alle cms-en) is dat de inhoud in de tabellen van de database zit en dat in samenwerking met de html/css/php/javascript code van het cms deze inhoud op een bepaalde 18
manier wordt getoond. Onthoudt: data in de database, opmaak van content in de code (de css voornamelijk) van het cms. Beide onderdelen kun je aanpassen met het dashboard. We lopen nu het menu even door. In het bovenste gedeelte van het menu kun je veel zaken regelen die met de inhoud van je site te maken hebben. Posts: Hier maak je berichten en kun je ze evt. indelen in categorieën of tags geven zodat het bericht gemakkelijker op trefwoord te zoeken is. Media: Hier kun je afbeeldingen, geluid, video of swf files toevoegen, zodat je die kunt koppelen aan een bericht. Pages: Hier beheer je de pagina's van je Wordpress site. Iedere nieuwe pagina wordt een menu-item. Comments: Hier beheer je de reacties van je bezoekers. (als je hebt toegestaan dat bezoekers reacties mogen Het onderste kun je de instellingen van de WP site bepalen. Appearance: Hier beheer je het uiterlijk van je site, bepaal je het basissjabloon (thema) van waaruit je werkt en pas je het naar wens aan. Plugins: Wordpress biedt per sjabloon een aantal standaardmogelijkheden. Als je meer functies wilt zul je een plugin moeten downloaden en deze inzetten. Users: Hier maak je gebruikers aan en bepaal je wat hun rechten zijn.. Tools: Hier staan een aantal tools ter beschikking en kun je er meer importeren als je dat wilt. Settings: Bij instellingen kun je je basisinstellingen beheren. Bijvoorbeeld hoeveel berichten per pagina kunnen worden getoond, maar ook je mailadres wat je eerder hebt opgegeven Zoals je merkt is de uitleg van de menu's nogal globaal. Het is dan ook de bedoeling om de structuur van het menu te verduidelijken. De details van ieder menu-onderdeel kun je opvragen door steeds de "help" button (rechts boven in beeld) te gebruiken. Opdracht 3 (2pt) In deze opdracht moet je op zoek naar bepaalde instellingen. Maak een document met je antwoorden en zorg ervoor dat je de dingen die je vindt ook kunt laten zien in Wordpress. Welke soorten gebruikers kun je aanmaken in Wordpress en hoe verschillen ze precies van elkaar? Schrijf dat op maar laat het ook zien in je Wordpress site. Hoe zorg je ervoor dat er geen commentaar kan worden gegeven op je posts? 19
Hoe zorg je ervoor dat het wordpress menu niet op de site ( de front-end dus ) te zien is? (ook niet wanneer je bent ingelogd). Wat zijn widgets en hoe kun je ze toepassen? 20
CONTENT SCHRIJVEN EN ORGANISEREN Wanneer je een schone installatie van Wordpress hebt is deze nogal leeg. In dit hoofdstuk kijken we welke soort content je in de site kunt plaatsen en hoe je deze kunt organiseren. POSTS De content die je aan je site zult kunnen toevoegen bestaat uit tekst en afbeeldingen. In posts kun je tekst en afbeeldingen toevoegen en deze aan categorieën linken, zodat posts die qua inhoud bepaalde overeenkomsten hebben gemakkelijk bij elkaar te verzamelen zijn. In dit voorbeeld zie je hoe een artikel kan worden geplaatst en hoe pagina s kunnen worden toegevoegd. Bij Posts Add New kun je een artikel plaatsen. Stel dat je een sportblog onderhoudt dan zouden je posts allemaal over sport kunnen gaan. Er is in Wordpress steeds maar 1 page met posts. (wordpress blijft een blog-toepassing). Standaard worden de posts aan de Homepage toegevoegd. Bij het maken van een artikel gebruik je een tekst-editor en met de knop add-media kun je nog afbeeldingen toevoegen. Nadat je het artikel hebt gemaakt kun je nog kiezen of je het al wilt publiceren of niet, je kunt er categorieën aan vastmaken om het item in een groep onder te brengen of tags invullen. Tags zijn trefwoorden waarmee het item opgezocht kan worden. Het is het beste om maar eens te experimenteren met deze editor. Zo krijg je het best een idee hoe het werkt. Wel moet je even oppassen met afbeeldingen, want die zul je moeten uploaden om in je mediaarchief te plaatsen. Het kan zijn dat dat niet vanzelf gaat. De map waarin alle eigen afbeeldingen worden opgeslagen bestaat bij een nieuwe installatie van Wordpress nog niet. Wordpress zal die map voor je willen maken, maar heeft daar de juiste permissies voor nodig. Controleer of dat zo is als volgt: 21
Het schrijfbaar maken van de map wp-content gaat als volgt: Vink als volgt aan Kies nog een paar sport items van een nieuwssite en plaats die in je blog. Behalve afbeeldingen kun je ook andere media zoals video of sound in je post toevoegen. Je hoeft niet alle content te downloaden. Je kan ook met de url van de afbeelding werken. Een mooi voorbeeld daarvan in het verwerken van een youtube video in je site. Dit doe je door de url in de teksteditor te plakken, wel moet je dan de Text-tab aanklikken. PAGES Pages worden in Worpress beschouwd als enkelvoudige posts. Als je een nieuwe page maakt dan voeg je in het hoofdmenu een item toe. In dat item kun je tekst en afbeeldingen plaatsen. Het verschil met een post is dat je niet kunt categoriseren of tags kunt toevoegen. Een page staat op zichzelf. Een page kun je ook een apart template geven zodat deze er anders uitziet dan de post pagina. Stel dat je een toernooikalender wilt maken in je site, dan is de page een beter idee dan de post. Een page kun je ook gemakkelijk subpages geven, zodat een submenu ontstaat. Kies Pages add page 22
Resulteert in: Je kan de pagina aanpassen door een ander sjabloon in te stellen: en leave a reply uit te zetten: Klik op Screen Options en vink discussion aan. (Screen Options zal steeds opties laten zien die op pagina betrekking hebben). 23
Als je discussion aangevinkt hebt verschijnt er onder in de Page editor een sectie waarin je discussie items op je page kunt uitzetten. Zet beide opties uit. Controleer je pagina. Als je een submenu wilt maken (Je hebt bijvoorbeeld een toernooi agenda voor voetbal, maar ook voor tennis) dan kun je dat doen door nieuwe pages te maken en deze als child in te stellen van de pagina Toernooien. (zie afbeelding hieronder) STATIC HOMEPAGE Wanneer je Wordpress wilt gebruiken om je site mee te maken, maar je wilt niet perse een blog op je site hebben, dan kun je gebruik maken van de optie static home page. Dit betekent dat je vanaf dat moment geen posts meer toevoegt maar alleen werkt met Pages. Die optie vindt je in het Dashboard menu bij: Settings Reading. Opdracht 4 (2pt) Maak het voorbeeld van dit hoofdstuk af (het is nu wel erg leeg). Zorg ervoor dat je blog op de homepage steeds nieuws bevat, vergezeld van foto s en video. Dat er een About pagina is waar je iets verteld over je site en dat er agenda s zijn voor voetbal, tennis en hockey (De data mag je zelf verzinnen). Pas het menu van de pagina zo aan dat er een menu-item bijkomt dat linkt naar een NOS sportpagina. (gebruik Appearance Menus). 24
THEMES Uiteindelijk willen we onze Wordpress site er zo uit laten zien als we zelf willen. Daarvoor heb je wel wat extra tekst en uitleg nodig. Deze paragraaf verteld je wat Themes zijn en wat je ermee kunt. STANDAARD THEME Als je Wordpress installeert krijg je een bepaald uiterlijk van de interface kado. Dat uiterlijk wordt bepaald door het thema dat staat ingesteld. Bij een standaard installatie van Wordpress 3.5 is dat het Thema "Twenty twelve". (het bijzondere van dit thema is dat het volledig responsive is, verklein het venster maar eens) Een theme geeft een bepaald uiterlijk aan je site; het bepaalt bijvoorbeeld welke onderdelen (widgets) beschikbaar zijn, bepaalt de vlakindeling, basiskleuren etc. Het standaard sjabloon vind je in Wordpress door in het menu Weergave-> Thema's te kiezen. Zoals je ziet krijg je er 2 meegeleverd: behalve "Twenty twelve" is er ook nog "Twentyeleven". Als je op de afbeelding van het thema klikt krijg je een voorvertoning waarin je kunt zien hoe je Wordpress site eruit zou zien met dat thema. Met de knop "Opslaan & Publiceren" kun je het thema installeren. THEMES IMPORTEREN Je kan heel gemakkelijk een ander thema installeren door er 1 te downloaden. Klik op de tab Thema's installeren. Hier kun je op zoek gaan naar een thema dat bij je plannen past en deze installeren. Het voordeel van deze methode is dat de thema's die je hier kunt downloaden uit 25
de WordPress.org thema directory. Thema's in de WordPress.org thema directory zijn vormgegeven, ontwikkeld en goedgekeurd voor gebruik in Wordpress. (als het installeren van een thema niet lukt geef de themes map dan schrijfrechten, zie pag 19). Oefening Download tenminste 3 verschillende themes. En installeer deze. Er zijn echter veel meer plaatsen waar je thema's kunt krijgen. Ook hier zijn ze soms gratis of moet je er een bescheiden bedrag voor betalen. Maar voordat je dat doet moet je eerst weten wat een thema eigenlijk is en waar deze in je Wordpress directory op de webserver wordt geplaatst. Op je webserver staat een rootmap (httpdocs), waarin alle files die de webserver kan publiceren worden opgeslagen. Daar staat ook de map wordpress en wat verderop in de mappenstructuur zie je een map themes met de eerder genoemde twentyeleven en twentytwelve themes. Een theme bestaat uit php files, css files, javascript files, images etc. Al deze onderdelen bij elkaar vormen een thema. Als je een theme download krijg je altijd een thememap met de naam van het theme. Deze map kun je bijplaatsen in de themes map. Wordpress herkent het theme en laat het in de themekiezer zien. THEME HANDMATIG INSTALLEREN Er zijn op het web talloze themes te krijgen. Het is wel verstandig om ze uit de Wordpress theme directory te downloaden, maar soms staat het theme wat je wilt daar niet in. Soms kun je een.zip file van een andere site downloaden. Als dat zo is kun je zo n zip file ook naar je site uploaden met: Je hoeft de zip file niet vooraf uit te pakken, dat doet Wordpress voor je. Je kan ook zonder Wordpress themes aan je Wordpress site toevoegen. Door een thema te downloaden van een van de vele Wordpress thema-sites. Zo n thema is een map met de nodige files. Wanneer je die map (met behulp van Dreamweaver, uitgepakt) upload in de thema map op de server zul je bij Dashboard Appearance Themes het thema er vanzelf bij zien verschijnen. Wees je ervan bewust dat themes die je van buiten de Worpress directory haalt een zeker risico met zich meebrengen qua beveiliging. Je haalt immers php bestanden binnen. Controleer de leverancier (zoek even op internet naar reviews). Daarmee sluit je het risico voor een belangrijk deel uit. 26
Oefening Download 2 gratis themes en probeer ze op bovenstaande manier te installeren. RESPONSIVE THEMES Wanneer je een site maakt moet je rekening houden met het feit dat je site allang niet meer alleen op een desktop computer wordt bekeken. Het gebruik van mobile devices voor het bekijken van websites neemt snel toe. Er zijn themes die zo ontworpen zijn dat ze voor diverse beeldschermformaten geschikt zijn. Zoek maar eens op responsive in de Theme directory. HET THEME AANPASSEN Het is heel logisch dat je een thema naar eigen smaak wilt aanpassen wanneer je het voor je site wilt gaan gebruiken. Daar zijn verschillende opties voor: Een heel belangrijke optie om in de eerste instantie door te lopen in de Customize link. Deze optie is in de nieuwere versies van Wordpress beschikbaar en geeft je de mogelijkheid om te experimenteren met aanpassingen zonder ze meteen te publiceren. Loop alle opties eens door. Het Twenty Eleven theme is op veel onderdelen gemakkelijk aan te passen. Kijk ook eens wat je kunt aanpassen als je een ander theme activeert. Heb je dezelfde opties? 27
VLAKKEN Misschien wil je meer aanpassen dan Wordpress in het dashboard mogelijk maakt. Als je dat wilt moet je iets van de standaardbouw van een theme begrijpen. Daarom zetten we eerst een aantal themes op een rijtje: Op zich zijn ze verschillend qua uiterlijk maar toch zijn er ook overeenkomsten aan te wijzen. Ze hebben allemaal een vrij forse header, een onderdeel waar de content in wordt getoond en een soort extra menu rechts van het content gedeelte. We zijn er nog 1 vergeten. Om precies te zijn heeft een standaard Wordpress theme 4 basic onderdelen. Behalve header, content en sidebar is er ook nog een footer in aanwezig. Die footer zie je wel heel gemakkelijk bij het twenty-eleven theme: 28
Het basisplan van een thema is dus: Het zal je niet verbazen dat deze vlakken gewoon divs zijn met een bepaalde naam. Opdracht 5 (4pt) Onderzoek: 1. Ga in de html van het thema Twenty-Twelve (gebruik de broncode in de browser) op zoek naar de vlakken(divs) waaruit deze is opgebouwd. Maak daarvan een vlakkenschets en vermeld de id,s van deze vlakken. Geef de 4 bovengenoemde vlakken een duidelijke achtergrondkleur geeft. Daarvoor moet je op zoek naar de juiste css file. Dat kun je doen via het dashboard: Appearance - > editor of je kan er in Dreamweaver naar op zoek gaan. Je kunt ook de element inspector van de browser gebruiken. In chrome kun je die vinden door rechts te klikken in de page: 2. Download een ander thema uit de Wordpress themes Directory, installeer deze in Wordpress en maak daarvan eveneens een vlakkenschets met namen. Noteer vervolgens de overeenkomsten en verschillen. Je hebt nu een aardige basiskennis van themes. In een volgend hoofdstuk ga je er een wat grotere opdracht mee maken. Eerst gaan we de functionaliteit nog wat uitbreiden met plugins. 29
PLUGINS Naast thema s om je site een ander uiterlijk te geven zijn er ook mogelijkheden om de functionaliteit van je site uit te breiden. Dit is bij ieder CMS mogelijk. Er zijn honderden plug-ins beschikbaar, soms zijn ze gratis, soms moet je ervoor betalen. Plugins kunnen in principe door iedereen ontwikkelt worden. Het zijn vrijwel altijd php files. Nadat een plugin is ontwikkelt kan deze onder voorwaarden worden toegevoegd aan de Wordpress Plugin directory. Wat dat betreft heeft de Wordpress Plugin directory veel overeenkomsten met de appstore van Apple. In je Wordpress omgeving kun je plugins downloaden en direct installeren vanuit die Plugin directory. Er zijn duizenden plugins. Sommige zijn ontworpen om je site gemakkelijk te backuppen, anderen om ervoor te zorgen dat spam replies op je posts worden tegengegaan, weer anderen maken je site zoekmachine vriendelijk en weer anderen zijn gewoon een grapje. Het is onmogelijk om alle plugins te bekijken, maar in dit hoofdstuk vind je een voorbeeld van het installeren van een plugin en waar je op moet letten. We gaan een contactform-plugin installeren. Wanneer je in het dashboard kiest voor Plugins zie je dat er standaard al 2 met de installatie van Wordpress zijn meegeleverd. Akismet is een plugin die spam tegenhoudt wanneer je je bezoekers replies laat geven op je posts. Hello Dolly is een grapje, deze plugin zorgt ervoor dat er steeds een zin uit het liedje Hello Dolly at random in je beeld komt. Je hoeft ze niet meteen te gebruiken, maar wat je misschien wel al meteen opvalt is dat er bij iedere plugin een Visit Plugin site beschikbaar is. 30
De meeste plugins hebben wel even wat uitleg nodig voordat je ze gaat gebruiken, je moet tenslotte weten wat je van ze mag verwachten. Ga je bijvoorbeeld naar de site van akismet, dan kun je daar niet alleen lezen wat de plugin doet, maar ook dat deze niet gratis is en dat je een zgn. API key moet downloaden. Zoals je ziet biedt deze site veel informatie over de plugin, het is als het ware de gebruiksaanwijzing. EEN PLUGIN INSTALLEREN Zoals aangekondigd gaan we een contact form installeren. Kies Add new en vul in de searchbox de term contact form 7 in. Dit is een erg overzichtelijke plugin. Wanneer je de plugin gevonden hebt in de lijst die tevoorschijn komt klik je op install. Wordpress zal je vragen om je ftp gegevens. Vul deze in. (je host is je webadres). Als Contact form 7 is gedownload activeer je deze nog even niet. Eerst keer je terug naar het overzicht van de plugins. 31
Daar vind je de plug in. Ga eerst even kijken op de plugin site. Daar vind je oa een heel menu waar je alles wat je wilt weten over deze plugin kunt vinden. Je kan ook de plugin vanaf deze site downloaden en de file daarna uploaden naar je Wordpress site. (Je hoeft dus niet altijd via Wordpress te werken, maar het is meestal wel het gemakkelijkst.) Klik nu bij de plugin op activate. De plugin installeert zich en als dat klaar is zie je meteen een nieuw menu-item in je dashboard verschijnen. Als je dit menu-item aanklikt zie je dat er al een standaard contactform (Contact form 1) voor je klaar staat. Klik je op edit dan zie je hoe het contactformulier is opgebouwd. In dit contactformulier bevinden zich een veld om je naam in te vullen, een email veld, een textarea om wat meer tekst in te kunnen vullen en een submit knop. 32
Wil je meer velden? Kies dan Generate Tag om je formulier uit te breiden. Vergeet ook niet om de rest van de pagina te bekijken en aan te vullen indien nodg. Op deze pagina maak je je formulier. Als je je formulier ook echt op de site wilt krijgen moet je de link die bruin gearceerd bovenaan het formulier staat in de page plaatsen. Maak een nieuwe page, noem die contact en vul die link dan in. En publish. Het resultaat: Probeer je contactformulier uit. 33
Opdracht 6 (2pt) CMS32 GRAFISCH LYCEUM ROTTERDAM Zoek 1 plugin die je helpt om gemakkelijk een backup van je site te maken en de backup naar je toe te mailen. Zoek 1 plugin die je helpt om je site responsive te maken. Zoek 1 plugin die het mogelijk maakt om php in je posts toe te voegen. Zoek vervolgens nog 1 plugin die je wel nuttig lijkt en installeer deze. Laat ze werkend aan de docent zien. Opdracht 7 (6pt) Dreams is de titel van de volgende opdracht. Iedereen heeft dromen over de toekomst, wat je wilt worden, wat je wilt zijn, wat je beslist niet wilt zijn. Je moet daar met Wordpress een site voor maken. Je moet echter niet meteen met Wordpress starten, maar eerst een vlakkenschets en een eenvoudig functioneel ontwerp maken van die website. De uitdaging van deze opdracht is of het lukt om met Wordpress dat te maken wat je hebt ontworpen. Je moet dus vanuit je ontwerp werken. Bespreek indien nodig je ontwerp met de docent als je twijfelt of hetgeen je wilt haalbaar is. Het uiteindelijk product moet zijn een werkende site. 34