[THE THOR(ザ・トール)]404ページカスタマイズ

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

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

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

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

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

[THE THOR(ザ・トール)]404ページカスタマイズ

 

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

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

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

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

404.phpを編集する

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

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

関連記事

Wordpressには様々なテーマ(無料ブログシステムでいうところの「テンプレート」の雛形といったところでしょうか)があります。 ダッシュボードから簡単にインストールできる無料の公式テーマ、優秀なプログラマーさんが作って配[…]

親子テーマ

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

エックスサーバーの場合として簡単に書かせていただきます。ファイルマネージャーを編集できないサーバーの場合は、FTPソフトで「ブログのファイル」→「public_html」→「編集するファイル名」→「wp-content」→「themes」→「the-thor」と開いていって「404.php」をパソコンにダウンロードしてください。

 

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

レンタルサーバー「エックスサーバー」でご契約中のサーバーアカウントでファイルアップロードなどのファイル操作をブラウザ上か…

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

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

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

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

子テーマを開く

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

[THE THOR(ザ・トール)]404ページカスタマイズ

 

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

 

[THE THOR(ザ・トール)]404ページカスタマイズ

 

私はいつもこんな形でオンラインで少しずつ様子を見ながら編集していますが、もちろんWordパットで編集してから子テーマにアップロードしても良いのです。むしろ、そっちの方が正しいのかも。

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

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

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

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

私は、ここから

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

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

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

[THE THOR(ザ・トール)]404ページカスタマイズ

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

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

[THE THOR(ザ・トール)]404ページカスタマイズ

こんな感じになりました

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

で、画像も入ります。
 

 

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

サポートよろしくお願いします

 

いつもありがとうございます。この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。


Amazonギフト券- Eメールタイプ – Amazonベーシック


金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。

※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

 

 

 

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』