Webサイトを開発してみる（入門編）ー第4章1.11 ー

ー第4章に戻るー

第4章 1.11 ⑨ 404.php のソースコードと詳細

1.11 ⑨ 404.php のソースコードと詳細　

解説）　404.php はWordPressが正常に動作している場合は動作しませんが、何かエラーなどが発生し該当ページが見つからない無い場合に、はじめて動作するプログラムです。ここでは「404エラー（ページが見つかりません）　対象のページは移動もしくは削除された可能性があります。　メニュー右の（サイト内）検索、もしくはトップページよりお探しください。」と表示します

何かエラーが発生した場合、下図のようにヘッダー部、フッター部、サイドバーに加え、青線で囲んだ領域にエラーメッセージを表示します。

以下が今回のプログラムソースです。

<?php get_header(); ?>

<div class="container">
    <div class="row mt-5">
        <div class="col-lg-3">
            <?php get_sidebar(); ?>
        </div>
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-auto">
                    <header class="h1">
                        404エラー（ページが見つかりません）
                    </header>
                    <div class="content-Body">
                        <p>対象のページは、移動もしくは削除された可能性があります。<br>
                            メニュー右の（サイト内）検索、もしくは<a href="<?php echo esc_url(home_url()); ?>">トップページ</a>よりお探しください。</p>
                    </div>
                </div>
                <div class="col-lg-1"></div>
            </div>
        </div>
    </div>
</div>

<?php get_footer(); ?>

解説
主なプログラムソースを解説します。

1：<?php get_header(); ?>
get_header()：
ページのヘッダー部（画面の赤線の部分）を読み込む関数です。（ここでheader.php を読み込みます。）

5：<div class=”col-lg-3“>
col-lg-3 ：
BootstrapのCSSクラスです。ページの中央部分を12分割したうちの左3分割分をサイドバー（画面の緑線の部分）のために確保します。

6：<?php get_sidebar(); ?>
get_sidebar()：
ページのサイドバー（画面の緑線の部分）を読み込む関数です。（ここでsidebar.php を読み込みます。）

8：<div class=”col-lg-9“>
col-lg-9：
5行目と同じくBootstrapのCSSクラスです。ページの中央部分を12分割したうちの右9分割分（画面の青線の部分）をエラーメッセージ表示のために確保します。

12/14：
12 <header class=”h1“>
13 404エラー（ページが見つかりません）
14 </header>

エラーメッセージをh1（BootstrapのCSSクラス）の大きさで表示します。

16/17：
16 <p>対象のページは、移動もしくは削除された可能性があります。<br>
17 メニュー右の（サイト内）検索、もしくは<a href=”<?php echo esc_url(home_url()); ?>”>トップページ</a>よりお探しください。</p>

☆エラーメッセージを表示します。

esc_url(home_url())：
① esc_url() はWordPressでhref属性やsrc属性に指定するURLをXSSなどの攻撃からエスケープ処理（無害化）するセキュリティ用の関数です。
② home_url() はトップページのURLを返す変数です。
ここではトップページのURLを無害化して安全にリンクします。