Handleiding Wordpress 4.4.1., deel 1 Inhoud inleiding... 2 Lees dit eerst voordat je begint met deze handleiding!!!... 3 Wordpress Omgevingen... 4 Inloggen aan de voorkant... 4 Inloggen aan de achterkant... 4 Inloggen Als Beheerder Van De Serverruimte... 5 Portfolio... 6 nog een keer wordpress installeren... 6 De dashboard-omgeving... 7 Pagina toevoegen... 9 Reacties toestaan aanzetten... 10 Installeren van een andere editor... 14 search engine optimization (SEO)... 17 Keyword-onderzoek... 17 Plaatsen van zoekwoorden... 18 HTML-code bekijken... 20 code bekijken van een website... 21 Afbeeldingen Uploaden... 24 Via DirectAdmin bestanden Zoeken... 27 Pagina met afbeeldingen aanmaken... 31 Probleem oplossen met de alt-tag bij de afbeeldingen... 36 instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 1
inleiding Je gaat een website bouwen. Als jij wilt dat iedereen jouw website kan bekijken dien jij jouw website onder te brengen bij een provider. Een provider heeft servers die aangesloten zijn op het world wide web. Bij een provider huur jij een deel van een server en hier plaats jij jouw website. Nadat jij een ruimte gehuurd hebt krijg je toegangscodes tot die ruimte. In die ruimte kun jij jouw website installeren. Je gaat met deze handleiding ook kijken in die ruimte, wat voor bestanden staan er allemaal en als in afbeeldingen upload naar die gehuurde ruimte, waar komen die afbeeldingen da te staan. Het derde onderdeel is dat je een plugin gaat installeren voor het editten van tekst. Indien je vragen hebt raad ik jou aan om contact op te nemen met de docent, Monique Gruijthuijzen. Veel succes. instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 2
Lees dit eerst voordat je begint met deze handleiding!!! Voordat je met deze handleiding start dien je wordpress geïnstalleerd te hebben Hoe dit moet lees je in de handleiding: provider&wordpress.pdf Deze handleiding kun je zelfstandig doorwerken. De gehele handleiding van wordpress bestaat uit 3 delen. Het advies is om elke week twee delen door te werken). Werk alle onderdelen door, dus als ik uitleg hoe je in wordpress een pagina maakt met afbeeldingen doe deze oefening na met jouw eigen website! Tijdens de werkcolleges kun je zowel persoonlijk, telefonisch (088 4813327) en per mail (monique.gruijthuijzen@hu.nl) jouw vragen stellen. Ik raad je wel dringend aan om alle oefeningen uit te voeren en de uitwerkingen met mij te bespreken! Ik wens jou heel veel succes met wordpress. instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 3
Wordpress Omgevingen Inloggen aan de voorkant je kunt op de volgende manieren inloggen: aan de voorkant van wordpress, dit is de omgeving die de bezoeker ziet: http://jouwdomeinnaam/naamvandemapvanjouwsite voorbeeld: http://gruijthuijzen.com/test/ deze informatie is alleen voor de gevorderde student : stel je hebt een subdomein en het subdomein is sitewp en de domeinnaam is gruijthuijzen.com dan log jij in met: sitewp.gruijthuijzen.com Inloggen aan de achterkant De achterkant van wordpress is de omgeving voor de beheerder, de administrator. Hiermee kun je plugins en thema s installeren, gebruikers aanmaken, instellen hoe er omgegaan wordt met berichten, media uploaden http://jouwdomeinnaam/naamvandemapvanjouwsite/wp-admin voorbeeld: http://gruijthuijzen.com/test/wp-admin instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 4
Inloggen Als Beheerder Van De Serverruimte als beheerder van de serverruimte, hiermee kun je email-accounts aanmaken, nog een keer wordpress installeren http://jouwdomeinnaam:2223 voorbeeld: http://gruijthuijzen.com:2223/ instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 5
Portfolio nog een keer wordpress installeren Wordpress kun je in een aparte map installeren of meteen onder jouw domeinnaam. In het eerste deel heb je wordpress geïnstalleerd in een aparte map. Indien je er tijdens de installatie van wordpress voor kiest dat wordpress NIET in een map geïnstalleerd wordt dan kun je de site zien met de url: http://jouwdomeinnaam Redenen om wordpress meerdere keren te installeren. Zoals ik tijdens de bijeenkomsten uitgelegd heb is het van groot belang dat jullie beginnen met het maken van een portfoliosite. Ik adviseer je ook om nu al te starten met het ordenen en verzamelen van jouw communicatieproducten en deze te uploaden naar het portfolio. Ook raad ik je aan om een linkedin-profiel aan te maken en te linken naar deze portfolio-site. De tweede reden is dat je de komende jaren voor andere modulen een website met wordpress moeten maken. De derde reden is dat je een testomgeving maakt, een schaduwsite. Waarom zou je dit doen. Stel je wilt een plugin installeren. Het komt wel eens voor dat zo n plugin jouw website in de war maakt. Als je dan de plugin eerst installeert in een schaduwwordpress-omgeving, dan kun je kijken hoe deze werkt en pas nadat je er tevreden over bent, deze plugin installeren in de wordpressite die je later inlevert aan jouw docent. Heb je hierover nog vragen, stel deze dan. instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 6
De dashboard-omgeving login aan de achterkant van wordpress: http://jouwdomeinnaam/naamvandemapvanjouwsite/wp-admin Hieronder zie je een weergave van de achterkant van Wordpress. Dit is het Dashboard. Tijdens de installatie van wordpress is aan jou gevraagd wat de titel moet zijn van de website. De titel van jouw website staat linksboven. (In dit voorbeeld staat de titel (balans) die ik voor deze eigen website heb opgegeven.) Als jij op bij jouw eigen webstite op de titel klikt, die hier staat, kom je in de voorkant van de website terecht. de voorkant van de website, zoals de gebruiker deze ziet hier staat de tekst: praktijk voor voetreflex en aromatherapie, dit is de ondertitel die ik heb ingetypt tijdens de installatievoorbereiding van deze site instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 7
Ga terug naar de achterkant (naar de dashboard-omgeving) door in het uitklapmenu te kiezen voor Dashboard instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 8
Pagina toevoegen Ga naar de dashboard-omgeving en klik op Pagina s, onderstaand scherm verschijnt: Kies voor Nieuwe pagina, onderstaand scherm verschijnt typ passende titel (zoekmachinemarketing, vraag docent om uitleg) ik heb de pagina de volgende titel gegeven: pagina 1 typ hier wat tekst (zoekmachinemarketing, vraag docent om uitleg) tevreden over de inhoud, kies dan voor publiceren instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 9
Reacties toestaan aanzetten Kies voor Pagina s en selecteer alle pagina s Selecteer bij de pagina (die jij zojuist aan gemaakt hebt) de optie bekijken instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 10
Je ziet dat bezoekers op deze pagina kunnen niet kunnen reageren. Je kunt er ook voor kiezen dat bezoekers WEL kunnen reageren op een pagina. Ga terug naar de dashboard-omgeving. Klik op pagina s; vervolgens op alle pagina s en selecteer bij de (door jou aangemaakte pagina) de optie Snel bewerken instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 11
Onderstaand scherm verschijnt: zet het vinkje voor reacties toestaan aan en kies voor bijwerken instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 12
kies weer voor pagina s, alle pagina s en voor bekijken je ziet dat bezoekers nu wel kunnen reageren op een pagina instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 13
Installeren van een andere editor Zorg ervoor dat je in de dashboard-omgeving bent. Met de editor CkEditor, kun je sneller en eenvoudiger wijzigingen aanbrengen op de pagina s in Wordpress. Om deze editor te gebruiken ga je deze plugin installeren. In de dashboard-omgeving kies je voor een nieuwe plugin instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 14
typ hier: ckeditor en nadat je het zoeken geactiveerd hebt verschijnt dit scherm en kies je voor het installeren van deze editor kies voor Plugin activeren instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 15
Maak een nieuwe pagina aan. Geef de pagina een titel, in dit voorbeeld pagina 2 Zorg ervoor dat het tabblad visueel geactiveerd is zoekmarketing-tip leer jezelf meteen de gewoonte aan om bij zoekwoorden gebruik te maken van h-tags; deze tags vind je onder deze knop; het advies is om maximaal gebruik te maken van 3 soorten headings (h1, h2 en h3); vraag eventueel de docent om meer uitleg en/of toelichting!! Kop 1 staat voor h1 Kop 2 staat voor h2 Kop 3 staat voor h3 Bewaar pagina 2 door op publiceren te klikken instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 16
search engine optimization (SEO) Keyword-onderzoek zoekmachine-optimalisatie begint met een keyword-onderzoek hierbij suggesties om aan keywords te komen: vraag mensen uit de doelgroep welke zoekwoorden zij zouden gebruiken kijk bij de concurrenten welke zoekwoorden zij gebruiken (indien je niet weet hoe jij dit moet doen vraag het dan aan de docent) maak gebruik van de keyword suggestion tool, url: http://ubersuggest.org/ voorbeeld van het gebruik van ubersuggest; stel ik wil zoekwoorden voor een bedrijf dat smeedijzeren hekken maakt Typ hier de zoekwoorden Kies hier voor dutch Kies voor suggest Scroll naar beneden en je krijgt dit resultaat instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 17
Plaatsen van zoekwoorden Maak een nieuwe pagina aan Noem deze pagina smeedijzer Typ hier wat tekst over smeedijzer selecteer het woord eigenschap 1 en maak hier een kop3 van (kop 3 is een h3-tag) selecteer het woord eigenschap 2 en maak hier een kop3 van (kop 3 is een h3-tag) tip, vraag de docent om uitleg indien je nog onbekend bent met zoekwoorden instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 18
Selecteer dit woord en maak hier een kop1 (h1-tag) van instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 19
HTML-code bekijken Indien je het tabblad HTML activeert krijg je dit scherm waarin je de html-code ziet met dus ook de h1 en h3 tags. Zoekmachines indexeren vooral de woorden die tussen de h1, h2 en h3 codes geplaatst zijn. Als je hierna weer het tabblad visueel activeert krijg je onderstaand scherm. Indien je deze pagina wilt bewaren kies je voor Publiceren instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 20
code bekijken van een website Dit onderdeel kun je gebruiken indien je een website gemaakt hebt en samen met een klant snel wil kijken welke onderdelen weggehaald moeten worden. Experimenteer hiermee en bij twijfel vraag je de docent om meer uitleg. Het belangrijk dat jij dit onderdeel goed begrijpt!! Zorg ervoor dat je de browser Google Chrome geïnstalleerd hebt en open met Google Chrome de volgende pagina: http://www.gruijthuijzen.com/photoshop druk op functietoets <f12> en je krijgt onderstaand scherm: Een browser, in dit geval google chrome, vertaalt (onder andere) html-code naar een visuele weergave. Je gaat nu in de html-code iets weggooien en kijken wat voor een effect dit heeft op de visuele weergave. Je hoeft NIET bang te zijn dat je de website stuk maakt. Indien je hier meer uitleg over wilt vraag het dan aan de docent. instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 21
instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 22 klik met de muis op deze regel en je ziet dat die regel overeenkomt met deze visuele weergave
Druk nu op de toets <delete> en de visuele weergave is aangepast, de bovenste balk met afbeeldingen is verdwenen. Wees niet bang, de website is echt niet stuk!! Laad de pagina opnieuw (functietoets <f5>) en je hebt de oorspronkelijke pagina weer terug. Wat is nu het nut van deze oefening. Stel je hebt een website gemaakt en je twijfelt over de visuele weergave. Je kunt nu samen met een toekomstige gebruiker (dus iemand uit de doelgroep) aanpassingen maken. Het maakt niet uit wat je doet, je kunt verknallen wat je wilt, het is een speelomgeving en dit heeft totaal geen gevolgen. Vraag je docent om meer uitleg hierover. instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 23
Afbeeldingen Uploaden kies 4 afbeeldingen en maak deze met photoshop maximaal 400 pixels bij 400 pixels; plaats deze afbeeldingen in een map op jouw laptop ga naar de dashboard-omgeving; kies voor media en voor nieuw bestand kies voor bestanden selecteren en browse naar de map op jouw laptop instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 24
selecteer de bestanden die je gaat uploaden en kies voor openen instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 25
Onderstaand scherm verschijnt in wordpress; je denkt dat er nu 4 afbeeldingen opgeslagen zijn; dit is echter niet zo; wordpress heeft (geheel volgens eigen initiatief) er bestanden (in verschillende formaten) bijgemaakt Op de volgende pagina wordt uitgelegd waar deze bestanden staan. instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 26
Via DirectAdmin bestanden Zoeken Je kunt deze bestanden als volgt vinden: Login in de DirectAdmin omgeving dus: http://jouwdomeinnaam:2223 onderstaand scherm verschijnt: kies voor: File Manager onderstaand scherm verschijnt: kies voor: public_html instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 27
onderstaand scherm verschijnt: selecteer de naam van de wordpress-site in mijn situatie is dat: praktijk onderstaand scherm verschijnt: Kies voor wp-content instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 28
onderstaand scherm verschijnt: Kies voor uploads onderstaand scherm verschijnt: kies voor: 2016 onderstaand scherm verschijnt als je de upload van de bestanden uitgevoerd hebt in januari 2016 kies je voor 01, in februari voor 02, etc. in dit voorbeeld kies ik voor 01 waarschijnlijk voer jij deze oefening pas uit in februari dus kies jij voor 02 instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 29
Dit zijn de bestanden die ik zojuist geüpload heb De overige bestandsformaten heeft wordpress ZELF aangemaakt kies voor logout en ga terug naar de dashboard-omgeving van jouw site instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 30
Pagina met afbeeldingen aanmaken maak een nieuwe pagina aan en noem deze pagina afbeeldingen selecteer het icoon tabel instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 31
maak een tabel met 2 rijen en 2 kolommen, dus met 4 cellen; waarbij elke cel een maximale afmeting heeft van 500 bij 500 pixels geef de tabel een naam en een samenvatting kies tot slot voor ok instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 32
onderstaande afbeelding verschijnt plaats de cursor in de cel linksboven terwijl je in de linker cel staat kies je voor: media toevoegen er verschijnt een ander scherm; kies nu voor mediabibliotheek instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 33
selecteer het bestand Typ hier altijd een onderschrift, een alt-tekst en een beschrijving. Hiermee werk je ook aan de zoekmachinemarketing. Vraag eventueel de docent om meer uitleg hierover. Selecteer de gewenste afmeting. Kies tot slot voor in pagina invoegen plaats de cursor in de cel rechtsboven en kies wederom voor media invoegen en selecteer de tweede afbeelding; vul ook voor deze afbeelding het onderschrift, de alt-tekst en de beschrijving in en kies voor in pagina invoegen herhaal dit voor de cellen linksonder en rechtsonder instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 34
Als het goed is heb je het volgende resultaat: kies tot slot voor publiceren je kunt het resultaat bekijken door vervolgens te kiezen voor: pagina bekijken instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 35
Probleem oplossen met de alt-tag bij de afbeeldingen als je met de muis over een afbeelding gaat zie je geen tekst Bij het toevoegen van de afbeeldingen heb je echter wel tekst getypt bij de alt-tekst Dit is een foutje van wordpress en dat kun je handmatig oplossen instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 36
zorg ervoor dat de pagina van de afbeeldingen geopend is en selecteer het tabblad html vervang bij elke afbeelding het woord alt door title instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 37
kies hierna voor het tabblad visueel kies voor bijwerken tot slot kies je voor pagina bekijken en je zult zien dat er nu WEL tekst verschijnt als je met de muis over de afbeelding beweegt Indien het niet lukt, vraag de docent om hulp!! instructiehandleiding geschreven door Monique Gruijthuijzen 13-2-2016, pagina 38