WordPressテーマの404.phpを編集して404ページをカスタマイズする

WordPressテーマの404.phpを編集して404ページをカスタマイズする   Recently updated !


今回は、WordPressサイトの404ページをカスタマイズする方法として、WordPressテーマの404.phpを編集して404ページをカスタマイズする場合についてお伝えいたします。

WordPressの404ページを設定することで、「存在しないページ」や削除されたページを示す404エラーの際に、WordPressサイトのテンプレートテーマを利用して、ユーザーに対してWordPressサイトのWebデザインに沿った404ページを表示することができます。

通常404エラーの際には契約サーバーの用意した404エラーの表示画面が表れますが、404テンプレートの存在するWordPressテーマを使用している場合、WordPressサイトに合わせた404ページが表示されます。

この404エラーページで表示する内容もWordPressテーマの中の404.phpを編集してカスタマイズすることができます。

後半には、404ページからトップページへのリダイレクト方法(数秒後に転送)、WordPressテーマ内の404.phpではなくheader.phpにおいて条件分岐を利用して設定する方法などについて触れています。

404ページとは?

404ページとは?

404ページとは、ページにアクセスした時に、そのページが存在しない、もしくは削除されて存在しなくなった場合にブラウザに表示されるHTTPエラーコード「404」を表示しているページです。

基本的には「Not Found」といった表示がされますが、カスタム404ページを作成しておくと、404エラーの際に表示するページを設定することができます。

404ページが表示されると、「ページが存在しません」という表示がされるのみとなり、ユーザーとしてはブラウザの戻るボタンなどでアクセス前に表示していたページに戻ったりする必要があります。

URLの変更やページ削除に伴い、ページが存在しない状態で、こうした404ページが表示された場合、大半のユーザーはページを離脱してしまうため、せっかくのホームページアクセスが無駄になります。

公開中のホームページの削除や一部ページの削除

カスタム404ページ

カスタム404ページ

カスタム404ページとは、存在しないページが表示され、404エラーが表示される場合に、オリジナルのカスタムページを用意しておくことによって、ユーザーの離脱を防ぐためのページです。

一般的な404ページが表示され、リンクなどが全く設置されておらず、どうアクションを起こしてよいかわからないユーザーの困惑を避けるために、カスタム404ページを作成しておくことが重要です。

カスタム404ページは、404ページでありながら、トップページや主要ページへのリンク、サイト内検索などを設置しておくことで、存在しないページに来てしまったユーザーを他のページに誘導することができます。

WordPressテーマによっては、404.phpなどで、カスタム404ページが用意されていることがあります。

こうした404ページに表示される内容は、WordPressテーマの404.phpなどを編集することでカスタマイズすることができます。

WordPressテーマの404.phpを編集する

WordPressテーマの404.phpを編集する

WordPressテーマの中に404.phpが存在している場合、このファイルが404ページの基本的なテンプレートとなります。

WordPressサイトの中で、存在しないページにアクセスがあった場合に表示されるカスタム404ページのテンプレートです。

404ページの表示内容がそれほど入念に設定されていなくても、基本的にWordPressサイトの場合はヘッダーなどが表示されるため、サイトロゴによるトップページへのリンクやグローバルメニューが表示されるため、一般的な404ページよりはユーザーの困惑は少ないと考えることができますが、コンテンツ部分にメッセージを記載しておく方が無難でしょう。

WordPressテーマにもよりますが、英語でメッセージが表示された場合にはユーザーは戸惑いますので、なるべく使用言語である日本語でメッセージを残しながら、主要ページへのリンクやサイト内検索を設置しておくほうが良いでしょう。

404.phpだけで404ページを設定していないケース

404.phpだけで404ページを設定していないケース

page.phpなどと同様にWordPressテーマによっては404.phpが存在せず、index.phpとcontent.phpなどを組み合わせて404ページの仕様を設計しているものもあります。

またWordPressテーマ内に404.phpがあったとしても、部分的にcontent.phpを利用しているケースもあり、404.phpのみの編集だけでは404ページを完全にカスタマイズすることができない場合もあります。

WordPressサイトの404ページの表示をカスタマイズするために、この404.phpを編集する場合は、WordPress管理画面から直接ファイルを操作するか、WordPressインストールサーバーにFTPなどで接続し、404.phpをダウンロードしてローカル環境でエディタを用いて修正します。

管理画面から404.phpを確認し、編集する

404テンプレートを選択

WordPressにログインし、WordPress管理画面の左側に操作メニューの「外観」から「テーマの編集」を選択して、画面右側に404.phpがあればそれをクリックしてください。

WordPressテーマにもよりますが「404(404.php)」や「404テンプレート(404.php)」といったように表記されています。

クリックすると404ページを構成しているphpが表示されますので、この画面から404ページのカスタマイズを行ってください。

404ページをカスタマイズする

404ページをカスタマイズ

一般的にこの404.phpには、404ページが表示されたときのHTMLの吐き出しに関する設定が記述されています。

もし、記述がphpやWordPressタグばかりだった場合は、該当箇所からファイルを呼び出す設定になっているため、該当ファイルを探して、その部分を編集してカスタマイズする必要があります。

もし404ページをカスタマイズする際に該当箇所が見つからない場合はWordPressテーマファイルの構成を元に、該当ファイルを見つける必要があります。

なお、index.phpなどの中にWordPressタグを用いて404エラーの際の取扱が設定されているケースもあります。

テキストリンクやサイト内検索を設置する

404ページ テキストリンクやサイト内検索を設置

404ページはそのページが存在しないことを示しますが、そのページの表示のままだと、ユーザーが困惑する場合があります。

WordPressサイトのヘッダーなどにグローバルナビゲーションなどが設置されている場合は、テキスト表記だけでも良いかもしれませんが、なるべく404ページのコンテンツ部分に主要ページへのテキストリンクやサイト内検索を設置しておいたほうが無難です。

WordPressサイトトップページへと転送する

404ページ WordPressサイトトップページへと転送する

また、404ページが表示されてから一定時間経過後にWordPressサイトのトップページへと転送移動(リダイレクト)する仕組みを組み込んでおくのも良いかもしれません。

WordPressの設定・カスタマイズ・修正・編集方法の参考例

一度「このURLは404です(存在しないページ)です」とユーザーに示してから転送することで、そのURL自体は404ページであるということを伝えておくことができるからです。

それを伝えるためには、転送まで数秒間のタイムラグがあったほうが良いかもしれません。

404ページからトップページへのリダイレクト方法

404ページからトップページへのリダイレクト方法

リダイレクトには、meta要素によるリダイレクトやhtaccessによるリダイレクト、javascriptによるリダイレクトなどがあります。

ページURLを変更し、ページそのものを移転した場合はhtaccessによる301リダイレクトを設置することが理想的ですが、一度404ページ(削除されたページ)を表示し、一定時間経過後にトップページにリダイレクト(転送)する場合は、meta要素によるリダイレクトを利用するのが望ましいと考えられます。

meta要素によるリダイレクト設定例

meta要素によるリダイレクト設定例は次のようなものになります。

<meta http-equiv="refresh" content=" 5; url=https://トップページのURL.com">

content属性にある数値は「転送するまでの秒数」で、「;」で区切って、「遷移先のURL」です。なおURLは絶対パスでも相対パスでもどちらでも有効です。

これを<head></head>内に挿入します。

WordPressテーマ内の404.phpではなくheader.phpにおいて条件分岐を利用する

WordPressテーマ内の404phpではなくheaderphpにおいて条件分岐を利用する

WordPressテーマの404ページの構成にもよりますが、こうしたmeta要素によるリダイレクト設定は、通常<head></head>内に挿入して設定するため、404.phpではなくheader.phpなどヘッダーに関するphpファイルにおいて「404ページの場合」の条件分岐を利用して設定することが多いと思います。

404ページの条件分岐例

404ページの条件分岐例としては次のようなものになります。

<?php if(is_404()): ?>
404ページでのみ表示されるコードをこの部分に記載
<?php endif; ?>

WordPressサイトにやってきたユーザーの離脱を防ぐために

WordPressサイトにやってきたユーザーの離脱を防ぐために

基本的には存在しないページ・削除されたページを示す404エラーが返された時には、404の際のページを用意していない限り、英語でエラー表示が出ます。また、WordPressのテーマにもよりますが、404.phpとして404エラー時のページ表示のファイルが用意されている場合でも、英語でエラーコードが表示されたり、「見つかりません」と表示される場合がほとんどです。

削除済みのページであってもGoogleのインデックスに残存していたり、削除前に設置された外部からのリンクを経由してホームページにやってくるユーザーもいます。

こうしたユーザーの混乱を避けるために、404ページの表現に工夫を加えていくことで、ユーザーの離脱を防ぐことができます。

404ページへの工夫も大切ですが、もしページが移動しただけ(URL変更)の場合は、301リダイレクトを使用するなど適切な処理を心がけましょう。

(初回投稿日 2015年12月2日)

WordPressカスタマイズ・修正

ファンフェアファンファーレのWordPress(ワードプレス)のカスタマイズ、テーマカスタマイズサービス

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress(ワードプレス)のテーマ(テンプレート)やプラグインのカスタマイズサービスを提供しております。

WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧・復元に対応しております。

WordPress(ワードプレス)のカスタマイズ

WordPress(ワードプレス)の復旧・復元・エラー修正

WordPressでのホームページ制作(WordPressサイト制作)

WordPress(ワードプレス)を使ったウェブサイト制作・ホームページ制作ならファンフェアファンファーレにお任せください!

ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作(WordPressサイト制作)を推進させていただいております。

企業のWebマーケティングを加速するWordPressでのホームページ制作(WordPressサイト制作)ならお任せください!新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。

WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作

「WordPressテーマの404.phpを編集して404ページをカスタマイズする」のカテゴリ Web制作・Web関連
タグ: , , , ,


ホームページ制作・カスタマイズ、Webマーケティング・SEOなどのお問い合わせ・ご依頼