こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は、WordPressサイトに必須といっていい404.phpのtipsについて紹介します。
404.phpとはWordPressサイトを構築する際、ユーザーがアドレスバーなどに手入力をして想定しないページに遷移した時、「アクセスしたURLのページは存在していませんよ」と知らせるためのページです。

実装例

今回の実装例は少し特殊なので、実際のページをご覧ください。
実際のページはこちら（別タブで開きます）

HTML&PHP例

では、404.phpの作成方法です。
まず、下記のようにHTMLとPHPを記述した404.phpファイルを作成。
themesディレクトリの直下に配置します。

<?php get_header(); ?>
    <div style="text-align: center; margin: 60px 0;">
      <p>
        アクセスしたページは見つかりません。<br>
        自動的にトップページへ移動します。<br>
        自動的に移動しない場合は下記をクリックしてください。
        <div class="topContents-link fadeIn typesquare_tags active">
          <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="typesquare_tags">トップページ</a>
        </div>
      </p>
    </div>
<?php get_footer(); ?>

JavaScript例

「トップページへ」ボタンを押さないと戻れないというのも不親切なので、
下記JavaScriptで10秒後に自動的にトップページへ遷移する仕組みを追加しましょう。

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        window.location.href = "/";
    }, 10000);
});

まとめ

今回は、WordPressとJavaScriptのtipsについて紹介しました。
もちろん、Vanilla.jsです！

コピペしてガンガン使ってください！