Webサイトを開発してみる（入門編）ー第4章1.11 ー
第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を無害化して安全にリンクします。
いいなと思ったら応援しよう！
