【WordPress】プラグイン無しで独自の404ページを作成する方法

WordPressサイトで独自の404エラーページを作成することで、ユーザーエクスペリエンスを向上させ、ブランドの一貫性を保つことができます。この記事では、プラグインを使用せずに、テーマファイルをカスタマイズして独自の404ページを作成する方法を説明します。

404.phpテンプレートファイルの確認

WordPressテーマには、404エラーページを表示するための404.phpというテンプレートファイルがあります。まずは、このファイルがテーマフォルダ内に存在するか確認しましょう。

• テーマフォルダの場所: /wp-content/themes/your-theme/

テーマエディターで404.phpを確認し、存在しない場合は新しく作成します。

404.phpファイルのカスタマイズ

404.phpファイルをカスタマイズして、独自のデザインを適用します。以下はカスタマイズのための基本的なサンプルコードです。

<?php get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <section class="error-404 not-found">
            <header class="page-header">
                <h1 class="page-title"><?php _e( 'ページが見つかりません', 'your-theme-textdomain' ); ?></h1>
            </header><!-- .page-header -->

            <div class="page-content">
                <p><?php _e( 'お探しのページは削除されたか、移動した可能性があります。', 'your-theme-textdomain' ); ?></p>
                <p><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'ホームページに戻る', 'your-theme-textdomain' ); ?></a></p>
            </div><!-- .page-content -->
        </section><!-- .error-404 -->

    </main><!-- #main -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

このコードを使って、ページが見つからない場合のメッセージやナビゲーションリンクを設定します。

CSSでスタイリング

次に、404.phpファイルの見た目を整えるために、テーマのCSSファイル（通常はstyle.css）にスタイルを追加します。以下はシンプルなスタイルの例です。

.error-404 {
    text-align: center;
    padding: 50px;
}

.error-404 .page-title {
    font-size: 2em;
    color: #ff0000;
}

.error-404 .page-content {
    font-size: 1.2em;
    color: #333;
}

このスタイルを使用して、エラーページのデザインを調整します。

テーマの更新と確認

404.phpファイルとCSSのカスタマイズが完了したら、テーマファイルを保存し、サイトを確認します。404ページが正しく表示されるか確認し、デザインやメッセージが期待通りになっているかをチェックします。

まとめ

プラグインを使用せずにWordPressで独自の404ページを作成することで、ユーザーにより良い体験を提供し、ブランドの一貫性を保つことができます。テーマファイルのカスタマイズとスタイリングを行うことで、エラーページもサイトの一部として魅力的に見せることができます。