WordPressの子テーマでカスタム404ページを作成する方法

公開: 2018-10-23

あなたのウェブサイトがどれほどうまく設計され、設計されていても、ユーザーはある時点で404ページに遭遇するでしょう。 スペルミスのあるURLを入力するのと同じくらい簡単なこともあります。 たとえば、www.website.com / contactに連絡先ページがあり、誰かがwww.website.com/contactsにアクセスしようとすると、404ページにリダイレクトされる可能性が高くなります。 また、Webサイトのコンテンツ調整では、リンクがリダイレクトされずに移動された可能性のあるページが常に考慮されるとは限りません。 うまくいけば、この経験がユーザーにあまり頻繁に起こらないことを願っていますが、そうなった場合、それは助けを提供し、あなたのブランドにユニークな何かを作る機会です。

あなたはウェブ上の404ページに精通している可能性が高いので、すでにデザインを念頭に置いているかもしれません。 そうでない場合は、「クールな404ページ」をグーグルで検索すると、あらゆる種類のインスピレーションを得ることができます。 デザインは、真面目なものから面白いもの、テキストが多いもの、ミニマリストのもの、またはその中間のものまであります。

以下は私のお気に入りのいくつかです。 これらは、ページのデザインで創造性がどのように使用されているかを示す良い例です。

フィグマ

figmaカスタム404ページ

Figmaは単純な404ページですが、グラフィックはベクトルポイントに非常に適合しています。 私はそれがいかにシンプルで大胆であるかが好きです。 本当に必要なのはそれだけです。

Airbnb

airbnbカスタム404ページ

この例では、コンテンツに関してもう少し説明しています。 実例となるアプローチは、ユーモアの要素を宣伝します。 これには、いくつかの主要なリンクが含まれます。 ユーザーが何かをタイプミスした場合、リストで探しているものを見つけることができる可能性があります。

MailChimp

mailchimpカスタム404ページ

MailChimpサイトでは、特に最近の再設計により、デザインは常に楽しいものになっています。 テキストとイラストの両方にユーモアの要素があります。

Genesis FrameworkとStudioPressのテーマを無料で入手してください！

Flywheelでサイトをホストすると、楽しいダッシュボードから30を超えるプレミアムWordPressテーマ（Genesisを含む！）にアクセスできます。 それはあなたがたった15ドル/月で始めることができる価値で2,000ドル以上です！ 詳細については、こちらをご覧ください。

カスタム404ページの作成

まず最初に：すべてのカスタマイズは子テーマで行う必要があります。 そうすれば、通常のテーマの更新によって変更が上書きされることはありません。 この404ページは、子テーマのファイル、正確には404.phpという名前のファイルになります。

CSS変数を追加してWordPressの子テーマをカスタマイズする方法

CSSカスタムプロパティとも呼ばれるCSS変数を使用すると、CSSスタイルシートで簡単に再利用できます。 あなたがWordPressの子テーマで仕事をしたことがあるなら、あなたはおそらくあなた自身がたくさんの麦粒腫をしていることに気付くでしょう...

また、これはテスト環境で行うことを忘れないでください。 テーマファイルが変更されている場合、サイトをダウンさせる可能性のある構文エラーの可能性が常にあります。

1.新しいファイルを作成します

子テーマがある場合、最初のステップは、作業を開始するための新しいファイルを作成することです。 子テーマを作成したフォルダーを開き、 404.phpファイルを追加することをお勧めします。

2.ファイルを編集します

基本例

この例では、テキストと画像を含むページについて説明します。 ここでのデザインのアイデアは、イラスト付きのグラフィックを必要とするシンプルなものを作成することです。

次のコードを404.phpページに貼り付けます。 それは基本的なスタートです。 物事を別の構造に変更して、実際に独自のものにすることができます（つまり、サイドバーが必要ない場合は、削除できます）。 

<?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( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>
基本的なワードプレスのカスタム子テーマ404ページのチュートリアルの例と電車のグラフィック

あなたがしなければならないいくつかの変更があります。 1つは、画像へのパスを変更し、必要なタイトルを含めることです。 カスタムメッセージを作成してから、変更を保存することを忘れないでください。

ここまでの手順に従って、画像、メッセージ、標準のヘッダー、サイドバー、フッターを含むカスタムテンプレートを作成しました。 （これは他のページにもあるかもしれません。）

ウィジェットアプローチ

これはオプションですが、多くの設計者はウィジェット領域での作業を好みます。 変更を加えるのが簡単で、保守が容易です。 たとえば、ウィジェットは、最新の人気のあるブログ記事を表示するための効率的な方法です。

ワードプレスダッシュボードウィジェットエリア基本的なワードプレスカスタム子テーマ404ページチュートリアル

ウィジェットの追加

ウィジェットを404.php fileに追加するには、新しいウィジェット化された領域を作成する必要があります。 子テーマにはfunctions.phpファイルが必要なので、今度は子テーマにファイルがあることを再確認します。

functions.phpファイルでは、ページに新しいウィジェットを追加するためのスニペットが必要になります。 

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

このスニペットはウィジェットを追加するだけです。 実際に使い始めるには、この関数を呼び出す必要があります。 404.phpファイルで呼び出されます。 このウィジェット領域が必要な場所に注意してください。

新しいウィジェットを表示する次のコードをコピーして貼り付けます（たとえば、タイトルとテキストの後）。 

<?php dynamic_sidebar( '404' ); ?>

新しいウィジェット領域を表示する場所が決まったので、 [外観]>[ウィジェット]に移動してウィジェットコンテンツを追加します。 ここで、HTMLブロック、人気のある投稿、または404ページの他のウィジェットなどを選択できます。

ワードプレスダッシュボードウィジェットエリア挿入基本的なワードプレスカスタム子テーマ404ページチュートリアルの例と電車のグラフィック

単純なものを作成する場合でも、リンクの多いページを作成する場合でも、カスタム404ページの作成は非常に簡単です。 子テーマを使用し、ウィジェットを利用することで、無限のデザインの可能性があります。

サイトをカスタマイズする他の方法をお探しですか？ これらのチュートリアルをチェックしてください：

  • CSS変数を追加してWordPressの子テーマをカスタマイズする方法
  • Genesisの子テーマの簡単なカスタマイズ
  • WordPressでカスタムフィールドを作成して使用する方法