WordPress

【WordPress】404 ページをカスタマイズ(変更)する超簡単な方法(見目麗しく!)




このロボットは見目麗しくないけど、かわいいです(笑)


404ページ(コンテンツがないページ/不正なURL)にアクセスされた場合、「ページが見つかりません」などの表示をしていると思いますが、このページをカスタマイズ(変更)する方法です。


見目麗しくなるかどうかは、あなた次第!(笑)


404 ページのカスタマイズ例


404 ページは、ユーザが「誤って」飛んできたページですので、「ここはちがうよ」とシンプルに伝えるとともに、少しの遊び心があると良いかと思います。



絵葉書風にしてみました(笑)


404 ページのカスタマイズ方法


WordPress 内のファイル [404.php] を直接編集します。


step
1
テーマエディターで [404.php] を表示します



  1. WordPress の [外観] から [テーマエディタ―] をクリックします
  2. [編集するテーマを選択] で、使っているテーマを選びます(※)
  3. [テーマファイル] から [404 テンプレート] をクリックします

(※)WordPress のテーマ(AFFINGER5)ご利用の場合は、小テーマと親テーマで構成されており、[404.php] を編集する場合は、子テーマで編集することをおすすめします。初期状態では子テーマには [404.php] はありませんので、必要に応じて次の記事を参考に 404.php を子テーマにコピーしてください。


【AFFINGER6】WordPress 子テーマに php ファイル(header.php、404.php など)を配置する方法

優良で有料テーマ AFFINGER6!テーマを改造するときにPHPを触るとき、うっかり親のテーマファイルを触ったら、アップデートで飛んじゃいます!PHPは子テーマへ、コピーしておき安全に改造しまくりアフィンガー!のための子テーマへのPHPファイルのコピー方法を紹介します。アフィンガー使いの方、ぜひご覧くださいませ。

続きを見る


step
2
メッセージ文言を変更します



[Not Found] や [404 ○○○]、[お探しのページがありません] などの文言を直接編集します。

※ [404.php] はテーマごとにファイルの内容が異なりますが、ほぼ似たような内容になっていますので、見分けて変更してください。


step
3
遊び心を追加します



[404.php] 内の適切な場所に HTML ソースで、表現したい内容を入力します。


テーマごとにファイルの内容が異なるため、各々で見る必要がありますが、基本的に <div calss="post">~</div> 内が記事部となりますのでこの中に記述します。


ポイント

HTML ソースが苦手(わからない)方は、WordPress の固定ページ(または投稿ページ)で表現したい内容をヴィジュアルで編集し、表示してから、ブラウザの機能で [ソースの表示] を選択、表示された HTML の該当する部分をコピーする方法も良いかもしれません。


保存して、完成です


まとめ


404 ページは、ユーザが「誤って」飛んできたページですので、「ここはちがうよ」とシンプルに伝えるとともに、少しの遊び心をつけましょう。


  • 404 ページは、テーマエディタ―で [404.php] を編集することで、カスタマイズできる
  • カスタマイズは HTML で記述する必要がある

楽しいワードプレスライフを過ごしてくださいね(^^)/


Enjoy!よんまるよんさま!




WordPress の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ