WordPress

AFFINGER5で404ページを作る方法と注意点

投稿日:2018年11月10日 更新日:

AFFINGER5で404ページを作る方法と注意点

WordPressネタが続いている@a_kikaです。

お気に入りから記事にアクセスしようとしたり、検索エンジンからアクセスしたときに該当ページがないと、404エラーという画面がでます。

通常、この404エラー画面はレンタルサーバーの画面が出ますが、これってもったいないんですよね。

そこで、オリジナルの404エラーページを作成するのですが、今回AFFINGER5でオリジナルの404エラーページを作ってみました。

今回はAFFINGER5での404エラーページの作り方と注意点についてお話ししたいと思います。

スポンサードリンク




AFFINGER5での404エラーページの作り方

今回作った404エラーページはこれです。

AFFINGER5で404ページを作る方法と注意点

404エラーを伝える画像に、離脱を防ぐために検索窓とカテゴリ一覧を追加し、HOMEへの誘導も行いました。

WordPressのテーマにより404エラーページの作り方も若干違ってくる場合もあるし、注意点もありますが、AFFINGER5は何も考えずに簡単に作ることができました!

FTPソフトで親テーマから404.phpをダウンロード

まずは、FTPソフトでAFFINGER5の親テーマから404.phpをダウンロードします。

もしくはレンタルサーバーにFTPツールがあれば、それでも大丈夫です。

とにかく、デスクトップ上にダウンロードしましょう。

404.phpを開いてみると下記のようになっています。

AFFINGER5で404ページを作る方法と注意点

FTPソフトで子テーマに404.phpをアップロード

普通はここに、オリジナルの404デザインを流し込む必要があるのですが、AFFINGER5の場合は必要ありません。

ただ、私は "Not Found" の部分だけ "ページが見つかりませんでした" に変更しました。

そのままでよければ特にいじる必要はありません。そのままAFFINGER5の子テーマのフォルダにアップロードしましょう。

固定ページでページをデザインする

404ページに欲しいものとしては、

  • ページが見つからないことを知らせる
  • 他のページを見て貰う

ということではないでしょうか。

他の記事への誘導としては、どんな誘導をするかはそれぞれ違ってきますが、とにかく「離脱させないこと」を考えればいいと思います。

では、実際にAFFINGER5で404ページを作る方法ですが、簡単なのはWordPressの固定ページか新規投稿でページをデザインすること。

もちろん、自分でHTMLでやってもいいんですけど、「そんなの難しい!」「面倒くさい」という場合にはこの方法が便利です。

AFFINGER5で404ページを作る方法と注意点

メディアから画像を追加し、その下に検索窓をつけ、その下にはカテゴリ一覧を追加を追加しました。

AFFINGER5ではカテゴリ一覧などは、"タグ" → "記事一覧" というのがあり、そこからカテゴリ一覧や記事一覧、おすすめ記事一覧などのショートコードが選べるので楽です。

そして一番下には、ブログのトップページへ行かれるようにボタンを設置しました。これもショートコード一発です。

自分で入力したのは検索窓のコードだけです。

ブログ内検索フォームは下記のコードです。

ページが出来たら、消えてしまわないように「下書きで保存」をしましょう。

テキストをコピーしウィジェットにコピー

404ページができあがったら、ビジュアルエディタからテキストに切り替え、コピーします。

AFFINGER5で404ページを作る方法と注意点

そのままコピーしたら、「外観」→「ウィジェット」へいきます。

そして、ウィジェットのテキストを「404ページ」に設置します。

AFFINGER5で404ページを作る方法と注意点

そして、404ページのテキストボックスでテキストモードにして、先ほどコピーしたものを貼り付けます。

AFFINGER5で404ページを作る方法と注意点

これをビジュアルで見ると、先ほど作成したページがそのまま表示されています。

AFFINGER5で404ページを作る方法と注意点

お疲れ様でした。これで404ページの完成です!

404ページ作成時の注意点

404ページを作成する時に注意したい点が2点あります。

  1. .htaccessに記入する
  2. Google AdSenseなどの広告を表示させてはいけない

この2点です。

まぁ、1の.htaccessは、検索エンジンに404ページの存在を知らせる意味なんですが、確実に404エラーを返すために記入するのがベストです。

ルートドメインにWordPressが入っている場合は、下記のコードを入力します。

そして、私が引っかかったのがブログ表示はルートドメインだけど、サブディレクトリにWordPressをインストールしている場合には、上記のコードでは不完全です。

もし、サブディレクトリにWordPressをインストールしている場合は、

となります。

例えば、"wordpress" というサブディレクトリの場合、

となります。

もし、.htaccessがない場合は作りましょう。

 

参考 : WordPress Codex日本語

 

次にGoogle AdSenseなどの広告を表示させてはいけない、という点ですが、これはテーマごとにやり方が違うと思います。

手動で表示させないようにする必要があるテーマが多いかもしれませんが、AFFINGER5では自動で広告は削除してくれるので、特になにもする必要はありません。

さいごに

Simplicity2を使っていた時にも404ページは作っていたのですが、404phpをいじる必要がありました。

ですが、AFFINGER5の場合は特に何かを変更したい(スマホとで表示を変えるなど)がなければ特に何もすることなく、そのまま子テーマのフォルダにアップロードするだけで済みます。

その後も、ウィジェットで設定できるというのはめちゃくちゃ楽ですよね。

これは、Enjiさんに感謝をしたいです。









-WordPress

Copyright© Synkers.net , 2018 All Rights Reserved.