404ページのカスタマイズ|simplicity2|Xサーバー

シェアする

  • このエントリーをはてなブックマークに追加
PAK85_MBAdesagyou20140312_TP_V

404エラーページをカスタマイズしてみました。時々、センスの光る404ページを見かけますよね。一度、やってみたかったのです、自分でカスタマイズ。

これは、できてしまえば簡単なんですが、理解するまで、少し時間がかかりました。
そのまま、手順を書きますね。

★当サイトは、エックスサーバー(xserver)、ワードプレス(wordpress)、simplicity2 で運営しています

スポンサーリンク

404エラーページとは

例えば、このサイトだと、適当にurlの後に/123などと書いてからエンターを押すと出ます。

存在しないURLにアクセスしようとした時に出る エラーページ です。

削除、リンク切れ、パーマリンクの変更、URL入力が間違っている場合などです。

simplicityには、もともと設定されています。デフォルトは、こんな感じですね。

404simplicity

このページを見たら、自分なら、このサイトから出ちゃいます。
せっかく、訪問してくれたのに、もったいないですよね。

これを、サイト内の、他のURLに誘導できたら、もう少し、他の記事も読んでもらえます。
また、seo的にも、良くないと言われています。

有益な404ページに

グーグルのウェブマスターツール、サイト管理の中に、『有益な404ページを作成する』という項目があります。

  • ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します。
  • 404 ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。
  • 最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。

カスタマイズすることを勧めています。

ということで、カスタマイズを決意しました。

Simplicityの子テーマに404.phpを作成

変更は、404.phpでします。自分の作ったページに変更すればOKです。

simplicityは、子テーマで、すべてカスタマイズします

でも、子テーマに404.phpがありません。親テーマを編集すると、バージョンアップした時に戻ってしまいます。

親テーマから、404.phpをコピーして、子テーマ内に404.phpファイルを作成します。

これは、サーバー側で操作しないといけません。

XサーバーでFTPアカウントを追加

実は、今まで、さくらサーバーだったので、Xserverで操作するのは初めてでした。

さくらサーバーでは、ソフト、FileZillaを使用していたのですが、XserverではFTPアカウントを追加して、直接編集できます。

サーバーパネルにログイン ⇒ FTPアカウント設定

Xserver サーバーパネル(10)

⇒ ドメイン名の右欄 選択する をクリック

Xserver サーバーパネル(11)

FTPアカウントの追加のタブをクリック。

Xserver サーバーパネル(12)

アカウント名を自分でつけて、パスワードを設定。ディレクトリは空欄。

FTPアカウントの作成をクリック。

これで、FTPアカウントが追加されました。

FTPアカウントより、子テーマに404.phpを追加

作成した FTPアカウント にログインします。

ドメイン名のフォルダを選びます。

public_html ⇒ wp-content ⇒ simplicity2-child 

子テーマのフォルダまで進んで行きます。

ここに、ファイルを作ります。右下のボックスに作成できるスペースがあります。

エックスサーバー WebFTP(5)

文字コードをUTF-8 に変更します。ファイル名は、親と同じで404.phpと入力。

フォルダー作成をクリック。これで、404.phpファイルが子テーマにできました。

親テーマの404.phpを子テーマの404.phpにコピー

次に、親テーマの404.phpを同じように開きます。

public_html ⇒ wp-content ⇒ simplicity(親テーマ) ⇒

404.phpの隣のボックスに☑を入れて、編集ボタンをクリック

エックスサーバー WebFTP(6)

その中身をコピーします。保存文字コードはUTF-8

先ほどの、子テーマの中の404.phpを同じように開きます。

保存文字コードをUTF-8にして、貼り付け。編集ボタンを押して更新します。

エックスサーバー WebFTP(7)

新しい404エラーページを作成

ここで、css、htmlで作成するのですが、simplicityは、特別な知識がなくても、記事と同じように作成できます。

新規で記事を書く画面を出します。

ビジュアルモードで、文章、画像、リンク先など、実際に表示したいページを書きます。

新規投稿を追加 ‹ のんびりママの気になる木 — WordPress

それを、テキストモード変更します。コピーします。

新規投稿を追加 ‹ のんびりママの気になる木 — WordPress(1)

管理メニュー ⇒ テーマの編集 ⇒ 子テーマ ⇒ 404テンプレート

<!–ループ開始–>

ここに貼り付けして入れます

</div>
<!– END div.post –>

検索ボックス

404エラーページの下に、ブログ内の検索ボックスを入れてみました。

手順は同じです。子テーマの404.php、先ほど入れたコードの下に、下記を書き込みました。

<!– 検索ボックスを設置 –>
<p>お探しのコンテンツに該当するキーワードを入力して下さい<br />
キーワードと関係のあるページのリストが表示されます</p>
<?php get_search_form(); ?>

検索フォームの作成は、こちらを参考にさせていただきました。

新しく作るのではなく、もともとある検索フォームを利用しました。

http://bazubu.com/404-error-page-26748.html

出来上がったのは、こんな感じの404エラーページです。

イラストは、猫にしました。猫ちゃんがペコリm(__)m

ページが見つかりませんでした のんびりママの気になる木(1)

ちょっと手間がかかりましたが、前よりは、可愛く、わかりやすいページになりました。

TOPページ、もしくは、検索ボックスで、周回してもらえたら嬉しいですね。

トップへ戻る