WordPress website gebruikers handleiding

Beste gebruiker, nogmaals bedankt dat je voor een website van Javoweb hebt gekozen, we hopen dat deze aan je verwachtingen voldoet. Mocht dat niet zo zijn, dan kun je zelf wijzigingen aanbrengen in je website. Als je wil kun je in principe alles veranderen, maar zeker als je nieuw bent zul je dan ongetwijfeld hier en daar tegen problemen aanlopen. Deze beknopte handleiding is bedoeld voor “gebruikers” en beschrijft enkel “de eerste stappen” ; wat je nodig hebt om kleine veranderingen aan te brengen in je website of bij je host. We behandelen hier geen complexe materie.

De website bestaat grofweg uit twee “onderdelen”;

  1. De host (Antagonist); deze heeft je domeinnaam en website in beheer en is de plek waar je de email van je website ontvangt (en eventueel doorstuurt naar je eigen email). Voor deze diensten betaal je jaarlijks een bedrag aan de host.
  2. Je website zelf die gebouwd is in WordPress

BELANGRIJK – VOORDAT JE BEGINT!!

Natuurlijk wil je nu het liefst gelijk aan je website beginnen, maar zeker als je nieuw bent in WordPress is de kans aanwezig dat er iets fout gaat. Stel dat dit gebeurt, zou het dan niet fijn zijn als je de boel weer kunt herstellen naar hoe het was? Dat kan met een backup die bij je Host staat. Wanneer je je website krijgt hebben wij hier een eerste backup voor je klaar staan. Hier onder laten we je zien hoe dat herstellen met een backup werkt. Of hoe je een nieuwe backup maakt als je je site veranderd hebt.

.

Het eerste deel; de Host (Antagonist) – inloggen

Van Antagonist heb je login gegeven ontvangen waarmee je onder andere je email kunt instellen en backups maken.

Login op ‘Direct Admin‘ via de link http://www.jedomeinnaam.nl:2223/ (typ je domeinnaam met daar achter ‘:2223’)

Je krijgt nu dit loginschermpje te zien

Direct Admin Login

Typ de inloggegevens voor ‘Direct Admin’ (user en password) die je van Antagonist (of Javoweb) hebt ontvangen. Je komt dan in de ‘Home’ van Direct Admin.

Backups maken:

Klik in de eerste kolom onderaan op ‘Create / Restore Backups’

Create Restore Backups

Als je je website veranderd hebt en er gaat vervolgens iets fout, dan heb je niet zoveel aan een oude backup omdat daar al je veranderingen niet in staan. We leggen je eerst uit hoe je een nieuwe backup moet maken; je kunt alle vinkjes beneden laten staan zoals het is.

Enige wat je hoeft te doen is klikken op de knop ‘Create Backup’. Er gaat nu wat tijd overheen waarna je de nieuwe backup-file kunt vinden in het veld onder deze knop. Klaar!

Create Backup

Is alles nu fout gegaan en wil je je website herstellen naar hoe het was?

Selecteer dan de backupfile die je wil terugzetten (in dit geval is er maar 1, ‘Backup-Jan-6-2014-1.tar.gz’) en klik op ‘Select Restore Options’. Er opent nu een nieuw scherm; enige wat je hoeft te doen is klikken op ‘Restore Selected Item’.

Select Restore Options

De backup wordt teruggezet en je website is weer zoals het was.

Hoeveel backups moet ik hebben?

In het venstertje rechts kun je zien hoeveel ruimte (Disk Space) je website gebruikt. Een backup (kopie van je website) neemt veel ruimte in beslag; 3 of 4 backups is normaal gesproken echt voldoende. Zodra je meer backups krijgt, verwijder (delete) dan de oudste backup(s).

Onderhoud:

We beschrijven hier hoe je zelf het onderhoud aan je website kunt doen om deze ‘up to date’ te houden. Dit is noodzakelijk omdat oudere WordPress versies, thema’s en plugins die je website gebruikt ‘bugs’ kunnen bevatten die het voor hackers makkelijker maakt om in te breken op je site. Javoweb.com levert je website bijgewerkt en kant en klaar af, maar vanaf dat punt zijn wij niet aansprakelijk bij achterstallig onderhoud. Het ‘onderhoudsverhaal’ is niet moeilijk, maar je moet het wel doen. Heb je straks het onderhouds-verhaal gelezen en denk je dat het niets voor je is, neem dan contact op met Javoweb.com voor een onderhoudscontract.

Ok, daar gaan we. Er zijn twee manieren waarop je je website kunt bijhouden;

1. Automatisch je website bijhouden (in Direct Admin)

Dit is natuurlijk de makkelijkste manier! Als je in de ‘Home-page’ van Direct Admin omlaag kijkt zie je onder ‘Web Applications’ een blauw vierkantje met een ‘W’ er in staan. Dat is je WordPress website – klik hier op…

Onderhoud1

Je komt nu in ‘Installatron’ – een programma waar je oa je website automatisch kunt laten bijwerken zodra er nieuwe versies van WordPress, themes en plugins zijn. Ook kun je hier het automatisch maken van backups regelen. Beneden zie een voorbeeld hoe je deze waardes kunt invullen.

Onderhoud2

Op het moment van schrijven is er een probleem bij Installatron dat ALLE backups bewaard blijven, in plaats van bijvoorbeeld alleen de laatste 3. Dat zou er dus toe kunnen leiden dat je opeens een emailtje krijgt van Antagonist dat je schijfruimte vol zit met backups. Dat kun je ook zien rechts in de blauwe balk in de home page; ‘Disk Space’ is dan helemaal gevuld en je ziet een rode (ipv de groene balk)

Onderhoud3

Totdat dit Installatron probleem verholpen is moet je de oudste backups handmatig verwijderen. Dat doe je in de 2e tab van Installatron ‘My Backups’; zit je schijfruimte vol, selecteer dan backups met de oudste datum en verwijder deze. Klaar!

Onderhoud4

2. Handmatig je website bijhouden in (WordPress zelf).

Je moet hiervoor eerst inloggen in WordPress – zie beschrijving hier onder

E-mail instellen:

direct admin

In ‘Home’ kun je onder ‘E-mail management / E-mail Accounts’ de email van je website instellen, aanpassen en eventueel laten doorsturen (forwarden) naar je eigen email-adres

Een en ander staat uitgebreider uitgelegd in deze link van Antagonist https://www.antagonist.nl/help/

Kom je er niet uit, ga vooral NIET experimenteren in deze omgeving maar email / bel dan even met Javoweb.com – kijken wij hoe we je verder kunnen helpen.

.

Het tweede deel; WordPress.

WordPress is het programma waarmee je website gebouwd is. Oorspronkelijk begonnen voor blog-sites maar vanwege de grote gebruiksvriendelijkheid kan het rekenen op een groeiende populariteit en wordt het ook steeds meer gebruikt voor gewone websites.

Inloggen in WordPress;

type je domeinnaam in en daarachter ‘/wp-admin’ (bv ‘www.mijndomein.com/wp-admin’)

Je krijgt nu het login scherm van WordPress te zien; vul je WordPress gebruikersnaam en wachtwoord in

login

Je komt nu in ‘Het Dashboard’ – de “achterkant” / administratieve kant van je website. Dit is waar je de veranderingen maakt die je (de klant) vervolgens aan “de voorkant” (www.jedomeinnaam.nl) kunt zien

dashboard

Klik in de zwarte balk rechts naast het W-logo; er opent een scherm ‘Site bekijken’. Klik je daar op dan kom je aan de voorkant van je site. Zo kun je dus iets veranderen aan de achterkant, het resultaat checken aan de voorkant en dan weer terug naar de achterkant..etc. tot je het resultaat goed vindt.

In de kolom aan de linkerkant staan de onderdelen van je site.

Onderhoud (vervolgd):

2. Handmatig je website bijhouden in (WordPress zelf).

Zonet heb je geleerd hoe je automatisch je website kunt bijhouden, hier leer je hoe je dit ook handmatig kunt doen. Wees er goed van bewust dat een nieuwe update van WordPress, thema of plugin tot gevolg kan hebben dat je website crashed! De meeste onderdelen van je WordPress website zijn nl gemaakt door mensen over de hele wereld en hoewel natuurlijk getest wordt kan het zo zijn dat een nieuwe update opeens niet meer met een ander onderdeel samenwerkt. Daarom ook het belang van backups (die je ook automatisch kunt laten maken) zodat je de oude situatie kunt herstellen en daarna kunt zoeken naar een oplossing.

Hoe weet je nu dat er ‘upgrades’ zijn? Zodra je hebt ingelogd in WordPress en je ziet in de linkerbalk onder ‘Dashboard’ bij ‘Updates’ een rode bal, dan is dit het teken. Het nummer in de bal is het aantal updates. Klik op updates, daarna zie je wat allemaal ge-updated kan. Heb je een goeie backup gemaakt? Update dan vervolgens naar de nieuwe versies als je je systeem wil bijwerken. Zonder onderhoudscontract is dit voor eigen risico! Hiermee sluiten we onderhoudsgedeelte af.

Onderhoud5

Het WordPress Menu;

Even alleen de belangrijkste in het kort, straks meer gedetailleerd;

  1. Media = waar je de afbeeldingen van je site op slaat
  2. Pagina’s = waar de pagina’s van je site staan
  3. Weergave = plaats waar je oa de (keuze)menu’s instelt
  4. Plugins = handige tools voor je site
  5. (Gallery = hiermee kun je een fotogallerijen beheren – niet in elke website aanwezig)

dashboard menu

1. Klik op ‘Media’; de mediabibliotheek opent – dit is waar alle foto’s van de website worden bewaard – en wanneer je nu op ‘Nieuw bestand’ klikt, opent een nieuw scherm waar je ‘Bestanden selecteren’ klikt. Selecteer nu op je pc de foto die je op je site wil hebben, en upload deze in de bibliotheek. Zometeen gaan we deze foto op een pagina zetten

mediabibliotheek

2. Pagina.

Eerst gaan we echter een bestaande pagina bewerken (wat je het meest doet); stel dat we tekst op een pagina willen veranderen. Klik op ‘Pagina’s’ – rechts opent nu een scherm waar alle pagina’s van je website staan. Selecteer de pagina die je wil veranderen (deze namen corresponderen met de namen in je website-menu) en klik op de titel, de pagina opent nu. Eigenlijk werkt het nu precies als Word; in het blanke scherm kun je tekst typen, lettertype & grootte kiezen..etc.

pagina

In dit voorbeeld is er een tabel zichtbaar; je kunt hier zelf teksten veranderen. Wil je tabeleigenschappen veranderen selecteer dan onder het tabel-icoon de wijziging die je wil uitvoeren

tabel

Je kunt van alles veranderen, het kan mis gaan maar zolang je het niet opslaat (blauwe knop ‘Bijwerken’) is er niets aan de hand. Ben je eenmaal tevreden dan moet je het wel opslaan om de verandering ook te kunnen zien. Dit doe je door de blauwe knop ‘Bijwerken’ rechts te klikken.

bijwerken

Je veranderingen zijn nu definitief! Kijk nu ‘aan de voorkant’ hoe het er uitziet. Ok…?

We gaan nu een nieuwe pagina aan je website toevoegen en daar vervolgens die foto in plakken die je in stap 1 in de mediabibliotheek geladen hebt. Ga weer naar ‘Pagina’s’ (linkermenu). Je kunt nu ‘Nieuwe pagina’ selecteren. Typ een titel (pagina-naam) in de balk bovenin je pagina – in dit voorbeeld is de naam ‘Gebruiksaanwijzing website’. Deze naam verschijnt ook in je menu – niet te lang dus, zoals hier!

nieuwe pagina

(Je kunt ook een bestaande pagina te kopieren (je neemt dan ook alle eigenschappen mee) en vervolgens de naam veranderen. Selecteer dan een pagina die al lijkt op wat je wil hebben. Op het moment dat je muis boven de titel hangt opent een schermpje waar je ‘kopieer’ selecteert. Vervolgens zie je zelfde pagina-titel nog een keer met daarachter ‘Concept’. Dit is de kopie die je gaat hernoemen; klik op de titel, de pagina opent. Verwijder de bestaande titel en vervang door een nieuwe titel (hier Nieuwe pagina test). Verwijder na het kopieren de bestaande tekst uit de pagina). Klik rechts op de blauwe knop ‘Publiceren’.

Klik nu even op ‘Alle pagina’s’ links in het menu, ga naar je nieuwe pagina. Wanneer je muis boven de naam hangt verschijnt een menu; selecteer ‘Snel bewerken’ – er opent een nieuw scherm. Zet hier het vinkje ‘Reacties toestaan’ UIT en klik op ‘Bijwerken’

snel bewerken

We gaan nu de foto in je nieuwe pagina plakken; Zoek je pagina weer op, open deze en klik op button ‘Media toevoegen’ (links boven je pagina) – selecteer je foto, eventueel gewenst formaat rechtsonder en daarna klik op ‘In pagina invoegen’. De foto verschijnt nu op je pagina waar je nog aanpassingen kunt maken.

De foto aanpassen; klik op de foto in je nieuwe pagina – er verschijn linksboven in de foto een icoontje van een berg – klik daar op. Je kunt nu het formaat wijzigingen, uitlijnen..etc. Klik op ‘Bijwerken’ als je klaar bent en daarna nog een keer op de blauwe knop ‘Bijwerken’ (save) op je pagina. Klaar.

Hyperlink op de foto; wil je dat je op de foto kunt klikken om vervolgens ergens anders heen te gaan? Dat kan. Klik eerst op de foto waar je een hyperlink aan wil koppelen. Klik nu in de grijze balk bovenin je pagina op het ‘ketting-icoontje’ (rechts van het ‘rechts-uitlijnen-icoontje’)

In het scherm dat nu opent typ je de gewenste URL en eventueel vink je ‘Open link…etc’ aan (link opent een nieuw scherm in je browser). Klik ‘Bijwerken’….

hyperlink

Tevreden? Klik nu nog een keer ‘Bijwerken’ op je pagina – je hyperlink is opgeslagen!

Als je nu naar de voorkant van je website gaat zul je waarschijnlijk je nieuwe pagina nog NIET zien, je moet hem namelijk eerst in het menu zetten!

3. Weergave – Menu. Klik nu in de rechterkolom van het Dashboard onder ‘Weergave’ op ‘Menu’s’; er opent nu rechts een scherm waar je de menu-structuur van je website terugziet. Aan de linkerkant zie je alle losse pagina’s en bovenaan de nieuwe pagina die je net gemaakt hebt.  Vink deze aan, klik op ‘Aan menu toevoegen’ waarna je de pagina rechts onderaan in je menu ziet.

menu

Je kunt deze balk nu naar de gewenste plaats slepen waar je de pagina in je menu wil hebben. Wil je een ‘sub-menu’ (zoals voorbeeld ‘Overig’) maken, sleep dan naam naar rechts..etc. Vergeet niet beneden checkbox ‘Primary Navigation’ AAN te zetten.

Klik blauwe knop ‘Menu opslaan’ en bekijk nu je nieuwe pagina aan de voorkant van je website!

4. Plugins – dit zijn allerlei handige programmaatjes die je (meestal) gratis kunt downloaden gemaakt door een WordPress-community. Ze kunnen je website verrijken met veel leuke extra’s, maar met een beetje pech ook platgooien. De kwaliteit is niet gegarandeerd namelijk. Installeer of update je zelf plugins dan zijn gevolgen voor eigen rekening en vallen buiten verantwoordelijkheid Javoweb!

Werking plugins valt buiten deze korte gebruikershandleiding maar we behandelen er beneden eentje als die al op je website geinstalleerd is; (NextGen)gallery welke je waarschijnlijk wil gebruiken dan.

5. Gallery (volledige naam NextGen gallery) is een populaire plugin – waarmee je complete galerijen en slideshows op een pagina kunt zetten. Daar kun je foto’s in zetten, maar ook Youtube-filmpjes, muziekfragmenten etc. Werking is ongeveer zelfde als ‘Media’ met verschil dat je eerst een gallerij moet aanmaken waar je dan je media in zet. Die gallerij krijgt een nummer en de zoekterm en nummer is het enige dat je daarna op je pagina plakt.

In het voorbeeld hier onder is dat voor fotogallerij 1 [ngga….. id=1] en voor fotogalerij 2 [ngg…. id=2] aan de achterkant.

Gallery1

Aan de voorkant ziet dat er dan zo uit;

Gallery2

Dat zijn de belangrijkste gebruikers-stappen voor WordPress. Denk je dat iets mist, laat het ons svp weten via info@javoweb.com