Probleem:
Mijn website maakt gebruik van het Phlox thema. Een van de opties in Customizer is dat je een eigen 404 pagina op kan geven. Deze heb ik mooi opgemaakt met Page Builder zodat het niet meer zo’n standaard 404 pagina is. Dit heb ik getest door www.timdehoog.nl/ikbestaniet te bezoeken en ik kwam uit op mijn eigen 404 pagina.
Sinds kort heb ik de plugin Redirection geïnstalleerd om 404 pagina’s te registreren. Handig om er achter te komen of er ergens op internet dode links rondhangen. Om te testen of de plugin werkt ben ik naar www.timdehoog.nl/ikbestaniet gegaan. De 404 pagina werd getoond, maar Redirection heeft het niet geregistreerd.
Met de webdeveloper toolbar open kwam ik erachter dat Phlox eerst een “404 PAGE NOT FOUND” header stuurt en daarna een “200 OK” header. Die doorstuur actie werd uitgevoerd voordat Redirection de 404 had opgemerkt.
Oplossing:
In het Phlox thema zie ik dat er PHP code is geschreven om de bezoeker die uitkomt op de 404 pagina door te sturen naar de eigen 404 pagina met status code “200 OK”. Dit is dus niet goed, want de status code moet 400 zijn.
De gemakkelijkste oplossing was daarom om in mijn child thema een eigen 404.php template te maken. Dit is een standaard template die WordPress herkent.
De oplossing in dit blog geldt ook voor andere WordPress thema’s.
Stap 1:
Schakel de optie in Customizer uit om een eigen 404 pagina te koppelen.
Stap 2:
Maak in je child thema een 404.php bestand aan.
Stap 3:
Kopieer de code uit themes/phlox/single.php naar de 404.php template.
Stap 4:
Standaard verwacht de single.php dat hij de pagina naam uit de URL op kan halen. Aangezien we een pagina bezoeken die niet bestaat gaat dat niet. Ik heb daarom de code aangepast naar onderstaande code. Zie stap 5 voor de toelichting.
<?php get_header(); ?> <main id="main" <?php auxin_content_main_class(); ?> > <div class="aux-wrapper"> <div class="aux-container aux-fold"> <div id="primary" class="aux-primary" > <div class="content" role="main" > <h1 class="page-title">Niets gevonden</h1> <?php $query = new WP_Query(['p' => 1234,'post_type' => 'any']); $GLOBALS['wp_query'] = $query; if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'single' ) ) { $is_pass_protected = post_password_required(); if (have_posts() && ! $is_pass_protected ) { get_template_part('templates/theme-parts/single', get_post_type() ); comments_template( '/comments.php', true ); } elseif( $is_pass_protected ) { echo get_the_password_form(); } else { get_template_part('templates/theme-parts/content', 'none' ); } } ?> </div> </div> <?php get_sidebar(); ?> </div> </div> </main><!-- end main --> <?php get_sidebar('footer'); ?> <?php get_footer(); ?>
Stap 5:
Ik heb de code beetje in elkaar geduwd anders worden het nogal veel regels. Op regel 10 vertel ik aan het template welke pagina ik uit WordPress op wil halen. De query geef ik vervolgens mee aan $GLOBALS[‘query’] anders kijkt WordPress naar de pagina in de URL.
Het id van de pagina kan je achterhalen door naar de lijst met pagina’s in wp-admin te gaan. Wijs met de muis de pagina aan en onderin de browser komt een URL te staan. Achter post.php?post= zie je dan het nummer staan. Dit vul je op regel 10 in.
Oplossing getest op:
WordPress 5.0.3, Redirection 3.7.2, Phlox 2.3.5