Website Stichting Veteranen Texel

1. Versiebeheer

DatumVersieWijzigingAuteur
15-07-20241.0Definitieve versieArjan de Wit

2. Inleiding

2.1 Doel

Dit document voorziet in de functionele beschrijving van de componenten die gebruikt worden om de website van de Stichting Veteranen Gemeente Texel, hierna te noemen SVT, te laten functioneren.

Het verdient de aanbeveling om enige kennis van WordPress te hebben voor het beheer van deze website. Voor een optimaal beheer is kennis van php en css een pré.

2.2 Scope

In dit document staat beschreven welke wensen worden ingevuld met de standaard functionaliteit en welke wensen worden ingevuld met maatwerk plugins.

2.2.1 Klantwens

SVT heeft aangegeven een website te willen met een Homepagina, een pagina omtrent het Bestuur en de ANBI, een pagina met artikelen In de media, een pagina voor het tonen van een Agenda en een Contact pagina. Hoewel in offerte 6 - Offerte bouw website Stichting Veteranen Texel van datum 16-02-2024 meer functionaliteiten zijn aangeboden, zijn die functionaliteiten niet geimplementeerd en derhalve in dit document ook niet beschreven.

3. Functionele beschrijving

3.1 Inleiding

De website van de SVT draait op het open source platform WordPress. WordPress wordt door ongeveer 29% van de wereldwijde websites gebruikt en beschikt over een bibliotheek van meer dan 45.000 plugins ten behoeve van extra functionaliteit.

De technische vereisten voor het hosting platform zijn:

  • PHP 7.4 of hoger
  • MySQL 5.7 of hoger OF MariaDB 10.4 of hoger
  • HTTPS ondersteuning

Apache of NGinx worden aanbevolen als robuste serverplatformen voor een WordPress omgeving.

Alle, in dit hoofdstuk genoemde plugins zijn terug te vinden in Appendix A met een link naar de officiële website.

3.2 Layout

Voor de website van SVT wordt gebruik gemaakt van het commerciële design Flatsome Theme. Flatsome biedt een responsive layout voor weergave op desktop, tablet en mobile. De krachtige UX-Builder zorgt ervoor dat de pagina's volledig naar eigen wens kunnen worden opgebouwd. Hiervoor is geen technische kennis benodigd.

3.2.1 Kleurstelling

De primaire kleuren die op de website gebruikt worden zijn:

Hex: #005500

Hex: #56b57f

3.2.2 Lettertype

Er is gekozen voor het lettertype Roboto Slab. Dit font zit standaard in het Flatsome theme.

3.3 Prestaties

De website van SVT scoort onderstaande prestaties bij de Google Lighthouse metingen.

Desktop:

Mobiel:

3.4 Statistieken

De meeste metingen en rapportages op het gebied van bezoekers gaan via de Burst Statistics plugin. Deze statistieken zijn anoniem en via het dashboard toegankelijk.
De relevante instellingen zijn:

3.5 Zoekmachine optimalisatie

Om de vindbaarheid op het internet te vergroten wordt gebruik gemaakt van plugins die hierbij ondersteunen.

3.5.1 Yoast SEO

De Yoast SEO plugin is een van de populairste plugins om jouw website te optimaliseren voor zoekmachines. De plugin is zo goed als “in basis” geconfigureerd, wat wil zeggen dat er weinig aanpassingen zijn gedaan.
De ingestelde sitefuncties zijn:

  • SEO analyse
  • Leesbaarheidsanalyse
  • Inzichten
  • Cornerstone content
  • Tekstlinkteller
  • Open Graph gegevens
  • Twitter kaart gegevens
  • Delen op Slack
  • Toolbarmenu
  • Rest API endpoint
  • XML-sitemaps

3.6 Contact formulieren

Voor het maken van contact- en inschrijf formulieren wordt gebruik gemaakt van de plugin ContactForm 7. Een van de meest gebruikte plugins op dit gebied. Op de website is het volgende formulier gedefinieerd:

  • Contactformulier
    Ten behoeve van het opnemen van contact met SVT. Mail gaat naar info@stichtingveteranentexel.nl.
    Dit formulier is geplaatst op de contact pagina

Voor het tegenhouden van spam berichten wordt gebruik gemaakt van de gratis plugin Honeypot.

3.7 Events Manager

Deze plugin wordt gebruikt om evenementen te tonen op de website.
Via de diverse submenu's kunnen evenementen, terugkerende evenementen en locaties worden aangemaakt. Indien dit ingesteld wordt (per evenement) kunnen er ook reserveringen gedaan worden.
Het aanmaken van evenementen gechied op dezelfde wijze als het aanmaken van berichten.

4. Content Management

4.1 Inleiding

Het gaat te ver om een hele handleiding te schrijven. Er zijn via Google ook voldoende tutorials te vinden over hoe je met WordPress en de plugine moet omgaan. Een aantal basis zaken echter, worden wel beschreven in dit hoofdstuk.

4.2 Beheer

4.2.1 Inloggen

Inloggen op de beheersomgeving van de website gaat door naar de url https://www.stichtingveteranentexel.nl/wp-admin te gaan.
Medewerkers die inlog gegevens hebben, kunnen deze hier invullen.

Beheerders kunnen medewerkers toegang geven en van rollen voorzien.
Nieuwe medewerkers krijgen vanuit WordPress een email met het verzoek een wachtwoord in te stellen.

4.2.2 Pagina's

In de beheersomgeving vind je aan de linker zijde een menu. Hierin staan de functionaliteiten die de website bevat, alsmede toegang tot de instellingen van de website en het thema.

In het menu vind je “Pagina's” Onder dit kopje vind je alle pagina's die op de website staan. Het beste kan je de pagina's bewerken met de UX-Builder (onderdeel van het Flatsome theme). Deze editor geeft je heel veel mogelijkheden in het maken van de pagina's. Iedere pagina kan voorzien worden van zogenaamde Meta informatie ten behoeve van zoekmachines. Dit vind je terug onder Yoast SEO.

Via deze link vind je een instructie om een nieuwe pagina aan te maken: https://wordpress.com/support/pages/
Maak je gebruik van de UX-Builder, kijk dan ook hier: https://docs.uxthemes.com/article/186-how-to-use-the-ux-builder

4.2.3 Berichten

In het menu vind je ook “Berichten” Onder dit kopje vind je alle nieuws artikelen die op de website staan. Hiervoor kan gebruik gemaakt worden van de reguliere editor. Ieder bericht kan voorzien worden van zogenaamde Meta informatie ten behoeve van zoekmachines. Dit vind je terug onder Yoast SEO.

Via deze link vind je een instructie om een nieuws artikel toe te voegen: https://wordpress.com/support/posts/

4.2.4 Media

In het menu vind je ook “Media” Onder dit kopje vind je alle afbeeldingen, documenten en videos die door de beeheerder ge-upload zijn.

4.2.5 Flatsome Theme

Flatsome Theme is een commercieel thema dat ontzettend veelzijdig is. Het gaat in deze beschrijving dan ook te ver om alle mogelijkheden uit te leggen.
Het thema voorziet in een goed gedocumenteerde hulp. Deze vind je via deze link: https://docs.uxthemes.com/.
De UX-Builder is het hart van dit thema en biedt de gebruiker eindeloos veel mogelijkheden om de website vorm te geven. Binnen het thema zijn verschillende opties om handmatig code voor styling (zogenaamde css) toe te voegen.

4.2.6 In de media

De pagina “In de media” vraagt om wat extra uitleg om deze goed te beheren. De pagina is opgebouwd uit rijen met telkens 3 kolommen. Hoe dit te doen, wordt in de vorige paragraaf uitgelegd.
Iedere kolom heeft een Image box als content block.

In de Image box selecteer je de “korte” afbeelding. Deze dient als kopje om het volledige artikel te kunnen selecteren. Door iets naar onder te scrollen vind je het kopje Links. Hier moet de koppeling naar de pop-up gemaakt worden. De naamgeving die hiervoor gebruikt wordt is de datum van het artikel in YYMMDD.
NB: Vergeet niet deze vooraf van het # symbool te voorzien!

Nu is de afbeelding gemaakt welke op de pagina verschijnt en aanklikbaar is voor detailweergave.

Om de detailweergave in de pop-up te tonen, moet een volgende stap worden gemaakt. Namelijk het koppelen van een Text box waarin de lightbox code geplaatst wordt die de pop-up maakt. Voor de uniformiteit is voor de breedte van de lightbox gekozen voor een percentage van 85%. Dit kan op smartphones leiden tot een wat minder goed leesbare tekst.

Om de pop-up aan te roepen, moet deze van een id voorzien zijn. Dat id moet overeenkomen met het veld Link uit de vorige stap, anders werkt het niet.
NB: In dit geval mag het # symbool NIET gebruikt worden!

Verder moet eigenlijk alleen de link van de “detail” afbeelding geplakt woren in de code. De exacte positie is achter het woordje src= en dan tussen de dubbele accolades. Zie geel gearceerde tekst.

Om de link van een afbeelding te achterhalen, dien je eerst in de zijbalk naar Media > Bibliotheek te gaan. Kies hier de gewenste afbeelding en klik er op.
In het detailvenster aan de rechterkant zie je de link van de afbeelding met daarbij een knop “URL naar klembord kopiëren”. Door eenvvoudig op deze knop te klikken en vervolgens te plakken in de code, creëer je een pop-up naar de juiste afbeelding.


Maak slim gebruik van de kopieer functies van de UX-Builder om de Image box te kopiëren zodat je alleen maar de afbeeldingen hoeft te vervangen.

Appendix A - Plugins & Integraties

A1. Plugins

De gebruikte plugins op de website worden hieronder kort beschreven maar verder niet toegelicht. Meer informatie vind je door op de links te klikken.

Appendix B - Inloggegevens


LET OP: Deze pagina bevat gevoelige informatie zoals gebruikersnamen en wachtwoorden!

Email:

Server instellingen zijn:

Inkomende mailservser: mail.stichtingveteranentexel.nl
Uitgaande mailserver: mail.stichtingveteranentexel.nl poort 587

  • info@stichtingveteranentexel.nl
    kXJoK2Fo
  • voorzitter@stichtingveteranentexel.nl
    9afwf5Ba9
  • penningmeester@stichtingveteranentexel.nl
    ZEmvDi0ozS

Artikelen met betrekking tot het instellen van de email vind u op:https://www.dmcompusoft.com/whmcs/knowledgebase/1/Email

Webhosting:

De website wordt gehost bij DM Compusoft.
Via deze link kan worden ingelogd op het beheer paneel. Hier vandaan heb je toegang tot het technische gedeelte maar ook tot je account gegevens.
De penningmeester heeft via het email adres: penningmeester@stichtingveteranentexel.nl toegang tot deze omgeving. Tevens heeft de secretaris toegang met het email adres: secretaris@stichtingveteranentexel.nl.
Voor het meeste beheer is deze omgeving voldoende. Hier kunnen wachtwoorden van email accounts gereset worden etc. Voor meer hulp heeft DM Compusoft een uitgebreide kennisbank.

Voor het technische gedeelte van de website maakt DM Compusoft gebruik van DirectAdmin. De DirectAdmin is te bereiken via deze link:
https://ww.stichtingveteranentexel.nl:2222

Inlognaam: vet3rntxl
Wachtwoord: spNuS7*j@n

Website

Toegang tot de website is beschreven in paragraaf 4.2.1 Inloggen.

Licentie Flatsome Theme:

De licentie van het Flatsome thema is in beheer bij DM Compusoft.

Licentiecode: d7a9774b-5e83-499f-a388-e722f8f52d17

Print
Kpn
Kpn-qrc