見当たらないページだと知らせる404.phpを作る [WordPressテーマ作成の手順12]

URLが間違っているなどの原因で、サーバがページを見つけられなかった場合の表示をする「404.php」を作ります。
手順は、前回のWordPressのテーマ作成11で作った固定ページ用テンプレート「page.php」をコピーし「404.php」と名前を変え、コンテンツ部分をHTMLで書くだけ。

「404.php」は特に作らなくてもindex.phpで出力させればいいか？とも思ったが、index.phpだと「ページが見つかりませんでした」だけしか出力しないので素っ気無い。
もう少し親切に対応するために、専用の404.phpを作ることにした。

本日のINDEX

page.phpをコピーして404.phpを作る
- 404表示用のテンプレートについて
404表示部分を整える
なんで404って言うの？

page.phpをコピーして404.phpを作る

前回作ったpage.phpをコピーし、ファイル名を404.phpに変更。
この404.phpという名のファイルがあれば、WordPressは「404 Not Found」用テンプレートとして使用する。

404表示用のテンプレートについて

WordPressは、「404 Not Found」は404.phpで表示する。これが無ければindex.phpが使われる。
オリジナルの「404 Not Found」を作りたければ、テンプレート名を404.phpにするだけ。

テンプレートの種類と優先順位についてはこちら：
WordPress「テンプレート」の優先順位 | 超初心者のサーバー移転とドメイン移管＆ついでにWordPressも！

404表示部分を整える

404.phpは、ほんっとに「404 Not Found」だけでしか使わないので、パーツテンプレートに分けてもしょうがない。コンテンツ部分は、このファイルに直接HTMLで書いちゃう。

本ブログでの404.phpのソースはこちら。
「page.php」で「content-page.php」で出力させたコンテンツ部分もHTMLソースを戻して書いている。

本ブログの404.php<?php get_header();?>
<!--------------MainContent--------------->
<article id="main-content">
<div class="grid"><!-- GRID MOTHER -->
<!--POST BOX-->
<div class="col-full">
  <div class="wrap-col">
    <article class="postBox">
     <div class="metaData clearfix">
     </div><!-- ^ .metaData END-->
     <div class="entry_heading clearfix">
     <div class="col-full"><h1>File Not Found...</h1></div>
     </div><!-- ^ .entry_heading END-->
     <div class="entry_body"><!------today's post Start------>
<p>ページは見つかりませんでした。</p>
<h2>可能性のある原因</h2>
<p>こちらの原因が考えられます。</p>
<ul>
<li>アドレスバーへの入力で、<b>タイプミス</b>はありませんか？</li>
<li>リンクをクリックした場合は、<b>リンク元が間違っている</b>か、<b>古い</b>かもしれません<br>
<span>★本サイトがリンク元の場合、お手数ですが<a href="<?php echo home_url();?>/about#mailForm_wdpr">メールフォーム</a>にて「リンク切れ」の箇所をお知らせいただけると幸いです。</span></li>
</ul>
<h2>対処方法</h2>
<p>下記のいずれかの対処をお願い致します。</p>
<ul>
<li>アドレスバーにスペルを確認して再入力してみる</li>
<li><a href="#searchBox">検索ボックス</a>で関連ページを探してみる</li>
<li><a href="#categoryMenuTtl">カテゴリー</a>や<a href="#tagMenuTtl">タグ</a>で探してみる</li>
<li><a href="javascript:history.back();">前のページに戻る</a></li>
</ul>
     </div><!-- ^ .entry_body END--><!------today's post End------>
     <div class="entry_body_bottom"></div>
     </article><!-- ^ .postBox END-->
  </div><!-- ^ .wrap-col END-->
</div><!-- ^ .col-full END-->
<!--POST BOX END-->
</div><!-- ^ .grid = GRID MOTHER END-->
</article><!-- ^ main-content END-->
<?php get_sidebar();?>
<?php get_footer();?>

本ブログの404.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40	`<?php` `get_header();?>` `<!--------------MainContent--------------->` `<article` `id="main-content">` `<div` `class="grid"><!-- GRID MOTHER -->` `<!--POST BOX-->` `<div` `class="col-full">` `<div` `class="wrap-col">` `<article` `class="postBox">` `<div` `class="metaData clearfix">` `</div><!-- ^ .metaData END-->` `<div` `class="entry_heading clearfix">` `<div` `class="col-full"><h1>File Not Found...</h1></div>` `</div><!-- ^ .entry_heading END-->` `<div` `class="entry_body"><!------today's post Start------>` `<p>ページは見つかりませんでした。</p>` `<h2>可能性のある原因</h2>` `<p>こちらの原因が考えられます。</p>` `<ul>` `<li>アドレスバーへの入力で、<b>タイプミス</b>はありませんか？</li>` `<li>リンクをクリックした場合は、<b>リンク元が間違っている</b>か、<b>古い</b>かもしれません<br>` `<span>★本サイトがリンク元の場合、お手数ですが<a` `href="<?php` `echo` `home_url();?>/about#mailForm_wdpr">メールフォーム</a>にて「リンク切れ」の箇所をお知らせいただけると幸いです。</span></li>` `</ul>` `<h2>対処方法</h2>` `<p>下記のいずれかの対処をお願い致します。</p>` `<ul>` `<li>アドレスバーにスペルを確認して再入力してみる</li>` `<li><a` `href="#searchBox">検索ボックス</a>で関連ページを探してみる</li>` `<li><a` `href="#categoryMenuTtl">カテゴリー</a>や<a` `href="#tagMenuTtl">タグ</a>で探してみる</li>` `<li><a` `href="javascript:history.back();">前のページに戻る</a></li>` `</ul>` `</div><!-- ^ .entry_body END--><!------today's post End------>` `<div` `class="entry_body_bottom"></div>` `</article><!-- ^ .postBox END-->` `</div><!-- ^ .wrap-col END-->` `</div><!-- ^ .col-full END-->` `<!--POST BOX END-->` `</div><!-- ^ .grid = GRID MOTHER END-->` `</article><!-- ^ main-content END-->` `<?php` `get_sidebar();?>` `<?php` `get_footer();?>`

上記ソースの div.grid, div.col-full, div.wrap-col は、本ブログのグリッドシステムによるものです。

サイトのURLのあとに、テキトーなテキストをタイプして表示させると確認できる。
（本ブログなら例えば「http://webdesign.practice.jp/12345」とかで試してみて）

<title>はWordPressが「ページが見つかりませんでした」と出力してくれる。

本ブログでは「ページが見つかりませんでした | ＊Web Design 覚え書き＊」と出力される。
<title>に「現ページのタイトル」と「サイトタイトル」をセットで出力させているので。
このソースの詳細はこちら：
header.phpの編集ページタイトルの出力とRSSフィードへのリンクなど　[WordPressテーマ作成の手順5]