Handleiding Wordpress
Inhouds opgaven. 1. De opdracht inlezen. 2. Aanmaken nieuwe gebruiker op de server 3. Start installatie Wordpress 4. Het ontwerp. 5. Front-end development 5.1. Thema 5.2. Extensies 5.3 Het beheer 6. Oplevering aan de klant 7. Bijhouden van je projecturen HarvestApp Pagina 2/10
Voorbereidingen 1. De opdracht inlezen. 1. Ga naar BURO210 > Klanten > Klantnaam 2. Lees de offerte goed door, bekijk wat de klant heeft afgenomen. 3. Bekijk het ontwerp. 4. Lees de startvergadering goed door. Hier kan je lezen wat er ontworpen is en wat verschillende dingen die niet ontworpen kunnen worden horen te doen. Deze kan je vinden bij BURO210 > Klanten > Klantnaam > Ontwerp. 5. Maak een plan van aanpak: welke componenten ga je gebruiken, hoe ga je de website indelen en welke extensies en taalbestanden ga je gebruiken 2. Aanmaken gebruiker op de server 1. Ga naar wscp.pcextreme.nl en login ( Klantnummer: 13858 - Wachtwoord: 2821Atburo210 ) 2. Aan de linker kant staan alle domein namen. Zoek hier buro210.com op. 3. Klik hier op DNS records en scroll naar beneden 4. Klik hier op Beheer DNS records 5. Klik onderaan op Voeg nog een record toe 6. Vul de klantnaam in en kies als IP-adres het juiste IP-adres 7. De sub domein is nu aangemaakt 8. Login via cp.flexwebhosting.nl ( Gebruikersnaam: Je naam - Wachtwoord: Je wachtwoord ) 9. Klik in de menubalk onder mijn producten op Servers 10. Hier zien we een lijstje met servers staan. Tussen de servers staat backup.buro210.nl. Hier klikken we op beheer er achter. 11. Nu komen we op een andere pagina en klikken we onder Server login gegevens inloggen in controle paneel. 11. Klik rechts op de link User level 12. Klik hier op add new user 13. Voer hier het volgende in: Gebruikersnaam: Klantnaam E-mail: Je eigen naam @buro210.nl Wachtwoord: Vul een wachtwoord in (Deze heb je nodig bij de FTP Dus onthoud wat je hebt ingevuld.) Domein: Dit is het domein naam wat we net hebben aangemaakt bij PceeXtreme. (klantnaam.buro210.com) 14. Klik op home en vul bij het zoekbalkje de eerste letters van de klantnaam in. 15. Klik op de klant en log in. 16. Klik hier op MySQL management 17. Maak een nieuwe database aan. Sla het wachtwoord op in de klanten map op de server, onder de naam Servergegevens. In dit tekstbestand zet je ook de FTP gegevens. ( Gebruikersnaam + Wachtwoord van stap 13. ) Nu is het test domein, de database en de ftp aangemaakt. Nu kan wordpress geïnstalleerd worden en kan de website vorm krijgen. Pagina 3/10
2. Start installatie wordpress 1. Open FileZilla 2. Ga naar het site beheer ( Bestand > Sitebeheer) 3. Maak een nieuwe site en vul bij host 128.140.219.222 in. 4. Zet inlog type op normaal en voer hier de FTP in die we net hebben aangemaakt. 5. Ga naar google en download wordpress. Dit moet altijd via het internet vanwege nieuwe updates en versies. 6. Ga in filezilla naar Domains > Domeinnaam > Public_HTML en plaats hier het zip document van Wordpress. 7. Nu gaan we terug naar het admin panel. Als we nog ingelogd zijn op de juiste user zien we in het menu files staan. Deze klikken we open. 8. Hier gaan we naar dezelfde map als bij stap 6. Domains > domeinnaam > public_html. Hier zien we het zip document staan. Hier klikken we extract. Wanneer deze uitgepakt is verwijderen we het zip document. 9. Nu gaan we terug naar file zilla. Hier zien we nu een mapje Wordpress staan. Deze klikken we open en we selecteren alles en slepen we naar de hoofd map (Public_HTML). 10. nu gaan we naar het domein naam op het internet. Deze is ALTIJD zonder www. 11. Nu kunnen we wordpress instaleren. Hier vullen we alle gegevens in inc de database gegevens. 12. Het is belangrijk dat de inlog gegevens van Wordpress bij elke site het zelfde zijn. Dan kan iedereen er in van Buro210 wanneer dit nodig is. Daarom worden de inlog gegevens het volgende: Gebruikersnaam: beheerder Wachtwoord: 2821Atburo210 Nu staat wordpress geinstaleerd op het domein. er kan nu begonnen worden met het stijlen van de website. 4. Het ontwerp Het is belangrijk dat de website op het internet hetzelfde is als in het ontwerp. Het definitieve ontwerp vind je in de klanten map. Het is belangrijk dat je het ontwerp uit het mapje definitief pakt. Er kan veel verschil zitten tussen de correctie rondes van het ontwerp. Het is de bedoeling dat de klant geen verschil ziet tussen de website en het ontwerp. Het enige wat verschillend is, is dat ontwerp niet beweegt en de website wel. Je kan in het startvergaderings verslag somige bedoelingen lezen. belangrijk - Dat het lettertype bij google.com/fonts vandaan komt. - Dat de formaten het zelfde zijn - Dat er binnen de 1000px gebleven word. ( Dit heeft te maken met de verschillende beeldschermen die er zijn. ) Mochten er vragen over het ontwerp zijn, kan dit gevraagd worden aan Kimberly. Pagina 4/10
4. Front-end development Wordpress werkt iets anders als Joomla. Bij Joomla kunnen wij altijd dingen terug zetten van verschillende extensies. Bij wordpress is het belangrijk dat de instellingen in begin al goed zijn. In wordpress gaan we dus als eerste een template kiezen, 4.1 Thema 1. Aan de linkerkant is een menu. Hier kunnen wij alles in vinden. 2. We beginnen bij Weergaven > Themas. 3. Dan klikken we op nieuwe toevoegen. 4. Dan klikken we op het kopje populair en vullen we in het zoekbalkje Vantage in. 5. Als we over het thema plaatje gaan komt er instaleren te voorschijn. Hier klikken we op. 6. Nu staat er onder weergave Theme settings. Deze vullen we alvast helemaal in. Pagina 5/10
4.2 Extensies De extensies plaatsen we allemaal via wordpress zelf. Hier onder is een lijstje met de meest gebruikte modules en extensies. Mocht je gekozen module er niet tussen staan, kan je via google een gewenste extensie opzoeken. Hiervan onthoud je de naam en daar doe je het volgende mee: 1. Onder weergaven heb je een kopje met plug-ins. Deze klikken we open. 2. Linksboven in staat een button waarin staat Nieuwe plug in. Hier klikken we op. 3. Hier zien we nu een lijst met alle plug-ins. 4. Rechts boven in kunnen we de naam van de plug in opzoeken 5. Als we dan op Nu instaleren drukken is de plug-in geïnstalleerd. Lijst met meest voorkomende plug-ins: - Contact Voor het contact formulier gebruiken we plug-in: Form maker - Meer talen Voor het meer talen systeem kan er verschillende extensies gebruikt worden. Dit ligt aan wat voor soort website het is. Voor een simpele website gebruiken we deze: qtranslate-x. Voor een grote website met veel verschillende extensies gebruiken we WPML. Deze is betaald - Foto album Bij het foto album gebruiken we deze plug-in: Gallery by Supsystic. Deze heeft veel mogelijkheden en bijna alle instellingen kunnen in de plug in zelf worden ingesteld. - Agenda / Evenementen module Bij agenda word deze gebruikt: Timely s WordPress Calendar - Project module Voor project module is geen extensie in wordpress. Deze word gemaakt bij de standaard berichten. - Blog / Nieuws Voor project module is geen extensie in wordpress. Deze word gemaakt bij de standaard berichten. - Tekst bewerker Nu kunnen alle teksten ook aan gepast worden, maar deze plug in zorgt voor een word omgeving. Dit is erg handig voor de klanten. Tiny JCE editor - Social media Social media worden als een link toegevoegd. Het social media icoontje kunnen we uit het ontwerp halen en in wordpress plaatsen als een afbeelding. Het template wat we gebruiken heeft ook wat extensies. Deze worden ook gebruikt. Pagina 6/10
4.3 Het beheer Het begin We beginnen met de pagina s aanmaken en het menu instellen. 1. In het menu kunnen we op pagina s klikken. Hier maken we alle pagina s aan. De menustructuur kan terug gevonden worden in het ontwerp en start vergaderings verslag. 2. Wanneer alle pagina s zijn aangemaakt, gaan we naar weergave > menu. Hier maken we een menu aan en plaatsen wij alle menu items. 3. Bij theme settings kunnen wij het menu koppelen. Pagina s De pagina s krijgen een soort drag and drop lay-out. Op elke pagina moet wel het e.e.a aangepast worden. Hier onder een beschrijving hoe dit gedaan kan worden. 1. We klikken een pagina open. 2. Rechts boven is staat een button met scherminstellingen. Hier klikken we reacties open. 3. Onder de content komt er een vlakje te staan. Deze 2 vinkjes zetten we uit! Zo kan er geen spam binnen komen. 4. Rechts hebben wij ook allemaal losse vlakken staan. Zie printscreen hiernaast > 5. Bij pagina-atributen zien we hoofd en sjabloon staan. - Hoofd > Bij hoofd vullen we hoofdpagina is. Stel je hebt een sub menu dan valt deze ergens onder. Dit vullen we hier in. - Sjabloon > Sjablonen zijn losse templates. Deze template kunnen we in de code vinden. Deze heb je soms nodig. Dit ligt aan het ontwerp. Er staan er al een paar standaard in. Vaak heb je ze allemaal nodig. - Page metaslider > Deze is voor de slideshow die in veel ontwerpen boven op de pagina staan. Vergeet niet om op bijwerken te klikken, wanneer je dit heb gedaan! We blijven nu op dezelfde pagina maar gaan het lay-out veranderen. 1.Rechts boven het tekstvlak staat pagebuilder hier klikken we op. 2. Nu komen we in het drag and drop module terecht. 3. Hier kunnen wij rijen toevoegen en die rijen worden de tekst vlakken toegevoegd. Wat is belangrijk? Er zijn een paar dingen die belangrijk zijn als wij een website/webshop opleveren die ingesteld moeten staan. Dit zijn niet alleen dingen die nodig zijn voor analytics maar ook slordigheidsfoutjes. Het zijn ook maar kleine dingetjes die voor veel verbetering zorgen. - Na het invullen van het contactformulier moet er een speciale bedankt pagina zijn met een unieke url. - Na het inschrijven voor de nieuwsbrief moet er een speciale bedankt pagina zijn met een unieke url en een bevestigingsmail worden verstuurd. - Bij het starten van de bouw van de website moet het zo worden ingesteld dat de website niet gevonden kan worden in Google. - Ook moet de url schoon zijn. Dit betekend da er geen index.php achter het domein mogen staan. Pagina 7/10
6. Oplevering aan de klant Wanneer je denkt klaar te zijn met de website en de website zelf heel goed gecontroleerd heb. Kan Kimberly de website nakijken. Zij geeft dan nog eventuele punten door wat aangepast moet worden. Wanneer dit helemaal in orde is, is de website klaar om opgestuurd te worden. Kimberly heeft het contact met de klant. Zij zal de website opsturen. De klant heeft dan ook nog een correctie ronden ( of meer.. dit staat in de offerte.) Kimberly koppelt de correcties door. Wanneer de website akkoord is bevonden en de facturen zijn betaald, kunnen de inlogcodes verstreken worden. Wanneer de klant ook een workshop heeft. Plant Kimberly de workshop in. Hier word uitgelegd hoe de klant zijn/haar eigen website kan onderhouden. In het begin zal iemand anders de workshop geven van jou zelf gebouwde website. Hier kunnen jullie bij zitten, maar later gaan jullie deze geheel zelf geven. Het is belangrijk dat je de eerste keren meeschrijft. Zo onthoud je de uitleg zelf het snelst. Tijdens de workshop zal de klant nog met een paar kleine dingen komen, of vind jezelf nog wat kleine punten in de achterkant. Deze moeten ook nog doorgevoerd worden. 7. Bijhouden van je projecturen HarvestApp Tijdens de ontwikkeling van je project is het belangrijk dat je bijhoudt waar je precies mee bezig bent en hoeveel tijd dit precies in beslag neemt. Op deze manier kan BURO210 zien waar de uren in zitten en kan BURO210 het ontwikkelproces verbeteren. Wij hebben hiervoor een systeem waarbij per project uren kunnen worden bijgehouden. In je e-mail vind je een mail van HarvestApp met je e-mailadres en wachtwoord om in te loggen. Doe hiermee het volgende: 1. Ga naar buro210.harvestapp.com 2. Login met je e-mailadres en wachtwoord 3. Klik bovenaan de pagina op Timesheets 4. Klik links op het plusje 5. Kies je project en taak en start je timer Staat je project er niet tussen? Vraag dit dan aan Kimberly! Het is belangrijk dat je dit voor iedere handeling doet. Heb je op een dag bijvoorbeeld 3 projecten waar je aan werkt, dus je de timesheet dus 3 keer aanpassen. Ieder project wordt aan het begin van de maand door Kimberly aan je toegewezen. Als je start zul je dus altijd het desbetreffende project in je lijst zien staan. LET OP: uren welke vergoed worden, worden uitbetaald vanuit HarvestApp. Mis je dus per dag een aantal uur, betekent dit dat je niet gewerkt hebt. Leer jezelf daarom dus aan dat je, voordat je ergens aan begint, je de timesheet aan zet. Tijdens de lunch zet je de timer uit. In de kleine pauzes mag je de timer laten lopen. Pagina 8/10