【Simplicity】「404ページ」を設定、カスタマイズしました【カスタマイズ】

来月からブログのURLを変えることにしたのですが、それに伴いGoogleなどの検索結果で出てくるリンクが無効になることが考えられ、せっかく検索から来てもらえそうだったのに、エラーで読者を逃していますという可能性から「404エラーページ」をカスタマイズしようと思いました。

ただ、よく考えたらそもそもURL本体が変わっているのでエラーで出てくるページはここじゃないことに後から気づいたんですが…。

とにかくページを作り直したので紹介します。

404イメージの設定

まず初めに、「Simplicity」のカスタマイズページで、404ページ用画像をアップロードします。特になくても問題はないのですが、オリジナリティを出すにはまずここから。

log-161130wpdesign05

カスタマイズ>レイアウト(全体・リスト)>404イメージ(一番下にあります)にある項目から任意の画像を登録。

まずこれだけで「404ページ」が大きく変わります。

エラーメッセージの追加

でもそれだけだとページがとてもシンプルなので、Hタグを設定して、見出しを装飾し、画像下に、ページがないことを説明する一文を入れます。

log-161130wpdesign02

こんな感じですね。

やり方は後でまとめて書きますが、ウィジットで設定しています。

検索、人気記事、カテゴリー一覧の設置

さて、ここからは、いつもお世話になっている「バズ部」さんの下記記事を参考にさせていただきました。

[blogcard url=″bazubu.com/404-error-page-26748″]

アクセスしようとしたページがないだけならこれでもいいのですが、せっかく来ていただわけですから、見たかったページにや、他に見たいと思えるページを見つけていただける様にさらにカスタマイズします。

付け加えたのは下記3つ。

  1. 検索して見つける
  2. 人気記事から見つける
  3. カテゴリーから見つける

これらは全て、ウィジットで設定したのですが、「Simplicity」には「404ページ」用のウィジットエリアがあるのでお使いの方なら結構簡単に設定できると思います。

log-161130wpdesign06

これがボク「404」ページに入れたウィジット一覧です。

最初のテキストが、「404イメージ」直下のエラーメッセージで、次のテキストにはタイトルなしで、

<h2 class=”h20″>1. 検索して見つける</h2>

と入れています。これが、見出しになります。

ちょっとよくわかっていないのですが、通常投稿ページ用のH1タグが反映されないので、”H20”とかいう新しい属性を作って指定しています。

log-161130wpdesign03

検索と、人気記事はこんな感じですね。

プラグインですが、「Wordpress Popular Page」を入れていると、ドラッグ&ドロップでこの人気記事一覧が設置できます。

ボクはサムネイル(20px x 20px)をつけて、トップ10記事を掲載する設定にしています。記事ボリュームが増えて来たらもう少し載せてもいいかもと思っています。

log-161130wpdesign04

最後のカテゴリー一覧はそれぞれの投稿数を載せるか否かも選択できます。これももちろんドラッグ&ドロップですぐにできちゃいます!

ブログトップに戻るボタンを設置

log-toblgotoplion

追加になりますが、こんな「ブログトップへ」誘うボタンも最後についけてみました。

ページが見つからなくて、このブログに初めて来た人の中には、「どんなブログなんだろ?」と思ってくださる方がいるかも知れないので、そういう方にはトップページにサクッと移動していただける様にするのもありなのかな?ということです。

これもウィジットにテキストでリンクのHTMLをはっつけただけです。

総括

現状のこのブログへのアクセスを考えると「404ページ」の重要度は低いと思いますが、それでもある程度のアクセスを稼ぐ様に成長した暁にはこれが設置されていると結構捗ると思うので、色々いじるついでにささっと設置してしまいました。

普段あまり見ないかも知れませんが、よかったらこのブログの「404ページ」を見ていって下さいね。

  このブログの「404ページ」はこちら

基本的にウィジットをいじるだけで1時間もかからずできると思うので、「Simplicity」をお使いの方はやって見てください!

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!


Fatal error: Uncaught ErrorException: md5_file(/home/users/1/leoism88/web/LeoLog/blog/wp-content/litespeed/js/3d44f402008206f3fd538573b295dd3e.js.tmp): failed to open stream: No such file or directory in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php:130 Stack trace: #0 [internal function]: litespeed_exception_handler(2, 'md5_file(/home/...', '/home/users/1/l...', 130, Array) #1 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php(130): md5_file('/home/users/1/l...') #2 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(837): LiteSpeed\Optimizer->serve('https://blog.le...', 'js', true, Array) #3 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(382): LiteSpeed\Optimize->_build_hash_url(Array, 'js') #4 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(264): LiteSpeed\Optimize->_optimize() #5 /home/use in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php on line 130