［THE THOR（ザ・トール）］404ページカスタマイズ

「404ページ」というのは「Not Foundページ」のことです。サイトを探していてクリックしてみたら「Not Found」が表示された経験は誰にでもあると思います。探したページが存在しないというのは大変印象が悪いことで、Google先生の覚えもめでたくありません。

しかし、サイトの引っ越し後などはパーマリンクの不整備などでまれに起きてしまうことではあります。サイト引っ越し後は要注意です。

そもそもそんなページには訪問者が辿り着かないことが一番ですが、万一そんなことになってしまった場合は404ページから訪問者が目的のページに早く辿り着けるようなアナウンスが必要です。
 

「THE THOR（ザ・トール）」のデフォルト404ページではトップページに案内するようになっています。
 

ご自分のサイトの404ページを見たい時は、サイトURLの後ろに「/あああ」や「/aaaaaa」などを付けてみてください。つまり、存在しないページを表示してみれば出てきます。
 

ちょっと味気ないので、せめて検索フォームくらいは付けたい……。

「THE THOR（ザ・トール）」404ページカスタマイズ方法

「Simplicity」も「Cocoon」も普通にウィジェットで404を編集できるので、そこからWordpressに入った私は、それがWordpressの仕様だと思い込んでいました(いや、まじで)。

「THE THOR（ザ・トール）」のウィジェットを開いても編集できるところがない……。あらら、では、PHPをいじらないといけないと知る。

404.phpを編集する

「外観」→「テーマエディター」を編集するという手もありますが、私は怖いのでいつもエックスサーバーのファイルマネージャーを開いておりますよ。

そもそも、まずは子テーマに「404.php」を作りましょう。

あわせて読みたい

【WordPress】超初心者でもできる今さら聞けない子テーマ編集方法 Wordpressには様々なテーマ(無料ブログシステムでいうところの「テンプレート」とは違うのですが、とりあえずそういう解釈で)があります。 ダッシュボードから簡単にイ...

子テーマに「404.php」を作る

まずは、ファイルマネージャーを開く。

「404.php」をコピーして保存

「ブログのファイル」→「public_html」→「編集するファイル名」→「wp-content」→「themes」→「the-thor」→「404.php」を開きます。

「404.php」左の□にチェックして右上の「ファイルの操作」→「編集」をクリック。

内容を全てお使いのWordパットソフトに(当方は「サクラエディタ」を使っています。「メモ帳」は止めた方がいいです)コピーして、「404.php」という名称でパソコンのデスクトップ辺りに保存します。この時、文字コードは必ず「UTF-8」で保存すること。

子テーマを開く

戻って「the-thor-child」を開きます。
 

「ファイルのアップロード」で、先ほどパソコンにダウンロードした「404.php」を選択して開きます。
 
今まで子テーマに存在しなかった「404.php」が現れたはず。これを開いて編集します。

404ページに検索機能を付ける

まずはデフォルトの404ページに書かれている「お探しのページはありませんでした」を探して、何かに書き換えて保存してみてください。あなたの404ページの文言も変わっているはずです。こんな感じでゆっくり編集していくと良いと思います。

検索フォームをここに表示するには、まず、検索フォームが表示されている自分のブログのページ(どこでも)の上で右クリックして、ページのソースを表示します。

ソースの中の<div class="widgetSearch">ここからが検索機能の記述です。

私は、ここから

<button class="btn__link btn__link-search" type="submit" value="search">検索</button>

下の
</div></form></div>

まで全てコピーしました。

 
これを「お探しのページはありませんでした」の下に貼り付けて保存します。

 
検索フォーム、カテゴリー検索、タグ検索などが表示されました。
 

こんな感じになりました

<img class= src="https://画像URL" width="幅" height="高さ" />

で、画像も入ります。
 

後は、お好みで足したり引いたりして作ってみてください。
 
子テーマにアップしている限りは、何か重大な間違いが生じてもファイルごと削除して初めからやり直しも可能です。親テーマだけは下手に編集しないように気をつけましょう。