Les 2: instellingen + pagina’s
Instellingen van WordPress instellen. Als het goed is hoef je de instellingen maar 1 keer te bekijken & aan te passen voor jouw website. Maar denk er wel even over na.
De websitetitel
Hier vul je de titel van de website in. Deze wordt getoond in het browser tabblad van de bezoeker, dus dat is belangrijk!
De ondertitel
Vul hier (eventueel) een korte omschrijving van de website in. Denk hier ook goed over na, want deze omschrijving kan ook gezien worden aan bezoekers (afhankelijk van de webbrowser). Bij sommige WordPress thema’s wordt deze omschrijving ook in het thema zelf weergegeven.
WordPress adres en siteadres
Pas op bij deze opties, je kunt deze niet zomaar wijzigen omdat deze verwijzen naar de locatie op de server waar WordPress op is geïnstalleerd. Normaal gesproken staat hier de URL van je website ingevuld. Zo niet, neem dan eerst contact op met je hostingpartij voordat je iets wijzigt.
E-mailadres
Vul hier het e-mailadres in dat je wilt gebruiken voor de website. Hier worden onder andere notificaties vanuit WordPress zelf & van nieuwe reacties op berichten naartoe gestuurd.
Lidmaatschap
Geef hier aan of bezoekers zich mogen registreren voor de website. (Dit doen de meesten niet).
Standaard rol voor nieuwe gebruikers
Geef hier aan welke rol je standaard wilt toewijzen aan nieuwe gebruikers. De rol kun je dus ook zien als een rang, wat mag een gebruiker allemaal?
De hoogste rang = Beheerder. Standaard staat dit op Abonnee. Uiteraard kun je dit later per gebruiker wijzigen.
Meer informatie over de rollen »
Notaties
Tijdzone, Datumnotatie, Tijdnotatie en Week begint op
Geef hier aan hoe je de tijdsaanduiding wilt hebben.
Onder Lezen: Kies je startpagina
Zie video met uitleg (1 min 34 sec.):
Permalinks
De permalinks instellingen vind je door in het navigatiemenu naar ‘Instellingen’ te gaan en vervolgens op ‘Permalinks’ te klikken. De permalinks zijn zeer belangrijk voor de vindbaarheid van je blog en indexatie door Google en andere zoekmachines.
Wat is nou een permalink?
Permalinks zijn de url’s die je pagina’s en berichten krijgen. Stel je hebt een website en de url van je website is www.website.nl. Nu maak je op 11 mei 2009 een nieuwe pagina of bericht aan met de titel ‘WordPress CMS Handleiding’ en dit is het 5e bericht of de 5e pagina die je aanmaakt.
Dit zijn de permalink varianten:
Standaard: www.website.nl/?p=5
Jaar, maand, dag en naam: www.website.nl/2009/05/11/wordpress-cmshandleiding/
jaar, maand en naam: www.website.nl/2009/05/wordpress-cms-handleiding/
Numeriek : www.website/archieven/5
Berichtnaam: www.website.nl/wordpress-cms-handleiding/ (onze voorkeur)
Aangepaste structuur: zelf een structuur maken…
Permalinks zijn belangrijk
Waarom is dit zo belangrijk? Dat is heel eenvoudig uit te leggen. Google en andere zoekmachine indexeren pagina´s naar zoekwoorden zodat mensen die bijvoorbeeld op google.nl zoeken, de juiste pagina´s snel vinden. Door je permalinks zo in te stellen dat je zoekmachines helpt met het correct indexeren van je pagina´s en berichten wordt jouw website uiteindelijk sneller gevonden.
Voorbeeld: We hebben een pagina met de URL www.website.nl/?p=5 en een pagina met de URL www.website.nl/wordpress-cms-handleiding/. Het laatste zal eerder goed scoren bij de zoekresultaten van Google als iemand zoekt op de zoekwoorden ‘WordPress handleiding’.
Pagina’s met menu aanmaken
We gaan met deze Cursus een kleine website maken voor een bakker. De bestanden daar voor staan hier: Bakker bestanden.
Met de Nieuwe pagina module is het mogelijk om nieuwe pagina’s voor de website aan te maken.
Met behulp van WordPress is het zeer eenvoudig om snel nieuwe pagina’s te plaatsen op je blog of website. Om een nieuwe pagina op te maken ga je in het navigatiemenu (linkerkant) naar de module ‘Pagina’s’ en hier selecteer je ‘Nieuwe Pagina’. Nu kom je in de editor terecht waar je een nieuwe pagina aan je blog of website kunt toevoegen.
Voer de titel in
Je start met het maken van een nieuwe pagina door in de eerste balk de titel van het pagina in te vullen. De titel komt bovenaan het bericht te staan en het is het beste om een unieke naam te gebruiken.
Permalink van de pagina
De permalink is de URL van de pagina. Deze kan aangepast worden door op de knop ‘Bewerken’ te klikken. Zorg ervoor dat de belangrijkste zoekwoorden in de permalink staan zodat de pagina zo goed mogelijk door de zoekmachines gevonden kan worden. De permalink wordt pas zichtbaar nadat je de pagina een keer hebt opgeslagen als concept.
Inhoud schrijven met de Visueel / HTML editor
Nadat je de titel van de pagina hebt ingevuld schrijf je de inhoud van de pagina in het invulveld onder de titel. De Visueel tab (rechts) is de editor waar je de opmaak van pagina’s mee aanpast. (onder de tekst tab krijg je de HTML code te zien.)
Ook kun je in deze editor foto’s en bestanden toevoegen. Je ziet in de balk boven het veld een aantal opties staan die ook gebruikt worden door MS Word. Voor de opmaak van de tekst heb je aan deze opties meestal voldoende.
Zie video over tekst met het “oude” WordPress:
Zie uitgebreide video over het “nieuwe” WordPress (Gutenberg) (introductie in 2018):
Inhoud schrijven met de Gutenberg blokken editor
WordPress 5 (ook bekend als WordPress Gutenberg, dec. 2018) bevat de Gutenberg Block Editor.
Met de introductie van de Gutenberg Block Editor is de manier waarop je pagina’s maakt compleet veranderd. De WordPress Gutenberg Block Editor vervangt de oude editor die inmiddels alweer meer dan 15 jaar oud is. Met de WordPress Gutenberg Block Editor bouw je je pagina’s op in blokken.
Voor elk apart onderdeel bestaat een aparte blok. (Klik maar eens op het PLUSJE linksbovenin, daar zie je alle blokken).
Er zijn blokken voor titels, tekst, afbeeldingen, knoppen enz.
De Blokken-editor
Voorbeeld van Gutenberg Blocks
(klik op een afbeelding hieronder).
Links is een voorbeeld van een webpagina met een complexe opbouw.
Rechts is hoe deze pagina in elkaar is gezet met verschillende blokken.
Deze blokken zal je het meest gebruiken:
- Paragraaf (tekst)
- Kop
- Afbeeldingen
- Kolommen
- Galerij
- Omslagafbeelding
- Knoppen
- Vulelement
- Scheidingslijn
Andere blokken
- Omslagafbeelding
- Quote (citaat)
- Lijst
- Embed (bijvoorbeeld YouTube)
- Tabellen
- Widgets
- Meer (lees verder)
- Media & tekst
- Groep (voor bv. dezelfde achtergrond)
- Eigen HTML
Extra eigenschappen van een pagina
Pagina attributen of pagina stijl
Met de Pagina-attributen geef je de samenstelling van je pagina aan. De module staat rechts onder de Publiceren module naast het invulveld voor de pagina. In de module staan drie opties; Hoofd, Sjabloon en Volgorde.
Hoofd
Je kunt de pagina’s in hiërarchieën onderbrengen (nesten). Je kunt bijvoorbeeld een “Over mij” pagina hebben met daarachter de pagina’s “Levensverhaal” en “Mijn hond”. Er zijn geen limieten aan het aantal niveaus waarin pagina’s genest kunnen zijn.
Template
Met templates kun je de lay-out van een pagina aanpassen. Niet alle thema’s ondersteunen dit en meestal zijn het de betaalde thema’s waarop deze opties zitten.
Volgorde
Pagina’s staan meestal op alfabetische volgorde, maar je kunt hier je eigen volgorde kiezen door een nummer in te voeren (1 voor de eerste, 2 voor de tweede enz.).
SAVE/BEWAREN
Klik om te bewaren op de blauwe Publiceren of bijwerken knop.
Hierna moeten we websitebezoekers de mogelijkheid geven om naar de verschillende webpagina’s te navigeren d.m.v. een menu (Knoppenbalk)
Menu maken
1. Een menu aanmaken
Ga in je WordPress Dashboard naar Weergave > Menus. Zo kom je in het Edit Menus venster, waar je een menu kunt aanmaken. Het eerste dat je moet doen is je menu een naam geven. Afhankelijk van welk WordPress thema je hebt kun je één of meerdere menu’s aanmaken. In het geval dat je er meerdere kunt aanmaken is een beschrijvende naam wel zo handig (‘Hoofdmenu’ of ‘submenu’ bijvoorbeeld) om verwarring te voorkomen.
2. Pagina’s en links toevoegen aan je WordPress menu
Zodra je een menu hebt benoemd en aangemaakt, is het tijd om er pagina’s en links aan toe te gaan voegen. Aan de linkerkant van de menu structuur staan je pagina’s, sleep ze naar het rechterdeel en ze komen in je menu te staan. Bij de links module vul je een link van jouw keuze in en geef je het menu item een naam. Vervolgens klik je op ‘Add to menu’ om de link ook aan het menu toe te voegen.
3. De menu items in de juiste volgorde zetten
Als het goed is heb je nu alle gewenste pagina’s in het menu gezet. Die staan waarschijnlijk niet allemaal in een logische volgorde. Gelukkig kun je door middel van drag and drop de menu items in de gewenste volgorde zetten.
4. Submenu’s aanmaken
Bijna op dezelfde manier als het op volgorde zetten van de menu items kun je submenu’s aanmaken: je sleept de box onder het overkoepelende menu item en iets naar rechts. Submenu’s zijn handig wanneer je veel verschillende pagina’s hebt maar het hoofdmenu graag overzichtelijk wilt houden.
5. De locatie van het menu bepalen
De laatste stap is het instellen van de locatie van je menu. Dit kun je doen door op het ‘Menu Location’ tabblad te klikken, boven in het venster. Hier kun je eenvoudig kiezen welk menu je in welk gedeelte van je website wil hebben.
Let op!
Het belangrijkste menu (of het enige menu) moet het vinkje “Hoofdmenu” aangevinkt zijn!
Zie video:
Bakker website spullen
We hebben tekst & afbeeldingen nodig om onze nieuwe website mee te vullen.
(les 2.) In ons geval gaan we een Bakker website maken.
De bestanden (foto’s) in 1 zip-bestand
https://www.dropbox.com/scl/fi/qaf5lfysn1uejylzb58zt/Bakker-website.zip?rlkey=fd11bb3w039lt66nr0or0bs9h&dl=0
De tekst staat hier.
https://www.beeldfabriek010.nl/wp-content/uploads/Tekst_Bakker.rtf
Basis uitleg op het internet:
Eerste stappen met WordPress = https://codex.wordpress.org/nl:Eerste_stappen_met_WordPress
Webpagina’s + opmaak tekst uitleg = http://www.bobdewebbouwer.com/wordpress-handleiding/teksten-op-je-wordpress-site-zetten-of-aanpassen/
Bestanden voor foto gallery:
Foto-1: 
Foto-2 : 
Foto-3: 
foto-4: 
foto-5: 
Header kaal: 
Header met Titel: 
Afbeelding 2000 x 1200: 
Afbeelding-2 2000 x 1200: 
Websites met info over schermresoluties:
http://www.w3counter.com/globalstats.php
http://gs.statcounter.com/#all-resolution-ww-monthly-201503-201602
Kant-en-klaar thema van WordPress zelf = TWENTY Twenty-One
Zie WordPress website: https://wordpress.org/themes/twentytwentyone
Online Demo = https://themes.getmotopress.com/2021/
Gebruikt voor:
https://hartjenoordereiland.nl/
+
https://www.buitenzoalsbinnen.nl/
+
https://montmartreaandemaas.nl/
In de cursus WordPress van Grafische Cursussen gaan we in eerste instantie met dit thema werken.
Aangezien we een goed werkend thema nodig hebben waarmee we eerst aan de slag gaan met pagina’s, berichten en het menu.
Pas na een aantal lessen gaan we kijken welke mogelijkheden er zijn met andere thema’s voor WordPress.
Extra info over 2021
Er is een plug-in om meer aanpassingen te kunnen doen aan het thema 2021>
Deze plug-in heet: Options for Twenty Twenty-One
Info op: https://nl.wordpress.org/plugins/options-for-twenty-twenty-one/
Zie ook: https://webd.uk/
–
OUD: Uitleg over thema 2020:
(twentyTwenty)
Dit thema zit standaard bij WordPress 5.3
Zie WordPress website: https://wordpress.org/themes/twentytwenty/
Goeie handleiding staat op: www.kinsta.com/nl/blog/twenty-twenty-thema/
De demo website voor 2020: https://themes.getmotopress.com/2020/
Thema Twentytwenty is ook gebruikt voor deze websites:
www.logopedieReigersbos.nl + www.wereldoorlog2bethesdahoogeveen.nl
Video 2020:
–
OUD: Uitleg over thema 2019:
Online Demo = https://themes.getmotopress.com/2019/
Uitleg Twenty Nineteen
https://codex.wordpress.org/Twenty_Nineteen <- met Quick Specs
On a 1440px laptop screen, the main column width is up to 1032px wide with the one column layout.
There is one widget area in the footer with a column width of 1032px.
The recommended Featured Image size is 2000px wide by 1200px high.
OUD: Uitleg over thema 2017:
Online Demo = http://2017.wordpress.net/
Uitleg Twenty Seventeen
https://codex.wordpress.org/Twenty_Seventeen <- met Quick Specs
Gratis beeldbewerkingsprogramma’s (i.p.v. Photoshop)
Photopea
Website: https://www.photopea.com/
Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures.
Do Online Photo Editing in your browser for free!
Gimp
Website: https://www.gimp.org/
GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software. Whether you are a graphic designer, photographer, illustrator, or scientist, GIMP provides you with sophisticated tools to get your job done.
—
PIXL editor
Website: http://pixlr.com/editor/
Online editor, werkt dus overal waar je internet hebt. Maar dat is voor WordPress ook het geval 😉
—
PicMonkey
Website: https://www.picmonkey.com/
Ook een online editor. Met deze site kun jij ook heel gemakkelijk je foto’s zelf verkleinen.
PicMonkey is erg gebruiksvriendelijk, hier de handleiding van Way2Web over de basisfuncties (schalen, bijsnijden en opslaan).
—
Photoscape
Website: http://x.photoscape.org/
PhotoScape is a fun and easy photo editing software that enables you to fix and enhance photos. Software voor Windows 98, please use PhotoScape 3.4
If you are a user of Windows 10 or Mac, please use PhotoScape X
2e download webpagina: http://www.photoscape.org/ps/main/download.php