WordPressで404ページを編集する方法(カスタマイズガイド)| WPバフ
公開: 2022-01-07すべてのコンテンツ作成者とサイト管理者は、細部が非常に重要であることを知っており、インターネット上で第二印象はありません。 美しい配色、優れたアニメーション効果、または魅力的な404ページは、ユーザーエクスペリエンスを左右する詳細です。
404ページは、ページが見つからない場合の状況を説明する技術表現です。 たとえば、ユーザーがブラウザタブでURLを誤って入力したか、そのWebページがオンラインでなくなったことが原因である可能性があります。
次の段落では、WordPressで404ページを編集する方法を学習します。 魅力的な404ページは、困惑した瞬間を克服するための最良のソリューションです。 サイト訪問者を失望させる代わりに、優れた404ページはあなたのブランドのより良いイメージに貢献します。
404ページとは
リンクをクリックするか、ブラウザタブにURLアドレスを入力します。 次に、ブラウザは、アクセスしたいWebサイトをホストしているサーバーからのデータの要求を開始します。 これはインターネットブラウジングの基本的な説明です。 ブラウザとサーバー間の情報交換は、とりわけ、いくつかのステータスコードを意味します。 さらに、Webページのリダイレクト、クライアントまたはサーバーのエラー、または情報提供の目的を説明するステータスがあります。
フォーム4XXのすべてのステータスコードは、クライアントエラーを考慮しています。 たとえば、403 Forbiddenは、サーバーがブラウザのリクエストを理解しているが、データの提供を拒否した場合です。 圧倒的に、404ページは最も有名なステータスコードです。 壊れたリンクをクリックしたり、存在しないWebページに移動する間違ったURLを入力したり、要求したリソースが存在しなかった場合は、404ページが表示されます。
巨大な雑誌のニュースや頻繁に訪れる店舗などの重要なサイトでさえ、404ページのエラーが含まれている可能性があります。 もちろん、それは避けられませんが、困惑した状況を乗り越える方法を知っておく必要があります。 したがって、サイトの見栄えの良い404エラーページを作成するために可能な限りのことを行った場合に役立ちます。
良い404ページの構造

いくつかのウェブサイトは、クールな404ページを特徴とするリストで言及することによってバックリンクと一般の認識を獲得します。 サイト訪問者は、404ページの優れたデザインまたはユーモラスなメッセージを高く評価しています。 これは、見栄えの良い404エラーページがオンラインビジネスの優先事項であることを納得させるはずです。 優れた404ページに含める必要があるものは次のとおりです。
●エラーメッセージ–ユーザーは404ページにアクセスした瞬間から問題に気付くはずです。 誰もが理解できるように明示的にしてください。
●コンテンツへのリンク–ユーザーにサイトを放棄してほしくない。 関連するコンテンツへのリンクを提供します。 それがあなたの最高のコンテンツであろうと、欠落しているページに関連するものであろうと、それは完全にあなた次第です。 重要なのは、それらをサイトに保持することです。
●お詫び–ご不便をおかけして申し訳ありません。 可能であればユーモアを使用してください。これは、サイトに2度目のチャンスを与えるように促すための最良の方法です。
●優れたデザイン– 404ページにアクセスするとがっかりし、過剰反応する傾向があります。 魅力的なコンテンツに加えて、見事なデザインが彼らの心を変えるかもしれません。 優れた404ページを作成するために最善を尽くします。
WordPressで404ページを編集する方法
幸い、WordPressで404ページを編集するためのさまざまなオプションがあります。 最も経験豊富なユーザーは、404.phpファイルを編集するために行くかもしれません。 これは、404エラーページの表示を担当するファイルです。 Elementorのようなページビルダーの使用を好むWeb管理者は、404ページを作成できます。 最後に、404ページを作成するためのいくつかのプラグインは、コーディングスキルが不足している人のために利用できます。 WordPressで404ページを作成および編集するためのすべての方法を分析してみましょう。
FTPクライアントを介して404ページを編集する
経験則として、コードを編集する前にサイトのバックアップコピーを実行することをお勧めします。 この手順をスキップしないでください。ほとんどの場合、サイトのバックアップは必要ありませんが、準備ができていないと悪いことが起こります。 だから、安心してそのバックアップをしてください!
完全なサイトバックアップを実行し、問題をさらに深く掘り下げる準備ができていると仮定しましょう。 選択したFTPクライアントを使用して、サイトlocalhostに接続します。 404.phpファイルと呼ばれるファイルを検索します–これは404エラーのWebページを表示するためのファイルです。 通常、WordPressテーマには専用の404.phpファイルがありますが、このファイルを見逃す場合もあります。 テーマコードに404.phpファイルが含まれているかどうかを再確認してください。 テーマに404.phpファイルがない場合は、ファイルを作成する必要があります。 新しいファイルを作成し、次のコード行をコピーします。
404ページテンプレート
<?php /** * The template for displaying 404 pages (Not Found) * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div class="content-area"> <div class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn't it?', 'twentythirteen' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> <?php get_search_form(); ?> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>
出典:WordPressCodexでのエラー404ページの作成
これは、404 Page of Twenty 13テーマの背後にあるコードです。これは、プロジェクトの編集と使用に適した基本的なページです。 もちろん、他のデフォルトのWordPressテーマを見て、それらの404ページを確認することもできます。 Twenty Thirteenテーマの404ページは、サイトのヘッダーとフッターを呼び出すため、ページはサイトのスタイルと一致しています。 サイトがどのように見えても、404エラーページは同様のデザインになります。 ただし、このページに表示されるコンテンツを調整する必要があります。 この段階で、コンテンツ作成者の才能が介入します。
必要に応じて、404.phpファイルを編集して、サイトで公開されているコンテンツを表示できます。 オプションは無限なので、404ページエラーを強化するいくつかの潜在的なモダリティを見てみましょう。
- 最新の7つの投稿のタイトルを表示する-あなたがしなければならないのは、このコードスニペットを404.phpファイルに貼り付けることだけです。
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>
- ランダムな7つの投稿のタイトルを表示する次のコードを貼り付けて、7つのランダムな投稿を表示します。
<ul> <?php $rand_posts = get_posts( array( 'posts_per_page' => 5, 'orderby' => 'rand' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; wp_reset_postdata(); } ?> </ul>
ロゴまたは面白い画像(猫と犬は常に機能します)を追加して、視聴者を笑顔にし、2度目のチャンスを与えます。 次に、編集作業が終了したら、404ページをテストします。 404ページを表示するには、ブラウザバーにサイトのアドレスを入力し、その後にランダムな文字列を追加します。 結果は次のようになります。

https://example.com/dfdfddfd
動作しない場合は、サーバーがカスタム404.phpファイルを見つけられないことが原因です。 このシナリオでは、サイトの.htaccessファイルに移動して、次のコード行を貼り付ける必要があります。
ErrorDocument 404 /index.php?error=404
重要:新しいWebサイトまたは最近起動したWebサイトを編集する場合、.htaccessファイルがない可能性があります。 それは大きな問題ではありません-あなたのサイトのパーマリンクを変更し、あなたの操作を保存してください。 その後、すぐに好みのパーマリンク形式に戻します。 このようにして、.htaccessファイルが生成されます。
テーマエディタで404ページを編集する(非推奨)

WordPressでの404ページの編集に関連するかなりの数の記事が、実行可能なソリューションとしてテーマエディターに言及しています。 そうではありません! WordPress管理ダッシュボードから直接サイトコードを編集するのは便利で簡単ですが、それは危険であり、大失敗に終わる可能性があります。 言うまでもなく、オンラインで誰もがアクセスできるサイトを編集することは、まったく専門的ではありません。 また、テーマを更新すると(子テーマを使用しない限り)、編集内容は表示されなくなります。
ページビルダーを使用して404ページを編集する
この方法は、安全、簡単、そして効果的です。 Elementor、Divi Builder、Beaver Builder、SeedProd、ThemifyBuilderなどのページビルダーに精通していると思います。 あなたがそれをよく理解している限り、あなたがどちらを選ぶかは関係ありません。 これらのビルダーを使用すると、コードを1行も記述せずに、優れた404ページを作成できます。 これは、コードスニペットをサイトファイルに貼り付けることが心配な場合に最適なソリューションです。
お気に入りのページビルダーのブログとドキュメントを確認してください。おそらく、404ページの作成方法を説明するチュートリアルがあります。 さらに、一部のページビルダーには、404ページ専用のテンプレートがあります。 テンプレートを選択し、ブランドに合わせてパーソナライズします。
404ページのWordPressプラグイン
専用プラグインを使用して404ページを作成するための選択肢は多くありません。 ただし、いくつかのプラグインは注目に値します。 それらの資本上の利点は、404ページを作成および編集するためのコードを記述する必要がないことです。 プラグインはシンプルで効果的、そして軽量です。
404ページ

優れた404エラーページを作成するには、コーダーである必要があると信じたくなるかもしれません。 このプラグインのおかげで、誰もが魅力的な404エラーページを思いつくことができます。 さらに、404ページプラグインはページビルダーほど複雑ではありません。 あなたは最終製品に焦点を合わせます–良い404エラーページ。
プラグインをインストールしてアクティブ化します。 次に、サイトの他のページと同じように404ページを作成します。 WordPress管理ダッシュボードから[外観]>[404エラーページ]に移動し、作成したページをサイトのカスタム404エラーページとして選択します。
このプラグインでは、Webページのリダイレクトは許可されていません。 Webページが欠落していることを検索ボットに通知するだけです。 404pageは開発者の個人的なプロジェクトであるため、このプラグインの背後に代理店はありません。 プラグインには100,000のアクティブなインストールがあり、ほぼ完璧な評価(5つ星のうち4.9つ星)があることを考慮に入れてください。このような状況では、プラグイン開発者は感謝に値します。
404すべてのホームページへのリダイレクトと壊れた画像のリダイレクト

プラグインの名前はあまり印象的ではありませんが、非常に示唆に富んでいます。 プラグインは、以前の方法とは異なる方法で404ページのエラーを処理します。 このプラグインは、適切に設計された404ページで訪問者を喜ばせる代わりに、すべての404エラーをホームページまたは他のWebページにリダイレクトします。 このプラグインの最大の利点は、サイト上の壊れたリンクを制御できることです。 さらに、このプラグインを使用してユーザーをリダイレクトできます。 たとえば、更新されていないブログ投稿にアクセスできるようにする代わりに、このプラグインを使用して更新されたバージョンに誘導します。
Colorlib404カスタマイザー

このプラグインは使い方が簡単で、魅力的な404ページを作成するのに役立ちます。 必要に応じてカスタマイズできる、専門的に作成された404テンプレートが付属しています。 Colorlib 404カスタマイザープラグインを使用すると、ソーシャルメディアボタンの挿入、背景色または画像の変更、およびテキスト見出しの構成が可能になります。 上級ユーザーはカスタムCSSコードを追加できます。 プラグインはオープンソースであるため、プラグインの改善に貢献できます。
ページビルダーを使用するか、テーマを使用してください。
すでにページビルダーを使用している場合は、それを介して404をカスタマイズするためのオプションがすでにあります。 ほとんどすべてのページビルダーでは、404ページを編集できます。 これがあなたがそれをすることができると私たちが確信しているプラグインのリストです:
●さわやかな
●Elementor
●ビーバービルダー
●DiviBuilder
●サイトの起源
OceanWP、GeneratePress、Astraなどのテーマを使用している場合は、それらのテーマオプションを使用して実行できます。 デモコンテンツをインポートすると、見栄えの良い404ページが完成します。 デモコンテンツをインポートして事前に作成されたデザインを使用することの唯一の欠点は、Webサイトが多かれ少なかれデモとまったく同じように見えることです。 たとえば、このWebサイトとAstraデモを見てください。 Astraのスターターサイトのライブラリを調べた人なら誰でも、Webサイトの所有者が自分で作成していないことにすぐに気付くでしょう。 これは、ユーザーがサイトをどれだけ信頼するかを損なう可能性があります。
明るい面として、Astra、OceanWP、および500.000人以上のユーザーがいる他のテーマは、スターターサイトライブラリを毎月さらに拡張しています。
あなたに
これで、WordPressで404ページを編集する方法について明確なアイデアが得られました。 それを行うには多くの解決策があり、あなたはあなたのスキルとニーズに適したものを選択する必要があります。 重要なのは、視聴者を喜ばせるためのエキサイティングな404エラーページがあることです。 その404ページを設計および実装するために使用する方法とツールは、顧客には関係ありません。 優れた404エラーページがないという言い訳はありません。 製図板に移動して、カスタムエラーページの作成を開始してください。