WordPressで404ページエラー表示をカスタマイズしよう!

本ページは広告が含まれています
404

ネットサーフィン(今は言わない?)をしていて、よく “404 Not Found” とか、”ページが見つかりません”と素っ気ない表示を見かけますが、来ていただいた方におもてなしの意味を込めて、エラー表示もカスタマイズしてみましょう。

スポンサーリンク
もくじ

404.phpを作成

/wp-content/themes/<お使いのテーマ名>/404.php となるように作成します。
当サイトは、簡素に作成しましたw。
とても参考になるソースではありませんが、メモとして残します。
(<head></head>は省略しています。)

<style type="text/css">
body {
    background-color:#fffffa;
    margin:auto;
    pading:0;
    width:800px;
}
div {
     margin-top: 100px;
     font-family:arial, serif;
     color: #272727 ;
     text-align: center;
}
h1 {
     font-size: 76px;
     margin: 0;
     padding: 0;
     line-height: 80px;
     color: #665e53 ;}strong {
     font-size: 60px;
     line-height: 45px;
     color:#423735;
}
p.notfound {
    font-size: 24px;
    color: #665e53 ;
    }
p.small {
    font-size:14px;
    color:#423735;
    line-height:18px;
}
input{
    padding: 5px 0 ;
}
p a {
    color:#423735;
    font-weight:bold;
    text-decoration:none;
}
p a:hover {
    color:#d6c6af;
    font-weight:bold;
    text-decoration:underline;
}
input {
    background-color : #efece6 ;
    border: 1px solid  #d6c6af;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
</style><body>
    <div>
      <h1>404</h1>
      <strong>Not Found</strong>
      <p class="notfound">
        お探しのページが見つかりませんでした。
      </p>
      <p class="small">
      お手数ですが、検索フォームでお探しいただくか、<br />
      <a href="<?php bloginfo('url'); ?>">戻る</a>をご利用下さい。
      </p>
      <form action="https://kininarunet.com/">
        <input type="text" onfocus="if (this.value == 'Search') this.value = '';" onblur="if(this.value == '') this.value = 'Search';" value="Search"
        name="s" size="20" style="width: 210px; height:20px;"/>
      </form>
   </div>
</body>

404

素っ気ないですねw

.htaccessファイルを編集する

WordPress Codex 日本語版にあるように、サーバーがあなたの作成した 404 ページを見つけられるように、.htaccess ファイルに以下の行を追加します。

ErrorDocument 404 /index.php?error=404

WordPress が wordpress という名前のサブフォルダあるいはサブディレクトリにある場合、.htaccess ファイルには、以下のように追加します。

ErrorDocument 404 /wordpress/index.php?error=404

以上になります。

【参考にさせていただいたリンク先】
Creating an Error 404 Page – WordPress Codex 日本語版

よかったらシェアしてね!
  • URLをコピーしました!
もくじ