Voor je ligt het handboek WordPress Digital Class. Een onderdeel van de methode WordPress Digital Class. Deze methode is ontwikkeld in het kader van ons afstuderen aan de opleiding Mediavormgeving Grafisch en Interactief aan ROC A12 te Ede. Eind november 2014 zijn wij, Ellen en ik, begonnen met brainstormen en nu eind februari 2015 kunnen wij zeggen dat er een volledige methode ligt waar docenten en studenten mee aan het werk kunnen. Deze methode is ontwikkeld in opdracht van Henk Jansen, docent mediavormgeving bij ROC A12. Zijn vraag was of wij een lespakket konden ontwikkelen voor de lessen WordPress. Samen met hem zijn wij aan het brainstormen geweest over de naam en de op te leveren producten. Daarom willen wij hem hierin bedanken. Wij hopen dat deze methode bijdraagt aan de lessen WordPress voor de studenten van de opleiding Mediavormgeving. Daarnaast willen wij Ricardo Willemse bedanken voor het testen van de methode, naast Ricardo Willemse willen wij ook studenten van leerjaar 1 bedanken voor het bekijken van de video tutorials en beoordelen of deze goed genoeg zijn voor in de methode. Erik-Jan Sytsma willen wij bedanken voor het maken van de introductie voor de video’s. Als laatste willen we de overige docenten van het team mediavormgeving bedanken voor de hulp die zij hebben geboden tijdens het proces. Veel plezier met het leren van WordPress. Angela Diks 18 februari 2015
3
INHOUDSOPGAVE
1:
AAN DE SLAG MET WORDPRESS 8
Aan de slag 9 Wat is WordPress 9 CMS 9 Front-end 12 Back-end 12 Samenvatting 12
2:
WORDPRESS.COM 14 Aan de slag 15 Aanmaken van de website 15 Back-end 20 Samenvatting 22
3:
XAMPP OF MAMP 24
4:
WORDPRESS 30
5:
DASHBOARD 34
Aan de slag 25 Wat is XAMPP (Windows & linux) 25 Installatie XAMPP 25 Gebruik van XAMPP 26 Wat is MAMP (MAC) 27 Installatie MAMP 27 Gebruik van MAMP 28 Samenvatting 29
Aan de slag 31 Downloaden 31 XAMPP/MAMP en WordPress 32 WordPress installatie 32 Samenvatting 32 Aan de slag 35 Dashboard en Berichten 35 Media en Pagina’s 35 Reacties en Weergave 35 Plugins en Gebruikers 36 Extra en Instellingen 36 Samenvatting 36
4
INHOUDSOPGAVE
6:
HANDIGE PLUGINS 38
7:
HTML 42
8:
CSS 46
9:
THEMA OMBOUWEN 54
Aan de slag 39 Google Analytics 39 SEO 39 Anti Spam 40 Contact formulieren 40 Social Media 40 Samenvatting 40 Aan de slag 43 Wat is HTML 43 Wat is er nieuw in HTML 5 44 Tabellen aanmaken met HTML 44 ID & Class 45 W3schools 45 Samenvatting 45
Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3schools Samenvatting Aan de slag Child theme Bewerker Style.css Header.php Footer.php Index.php Samenvatting
60 Aan de slag 61 Wat is Adobe Dreamweaver 61 Verschil Adobe Dreamweaver CC en oudere versies 61 30 dagen proefversie 62 Sites beheren 63 Element inspecteren 63 Alternatief voor Adobe Dreamweaver 64 Samenvatting 64
11: VAN LOKAAL NAAR ONLINE 66
Aan de slag Domeinnaam Web hosting FTP gegevens FTP programma’s Database exporteren Samenvatting
Lesoverzicht: • Aan de slag • Wat is WordPress • CMS • Front-end • Back-end • Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les weet je wat WordPress is en kun je benoemen wat het verschil is tussen de front-end en de back-end.
8
AAN DE SLAG MET WORDPRESS
Aan de slag:
Je wil graag een website maken, voor jezelf, je eigen bedrijf, voor een klant of voor iemand anders. Alleen je hebt niet zo veel verstand van al die moeilijke HTML codes, daarom ben je bij WordPress terecht gekomen. Maar ja hoe werkt dat dan? In dit Wordpress handboek leer je eerst wat WordPress is, zodra dit duidelijk is gaan we verder in de stof duiken en aan het einde van deze 11 lessen heb je je eigen WordPress website gemaakt.
Wat is WordPress
Voordat je aan de slag gaat met WordPress is het zeker handig om te weten wat WordPress nu eigenlijk is. In 2003 is WordPress gestart met weinig code om het publiceren van teksten op het internet gemakkelijker te maken. De eerste gebruikers waren webloggers, en in die tijd werd WordPress dan ook voornamelijk gebruikt om blogs te maken. De laatste paar jaar is Wordpress uitgegroeid tot één van de grootste open source projecten op het internet. Dat WordPress open source is, houdt in dat er honderden mensen over de wereld bezig zijn met de ontwikkeling van WordPress. Iedereen is daarom vrij om het te gebruiken, of het nu een persoonlijke website is of een website met commerciële doeleinden. WordPress is wereldwijd het meest gebruikte CMS, met behulp van WordPress of een ander Content Management Systeem is het mogelijk om zelf de website te beheren, daarnaast is het mogelijk om met behulp van plugins de functionaliteit van de website te vergroten. Als je zelf de website zou schrijven in programmeertaal, dan zou je in plaats van de plugins gebruik maken van de programmeertaal PHP en Javascript/jQuery.
CMS
Een content management systeem is een (software) toepassing die het mogelijk maakt voor mensen om op een relatief eenvoudige wijze, zonder veel technische kennis, een internet website te beheren. Met een CMS kan een gebruiker zelf, zonder hulp van een webdesigner, teksten aanpassen, pagina’s toevoegen en/of afbeeldingen plaatsen op de website. Een CMS is vooral geschikt voor websites die regelmatig geactualiseerd worden, zoals nieuwssites en weblogs.
9
AAN DE SLAG MET WORDPRESS
CMS vergelijking
Zoals eerder is aangegeven is WordPress een CMS, maar WordPress is niet de enige die je kunt gebruiken. Er zijn er veel beschikbaar, maar de drie bekendste zijn WordPress, Joomla en Drupal. Voor je een keuze maakt voor een CMS, moet je jezelf afvragen welke functionaliteit je nodig hebt.
Joomla
Joomla is de jongste CMS van de drie, het is opgezet in 2005 en ondertussen is het al meer dan 30 miljoen keer gedownload. Joomla is voornamelijk populair in Nederland en België. Dit CMS wordt veel gebruikt in het MKB (Midden Klein Bedrijf) en KMO (Kleine of Middelgrote Onderneming) en is gebruiksvriendelijk. Voor Joomla zijn er bijna 9.000 uitbreidingen beschikbaar. Hierbij kun je denken aan extensies, componenten en plugins. Deze zijn niet allen gratis, voor bepaalde uitbreidingen zal betaald moeten worden. Voordelen: • Veel modules, plugins en thema’s voor extra functionaliteit en uiterlijke aanpassingen • Ook uit te breiden met webshop functionaliteit • Goede navigatie module die grote hoeveelheden content toegankelijk maakt Nadelen: • Back-end niet erg gebruiksvriendelijk • Continu updates i.v.m. veiligheid
WordPress
WordPress is van oorsprong een blog systeem, zo is het in 2003 dan ook opgezet. Ondertussen is het al meer dan 140 miljoen keer gedownload en is het daarmee de meest populaire CMS. Zijn populariteit heeft WordPress voornamelijk te danken aan het feit dat het goed scoort in Google. Er zijn bijna 35.000 plugins beschikbaar en het systeem is erg gebruiksvriendelijk voor de gebruiker. Voordelen: • Zeer gebruiksvriendelijk bij het beheren en aanpassen van de website • Veel plugins en thema’s voor extra functionaliteit en uiterlijke aanpassingen • Grote community voor vraag en antwoord • Website beheren zonder technische kennis Nadelen: • Geen standaard ondersteuning voor meerdere talen • Beperkte rechtenbeheer van gebruikersaccounts
10
AAN DE SLAG MET WORDPRESS
Drupal
Ook Drupal is begonnen als blog systeem, maar dit is al in 2001 opgezet. In de loop der jaren is ook Drupal gegroeid naar CMS. Het is de laatste jaren in opkomst met nu iets meer dan 15 miljoen downloads, maar nog niet zo populair als Joomla en WordPress. Dit komt omdat Drupal technischer en complexer is. Met Drupal is het mogelijk om meerdere sites vanuit één systeem te bedienen. Qua bediening is het goed te gebruiken door de eindgebruiker, in Nederland is er alleen een beperkte professionele ondersteuning. Voordelen: • Zeer veel features zijn een standaard onderdeel • Volledig schaalbaar systeem • Maak gebruikersaccounts aan voor het bewerken en beheren van meerdere sites Nadelen: • Complex in gebruik
Welk CMS is het beste?
Om deze vraag te kunnen beantwoorden, zul je eerst je wensen en eisen duidelijk moeten hebben. WordPress is het makkelijkst in gebruik, daarna Joomla en als derde Drupal. Maar kijk je naar wat je met het systeem kan, dan zal Drupal bovenaan staan gevolgd door Joomla en dan WordPress.
11
AAN DE SLAG MET WORDPRESS
Front-end
Ieder CMS heeft een front-end en een back-end. De front-end ontwikkeling is het programmeren van de “voorkant” van de website. De voorkant is datgene wat zichtbaar is voor de bezoeker van de website. Hierbij kun je denken aan de afbeeldingen, de lettertypen, het design etc. Voor het programmeren van de front-end wordt gebruik gemaakt van HTML, CSS en Javascript. Als we als voorbeeld een webshop nemen, dan is de front-end alles wat de klant ziet, de overzichten met producten, de winkelwagen en het bestelproces.
Back end
De back-end webdevelopment is net als de front-end onderdeel van het webdevelopment proces. De back-end ontwikkeling is het programmeren van de “achterkant” van de website. Dit is alles wat niet direct zichtbaar is voor de bezoeker van de website. Als we verder gaan met het voorbeeld uit de front-end. Dan was alles wat de klant ziet in de webshop de front-end en in de back-end staat alles wat de medewerkers van de webshop zien. Vaak is dit een uitgebreid dashboard waar medewerkers artikelen kunnen invoeren en wijzigen. Bij back-end ontwikkeling moet je er vooral rekening mee houden dat sommige mensen de hele dag achter je programma zitten. Daarom zijn snelheid en weinig stappen doorlopen erg belangrijk. De programmeertalen van de back-end zijn onder andere PHP en ASP.
Samenvatting:
Voordat je een website gaat maken is het belangrijk dat je bedenkt wat voor eisen je hebt voor de website qua gebruik e.d. daarna kun je een keuze maken voor het juiste Content Management Systeem. Daarnaast weet je nu dat als de front-end van de website genoemd wordt dat hier het deel bedoeld wordt dat je ziet en in de back-end stel je alles in.
12
13
LES 2: WORDPRESS.COM
Lesoverzicht: • Aan de slag • Aanmaken van de website • Back-end • Samenvatting Video’s: https://www.youtube.com/playlist?list=PLuCz7ifG5tJtRbktRHDnF-VjEbqtJmcbY Tijd: 1 uur en 45 minuten Doel: Aan het einde van deze les kun je een website aanmaken op wordpress.com en heb je een basis gelegd met het verkennen van de back-end.
14
WORDPRESS.COM
Aan de slag:
Je hebt besloten dat je een WordPress website wil maken, maar je hebt nog geen idee of WordPress echt iets voor je is. Daarom ga je het uitproberen, maar wel al online. Op de website van WordPress kun je een website aanmaken met .wordpress.com in de URL. Op deze manier kun je WordPress uitproberen zonder al een webhost aan te schaffen. Deze les zal voornamelijk uit stappenplannen bestaan. Dit stappenplan helpt je bij het aanmaken van de website op wordpress.com
Aanmaken van de website 1.
Ga naar de website:
http://wordpress.com
2.
en klik op de blauwe knop “Website maken”.
3.
Je wordt doorgestuurd naar de aanmeld website binnen WordPress.
4.
Vul je e-mail adres in, kies een gebruikersnaam, een wachtwoord en vul het blog adres in.
15
WORDPRESS.COM
5.
16
Scrol naar beneden, wat je nu gaat aanmaken is een WordPress.com Beginner account. Dit is een gratis account. In de tabel kun je zien wat er mogelijk is binnen dit account. Je kunt ook kiezen voor een Premium account of een Business account, maar deze zijn betaald. Ook dit vind je terug in de tabel incl. de bijbehorende acties die wel of niet mogelijk zijn binnen deze accounts.
WORDPRESS.COM
6.
Klik op de knop “Creëer Blog”. Nadat je op deze knop hebt geklikt word je door vier stappen geleid.
7.
De eerste stap die je krijgt is het instellen van je blog. Geef bij de Blogtitel de titel aan die je blog/website krijgt. Ook kun je een onderschrift toevoegen, hierin geef je kort aan waar de website over gaat. Mocht je een andere taal willen gebruiken, dan kun je ook dat hier instellen. Heb je dit allemaal ingevuld dan klik je op de knop “Volgende stap”.
8.
De tweede stap die WordPress je aanbiedt is het kiezen van een thema voor de website.
Er zijn veel verschillende thema’s beschikbaar, let er wel op er zitten ook betaalde thema’s tussen. Het thema staat nog niet vast, want het kan nog gewijzigd worden. Heb je het thema gekozen dat je wil hebben klik dan op de knop “Volgende stap”.
17
WORDPRESS.COM
9.
In de derde stap lees je meer over het thema dat je hebt gekozen. Klik op de knop “Volgende stap” om verder te gaan.
10.
De vierde en laatste stap is om verbinding met Facebook of Twitter te maken. Wil je graag dat je vrienden, familie of kennissen gelijk op de hoogte zijn wanneer je een blogpost online zet, dan kun je hier verbinding maken. Klik daarna weer op de knop “volgende stap”.
11.
Voor je verder gaat moet je eerst naar je mail, want als het goed is heb je nu twee mailtjes gehad van WordPress.
De eerste mail is om het e-mail adres te bevestigen, dat je in de eerste stap hebt ingevuld en in de tweede mail heet WordPress je welkom op je nieuwe site. Klik in de eerste mail op de knop “E-mailadres Bevestigen”. Nadat je op deze knop hebt gedrukt, is je account actief. Zonder deze bevestiging kun je niks veranderen in je WordPress website.
In de tweede mail kun je op twee links drukken. De eerste is “WordPress.com handleiding voor beginners”. Als je hier op klikt dan word je doorgestuurd naar een Engelstalige website, hier kun je meer informatie vinden over WordPress. De tweede link is “Inloggen”
18
WORDPRESS.COM
12.
Je wordt nu doorgestuurd naar WordPress. Klik op je WordPress website. Je komt nu in een scherm waar de statistieken staan van de website.
Als je op deze knop klikt, dan kom je bij je aangemaakte website (front-end).
Als je op deze knop klikt, dan kom je in het dashboard (back-end) van je aangemaakte website. Als je op deze knop klikt, dan kom je op de pagina waar je nu bent, de pagina met statistieken over de website. Als je op deze knop klikt, dan kun je een blogbericht aanmaken. Als je op deze knop klikt, dan kun je een nieuwe pagina aanmaken. Als je op deze knop klikt, dan kun je het thema wijzigen. Als je op deze knop klikt, dan kom je op de aanpassings pagina voor het thema. Als je op deze knop klikt, dan kom je op de pagina om een menu aan te maken of het bestaande menu aan te passen. Als je op deze knop klikt, dan kom je op de pagina waar je verbinding kunt maken met social media. Als je op deze knop klikt, dan kom je op de pagina waar je de gebruikers kunt zien en aanmaken. Als je op deze knop klikt, dan kun je de algemene instellingen wijzigen, maar ook de instellingen voor het schrijven en voor de reacties. Als je op deze knop klikt, dan kun je ervoor kiezen om je WordPress website te upgraden. 12.
Nu we dit weten en de website is aangemaakt wordt het tijd om naar de back-end van de website te kijken.
19
WORDPRESS.COM
Back-end
Om in de back-end van de website te komen ga je naar de volgende url: http://wordpressdigitalclass.wordpress.com/wp-admin. Alleen verander je wordpressdigitalclass naar de naam die je zelf hebt ingesteld. Vul je gebruikersnaam en wachtwoord in en klik op inloggen. De back-end van je WordPress website bestaat uit verschillende menu items. Ieder menu item zal hier kort uitgelegd worden.
Voor verdere informatie over de back-end kun je de video tutorials bekijken.
Nadat je bent ingelogd kom je altijd in het dashboard terecht. Bovenaan zie je een video. In deze video wordt kort uitgelegd wat de belangrijkste dingen zijn in de back-end.
Onder het menu item van winkel, kun je de WordPress website upgraden naar Premium of Zakelijk, maar je kunt ook een betaald thema kiezen.
Hier kun je niet alleen je berichten aanmaken en bewerken, maar ook categorieën aanmaken waar de berichten onder vallen en tags aanmaken.
Binnen je WordPress website kun je verschillende bestanden uploaden. Denk hierbij aan afbeeldingen en documenten. Afbeeldingen: WordPress ondersteunt standaard de volgende bestandstypen voor afbeeldingen: jpg, jpeg, png en gif. Documenten: WordPress ondersteunt standaard de volgende bestandstypen voor documenten: pdf, doc/docx, ppt/pptx/pps/ppsx, odt en xls/xlsx.
In de website kun je verschillende links aanmaken en beheren. WordPress heeft er al een aantal links ingezet. Zelf kun je ook links hier aan toevoegen. Deze linkjes kun je in een widget laten weergeven of je kunt een pagina maken met alle links die je hebt aangemaakt.
Een website bestaat uit pagina’s en berichten. Berichten gebruik je voor actuele informatie, zoals een nieuwsbericht, aanbieding, blog of een column. Pagina’s worden gebruikt voor algemene informatie op de website, zoals over ons, contact, geschiedenis enz.
20
WORDPRESS.COM
Als je reacties toestaat op de website, dan kun je iedere reactie die gegeven wordt, hier zien. Reacties die gegeven worden op de poll, komen niet hier terecht, maar bij feedback. Bij iedere reactie die gegeven is zie je de auteur van de reactie, de reactie, wanneer de reactie gegeven is en op welke pagina of op welk bericht de reactie gegeven is.
Wil je graag feedback van je bezoekers door middel van een poll/enquête of sterren, dan kun je deze hier aanmaken, maar ook zien hoe er op gereageerd is.
De weergave is onderverdeeld in verschillende submenu items, die allemaal te maken hebben met hoe de website er uit komt te zien voor de bezoekers. -
Thema’s: In het begin heb je een thema uitgekozen, mocht deze niet naar je zin zijn dan kan je deze alsnog hier veranderen.
-
Aanpassen: Het thema kun je aanpassen, alleen zonder premium account kan niet alles hiervan gebruikt worden. Zo kun je bij kleuren wel de achtergrond en de header tekstkleur aanpassen, maar de overige kleuren niet.
-
Widgets: Een widget is een stukje code dat op websites gebruikt kan worden om informatie op te halen en te tonen vanaf andere websites. Binnen WordPress is het een “blok” met informatie die in een sidebar of footer geplaatst kan worden, hierin kan onder andere nieuws staan, afbeeldingen of een kalender. In WordPress staat er een hele lijst met widgets waar je uit kunt kiezen. Links staan alle widgets en rechts waar je deze widgets kunt plaatsen, dit zal een sidebar en/ of een footer zijn. Dit hangt af van het thema dat je gebruikt.
-
Menu’s: Hier maak je alle menu items aan voor op de website. Heb je nog geen menu aangemaakt, dan moet je dit eerst doen.
-
Achtergrond: Bij aanpassen kon je de achtergrond veranderen. Alles wat je daar kon aanpassen kun je ook hier bij achtergrond vinden.
-
Aangepast ontwerp: Als je een premium account hebt dan kun je hier verschillende dingen aanpassen.
-
Mobiel: Als je thema dit ondersteund, dan kun je het mobiele thema inschakelen.
21
WORDPRESS.COM
Je kunt gebruikers uitnodigen op je blog. Deze gebruikers kun je verschillende rollen geven
-
Volger/Subscriber: Een lid van je site, dit lid kan niet meer dan een gast, maar hoeft niet elke keer gegevens in te vullen om te reageren
-
Beheerder/Administrator: De beheerder is de admin van de website, dit betekent dat hij alles kan doen
-
Redacteur/Editor: Kan eigen berichten maken, bewerken en publiceren, en kan ook berichten van andere gebruikers bewerken
-
Auteur/Author: Kan eigen berichten maken, bewerken en publiceren
-
Schrijver/Contributor: Kan berichten maken, maar niet publiceren, dit doet de beheerder of de redacteur
Onder extra kun je berichten importeren uit een ander systeem zoals blogger of misschien wel een andere WordPress website. Ook kun je delen of de gehele website exporteren.
Er zijn veel verschillende instellingen die je hier kunt vinden. Denk aan de algemene instellingen voor de website, instellingen die je kunt doen voor het schrijven van berichten, het geven van reacties en instellingen voor het delen met social media.
Samenvatting:
Om binnen WordPress een website aan te maken ga je naar: http://wordpress.com Hierna volg je een aantal stappen en na het volgen van deze stappen heb je een WordPress website aangemaakt en kun je er mee aan de slag. In de back-end van WordPress is het belangrijk dat je vooral veel gaat uitproberen met de verschillende tools die WordPress aanbiedt. De meeste WordPress websites maken gebruik van pagina’s en berichten. Dus vooral deze zijn belangrijk om onder de knie te krijgen.
22
WORDPRESS.COM
23
LES 3: XAMPP OF MAMP
Lesoverzicht: • Aan de slag • Wat is XAMPP (Windows & Linux) • Installatie XAMPP • Gebruik van XAMPP • Wat is MAMP (Mac) • Installatie MAMP • Gebruik van MAMP • Samenvatting Tijd: 15 minuten Doel: Aan het einde van deze les heb je XAMPP of MAMP geïnstalleerd en kun je het programma gebruiken.
24
XAMPP OF MAMP
Aan de slag
Je hebt WordPress in het vorige hoofdstuk uitgeprobeerd. Nu kan het zo zijn dat je wel een WordPress website wil gaan gebruiken, alleen heb je nog geen webhost en geen domeinnaam. Dan kun je er voor kiezen om WordPress eerst lokaal te draaien. Hier heb je alleen een programma voor nodig. Voor de Windows en Linux gebruikers is dit XAMPP en voor de Mac gebruikers is dit MAMP. Zonder dit programma kun je geen CMS lokaal laten draaien.
Wat is XAMPP (Windows & Linux)
XAMPP is een open source project gemaakt door ApacheFriends. De afkorting XAMPP komt van: X(alle OS uitvoeringen) Apache, Mysql, Php en Perl. Het bestaat dan ook uit de Apache-webserver, MySQL, PHP en Perl. XAMPP staat bekend om de eenvoudige installatie en de uitgebreide documentatie. XAMPP bestaat sinds 2002 en komt voort uit het vroegere WAMPP (Windows) en LAMPP (Linux). XAMPP is beschikbaar voor Linux, Windows, Mac en Solaris. XAMPP werkt niet helemaal naar behoren op iedere Mac, daarom bestaat MAMP ook nog steeds.
Voor de Mac gebruikers raad ik dan ook MAMP aan om te installeren in plaats van XAMPP.
Installatie XAMPP 1.
Ga naar de website:
http://www.apachefriends.org 2.
Je ziet een groene pijl met de tekst “Download” erin. Daarnaast staan de meest recente versies van XAMPP voor Windows, Linux en Mac OS X. Klik op de knop van jouw besturingssysteem. Voor Windows is dit de eerste knop. Zodra je hier op klikt, dan kom je in een ander scherm en binnen een paar seconden moet de download beginnen.
25
XAMPP OF MAMP
3.
Nadat de download is voltooid staat er een .exe bestand in je downloads map.
4.
Open dit bestand en je komt in de setup van XAMPP. Doorloop alle stappen.
5.
Kies bij de components voor alle opties en gebruik C: als installatiemap. Dit zijn ook de standaard opties die al zijn aangegeven.
6.
Na de installatie staat XAMPP tussen je programma’s bij start.
Gebruik van XAMPP
Nadat je XAMPP hebt gedownload kun je hem openen door naar start te gaan. Typ in de zoekbalk: xampp. Onder programma’s komt nu XAMPP control panel te staan. Klik deze aan en XAMPP zal het control panel opstarten. Een andere manier om XAMPP te starten is door naar je computer te gaan, dan ga je naar de map C:, hier zoek je XAMPP op en dan staat er in het rijtje: xampp-control.exe Zodra het control panel opgestart is zijn er twee dingen die je aan moet zetten, dit zijn Apache en MySQL. Dit doe je door op start te drukken.
Dit zijn de stappen die je iedere keer moet doen als er gevraagd wordt om XAMPP aan te zetten. Mocht het niet lukken om XAMPP te laten werken, verwijder deze dan goed van de computer en installeer deze opnieuw, het kan zijn dat er tijdens de installatie iets niet helemaal goed is gegaan. 26
Werkt het hierna nog niet, dan is er een alternatief, deze kan je terug vinden in bijlage 1.
XAMPP OF MAMP
Wat is MAMP (Mac)
MAMP is net als Xampp een open source project, alleen is deze gebouwd op het Mac OS X besturingssysteem. MAMP staat dan ook voor Mac OS X (het besturingssysteem) Apache (de webserver) MySQL (de databaseserver) PHP/Perl of Python (de programmeertalen).
Installatie MAMP 1.
Ga naar de website:
http://www.mamp.info/en/downloads 2.
Onder de header staat een stukje tekst en daaronder staat de meest recente versie van MAMP & MAMP PRO. Klik op de oranje knop met de tekst “Download”.
3.
In je downloads map komt nu het bestand van MAMP te staan. Dit is een .pkg bestand
4.
Loop de installatie door.
5.
Na de installatie staat MAMP tussen je programma’s in de launchpad. Open MAMP.
27
XAMPP OF MAMP
Gebruik van MAMP
Zodra je MAMP hebt gedownload kun je hem openen via de Launchpad. Kies voor MAMP en niet voor MAMP PRO. Dit is namelijk de betaalde versie. Klik op de knop start servers. Als nu beide bolletjes groen worden, dan is MAMP goed geïnstalleerd.
Wat er nu nog wel veranderd moet worden zijn de Apache Port en de MySQL Port. Klik hiervoor op de knop “Set to default Apache and MySQL Port”
Als er later in één van de lessen gevraagd wordt om MAMP aan te zetten dan klik je op start servers en zodra de twee bolletjes groen zijn, dan is MAMP klaar om te gebruiken.
28
XAMPP OF MAMP
Samenvatting
Om WordPress lokaal te draaien moet eerst op Windows en Linux XAMPP geïnstalleerd worden. En de Macintosh gebruikers installeren MAMP. Voor beide programma’s doorloop je de standaard installatie procedure. Na de installatie zet je in XAMPP, Apache en MySQL aan door op start te drukken en in MAMP klik je op de knop start servers.
29
LES 4: WORDPRESS
Lesoverzicht: • Aan de slag • Downloaden • XAMPP/MAMP en Wordpress • Wordpress installatie • Samenvatting Video’s: https://www.youtube.com/playlist?list=PLuCz7ifG5tJsOtxQU6mPLpa0oPuj9s5oC Tijd: 30 minuten Doel: Aan het einde van deze les kun je Wordpress installeren binnen het programma XAMPP en MAMP.
30
WORDPRESS
Aan de slag
In het vorige hoofdstuk heb je XAMPP of MAMP geïnstalleerd op je computer. Maar aan alleen de installatie van XAMPP en MAMP heb je niet zo veel als je er geen Content Management Systeem in laat draaien. Daarom zal je WordPress eerst moeten downloaden op internet om deze te kunnen gebruiken.
Downloaden
Om WordPress te downloaden kan je naar een Nederlandse website van WordPress. Deze website kun je vinden onder de URL: http://nl.wordpress.org
Om de meest recente versie van WordPress te downloaden klik je op de blauwe knop met de tekst “Downloaden WordPress ... .zip” Er komt nu een zip bestand in de downloads map. Pak dit bestand uit.
31
WORDPRESS
XAMPP/MAMP en WordPress
Voordat je een website lokaal kan laten draaien moet er een database aangemaakt worden. Om phpMyAdmin te openen in XAMPP, klik je naast MySQL op Admin. Om phpMyAdmin te openen in MAMP, klik je op “open start page” en daarna op phpMyAdmin. Bekijk de video om te zien hoe je een database aanmaakt binnen MAMP en XAMPP. Nu je weet hoe je een database aanmaakt en hoe je een gebruiker toevoegt kan je zelf een database aanmaken voor de website die je gaat maken.
WordPress installatie
Nadat je een database en een gebruiker hebt aangemaakt kan de installatie van WordPress beginnen.
Bekijk de video om te zien hoe je de installatie van WordPress werkt.
Als je de stappen uit de video volgt, dan zal het je zeker lukken om WordPress te installeren binnen de XAMPP of MAMP.
Samenvatting
Om WordPress binnen XAMPP of MAMP te laten draaien is het belangrijk dat je als eerste WordPress download, als tweede maak je in PHPmyadmin een database aan en een gebruiker incl. wachtwoord. En de laatste stap die je neemt is het installeren binnen XAMPP en MAMP.
32
33
LES 5: DASHBOARD
Lesoverzicht: • Aan de slag • Dashboard en Berichten • Media en Pagina’s • Reacties en Weergave • Plugins en Gebruikers • Extra en Instellingen • Samenvatting Video’s: https://www.youtube.com/playlist?list=PLuCz7ifG5tJtYy1NdsvAnHd3XFNx4T1YO Tijd: 1 uur en 10 minuten Doel: Aan het einde van deze les kun je in de meest recente versie van WordPress een pagina aanmaken en toevoegen aan een menu.
34
DASHBOARD
Aan de slag
Nu je WordPress lokaal draaiend hebt kun je echt aan de slag met het maken van je website. Zo kun je nadenken over de teksten die je op de website wil hebben, welk thema je wil hebben en ga zo maar door. Om in de back-end van je website in te loggen ga je naar: localhost/naam-van-de-map/wp-admin Hier vul je de gebruikersnaam en het wachtwoord in.
Dashboard en Berichten
Zodra je bent ingelogd in de back-end van de website, kom je altijd in het Dashboard terecht. Een WordPress website bestaat uit berichten en uit pagina’s. Een bericht wordt gebruikt om actuele zaken op een website weer te geven, dit zijn nieuwsberichten of een blog.
Bekijk de video om te zien hoe het Dashboard en Berichten werken.
Media en Pagina’s
Om een media item in te voegen kan je deze uploaden naar de mediabibliotheek. Nadat je dit hebt gedaan kan deze in een bericht of pagina gebruikt worden. Een WordPress website bestaat uit berichten en pagina’s. Een pagina wordt gebruikt om standaard zaken op een website weer te geven, dit zijn contactgegevens en over ons.
Bekijk de video om te zien hoe Media en Pagina’s werken.
Reacties en Weergave
Er kunnen reacties gegeven worden op berichten en pagina’s. Al deze gegeven reacties komen hier te staan. Wil je graag het thema aanpassen, een ander thema kiezen, widgets instellen en het menu veranderen, dan doe je dit onder weergave.
Bekijk de video om te zien hoe Reacties en Weergave werken.
35
DASHBOARD
Plugins en Gebruikers
Om de website een stukje interactiviteit mee te geven kunnen plugins geïnstalleerd worden. Een website hoeft niet door één persoon gemaakt te worden, daarom kunnen er ook meerdere gebruikers aangemaakt worden met verschillende gebruikersrollen.
Bekijk de video om te zien hoe de Plugins en Gebruikers werken.
Extra en Instellingen
Mocht je een bestaande website willen importeren binnen de nieuwe website, dan kan dit in extra. Iedere instelling die je wil doen voor de website kan bij instellingen gedaan worden.
Bekijk de video om te zien hoe Extra en Instellingen werken.
Samenvatting
In de back-end van je WordPress website kunnen alle aanpassingen gedaan worden voor de website. Maak berichten en pagina’s aan om de website te vullen, gebruik de weergave om het thema naar eigen smaak te stijlen en gebruik plugins om de website interactiever te maken.
36
37
LES 6: HANDIGE PLUGINS
Lesoverzicht: • Aan de slag • Google Analytics • SEO • Anti Spam • Contact formulieren • Social Media • Samenvatting Tijd: 30 minuten Doel: Aan het einde van deze les kun je de behandelde plugins installeren en gebruiken voor het optimaliseren van de website.
38
HANDIGE PLUGINS
Aan de slag
Nu je de basis hebt voor de WordPress website is het goed om na te denken wat je nu eigenlijk wil met deze website. We hebben een aantal plugins voor je uitgekozen, waarvan we denken dat deze wel handig kunnen zijn voor je website.
Google Analytics
Via Google Analytics kan je eenvoudig de statistieken van je website inzien. Als eerste ga je naar de website van Google Analytics. http://www.google.com/analytics Klik hier op inloggen als je al een account hebt, of op een account maken als dit de eerste keer is als je Google Analytics gebruikt. Log daarna in met je gmail account. Nu kun je klikken op aanmelden. Volg de stappen die Google Analytics aangeeft. Als je klaar bent met de stappen, dan krijg je een tracking ID. Nu kun je tussen twee plugins kiezen. De plugin Google Analytics is eenvoudig en is te vinden via deze link: http://wordpress.org/plugins/googleanalytics En de andere plugin is uitgebreider en kun je dan ook meer bij instellen. Deze kun je hier vinden: http://wordpress.org/plugins/google-analytics-for-wordpress Vul de tracking ID in en sla dit op. Nu moet je even wachten voordat het werkt, dit duurt maximaal twee dagen.
SEO
SEO staat voor Search Engine Optimization. In het Nederlands is dit Zoekmachine optimalisatie. Om het optimale uit je website te halen is het van belang dat de hele website geïndexeerd wordt door de zoekmachines. Er zijn veel verschillende SEO plugins voor WordPress. De populairste is op dit moment: WordPress SEO by Yoast. Met deze plugin kan je onder andere de belangrijkste meta-data instellen, een sitemap maken en permalinks optimaliseren. Deze plugin is te downloaden via de volgende link: http://wordpress.org/plugins/wordpress-seo
39
HANDIGE PLUGINS
Anti Spam
Iets waar iedere blogger tegenaan loopt is spam, zonder dat je maatregelen neemt heb je kans op dagelijks zo’n tientallen spamreacties. Als er spamreacties onder je berichten staan, kom je minder betrouwbaar over en bezoekers zullen minder snel geneigd zijn om een reactie achter te laten. Gelukkig zijn er meerdere ontwikkelaars die de strijd aangaan met spam, daardoor zijn er nu tientallen plugins beschikbaar om spamreacties tegen te gaan. De best werkende anti-spam plugin staat tegenwoordig al standaard in de pluginlijst. Dit is namelijk Akismet, om dit te gebruiken heb je een API key nodig, deze kan je krijgen door een account aan te maken bij Akismet. http://akismet.com/wordpress
Contact formulieren
Een contactformulier is een must-have voor iedere website. Helaas zit deze nog niet standaard in WordPress, maar gelukkig zijn er verschillende gratis plugins beschikbaar om gemakkelijk een contactformulier aan te maken. Een makkelijke plugin is Contact Form 7. Met deze plugin kun je meerdere contactformulieren opstellen en met een shortcode op iedere pagina of in ieder bericht plaatsen mocht je dit willen. Download Contact Form 7 hier: http://wordpress.org/plugins/contact-form-7
Social Media
Wanneer je social media goed integreert op je website verhoog je de kans dat anderen jouw berichten gaan delen en dat is waar social media om draait. Een pagina die gedeeld wordt kan zorgen voor meer naamsbekendheid, meer bezoekers en het kan een signaal geven aan een zoekmachine dat de pagina goed is, waardoor bijvoorbeeld google de pagina hoger in de zoekmachine zal zetten. Een populaire plugin voor social media is ShareThis. Deze kun je hier vinden: http://wordpress.org/plugins/share-this
Samenvatting
WordPress heeft veel verschillende plugins beschikbaar die je kunt gebruiken. Bedenk welke plugin bij jouw website past en zoek deze dan op via: http://wordpress.org/plugins
40
41
LES 7: HTML
Lesoverzicht: • Aan de slag • Wat is HTML • Wat is er nieuw in HTML 5 • Tabellen aanmaken met HTML • ID & Class • W3schools • Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je HTML in de WordPress website aanpassen.
42
HTML
Aan de slag
Als je de website wil optimaliseren naar je eigen smaak, dan is het goed om te weten waar verschillende codes voor staan. Daarom is het handig om te weten waar HTML nu eigenlijk voor staat en hoe je dit kan gebruiken.
Wat is HTML
HTML staat voor HyperText Markup Language. HyperText is de techniek waarmee een verbinding (een link) wordt gelegd naar bijvoorbeeld een ander document, een afbeelding of een geluidsopname. Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden. Een HTML pagina ziet er in de basis altijd het zelfde uit. <meta charset=”UTF-8”> Untitled Document Zoals je ziet wordt iedere tag geopend en gesloten. Hieronder wordt iedere tag uitgelegd, zodat je weet wat er nu eigenlijk staat. & & &
Dit staat altijd bovenaan en geeft aan dat het een HTML5 website is. Met de eerste code open je de website en met de tweede code sluit je de website. Binnen deze code komt de website te staan. In de head staat informatie die je op de website niet kan zien als je deze bekijkt in de webbrowser, maar wel belangrijk is. Zo kun je hier de CSS in zetten. CSS is de aankleding van je website. Hier komt alle informatie die je wel kan zien in de webbrowser. Hier komen teksten, linkjes, afbeeldingen en eventuele andere dingen te staan, die je wil laten zien op de website.
43
HTML
Wat is er nieuw in HTML5
In de oude versies van HTML gaf je een ID aan bijvoorbeeld de header. Nu heeft deze zijn eigen tag gekregen. Hieronder een tabel om het verschil aan te geven tussen de oude versie van HTML en HTML 5.
Oude HTML versie
HTML 5
…
…
…
<article>
…
<section> …
…
<section> …
Tabellen aanmaken met HTML
Omdat dit niet in de knoppen van WordPress is geïntegreerd, komt het aanmaken van tabellen hier aan bod. Vroeger werden er veel tabellen gebruikt in websites, omdat er toen nog geen CSS werd gebruikt. Toch worden ze af en toe nog wel gebruikt, bijvoorbeeld om iets te verduidelijken. De code voor de tabel ziet er als volgt uit.
…
…
…
…
Zoals je ziet zijn er vier tags gebruikt om de tabel te vormen.
&
Met de eerste tag open je de tabel en met de tweede tag sluit je de tabel.
&
TR staat voor table row. Met deze tag geef je de rij aan.
&
TH staat voor table heading. Met deze tag geef je een hoofd aan.
&
TD staat voor table data. Met deze tag geef je de cel aan binnen de rij.
44
HTML
Nu zijn er nog twee attributen die we kunnen toepassen binnen de tabel. Dit zijn colspan en rowspan. Colspan wordt gebruikt in de
tag om aan te geven hoeveel kolommen de cel moet aannemen. Als je weet dat colspan voor het aantal kolommen staat, dan kun je vast wel bedenken wat er gebeurt bij rowspan.
ID & Class
Zoals je zag werd in de oude versie van HTML veel gebruik gemaakt van
Dit is precies de manier om een ID aan te maken. Een ID is uniek en kan dan ook maar één keer gebruikt worden. Een class kan meerdere keren gebruikt worden binnen een pagina. In de HTML geef je een ID en een class als volgt aan:
Een stukje tekst zonder ID of class
Een stukje tekst met ID. De ID kun je iedere naam geven die je maar wil.
Een stukje tekst met een class. De class kun je iedere naam geven die je maar wil.
In de CSS ziet dit er als volgt uit:
p {color: #000000;} p#textid {color: #FF0000;} p.textclass {color: #0000FF;}
W3schools
Op de website van w3schools kan je veel leren over HTML. Ook kan je hier oefenen met de codes.
Bezoek de website op: http://www.w3schools.com/html/default.asp
Samenvatting
Als je in de WordPress website meer aanpassingen wil maken dan alleen de standaard keuzes die worden aangeboden bij het aanmaken van berichten of pagina’s dan is het handig om te weten hoe de HTML codes werken. HTML staat voor HyperText Markup Language.
45
LES 8: CSS
Lesoverzicht: • Aan de slag • Wat is CSS • Kleuren • Tekst • Blokken • Lijsten en tabellen • Responsive website • W3chools • Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je CSS in de WordPress website aanpassen.
46
CSS
Aan de slag
Als je de WordPress website in je eigen stijl wil maken, heb je CSS nodig om dit voor elkaar te krijgen.
Wat is CSS
CSS staat voor Cascading Style Sheets. Met behulp van CSS kun je stijlen definiëren voor de opmaak van een HTML-document. Met het toenemende gebruik van het internet ontstond bij webauteurs steeds meer de behoefte aan extra mogelijkheden bij de opmaak van documenten. Als oplossing voor dit probleem zijn stylesheets geïntroduceerd. De achterliggende gedachte is de scheiding tussen structuur en presentatie: HTML moet weer zorgen voor de structuur in het document, de presentatie wordt bepaald met behulp van in stylesheets vastgelegde stijlen. Een CSS code kan je zo opdelen:
html-tag {eigenschap:waarde;}
html-tag In welke HTML-tag wil je de CSS toepassen eigenschap Wat wil je veranderen, bijvoorbeeld de achtergrondkleur. Dit geef je aan door background-color. waarde Als je de achtergrondkleur wil veranderen kies je bij de waarde voor een kleurcode. Dit is bijvoorbeeld #ff0000 Hier komt dan de volgende code uit.
body {background-color:#ff0000;}
Kleuren
De eigenschap color omschrijft dat dit de voorgrond kleur is van een element. Op de website: http://www.w3schools.com/cssref/css_colorsfull.asp zie je veel verschillende kleuren met de bijbehorende HEX code.
47
CSS
Mocht je alle koppen in het document donkerrood willen hebben, dan werk je in de CSS met de eigenschap H1. En dan komt de code er als volgt uit te zien. h1 {color:#990000;} De eigenschap background-color omschrijft dat iets de achtergrond kleur is. Als je de gehele achtergrond geel/oranje wil maken dan geef je de volgende code op. body {background-color:#ffcc66;}
Tekst
Iets waar je op de website goed rekening mee moet houden is het font/lettertype. Als je kijkt op verschillende websites, dan zie je dat overal het font net iets anders is. Per website bekijk je namelijk welk font er bij past.
Op de website: http://www.google.com/fonts staan bijna 700 fonts die je kunt lenen. Klik bij het font dat je wil gebruiken.
Je wordt nu doorgestuurd naar de quick use van het font. Vink de stijlen aan die je wil. Rechts zie je hoe snel de pagina nog laadt met het font erin. Probeer er maar één of twee te kiezen. Scrol naar beneden, bij nummer 3, zie je wat je in de head van de website moet zetten en bij nummer 4 zie je hoe de CSS regel eruit komt te zien.
48
CSS
49
CSS
In WordPress kun je aangeven of je bepaalde stukken tekst bold, italic of onderlijnd wil hebben. In CSS kan je dit ook zelf regelen. Hier komen de volgende codes uit. font-style:italic font-style:normal font-weight:bold De grootte van de tekst kun je aangeven in pixels, punten, procenten en em. De code ziet er dan als volgt uit. font-size:30px font-size:12pt font-size:120% font-size:1em Het bovenstaande wordt gebruikt om het font te stijlen. De tekst kun je in het algemeen ook een stijl meegeven. Het uitlijnen van de tekst kun je in WordPress aangeven, maar mocht je dit zelf willen doen dan gebruik je het volgende: text-align:left text-align:center text-align:right text-align:justify
De tekst wordt links uitgelijnd De tekst wordt in het midden uitgelijnd De tekst wordt rechts uitgelijnd De tekst wordt uitgelijnd van links naar rechts
Net zoals in het programma Microsoft Word kan je in websites een tekst onderlijnen, een lijn boven de tekst zetten en een lijn door de tekst heen laten lopen. Dit doe je door middel van text-decoration. Je krijgt dan: text-decoration:underline text-decoration:overline text-decoration:line-through
50
CSS
Blokken
Alle HTML elementen kunnen als blokken gezien worden.
Binnen dat blok zit de content, de padding, de border en de margin. Binnen de content staat de inhoud van je HTML element, denk hierbij aan teksten en afbeeldingen. De padding is de ruimte om de content heen, maar valt nog binnen de border. Een border zit om de padding en de content heen. Een border kun je een kleur geven. Dit kan niet bij de padding en de margin. De margin is de ruimte tussen de zijde en het element dat zich ernaast bevindt.
Lijsten en tabellen
In de vorige les heb je gezien hoe je een tabel aanmaakt. Ook deze kan gestijld worden. Om een tabel duidelijk aan te geven kun je gebruik maken van een border. Dit is een rand om de tabel heen. Deze border kun je een breedte meegeven, een stijl en een kleur. Er zijn verschillende stijlen die je mee kunt geven. Deze zie je hiernaast. De codes die je gebruikt voor de stijl, kleur en de breedte zijn: border-style, border-color en border-width Voor de lijsten kun je ook een stijl mee geven. Dit doe je door een list-style-type mee te geven. Er zijn twee list-style-types voor de unordered list en ook twee list-style-types voor de ordered. Unordered list: list-style-type:circle; list-style-type:square; Ordered list: list-style-type:upper-roman; list-style-type:lower-alpha; 51
CSS
Responsive website
Tegenwoordig kijken mensen vaker naar een website via de tablet of de mobiel, dan dat de website bekeken wordt op de computer. Daarom is het belangrijk dat de website die je maakt op al deze apparaten goed te bekijken is. Dit krijg je voor elkaar door een responsive website te maken. Tegenwoordig zijn de meeste thema’s al aardig responsive. Maar het kan zijn dat er dingen zijn in de website die niet zo reageren zoals je zelf wilt. Daarom kun je zelf met CSS de website responsive maken. Kijk op: http://nmsdvid.com/snippets welke code je voor verschillende smartphones en tablets kunt gebruiken. Klik op de naam van de device die wil toevoegen. Er verschijnt nu een code die begint met @media. Kopieer dit naar je CSS bestand. Je krijgt dan dit:
@media screen and (device-aspect-ratio: 40/71) {
Hierbinnen komen de CSS regels te staan. Voorbeeld: body {color:#0000ff;} }
W3schools
Op de website van w3schools kan je veel leren over CSS. Ook kan je hier oefenen met de codes. Bezoek de website op: http://www.w3schools.com/css/default.asp
Samenvatting
Als je in WordPress het thema naar eigen smaak wil stijlen dan is het handig om te weten hoe de CSS codes werken. CSS staat voor Cascading Style Sheets. Een CSS code deel je op in: html-tag {eigenschap:waarde;} Naast de gewone CSS regels kun je ook regels toepassen voor een responsive website. Binnen de regel van @media komen de CSS codes te staan.
52
53
LES 9: THEMA OMBOUWEN
Lesoverzicht: • Aan de slag • Child theme • Bewerker • Style.css • Header.php • Footer.php • Index.php • Samenvatting Video’s: https://www.youtube.com/playlist?list=PLuCz7ifG5tJsnECSG8-HCM0phOktDEykk Tijd: 25 minuten Doel: Aan het einde van deze les kun je het gekozen thema, naar eigen idee ombouwen met behulp van CSS.
54
THEMA OMBOUWEN
Aan de slag
In de vorige twee lessen heb je meer geleerd over HTML en CSS. Nu is het tijd om ook toe te passen wat je daar hebt geleerd. Dit gaan we doen door een child theme aan te maken.
Child theme
Een child theme is een thema dat functionaliteiten aanneemt van een ander thema, namelijk het hoofd thema. Je gebruikt een child theme omdat je aanpassingen wil maken in het bestaande thema, maar zodra het thema updates krijgt ben je alle aanpassingen kwijt. Maak je gebruik van een child theme, dan heb je hier geen last van.
Bekijk de video over het aanmaken van een child theme.
Bewerker
Onder het kopje weergave in WordPress zie bewerker/editor staan. In de editor bewerk je, je thema. Hier kun je rechts het thema selecteren dat je wil bewerken. Daaronder kies je het bestand dat je wil aanpassen. Onder templates vind je de php bestanden en onder styles, de stylesheets die gebruikt worden binnen het thema.
55
THEMA OMBOUWEN
Style.css
Voordat je het child theme kunt gebruiken moet je eerst de style.css aanmaken binnen het mapje van je child theme. In de video heb je kunnen zien hoe je dit doet. Hieronder staat de code die je in je child theme zet. /* Theme Name: Theme URI: Description: Author: Author URI: Template: Version: */
Felicity Child http://www.wordpress.com/ Child theme voor Felicity WordPress Digital Class http://www.wordpressdigitalclass.nl felicity 1.0.7
@import url(“../felicity/style.css”);
Om de style.css aan te passen kijk je in de website naar wat je aan wil passen. Wil je bijvoorbeeld de tekstkleur aanpassen naar rood dan kies je voor
p {color:#ff0000;}
In CSS kun je erg veel aanpassen. Dit zijn niet alleen de kleuren, maar als je wil kun je de website helemaal ombouwen tot een heel ander uiterlijk, zodat je niks meer terug ziet van het thema dat je oorspronkelijk gebruikt hebt. In les 7 en 8 is er al meer uitgelegd over HTML & CSS, dus dat wat je geleerd hebt in de vorige lessen kun je in deze les toepassen.
Header.php
Er zijn drie php bestanden die in ieder thema terug keren, dit omdat je een website ook in drie stukken kan verdelen. De header, het middenstuk, vaak main of content genoemd en de footer. In de header staat vaak het logo van de website, een eventuele header afbeelding en het menu. Mocht je iets willen toevoegen of veranderen binnen de header, dan kan dit met CSS. Kan dit niet omdat je bijvoorbeeld een div wil toevoegen, dan moet je in de header.php de aanpassing maken. Zoek in de php code naar herkenningspunten voor jezelf, zodat je ook weet waar je die code toevoegt. Een menu wordt vaak aangegeven met 56
THEMA OMBOUWEN
Dus wil je iets daar in de buurt aanpassen, dan zoek je naar dat herkenningspunt. Een herkenningspunt kun je onder andere vinden door “element inspecteren” te gebruiken binnen de website. Binnen de body zijn meerdere divjes te vinden. Ga met je muis over één van deze divjes heen en je ziet in de website wat er actief is binnen dat divje.
Footer.php
In de footer staat vaak de copyight naar de maker van de website. Mocht je thema het toestaan, dan kan het ook zo zijn dat er widgets in de footer staan. Als je iets in de footer wil aanpassen of toevoegen, dan kan dit met CSS. Kan dit niet omdat je een div wil toevoegen, dan kopieer je de footer.php vanuit de parent naar je child theme. En dan maak je de aanpassingen die je wil maken. Zoek in de php code naar herkenningspunten voor jezelf, zodat je ook weet waar je die code toevoegt. Een footer wordt vaak aangegeven met
of .
Dus wil je iets in die buurt aanpassen, dan zoek je naar dat herkenningspunt. Een herkenningspunt kun je onder andere vinden door “element inspecteren” te gebruiken binnen de website. Binnen de body zijn meerdere divjes te vinden. Ga met je muis over één van deze divjes heen en je ziet in de website wat er actief is binnen dat divje.
Index.php
De index.php is het algemene php bestand van je thema. Hier staat de content van de website die niet onder de header en de footer valt. Als je iets wil aanpassen of toevoegen, dan kan dit met CSS. Kan dit niet omdat je een div wil toevoegen, dan kopieer je de index.php vanuit de parent naar je child theme. En dan maak je de aanpassingen die je wil maken. Zoek in de php code naar herkenningspunten voor jezelf, zodat je ook weet waar je die code toevoegt. Een wrapper wordt vaak aangegeven met
.
Dus wil je iets in die buurt aanpassen, dan zoek je naar dat herkenningspunt. Een herkenningspunt kun je onder andere vinden door “element inspecteren” te gebruiken binnen de website. Binnen de body zijn meerdere divjes te vinden. Ga met je muis over één van deze divjes heen en je ziet in de website wat er actief is binnen dat divje.
57
THEMA OMBOUWEN
Samenvatting
Als je in WordPress het thema wil aanpassen is het goed om een child theme aan te maken. Als het hoofdthema updates krijgt en je hebt hier de aanpassingen in gemaakt in plaats van in een child theme, dan ben je alles kwijt. Het child theme kun je bewerken door de CSS aan te passen en door eventuele toevoegingen of veranderingen in een php document.
58
59
LES 10: ADOBE DREAMWEAVER CC
Lesoverzicht: • Aan de slag • Wat is Adobe Dreamweaver • Verschil Adobe Dreamweaver CC en oudere versies • 30 dagen proefversie • Sites beheren • Element inspecteren • Alternatief voor Adobe Dreamweaver • Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je het programma Adobe Dreamweaver CC gebruiken.
60
ADOBE DREAMWEAVER CC
Aan de slag
In de vorige les heb je de aanpassingen gemaakt in de bewerker van WordPress. Maar omdat hier niet altijd even goed te zien is waar een tag van een code begint en waar deze eindigt is het makkelijker om gebruik te maken van een programma dat hier meer structuur in aanbiedt.
Wat is Adobe Dreamweaver
Adobe Dreamweaver is een programma waarmee websites gemaakt kunnen worden. De software is gemaakt door het bedrijf Macromedia, alleen dit bedrijf is in 2005 door Adobe overgenomen. Adobe Dreamweaver bevat een uitgebreide “what you see is what you get” editor voor onder andere HTML, CSS, PHP en Javascript.
Verschil Adobe Dreamweaver CC en oudere versies
Sinds Adobe CS3 zijn er veel nieuwe items toegevoegd. Vooral in Adobe CC zijn er in vergelijking met Adobe CS6 veel veranderingen doorgevoerd.
61
ADOBE DREAMWEAVER CC
Eén van de voordelen als je een php bestand wil bewerken is dat je in Adobe Dreamweaver CC precies ziet waar een tag geopend wordt en waar deze afgesloten wordt zodra je op één van deze twee tags klikt.
30 dagen proefversie
Op de website van Adobe kan je aangeven dat je Dreamweaver 30 dagen wil proberen.
62
Ga naar: https://creative.adobe.com/nl/products/download/dreamweaver om deze proefversie te downloaden als je Adobe Dreamweaver CC nog niet hebt.
ADOBE DREAMWEAVER CC
Sites beheren
Een voordeel van Adobe Dreamweaver is dat je geen FTP programma nodig hebt, want deze is hierin geïntegreerd. Ga je een website online zetten of maken, dan gebruik je sites beheren om aan te geven waar de website op de computer staat en waar de website op het internet moet komen te staan. In de volgende les wordt uitgebreid uitgelegd hoe je sites beheren moet gebruiken.
Element inspecteren
In de video tutorial van les 9 geef ik de tip om element inspecteren te gebruiken. Je gebruikt element inspecteren om te kijken wat er al is aan CSS codes. Ga in de website met je muis boven een element staan waarvan je graag wil weten wat er al is aan HTML en CSS. Klik dan op de rechtermuisknop en ga naar inspect element/element inspecteren.
Links zie je de items die je ook terug zult vinden in de PHP en/of HTML bestanden. Rechts staan de CSS items. In het zwart staan de html-tags en in het paars staan de eigenschappen en de bijbehorende waardes. Het voordeel van element inspecteren is dat je hier makkelijk kan kijken wat je wil veranderen, zonder dat het al direct is aangepast. Mocht de website al online staan dan is het voor bezoekers vervelend om te zien dat er bepaalde dingen iedere keer veranderen als ze naar een andere pagina gaan omdat jij op dat moment bezig bent met het uitzoeken van de juiste positie van een element of een kleur. Daarom kun je in element inspecteren kijken wat je allemaal wil veranderen en als je alles hebt aangepast wat je wilde aanpassen, dan druk je pas op opslaan in je CSS bestand.
63
ADOBE DREAMWEAVER CC
Alternatief voor Adobe Dreamweaver
Mocht je de aanpassingen van CSS niet willen doen in de editor van WordPress en je wil geen abonnement afsluiten bij Adobe omdat je dit niet tot nauwelijks gaat gebruiken is er een gratis alternatief dat erg lijkt op Adobe Dreamweaver. Dit is Sublime Text 2. Het lijkt qua lay-out op een eenvoudige versie van Adobe Dreamweaver. Download Sublime Text 2 via de link: http://www.sublimetext.com
Samenvatting
Omdat de editor van WordPress geen duidelijke structuur biedt is het makkelijker om Adobe Dreamweaver CC te gebruiken. Een groot voordeel van Adobe Dreamweaver ten opzichte van de editor is dat Adobe Dreamweaver duidelijk aangeeft waar een tag begint en waar hij eindigt. Ook zit er een FTP ruimte binnen Adobe Dreamweaver, waardoor je de websites online kunt zetten binnen het programma Adobe Dreamweaver.
64
65
LES 11: VAN LOKAAL NAAR ONLINE
Lesoverzicht: • Aan de slag • Domeinnaam • Web hosting • FTP gegevens • FTP programma’s • Database exporteren • Samenvatting Tijd: 10 minuten Doel: Aan het einde van de les kun je de lokale website online zetten.
66
VAN LOKAAL NAAR ONLINE
Aan de slag
Je hebt nu een website volledig gemaakt in een lokale omgeving. Dit kan soms gebeuren, omdat een klant nog geen domeinnaam of webhosting heeft afgesloten. Nadat je alle gegevens hebt gekregen, kun je de website dan ook echt online gaan zetten.
Domeinnaam
Maak je een website voor jezelf of voor je eigen bedrijf, dan is het belangrijk dat je goed nadenkt over wat de domeinnaam moet worden. Dit wordt namelijk het adres waarop de bezoekers je gaan vinden. Probeer bij het bedenken van de domeinnaam te letten op de volgende tips: • Maak de domeinnaam niet te lang • Kies een naam die makkelijk te onthouden is • Zorg ervoor dat er geen andere/verkeerde interpretatie is bij jouw domeinnaam
Web hosting
Een webhosting is een dienst die je een ruimte aanbiedt voor het opslaan van alle informatie, afbeeldingen en andere items die je op een website kunt vinden. Er zijn in Nederland veel verschillende bedrijven waar je, je website kunt hosten. Bedenk voor je een webhosting gaat afsluiten wat je precies nodig hebt voor je website. Wil je graag een WordPress website laten draaien, zorg dan dat je een hosting neemt inclusief database. Een aantal bedrijven waar je de webhosting incl. domeinnaam zou kunnen afsluiten zijn: Neostrada, Anatra, Mijn hosting partner, Versio, Mijndomein en Hostnet.
67
VAN LOKAAL NAAR ONLINE
FTP gegevens
Nadat je een domeinnaam en web hosting hebt aangevraagd krijg je van het bedrijf een mail met daarin de FTP gegevens en de database gegevens. Dit kan in één mail maar soms krijg je hier ook meerdere mails over.
In het voorbeeld zie je een mail die je van Mijndomein krijgt. Bij gegevens zie je de algemene gegevens van jouw domein. Zo zie je de domeinnaam die je geregistreerd hebt, welk pakket je hebt afgesloten en via welk e-mail adres je, je geregistreerd hebt. Om de website online te zetten heb je de gegevens nodig die bij FTP gegevens staan. In het FTP programma dat je gebruikt wordt namelijk om deze gegevens gevraagd.
68
VAN LOKAAL NAAR ONLINE
FTP programma’s
Om de website online te zetten heb je een FTP programma nodig. Maak je gebruik van Adobe Dreamweaver, dan raad ik aan om deze te gebruiken. Ga in Adobe Dreamweaver naar “Site” en dan “New site” als je een nieuwe website wil aanmaken. Heb je al een website aangemaakt dan kies je voor “Site” en dan “Manage sites” Als je een nieuwe website toevoegt, dan krijg je een nieuw scherm. Vul bij “Site name” de naam in van de website die je gaat maken. En bij “local site folder” zoek je naar de map waar je de website wil zetten, of al hebt staan, op je computer.
Klik daarna op servers en dan onderaan op het + teken. Vul de FTP gegevens in die je hebt gekregen. Bij servername vul je de hostnaam in. Kies bij Connect using voor FTP. Bij FTP adress vul je de hostnaam in. Meestal begint deze met ftp. En de gebruikersnaam en het wachtwoord die je hebt gekregen vul je in bij Username en Password. Klik daarna op “Test” Als er een connectie is gemaakt, dan geeft hij aan dat het gelukt is en anders heb je waarschijnlijk een typfout gemaakt. Is de connectie gemaakt, klik dan op save.
69
VAN LOKAAL NAAR ONLINE
Als je Dreamweaver op Compact hebt staan dan zie je rechts Insert en Files staan. Klik op files en je zult zien dat je de naam van de website ziet staan die je hebt aangemaakt. Met daaronder de lokale bestanden. Klik rechts op het knopje om het scherm groter weer te geven. Je ziet nu links de bestanden staan die op de server staan en rechts je lokale bestanden. Klik op het linker knopje naast de naam van de website om een connectie te maken met de server. Ongeveer halverwege de balk zie je een pijl naar beneden en een pijl naar boven wijzen. De eerste wordt gebruikt om bestanden van de server te downloaden naar de lokale map. En de tweede wordt gebruikt om lokale bestanden op de server te zetten.
Nadat je alle bestanden van je WordPress website hebt overgezet zal de website het nog niet doen. De database is nog niet gekoppeld en de website staat nog op de URL van je localhost. Een ander FTP programma dat veel gebruikt wordt is FileZilla. Deze werkt bijna het zelfde als het FTP programma binnen Dreamweaver. Om FileZilla te downloaden ga je naar :
Ga binnen je MAMP of XAMPP naar phpMyAdmin. Klik op de database die je wil exporteren. Kies bij de export methode voor: Custom. Zorg dat alle tabellen geselecteerd zijn en kies bij output voor Save output to a file. Bij het formaat kies je voor SQL. De rest van de opties staan al goed, maar kijk gerust wat er ingesteld staat. Klik als je klaar bent op Go. In je downloads map zal nu een .sql bestand komen te staan. Dit is de backup van de database.
71
VAN LOKAAL NAAR ONLINE
Nu moet de database geïmporteerd worden naar de nieuwe server. Als de host een database voor je heeft aangemaakt, dan heb je deze in de mail gekregen.
Als dit niet zo is, dan moet je zelf nog een database aanmaken. Schrijf de gegevens op van deze database, want die hebben we later nodig. Ga naar de phpMyAdmin van jouw server. Klik op de database die je hebt gekregen of zelf net hebt aangemaakt. Kies nu voor import.
72
VAN LOKAAL NAAR ONLINE
Klik op “Choose file” en zoek op je computer naar het .sql bestand dat je hebt gekregen bij de export. Zorg ervoor dat bij format SQL is aangegeven en klik daarna op “Go”. Als de import goed is verlopen komen aan de linkerkant van je scherm alle tabellen te staan die ook in de oude database stonden. Nadat de nieuwe database gevuld is moet je naar wp_options gaan. De url van de website staat namelijk nog op: http://localhost/wordpressdigitalclass en dit moet veranderd worden naar: http://jenieuwedomeinnaam.nl loop alle pagina’s na om te zien of je niet één vergeet, want anders zal je een error krijgen op de website. De laatste stap die je moet ondernemen is het aanpassen van de database gegevens. Open het bestand wp-config.php van de nieuwe website. Hierin staan de volgende regels.
// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define(‘DB_NAME’, ‘mijndatabasenaam’);
/** MySQL database username */ define(‘DB_USER’, ‘mijnusernaam’);
/** MySQL database password */ define(‘DB_PASSWORD’, ‘mijnpassword’);
/** MySQL hostname */ define(‘DB_HOST’, ‘localhost’);
En als je dit opslaat ben je klaar.
73
VAN LOKAAL NAAR ONLINE
Samenvatting
Voordat je de website online gaat zetten is het noodzakelijk om een domeinnaam en web hosting geregistreerd te hebben. Zonder deze twee kun je geen website online zetten. Van je webhost krijg je de gegevens die je nodig hebt om de website online te zetten. Gebruik de FTP gegevens om de bestanden over te zetten en exporteer de bestaande database, zodat deze binnen de nieuwe website geïmporteerd kan worden. Als je alle stappen hebt gevolgd staat je website binnen een mum van tijd online.
USBwebserver is een programma dat vergelijkbaar is met XAMPP. Daarom kun je deze gebruiken als je XAMPP echt niet aan de praat krijgt. Om USBwebserver te downloaden ga je naar: http://www.usbwebserver.net/en/download.php Pak het zip bestand uit en open usbwebserver.exe
Kies de taal die je wil gebruiken en dan kom je in het onderstaande scherm terecht.
77
BIJLAGEN
In het rechtermenu zal je zien dat er twee vinkjes verschijnen achter de woorden Apache en Mysql. Als deze vinkjes niet verschijnen klik je op Apache en dan start. Het zelfde geldt voor Mysql.
Klik op Root dir. Nu wordt de root map geopend.
Maak een nieuw mapje aan en geef deze de naam dan de website. In deze aangemaakte map zet je alle bestanden van WordPress.
78
Klik op Localhost. Je browser wordt geopend met localhost. In de browser kun je de aangemaakte website bekijken.
In de browser komt nu de volgende url te staan: http://localhost:8080/ Achter de slash zet je de naam van de map die je hebt aangemaakt in de root. Klik op PHPMyAdmin om een database aan te maken en te beheren. Log hier in met de gebruikersnaam: root en het wachtwoord: usbw In les 3 is al uitgelegd hoe je een database beheert, dus kijk terug in deze les hoe het moest. Klik op: www.usbwebserver.com om naar de website van USBwebserver te gaan.
79
BIJLAGEN
Bijlage 2: Woordenlijst A
Apache: Een open source webserver voor Windows, Mac en Linux. ASP: Active Server Pages, een programeertaal van Microsoft voor internet pagina’s.
B
Back-end: Border:
De achterkant van de website wordt ook wel de back-end genoemd. In WordPress gebruik je hiervoor het Dashboard. Een rand die je om de content heen kunt zetten.
C
Child theme: Een thema dat de instellingen meeneemt van het hoofdthema, maar zodra jij aanpassingen maakt worden deze ook meegenomen. Class: Dit geef je mee aan een element dat vaker op een pagina terug kan komen. CMS: Een content management systeem wordt gebruikt om een website te maken, ook al heb je weinig tot geen verstand van HTML. Componenten: Een stukje software dat in Joomla gebruikt wordt. Content: De inhoud van het element. CSS: Cascading Style Sheets worden gebruikt om een stijl aan de website mee te geven.
D
Dashboard: Database: Div: Drupal:
E
Zodra je in de back-end van WordPress inlogt kom je hier terecht. Hier komen de tabellen te staan die bij je WordPress website horen. Hierbinnen komt een ID of class te staan. Een Content Management Systeem net als WordPress.
Editor: In de editor kunnen CSS en PHP bestanden worden aangepast. Eigenschap: In CSS wordt de eigenschap gebruikt voor datgene wat je wil veranderen. Element: Een code die iets meekrijgt in de HTML. Voorbeeld h1 of p. Element inspecteren: Een tool die gebruikt kan worden om te kijken wat je in CSS wil veranderen. Extensies: Een stukje software dat in Joomla gebruikt wordt.
80
BIJLAGEN
F
Front-end: De voorkant van de website wordt ook wel front-end genoemd. Dit zie je als je de URL invult. FTP: File Transfer Protocol is een uitwisseling van bestanden tussen computer en server.
G
Google Analytics:
H
HEX code: HTML: Html-tag:
I
ID: Interactief:
J
Javascript: Joomla: jQuery:
M
MAMP: Margin: MySQL:
Hiermee krijg je een inzicht hoe de bezoekers de website gebruiken en hoe ze op de website terecht komen. Een kleurcode die begint met een # en daaropvolgend 6 letters van a t/m h of cijfers heeft. HyperText Markup Language is de techniek waarmee een verbinding wordt gelegd naar bijvoorbeeld een document met behulp van code. Een element dat binnen de HTML wordt gebruikt. Dit geef je aan een element dat één keer op de pagina komt te staan. Een computerprogramma of systeem dat reageert op een menselijke gebruiker, vaak om gegevens of commando’s te verkrijgen en om directe resultaten of bijgewerkte informatie te geven. Een scripttaal om webpagina’s interactief te maken. Een Content Management Systeem net als WordPress. Vergelijkbaar met Javascript. Een open source project om een CMS te laten draaien binnen de Mac. Dit wordt gebruikt om een ruimte om een element heen te bepalen. SQL is de taal die wordt gebruikt om een database te bouwen. MySQL is het programma dat je gebruikt.
81
BIJLAGEN
N
Navigatie (nav):
O
Open source:
P
Padding: Perl: PHP: PHPmyadmin: Plugins: Python:
R
Responsive:
S
SEO: Server: Stylesheet:
W
Waarde: Webhost(ing): Widget: WordPress:
X
XAMPP:
Symbolen
@media: 82
Het menu van de website. Een project waar iedereen aan kan werken. Een ruimte die tussen het element en de border inzit. Een programmeertaal. Hypertext Preprocessor, een programmeertaal. Het programma dat je gebruikt om de database en gebruiker aan te maken voor je WordPress installeert. Een aanvulling op een programma. Een programmeertaal. Het gegeven dat iets schaalt naar de grootte van het scherm. Search Engine Optimization is een zoekmachinemarketing en kan ervoor zorgen dat de website hoger kan eindigen in de zoekmachines. Een computer of een programma dat diensten verleent. Hierin komen de CSS regels. In CSS geef je een eigenschap en een waarde mee. Deze waarde is bijvoorbeeld een kleurcode. Een dienst die ruimte aanbiedt voor het opslaan van de inhoud op de website. Een klein programma dat je binnen WordPress kunt laten draaien. Een Content Management Systeem. Een open source project om een CMS te laten draaien binnen Windows of Linux. Wordt er gebruik gemaakt van een responsive website, dan wordt @media gebruikt om verschillende maten van scherm aan te geven.
83
BIJLAGEN
Bijlage 3: Planning Les 1:
Lezen: 5 minuten Totaal: 5 minuten
Les 2:
Lezen: Video tutorials bekijken: Uitvoeren: Totaal:
