404エラーページもカスタマイズ出来るらしい。せっかくだからイラストを入れて賑やかにしてみようかな〜

404でごめんなさい。

※この記事は、Surfaramaをカスタマイズしていた時のものです。現在のテーマの内容とは異なります。

エラーページもカスタム出来るらしいことがわかったから早速…と思ったら、力業カスタマイズの弊害で、404ページの一部が崩れてました。

そんなわけで、404エラーのページを修正中。

どうしようかなぁ…ここから…

と思っていたけど、取りあえず一段落したのでカスタマイズメモしておきます。

 

404ページを自分のサイト色にカスタマイズするには、404.phpを触ればいいよ〜

WordPressで404ページをカスタマイズするには、プラグインを使用する方法とPHPを直接編集する方法があります。

とは言え、プラグインを使ってカスタマイズ出来るっていうことは最近まで知りませんでした。なので、PHPファイルを直接編集して表示させています。

取りあえず、プラグインで表示させる方法を紹介しているサイトさんを見つけたので、忘れないようにぺたり。

プラグインでカスタマイズする方法はこっちー。

WordPressで404ページを設定&カスタマイズする方法 | Fukuro Press

WordPressで404ページ(404 Not Found)を超簡単に設定&カスタマイズする手順まとめました!専用の固定ページを作成し、あるプラグインを使って404エラーページに設定すればいいだけなので本当に簡単です。では早速その手順について詳しく・・・

ついでにぺたり。

もう一つPHPファイルを追加して表示挿せる方法もあるみたい。

SEO効果を最大化するための404エラーページのカスタマイズ方法

ユーザーにとって最高に利便性の高いサイト、そして極限までSEOを考慮したサイトを実現するために必須の404エラーページのカスタマイズ方法をはじめ、その役割やSEO効果を全て解説しています。

基本的には404.phpを編集するだけでカスタマイズはお終いなのですが、content-none.phpを増やす事で、404ページ以外にも404情報を表示出来るようになるらしいです。

アーカイブ画面で情報が無いよ!ってなったらアーカイブ画面のメインフレームに404をドバーンと表示しちゃうみたいな感じっぽい。

とは言え、ちょっと面倒臭そうなのでそこはいったん保留にしておきます。

 

まずは、カスタマイズ後のコードがこちら。

実際に行ったカスタマイズ後のコードはこんな感じになりました。

<?php get_header(); ?>

<div id="content" class="clearfix">

<div id="main" class="clearfix" role="main">

<article id="post-0" class="post error404 not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Error 404 Not Found'); ?></h1>
</header>

<div class="entry-content post_content">
<h4><?php _e( '大変申し訳ありませんが、ページが削除されたかURLが変更されているようです。' ); ?></h4>
<img class="wp-image-536 size-full aligncenter" src="ここに表示させたい画像を追加。(フルパスで)" alt="" width="897" height="493" />
<div>猫と歩けば壁にあたる。をご覧頂き、ありがとうございます。</div>
<div>大変申し訳ありませんが、アクセスしようとしたページは削除されたか、URLが変更されています。</div>
<div>お手数をおかけいたしますが、以下の方法からもう一度、目的のページをお探し下さい。</div>
<p>
<h2>検索BOX</h2>
<?php get_search_form(true); ?>
<p>
<?php the_widget( 'WP_Widget_Recent_Posts' ); ?>

<div class="widget">
<h2 class="widget-title"><?php _e( 'カテゴリー' ); ?></h2>
<ul>
<?php wp_list_categories( array( 'orderby' => 'count', 'order' => 'DESC', 'show_count' => 1, 'title_li' => '', 'number' => 10 ) ); ?>
</ul>
</div>

<?php
/* translators: %1$s: smilie */
$archive_content = '<p>' . sprintf( __( '' ), convert_smilies( ':)' ) ) . '</p>';
the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h4>$archive_content" );
?>

<?php the_widget( 'WP_Widget_Tag_Cloud' ); ?>

</div><!-- .entry-content -->
</article><!-- #post-0 -->

</div> <!-- end #main -->

</div> <!-- end #content -->

詳細は以下で説明ー。

 

404エラーメッセージが英語だー。日本語で表示させたいんだけど……

国産テーマの場合は、404ページの案内コメントは日本語になっている場合があるかもしれません。が。

海外テーマの場合、表示される言葉はもちろん英語です。

なので、「ごめんね。404エラーだからページが無いんだよ」と謝罪する場合、自力で日本語に切り替えないといけません。

じゃあどこにメッセージをぶっ込んだのかというと……

<h4><?php _e( 'ここにページが無いよ!ごめんねって入れる' ); ?></h4> 

ここです。

<h4><?php _e( ‘この部分’ ); ?></h4>‘この部分’のところに、【大変申し訳ありませんが、ページが削除されたかURLが変更されているようです。】と書き加えると、一番大きな見出しの下にメッセージが追加されます。

 

404ページにイラストを入れて華やかにしたい!どこに追加したらいい?

メッセージだけだとちょっと寂しい。じゃあイラストを追加してみよう!と言うことで、今度はイラストを追加してみます。

どこに追加したのかって言うと……

//</h4> の下にイメージタグを追加。
<img class="wp-image-536 size-full aligncenter" src="ここに表示させたい画像を追加。(フルパスで)" alt="" width="897" height="493" />

ここです。

</h4> の下にimgタグを追加し、src=” ”に表示させたい画像をフルパスで指定しました。

画像自体は、どこに表示させた以下によって移動していいと思います。(メッセージは画像の上がいいとかメッセージは画像の下がいいとかそういうの。)

 

ごめんなさいの一言謝罪と画像だけだと何か素っ気ない。もうちょっとコメントを足そうかな。

取りあえず、当初の目的は達成しましたが、これだけだと他が真っ白けで素っ気なさ過ぎる気もしてきました。

もう少しコメントを足しておくことにします。

<div>猫と歩けば壁にあたる。をご覧頂き、ありがとうございます。</div> 
<div>大変申し訳ありませんが、アクセスしようとしたページは削除されたか、URLが変更されています。</div>
<div>お手数をおかけいたしますが、以下の方法からもう一度、目的のページをお探し下さい。</div>

追加したコメントは画像の下に表示させたいので、imgタグの下にくっつけておきました。

 

検索ボックスもくっつけて、他の記事を探せるようにしておくぞー。

404ページを表示させただけで終わったてしまったら、そのままページを閉じられてさようならされてしまうかも……

それはそれで悲しいので、他の記事を探せるように検索ボックスもくっつけておきます。

<h2>検索BOX</h2>
<?php get_search_form(true); ?>
<p>
<?php the_widget( 'WP_Widget_Recent_Posts' ); ?>

と言うわけで、案内の下に検索ボックスのタグを追加しておきました。

 

検索ボックスだけじゃなくて、直ぐに記事にアクセス出来た方がいいかも?

関連記事っぽいのを表示させておいた方が便利だよって見たので、ついでにその処理もしておきます。

<div class="widget">
<h2 class="widget-title"><?php _e( 'カテゴリー' ); ?></h2>
<ul>
<?php wp_list_categories( array( 'orderby' => 'count', 'order' => 'DESC', 'show_count' => 1, 'title_li' => '', 'number' => 10 ) ); ?>
</ul>
</div>

<?php
/* translators: %1$s: smilie */
$archive_content = '<p>' . sprintf( __( '' ), convert_smilies( ':)' ) ) . '</p>';
the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h4>$archive_content" );
?>

<?php the_widget( 'WP_Widget_Tag_Cloud' ); ?>

</div>

この辺りはお借りしたソース(どこだっけかなぁ……)をそのままペタリしてます。

 

というわけで、404ページのカスタマイズは以上で終わり!これでちょっとだけ404が出ても不親切じゃないページに変わってくれたはずです。

多分。ね。

スポンサーリンク