生暖かく千葉ロッテマリーンズを見守るそんなblog

404ページをデザインしてみた。あれですね、ページが見つからない時に出てくるやつです。

普通のホームページとかだと「.htaccess」ファイルを用意してUPしたり若干面倒なんですが、wordpressだと「404.php」があらかじめ用意されていて、これを修正すれば簡単にオリジナルの404ページが作れます。

ちなみにウチのページはこんな感じ。

ページには「検索フォーム」と「最新記事」、「人気記事」の３つを入れてあります。これでユーザーを誘導できるようにと。

「404.php」コードものっけておきましょう。

<?php
get_header();
?>

<div id="wrap">
<div id="header">
<div id="head-img"><img src="<?php bloginfo('template_url'); ?>/images/404.gif" alt="Error 404 - Not Found..." /></div>
</div>
 <div id="content-404">
<div class="box-404">
<p>指定したページが見つかりません。<br />
ページが移動または削除されたか、URLの入力間違いの可能性があります。<br />
下記よりご希望のコンテンツをお選びください。</p>
</div>

<h2>ページ内検索</h2>
<div class="box-404">
<!-- 検索フォームが入ります -->
</div>

<h2>最近の投稿</h2>
<ul>
<?php wp_get_archives('type=postbypost&limit=5&format=html'); ?>
</ul>

<h2>人気エントリー</h2>
<?php if (function_exists('wpp_get_mostpopular')) wpp_get_mostpopular("range=all&limit=5&order_by=views&stats_comments=0&pages=0"); ?> 

 
<p>※　Marines, be ambitiousは2010年3月にリニューアルいたしました。<br />
過去に掲載されていたコンテンツは全て削除されております。<br />
再掲載のリクエストがあれば、コメント欄にご記入よろしくお願いいたします。</p>

<p><a href="https://marinesbeambitious.com/">Marines, be ambitious トップページへ</a></p>
 </div>

  <div id="footer">
  <p>Copyright c 2010 Marines, be ambitious all rights reserved. </p>
  </div>
 </div>
</body>
</html>

最後に、こんな404ページを作る際に参考にしたページを紹介しておきますね。
どれもよくまとめられているページなんで見るだけでも楽しいですよ！

404エラーをデザインする為のインスピレーション（ホームページを作る人のネタ帳）
すごくユニークで真似したくなるような404ページデザイン３７選（二十歳街道まっしぐら）

NOT FOUND Mr.Children トイズファクトリー 2000-08-09 by G-Tools

千葉ロッテマリーンズブログランキング

↑ブログ村ランキング参加中…　クリックよろしゅうm(_ _)m

タグ: WordPress