Je eigen 404 pagina maken

Hoe maak je zelf een eigen 404 pagina en waarom zou je dat doen? In dit artikel ga ik uitleggen hoe je in 4 stappen een eigen 404 pagina maakt.

 

Doel van een 404 pagina

404-pagina’s, foutmeldingspagina’s of error-pagina’s zijn pagina’s die melden dat de door jou opgevraagde pagina of website niet gevonden is. De pagina kan offline of verwijderd zijn. Vaak zien ze er niet mooi uit of bevatten ze informatie waar je als bezoeker niets aan hebt. Toch is het belangrijk om een goede 404 pagina te hebben.


Reden waarom je een eigen 404 pagina maakt

  • Je wil je eigen look and feel behouden.
  • Je wil je menustructuur van he website weer geven.
  • Je hebt een meertalige (multilingual) website en je wil voor elke taal een eigen 404 pagina maken.

De kans bestaat dat er bij je Joomla! template ook een eigen 404 pagina zit, echter een van de nadelen is dat de gehele structuur van de website wegvalt, zie ook onderstaand voorbeeld.

voorbeeld 404 van template

Je zou deze kunnen aanpassen en dan zie de 404 pagina er bijvoorbeeld zo uit.

voorbeeld eigen 404 pagina

404 pagina in 4 stappen

Voor deze website heb ik een eigen 404 pagina gemaakt waarbij ik tevens gebruik gemaakt heb van een afbeelding.
Hieronder staat de afbeelding (404.png - afmetingen 658x198 pixels).

404


Stap 1

In deze stap gaan we een artikel aanmaken die straks als 404 pagina gaat fungeren.

  1. Maak een nieuw artikel aan, die kan in de categorie Uncategorized geplaatst worden, met als naam 404.
    Titel van het artikel:
    Pagina niet gevonden.
    Inhoud van het artikel:
    Beste bezoeker, helaas is deze pagina niet (meer) beschikbaar. 
    <hier komt de afbeelding>
    Bekijk de sitemap of klik op onderstaande knop om terug te gaan naar de beginpagina.
    Terug naar de Homepage
  2. Maak vervolgens een hyperlink aan naar je sitemap, hiermee kunnen de bezoekers door je sitemap bladeren.
    Ik gebruik hier OSMAP voor.
  3. Maak daarnaast een knop aan om naar de homepagina van website aan, hiermee kunnen je bezoekers naar de beginpagine gaan.
    De opmaakcode (class) die bij de knop hoort is:

    btn btn-default btn-

  4. Klik op Opslaan en sluiten.

Stap 2

We gaan nu een link aanmaken naar het artikel d.m.v. een hidden menu item. Een hidden menu wordt gebruikt voor het aanmaken van hyperlinks, maar is niet zichtbaar op de website. In onderstaande beschrijving wordt er ook een nieuwe (hidden) menu aangemaakt, als je deze al hebt aangemaakt, dan kun je beginnen bij punt x.

  1. Klik boven in het meu op Menu's, klik dan op Beheren gevolgd door Nieuw menu toevoegen.
  2. Bij de Titel vul je Hidden-menu in.
  3. Bij menu Menutype vul je hidden-menu in.
  4. Bij Beschrijving vul je Hidden menu in.

    menu aanmaken Joomla

  5. Klik op Opslaan en sluiten.
  6. Maak vervolgens een nieuw menu item aan in het net aangemaakte Hidden menu.
    Klik hiervoor op Menu's, Hidden-menu, gevolgd door Nieuw menu-item aanmaken.
  7. Bij Titel vul je 404 in.
  8. Klik bij Menu-item type de optie Individueel artikel, klik dan op de knop Selecteren.
  9. Klik dan op Artikelen en kies dan de optie Individueel artikel
  10. Klik dan bij Selecteren op de knop Selecteren en kies het artikel Pagina niet gevonden.
  11. Klik dan op Opslaan.
  12. Kopieer dan bij Link de tekst die in het vak staat, dit is de link naar het artikel, bijvoorbeeld: index.php?option=com_content&view=article&id=78
  13. Sla de link tijdelijk even op in bijvoorbeeld kladbok, deze link hebben we straks nodig bij stap 4.

Stap 3

In deze stap gaan we het bestand error.php naar de template folder kopieren (mocht het bestand hier niet al staan).
Hiervoor heb je en FTP programma nodig zoals bijvoorbeeld FileZilla. Vanuit je Joomla! installatie map kun je het error.php bestand kopiëren. Deze vind je terug in de map templates/system. Download het bestand naar je PC in stap 4 uploaden we het bestand naar je template folder.

 

Stap 4

In deze stap gaan we het error.txt bestand aanpassen, dit kan in Notepad of Notepad++ of een andere editor zoals DreamWeaver.

  1. Open het bestand error.php in de editor.
  2. Zoek de volgende code op, waarbij on onderstaand voorbeeld de rood weergegeven code vervangen dient te worden 

    if (($this->error->getCode()) == '404') {
    header('Location: /index.php?option=com_content&view=article&id=75');
    exit;
    }

  3. Kopieer de link van het 404 artikel, die we in stap 2 (punt 12) gekopieerd hebben en vervang de rode code met de url.
    De nieuwe code ziet er dan bijvoorbeeld zo uit (het id=90 zal anders zijn).

    if (($this->error->getCode()) == '404') {
    header('Location: /index.php?option=com_content&view=article&id=90');
    exit;
    }

  4. Sla het bestand op en upload het error.php bestand naar je template map.
  5. Test of je de error pagina werkt, type hier bewust een niet bestaande URL in, van je website bijvoorbeeld: http://www.<jesitenaam.nl>/werktniet/ 
    Als het goed is krijg jij je eigen 404 pagina te zien.

 

TIP: zorg ervoor dat je 404 pagina niet opgenomen wordt in de zoekmachines. Dit kan als volgt;

  1. Klik in het menu op Inhoud -> Artikelen > Klik op het 404 artikel. 
  2. Klik op het tabblad Publicatie  en stel bij Robots de optie in op Geen indexno follow.

    artikel noindex nofollow

  3. Klik dan op Opslaan en sluiten.

 

Wil je een 404 pagina maken voor een meertalige (multilingual) website, lees dan mijn artikel: Je eigen 4040 pagina maken voor een multilingual Joomla website