WordPressで404ページをカスタマイズする方法

公開: 2021-06-29

あなたのサイトの404エラーページを編集する方法を探していますか？ 私たちはあなたをカバーしています。 このガイドでは、WordPressで404ページをカスタマイズするさまざまな方法を紹介します。

インターネットを定期的に使用している場合は、おそらく404エラーページに少なくとも1回は遭遇しています。 リクエストされたページが利用できない場合に表示されます。 ほとんどのウェブサイトの所有者は、そのページを最大限に活用するためにできることがたくさんあることに気付かずに、デフォルトの404ページを残します。 幸いなことに、WordPressを使用すると、簡単にカスタマイズできます。

このエラーページを編集する方法を理解する前に、404ページとは何か、およびそれをカスタマイズすることの利点のいくつかをよりよく理解しましょう。

404ページとは何ですか？

404エラーページは、ユーザーがWebブラウザに壊れたリンクまたは無効なリンクを入力したときに表示されるWebサイトのページです。 これは、訪問者がアクセスしようとしているページにアクセスできないことを意味します。 ご想像のとおり、これはサイトにとって良いことではありません。

リンク切れはエクスペリエンスを低下させるだけでなく、SEOランキングにも影響を与える可能性があります。 原則として、訪問者が404ページに探しているものが見つからないため、訪問者を404ページに送信しないようにする必要があります。

ただし、Webサイトがどれほど適切に維持されていても、訪問者は少なくとも1回は404ページにアクセスします。 サーバーがダウンしている場合、移動されたページが適切にリダイレクトされていない場合、またはページ自体が存在しなかった場合に発生する可能性があります。 さらに、ブラウザに間違ったURLを入力したために、ユーザーが404ページに表示される可能性もあります。 したがって、404ページへのアクセスを完全に防ぐ方法はありません。

なぜ404ページをカスタマイズするのですか？

訪問者が404エラーページにアクセスするのを完全に回避することはできないため、それを最大限に活用して、その悪い体験をチャンスに変える必要があります。

ほとんどのウェブサイトのデフォルトの404ページは素晴らしいものではありません。 これらは通常、問題の技術的な詳細を含む「見つかりません」エラーを表示し、非常によく似ている傾向があります。 ご想像のとおり、これはユーザーにとって最善ではありません。 ユーザーができることは、前のページに戻ることだけです。

デフォルトの404ページはワードプレスで404ページをカスタマイズします

幸いなことに、ほとんどのサイトにはデフォルトの404ページがあるため、編集することで競合他社との差別化を図ることができます。 WordPressでは、404ページを簡単にカスタマイズし、ユーザーに追加情報を提供して、ユーザーに何らかの行動を取るように促すことができます。

あなたのサイトの404ページを変更する方法には多くの可能性があります。 たとえば、背景を変更したり、いくつかのオプションを追加したりすることで、ページのデザインを改善できます。 同様に、ユーザーが404ページにアクセスした理由をユーザーに知らせ、必要な情報を取得するためのヒントを追加することができます。 または、Webサイトの他の便利な投稿やページへのリンクを追加することもできます。

これらのカスタマイズは、訪問者に印象を与えることもでき、これは常にWebサイトに適しています。

面倒なことはせずに、404ページを編集する方法を見てみましょう。

WordPressで404ページをカスタマイズする方法

WordPressで404ページを簡単にカスタマイズする主な方法は2つあります。

  1. プログラムで
  2. プラグイン付き

あなたがあなたに最も適切なものを選ぶことができるように、それぞれの方法を見てみましょう。

プロセスを開始する前に、サイトの完全バックアップを作成していることを確認してください。 私たちはあなたのウェブサイト上の機密情報を編集しますので、何かがうまくいかない場合に備えてバックアップをとることは常に良い考えです。

1）WordPress404ページをプログラムでカスタマイズする

この方法は、コーディングのスキルがあり、404ページを変更するための十分な柔軟性を備えている人にとって非常に便利です。 上級ユーザーでなくても、いくつかのスニペットを追加することで、404ページのさまざまなコンポーネントを簡単にカスタマイズできます。

WordPressダッシュボードの[外観]> [テーマエディター]に移動し、画面の右側から404.phpファイルを開くだけです。 ここに、以下に示すコードスニペットを追加する必要があります。

テーマエディタ404ファイルはワードプレスで404ページをカスタマイズします

これらのファイルのコードは、使用するテーマによって異なることに注意してください。 Diviテーマを使用していますが、別のテーマを使用するとコードが異なって見える場合があります。 Diviも使用したい場合は、レビュー全文をご覧ください。

別のテーマを使用する場合は、次のスニペットのいくつかをベースとして使用し、それらを調整してWordPressの404ページをカスタマイズします。

404ページのテキストとタイトルのカスタマイズ

404.phpファイルのデフォルトのコードを編集することで、404ページのテキストとタイトルを簡単にカスタマイズできます。

404エラーページのデフォルトコードは次のようになります。

 <？php get_header（）; ？>

<div id =” main-content”>
<div class =” container”>
<div id =” content-area” class =” clearfix”>
<div id =” left-area”>
<article id =” post-0” <？php post_class（ 'et_pb_post not_found'）; ？>>
<？php get_template_part（ 'includes / no-results'、 '404'）; ？>
</ article> <！– .et_pb_post –>
</ div> <！–＃left-area –>

<？php get_sidebar（）; ？>
</ div> <！–＃content-area –>
</ div> <！– .container –>
</ div> <！–＃main-content –>

<？php

get_footer（）;

<article>タグ全体を一連の見出しタグに置き換え、404ページに表示するテキストとタイトルを次のように追加するだけです。

 <？php get_header（）; ？>

<div id =” main-content”>
<div class =” container”>
<div id =” content-area” class =” clearfix”>
<div id =” left-area”>
<h2>ページが見つかりません–404エラー</ h2>
サーバーの問題である可能性があります。
</ div> <！–＃left-area –>

<？php get_sidebar（）; ？>
</ div> <！–＃content-area –>
</ div> <！– .container –>
</ div> <！–＃main-content –>

<？php

get_footer（）;

クイックヒント： 404ページをプレビューする場合は、Webブラウザの新しいタブにWebサイトのURLを入力し、 404パスを追加するだけです。

たとえば、サイトのURLが「 www.sitename.com 」の場合、その末尾に404を追加するだけで（「 www.sitename.com/404」）、404ページをプレビューできます。

サイトにその正確なパスを持つページがないことを確認してください。 すでに存在する場合は、「 www.sitename.com/404-preview-404」などのランダムな文字をパスに追加できます。

404ページに最新の投稿を表示する

Webサイトの404ページに最新の投稿を表示する場合は、次のコードスニペットを404.phpファイルに追加するだけです。

 <？php wp_get_archives（array（ 'type' => 'postbypost'、 'limit' => 10、 'format' => 'custom'、 'before' => ''、 'after' => '<br /> '））; ？>

この場合、最後の10件の投稿を表示していますが、表示する最近の投稿の数でlimit属性を変更できます。

404ページにランダムな投稿を表示する

同様に、404ページにランダムな投稿を表示することもできます。 そのためには、このコードスニペットを404.phpファイルに追加します。

 <ul>
<？php
$ posts = get_posts（ 'orderby = rand＆numberposts = 5'）;
   foreach（$ posts as $ post）{？>
        <li> <a href = "<？php the_permalink（）;？> "title =" <？php the_title（）;？> "> <？php the_title（）; ？> </a>
        </ li>
   <？php}？>
</ ul>

コードスニペットを編集して、表示するランダムな投稿の数を調整することもできます。

コードを使用してファイルを編集することに慣れていない場合は、プラグインを使用して404ページを変更することもできます。

2）プラグインを使用してWordPressの404ページをカスタマイズする

この方法は、コーディングスキルがない場合や、スニペットを使用してファイルを編集したくない場合に役立ちます。 プラグインを使用することは、WordPressWebサイトの404ページをカスタマイズするための最も速くて簡単な方法の1つです。 プラグインをインストールして、いくつかの変更を加えるだけです。

404ページの編集に使用できるプラグインは複数あります。 最高のもののいくつかは次のとおりです。

2.1）PeterRaschendorferによる404ページ

404pageは、404ページをカスタマイズするための最も人気のあるWordPressプラグインの1つです。 デフォルトのWordPressページエディタを使用して、独自のカスタムエラーページを作成できます。

プラグインは非常に使いやすいので、わずか数分で404ページを編集できます。 最も人気のあるWordPressテーマとプラグインでうまく機能するため、互換性の問題は発生しません。

主な機能
  • デフォルトのWordPressページエディタを使用して404ページを編集します
  • 主要なWordPressテーマおよびプラグインと互換性があります
  • 非常に簡単で使いやすい
  • 十分に文書化されており、プラグインのマニュアルが付属しています
価格

404pageは無料のプラグインです。

2.2）Colorlib404カスタマイザー

Colorlib 404 Customizerは、404ページをカスタマイズするための優れたプラグインです。 テーマカスタマイザーを使用して404ページを編集するオプションが提供されます。これは、ライブプレビューで行ったすべての変更を確認できるため非常に便利です。

また、404ページの背景画像を複数の404ページのテンプレートとともに編集することもできます。 同様に、カスタムCSSをページに追加して、必要に応じてさらにカスタマイズすることもできます。

主な機能
  • テーマカスタマイザーを使用して404ページを編集できます
  • 404ページのテキストと背景を編集するための追加オプション
  • 必要に応じて404ページにカスタムCSSを追加するオプション
  • 複数の404ページのテンプレート
価格

このプラグインは100％無料で、WordPressリポジトリからダウンロードできます。

Colorlib404を使用して404ページをカスタマイズする

次に、プラグインを使用して404ページを編集する方法を見てみましょう。 このチュートリアルでは、 Colorlib 404Customizerを使用します。 ライブプレビューで行った変更をリアルタイムで確認できるほか、Webサイトの20種類のページテンプレートにアクセスできます。 次に、カスタマイザーでいくつかの変更を加えて、404ページを更新するだけです。

プロセスを段階的に見ていきましょう。

プラグインをインストールしてアクティブ化する

プラグインをインストールするには、WordPressダッシュボードで[プラグイン]> [新規追加]に移動し、下のスクリーンショットに示すように検索バーでプラグインを検索します。 Colorlib 404 Customizerが見つかったら、[今すぐインストール]をクリックしてプラグインをインストールし、アクティブ化します。

プラグインを手動でダウンロードしてインストールすることもできます。 それを行う方法がわからない場合は、WordPressプラグインを手動でインストールする方法に関するガイドを確認してください。

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

プラグインがアクティブ化されたら、 [外観]> [カスタマイズ]に移動して、テーマカスタマイザーを開きます。 Colorlib 404カスタマイザー設定タブに移動すると、アクティブテンプレート、一般オプション、カスタムCSSの3つのオプションが表示されます。 選択したテンプレートによっては、より多くのオプションが表示される場合があります。

カスタマイザーのプレビューは、それに応じて新しいカスタム404ページに変わります。 まず、アクティブテンプレートの[変更]ボタンをクリックして、404ページに必要なテンプレートを選択します。 20種類のテンプレートから選択できます。

アクティブなテンプレートを変更する9ワードプレスで404ページをカスタマイズする

次に、[一般]オプションを選択します。 ここで、カスタム404ページを表示するには、Colorlib404カスタマイザーをアクティブ化する必要があります。 その後、ページのメインコンテンツの背景画像とテキストを追加または変更できます。 さらに、ページの背景の繰り返し、サイズ、色を調整できます。

訪問者を404ページから別の場所にリダイレクトする場合は、テキストとリンクを追加することもできます。 これは、ユーザーを関連するページに誘導し、ユーザーがサイトにとどまるようにするのに非常に役立ちます。

プラグインには、カスタマイズ可能なホームページに視聴者を誘導するためのデフォルトのボタンが含まれています。

一般的なオプションはワードプレスで404ページをカスタマイズします

戻ってカスタムCSSオプションを開くと、カスタムCSSを使用してページを編集できます。 これは、ページデザインを変更し、サイトのルックアンドフィールと一致させるのに役立ちます。

前述のように、カスタマイザーのライブプレビューを使用して、行ったすべての変更をリアルタイムで表示できます。 404ページのすべての変更に満足したら、[公開]を押してページを更新します。

最終プレビューはワードプレスで404ページをカスタマイズします

結論

要約すると、サイトをどれだけうまく維持しても、訪問者は最終的に404ページに出くわします。 ほとんどのWebサイト管理者はデフォルトのページを残しますが、編集して最大限に活用することができます。 404ページを変更することで、訪問者のエクスペリエンスを向上させ、ユーザーを失うことを回避することで、競合他社から際立つことができます。

このガイドでは、404ページをカスタマイズするさまざまな方法を見てきました。

  • プログラムで
  • 専用プラグイン付き

コーディングスキルがある場合は、コードスニペットを使用して404ページを編集できます。 Webサイトのテキストを変更したり、便利なリンクやボタンを追加したり、最近の投稿を表示したりすることができます。 ただし、初心者でファイルを編集したくない場合は、プラグインを使用して404ページを変更できます。 数回クリックするだけで、ページの背景画像とテキストをカスタマイズできます。

このチュートリアルを使用して、問題なく404ページをカスタマイズできることを願っています。 サイトを最大限に活用するには、他のさまざまなページの編集に役立つ他のガイドを参照することをお勧めします。

  • WordPressホームページを編集する方法
  • プログラムで製品ページを編集する方法を学ぶ
  • WooCommerceショップページをカスタマイズする方法
  • WooCommerceカテゴリページをカスタマイズする
  • WooCommerceでチェックアウトページを編集する方法
  • WooCommerceのマイアカウントページをカスタマイズする方法を学ぶ
  • WooCommerce製品ページをカスタマイズする方法

サイトの404ページをカスタマイズしましたか？ どの方法を使用しましたか？ 以下のコメントでお知らせください！