1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. page.phpと404.phpの制作とスクリプト

page.phpと404.phpの制作とスクリプト

page.phpと404.phpの制作とスクリプト

今回は「page.php」と「404.php」の作成をしていきます。「page.php」というのは、管理画面で作成した固定ページのデザインを指定するテンプレートファイルの事です。

そして「404.php」とは、サイト内に存在しないURLでアクセスした方に表示されるエラーページです。「404.php」ではユーザーに違うアプローチで記事を探してもらう事が目的です。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

page.phpを作成する

「page.php」では、管理画面で作成する固定ページの本文を読み込むコードだけ押さえておいてください。あとは今まで作成してきた内容なので特に難しくないかと思います。

page.php

                	
    
                    	
  1. <?php get_header(); ?>
    2. 
                    	
  2. <main>
    3. 
                    	
  3.   <div class="breadcrumbWrap">
    4. 
                    	
  4.     <ol itemscope="" itemtype="https://schema.org/BreadcrumbList">
    5. 
                    	
  5.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    6. 
                    	
  6.         <a itemprop="item" href="<?php echo esc_url(get_home_url()); ?>">
    7. 
                    	
  7.           <img src="<?php bloginfo('template_url'); ?>/img/icon_home.svg" alt="">
    8. 
                    	
  8.           <span itemprop="name">ホーム</span>
    9. 
                    	
  9.         </a>
    10. 
                    	
  10.         <meta itemprop="position" content="1">
    11. 
                    	
  11.       </li>
    12. 
                    	
  12.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    13. 
                    	
  13.         <span itemprop="name"><?php the_title(); ?></span>
    14. 
                    	
  14.         <meta itemprop="position" content="2">
    15. 
                    	
  15.       </li>
    16. 
                    	
  16.     </ol>
    17. 
                    	
  17.   </div>
    18. 
                    	
  18.   <div class="mainInner">
    19. 
                    	
  19.     <div id="mainContents" class="mainContents">
    20. 
                    	
  20.       <?php remove_filter ('the_content', 'wpautop'); ?>
    21. 
                    	
  21.       <?php while (have_posts()) : the_post(); the_content(); endwhile; ?>
    22. 
                    	
  22.     </div>
    23. 
                    	
  23.     <?php get_sidebar(); ?>
    24. 
                    	
  24.   </div>
    25. 
                    	
  25. </main>
    26. 
                    	
  26. <?php get_footer(); ?>
    27.

それではこちらもコピペしておきましょう。下記のコードが固定ページの本文を読み込むための記述です。記述自体も短いですし、かなりシンプルな形でまとめています。

                	
    
                    	
  1. <?php remove_filter ('the_content', 'wpautop'); ?>
    2. 
                    	
  2. <?php while (have_posts()) : the_post(); the_content(); endwhile; ?>
    3.

記述は2行ありますが、固定ページの内容を読み込むコードは「<?php while (have_posts()) : the_post(); the_content(); endwhile; ?>」だけでOKです。

ワードプレスには自動整形の機能があり、勝手に「p」タグなどが追加されてしまいます。なので「<?php remove_filter (‘the_content’, ‘wpautop’); ?>」でタグが自動追加されないよう設定しています。

                	
    
                    	
  1. <?php the_title(); ?>
    2.

あと、上記のコードもはじめて出てきたので紹介しておくと、固定ページのタイトルを出力する記述です。もうこの辺は何となく想像できるようになってきたんじゃないでしょうか。

竹馬

ワードプレスの自動整形はブログ感覚でサイトを作る方にとっては便利な機能なんですが、htmlとCSSでデザインを調整している側からしたら邪魔になっちゃうんですよねぇ。

404.phpを作成する

続いて「404.php」も簡単なのでサクッとコピペしてしまいましょう。「404.php」を設置しておく事によって、ユーザーをさらに他のページへ誘導する事ができます。

404.php

                	
    
                    	
  1. <?php get_header(); ?>
    2. 
                    	
  2. <main>
    3. 
                    	
  3.   <div class="breadcrumbWrap">
    4. 
                    	
  4.     <ol itemscope="" itemtype="https://schema.org/BreadcrumbList">
    5. 
                    	
  5.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    6. 
                    	
  6.         <a itemprop="item" href="<?php echo esc_url(get_home_url()); ?>">
    7. 
                    	
  7.           <img src="<?php bloginfo('template_url'); ?>/img/icon_home.svg" alt="">
    8. 
                    	
  8.           <span itemprop="name">ホーム</span>
    9. 
                    	
  9.         </a>
    10. 
                    	
  10.         <meta itemprop="position" content="1">
    11. 
                    	
  11.       </li>
    12. 
                    	
  12.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    13. 
                    	
  13.         <span itemprop="name">ページが見つかりませんでした</span>
    14. 
                    	
  14.         <meta itemprop="position" content="2">
    15. 
                    	
  15.       </li>
    16. 
                    	
  16.     </ol>
    17. 
                    	
  17.   </div>
    18. 
                    	
  18.   <div class="mainInner">
    19. 
                    	
  19.     <div id="mainContents" class="mainContents">
    20. 
                     	
  20.       <section id="notFound">
    21. 
                     	
  21.         <div class="title">
    22. 
                     	
  22.           <h1>ページが見つかりませんでした</h1>
    23. 
                     	
  23.         </div>
    24. 
                     	
  24.         <div class="txtWrap">
    25. 
                     	
  25.           <p>「サンプルサイト」をご覧いただきまして誠にありがとうございます。</p>
    26. 
                     	
  26.           <p>お探しのページは削除されたのか、見つけることができませんでした。サイトマップよりご希望のページをお探しください。</p>
    27. 
                     	
  27.           <div class="btnWrap">
    28. 
                     	
  28.             <a href="<?php echo esc_url(get_home_url()); ?>/sitemap/">サイトマップを見る</a>
    29. 
                     	
  29.           </div>
    30. 
                     	
  30.         </div>
    31. 
                    	
  31.       </section>
    32. 
                    	
  32.     </div>
    33. 
                    	
  33.     <?php get_sidebar(); ?>
    34. 
                    	
  34.   </div>
    35. 

                    	
  35. </main>
    36. 
                    	
  36. <?php get_footer(); ?>
    37.

ココの記述は今まで見てきたPHPのコードなので問題ないかと思います。「サンプルブログ」となっているサイト名だけご自身の情報に書き換えておいてください。

サンプルブログのエラーページでは、アクセスしてくれたユーザーに対してページが存在しない旨を伝え、サイトマップから希望の記事を探してもらうように誘導しています。

過去の記事などを削除した場合、削除した記事のURLがネット上に残っている事がありますので、その情報を辿ってきたユーザーにはエラーページを表示するようにします。

目的の記事が無くなっていても、せっかく訪れてくれたユーザーにはしっかりフォローをする事が大切です。エラーページでの案内がないと、そのままサイトから離れられる原因にもなりますからね。

竹馬

エラーページを確認する際はドメインの後ろに適当な文字列を付けてアクセスしてください。遊び心のあるサイトはエラーページでしか見れない情報を載せていたりもします。

エラーページのデザインをstyle.cssに追加

「404.php」を作りましたので、エラーページのデザインも「style.css」に追加しておきましょう。こちらも前回までに記述したコードの下へ追加しておいてください。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. ～ヘッダー・フッター省略～
    5. 
                    	
  5. ～サイドバー・記事一覧・検索結果省略～
    6. 
                    	
  6. /* ------ 404 ------ */
    7. 
                    	
  7. #notFound .title h1 {
    8. 
                    	
  8.   font-size: 2.4rem;
    9. 
                    	
  9.   font-weight: 300;
    10. 
                    	
  10.   padding-bottom: 10px;
    11. 
                    	
  11.   border-bottom: 1px dashed #c1c1c1;
    12. 
                    	
  12.   position: relative
    13. 
                    	
  13. }
    14. 
                    	
  14. #notFound .txtWrap {
    15. 
                    	
  15.   font-size: 1.6rem;
    16. 
                    	
  16.   padding: 20px;
    17. 
                    	
  17.   margin-top: 40px;
    18. 
                    	
  18.   background: #fff
    19. 
                    	
  19. }
    20. 
                    	
  20. #notFound .txtWrap p + p { margin-top: 20px }
    21. 
                    	
  21. #notFound .btnWrap {
    22. 
                    	
  22.   text-align: center;
    23. 
                    	
  23.   margin-top: 30px
    24. 
                    	
  24. }
    25. 
                    	
  25. #notFound .btnWrap a {
    26. 
                    	
  26.   width: 100%;
    27. 
                    	
  27.   max-width: 280px;
    28. 
                    	
  28.   color: #fff;
    29. 
                    	
  29.   font-size: 1.5rem;
    30. 
                    	
  30.   padding: 10px;
    31. 
                    	
  31.   margin: 0 auto;
    32. 
                    	
  32.   background: #ff657c;
    33. 
                    	
  33.   position: relative;
    34. 
                    	
  34.   border-radius: 8px;
    35. 
                    	
  35.   display: block
    36. 
                    	
  36. }
    37. 
                    	
  37. #notFound .btnWrap a:hover { opacity: 0.7 }
    38. 
                    	
  38. 
                    	
  39. @media screen and (max-width: 768px) {
    40. 
                    	
  40.   #notFound .title h1 { font-size: 2.4rem }
    41. 
                    	
  41.   #notFound .txtWrap {
    42. 
                    	
  42.     text-align: left;
    43. 
                    	
  43.     margin-top: 70px
    44. 
                    	
  44.   }
    45. 
                    	
  45. }
    46.

はい～、この辺は特に注意点もないのでサクサクいきましょう。

次はサンプルブログで使用している2つのJSファイルを揃えていきます。「jquery.min.js」は公式サイトからダウンロードしてもらって、「main.js」はコピペでOKです。

竹馬

ちなみにサンプルブログではデザインをひと通り調整していますが、ご自身でサイズ・カラー・余白などをお好きな形にどんどんカスタマイズしてみてください。

jquery.min.jsを用意する

それではjQueryを使用しますので、そのために必要な「jquery.min.js」をダウンロードしておきます。jQueryもどんどんバージョンがアップしていきますので公式サイトで最新版をゲットします。

jQueryのダウンロード

jQuery

jQueryの公式サイトへ飛ぶとトップページに「Download jQuery」というボタンがありますので、そこからダウンロードを進めていく事ができます。

詳しいダウンロード方法は「jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう」でも紹介していますので併せてご確認ください。

こちらも見てください

現在の最新版のファイル名は「jquery-3.6.0.min.js」となっています。サンプルブログではこのファイル名を「jquery.min.js」に変更して使用しています。

ご自身で使用される場合、ファイル名は「jquery-3.6.0.min.js」のままでも構いませんが、その場合は「footer.php」の読み込みのファイル名も変更しておいてください。

簡単ですねぇ、これで「jquery.min.js」も用意できましたので、テーマフォルダの中に「js」フォルダを作って「jquery.min.js」を入れておいてください。

main.jsを作成する

続いて「main.js」を作成してサイトに動きを加えていきましょう。今回、使用しているスクリプトはドロワー（三本線）メニュー・スクロールでクラス付与・サイドバー追従の3つです。

main.js

                	
    
                    	
  1. // sp nav
    2. 
                    	
  2. jQuery(document).ready(function($){
    3. 
                    	
  3.   $('.menuTrigger').click(function () {
    4. 
                    	
  4.     $(this).toggleClass('active');
    5. 
                    	
  5.     $('.drawerNav').toggleClass('open');
    6. 
                    	
  6.   });
    7. 
                    	
  7. });
    8. 
                    	
  8. 
                    	
  9. // body add class
    10. 
                    	
  10. $(window).on('load', function () {
    11. 
                    	
  11.   var $body = $('body');
    12. 
                    	
  12.   if($(this).scrollTop() > 80) {
    13. 
                    	
  13.     $body.addClass('change');
    14. 
                    	
  14.   }
    15. 
                    	
  15.   $(window).on('scroll', function () {
    16. 
                    	
  16.     if($(this).scrollTop() > 80) {
    17. 
                    	
  17.       $body.addClass('change');
    18. 
                    	
  18.     } else {
    19. 
                    	
  19.       $body.removeClass('change');
    20. 
                    	
  20.     }
    21. 
                    	
  21.   });
    22. 
                    	
  22. });
    23. 
                    	
  23. 
                    	
  24. // side follow
    25. 
                    	
  25. if (window.matchMedia('(max-width: 900px)').matches) {
    26. 
                    	
  26. } else if (window.matchMedia('(min-width:901px)').matches) {
    27. 
                    	
  27.   $(window).load(function () {
    28. 
                    	
  28.     var mainArea = $('#mainContents');
    29. 
                    	
  29.     var sideWrap = $('#sideWrap');
    30. 
                    	
  30.     var sideArea = $('#sideBox');
    31. 
                    	
  31.     var wd = $(window);
    32. 
                    	
  32.     var mainH = mainArea.height();
    33. 
                    	
  33.     var sideH = sideWrap.height();
    34. 
                    	
  34.     if(sideH < mainH) {
    35. 
                    	
  35.       sideWrap.addClass('follow');
    36. 
                    	
  36.       sideWrap.css({'height': mainH,'position': 'relative'});
    37. 
                    	
  37.       var sideOver = wd.height()-sideArea.height();
    38. 
                    	
  38.       var starPoint = sideArea.offset().top + (-sideOver);
    39. 
                    	
  39.       var breakPoint = sideArea.offset().top + mainH;
    40. 
                    	
  40.       wd.scroll(function() {
    41. 
                    	
  41.         if(wd.height() < sideArea.height()){
    42. 
                    	
  42.           if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){
    43. 
                    	
  43.             sideArea.css({'width': '26%', 'position': 'fixed', 'bottom': '20px'});
    44. 
                    	
  44.           }else if(wd.scrollTop() + wd.height() <= breakPoint){
    45. 
                    	
  45.             sideArea.css({'width': '100%','position': 'absolute', 'bottom': '0'});
    46. 
                    	
  46.           } else {
    47. 
                    	
  47.             sideArea.css({'width': '100%','position': 'static'});
    48. 
                    	
  48.           }
    49. 
                    	
  49.         } else{
    50. 
                    	
  50.           var sideBtm = wd.scrollTop() + sideArea.height();
    51. 
                    	
  51.           if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){
    52. 
                    	
  52.             sideArea.css({'position': 'fixed', 'top': '20px'});
    53. 
                    	
  53.           } else if(sideBtm >= breakPoint){
    54. 
                    	
  54.             var fixedSide = mainH - sideH;
    55. 
                    	
  55.             sideArea.css({'position': 'absolute', 'top': fixedSide});
    56. 
                    	
  56.           } else {
    57. 
                    	
  57.             sideArea.css('position', 'static');
    58. 
                    	
  58.           }
    59. 
                    	
  59.         }
    60. 
                    	
  60.       });
    61. 
                    	
  61.     }
    62. 
                    	
  62.   });
    63. 
                    	
  63. }
    64.

ひとまず設定の内容は覚えなくても大丈夫です。PHPと同様、初見ではこのスクリプトを理解する事はできないでしょう。僕も完全に理解しているワケではありません（笑）。

                	
    
                    	
  1. // sp nav
    2. 
                    	
  2. jQuery(document).ready(function($){
    3. 
                    	
  3.   $('.menuTrigger').click(function () {
    4. 
                    	
  4.     $(this).toggleClass('active');
    5. 
                    	
  5.     $('.drawerNav').toggleClass('open');
    6. 
                    	
  6.   });
    7. 
                    	
  7. });
    8.

ドロワーメニューのスクリプトでは、「menuTrigger」をクリックすると、「menuTrigger」に「active」のクラスを付与し、「drawerNav」には「open」のクラスが付与されます。

「toggleClass」と指定をする事によって、クリックの度にクラスの追加と削除が交互におこなわれるようになります。JSはこういう短いコードから慣れていけば良いかと思います。

                	
    
                    	
  1. // body add class
    2. 
                    	
  2. $(window).on('load', function () {
    3. 
                    	
  3.   var $body = $('body');
    4. 
                    	
  4.   if($(this).scrollTop() > 80) {
    5. 
                    	
  5.     $body.addClass('change');
    6. 
                    	
  6.   }
    7. 
                    	
  7.   $(window).on('scroll', function () {
    8. 
                    	
  8.     if($(this).scrollTop() > 80) {
    9. 
                    	
  9.       $body.addClass('change');
    10. 
                    	
  10.     } else {
    11. 
                    	
  11.       $body.removeClass('change');
    12. 
                    	
  12.     }
    13. 
                    	
  13.   });
    14. 
                    	
  14. });
    15.

上記のスクリプトでは、ページの最上部から「80px」スクロールした場合、そしてページを読み込んだ際にはじめから「80px」以上下方を表示している場合は「body」タグに「change」のクラスを付与します。

例えばページの途中で再読み込みした時や別ページのページ内アンカーにリンクをした時には、既にページの最上部から「80px」以上離れている状態になります。その際にもクラスを付与する指定がされているという事です。

                	
    
                    	
  1. // side follow
    2. 
                    	
  2. if (window.matchMedia('(max-width: 900px)').matches) {
    3. 
                    	
  3. } else if (window.matchMedia('(min-width:901px)').matches) {
    4. 
                    	
  4.   $(window).load(function () {
    5. 
                    	
  5.     var mainArea = $('#mainContents');
    6. 
                    	
  6.     var sideWrap = $('#sideWrap');
    7. 
                    	
  7.     var sideArea = $('#sideBox');
    8. 
                    	
  8.     var wd = $(window);
    9. 
                    	
  9.     var mainH = mainArea.height();
    10. 
                    	
  10.     var sideH = sideWrap.height();
    11. 
                    	
  11.     if(sideH < mainH) {
    12. 
                    	
  12.       sideWrap.addClass('follow');
    13. 
                    	
  13.       sideWrap.css({'height': mainH,'position': 'relative'});
    14. 
                    	
  14.       var sideOver = wd.height()-sideArea.height();
    15. 
                    	
  15.       var starPoint = sideArea.offset().top + (-sideOver);
    16. 
                    	
  16.       var breakPoint = sideArea.offset().top + mainH;
    17. 
                    	
  17.       wd.scroll(function() {
    18. 
                    	
  18.         if(wd.height() < sideArea.height()){
    19. 
                    	
  19.           if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){
    20. 
                    	
  20.             sideArea.css({'width': '26%', 'position': 'fixed', 'bottom': '20px'});
    21. 
                    	
  21.           }else if(wd.scrollTop() + wd.height() <= breakPoint){
    22. 
                    	
  22.             sideArea.css({'width': '100%','position': 'absolute', 'bottom': '0'});
    23. 
                    	
  23.           } else {
    24. 
                    	
  24.             sideArea.css({'width': '100%','position': 'static'});
    25. 
                    	
  25.           }
    26. 
                    	
  26.         } else{
    27. 
                    	
  27.           var sideBtm = wd.scrollTop() + sideArea.height();
    28. 
                    	
  28.           if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){
    29. 
                    	
  29.             sideArea.css({'position': 'fixed', 'top': '20px'});
    30. 
                    	
  30.           } else if(sideBtm >= breakPoint){
    31. 
                    	
  31.             var fixedSide = mainH - sideH;
    32. 
                    	
  32.             sideArea.css({'position': 'absolute', 'top': fixedSide});
    33. 
                    	
  33.           } else {
    34. 
                    	
  34.             sideArea.css('position', 'static');
    35. 
                    	
  35.           }
    36. 
                    	
  36.         }
    37. 
                    	
  37.       });
    38. 
                    	
  38.     }
    39. 
                    	
  39.   });
    40. 
                    	
  40. }
    41.

長いですがこちらのスクリプトでサイドバーが追従するようになります。この動きはパソコン表示の時だけです。逆に言うとスマホで見る時にこの設定があるとマズイ事になります。

                	
    
                    	
  1. if (window.matchMedia('(max-width: 900px)').matches) {
    2. 
                    	
  2. } else if (window.matchMedia('(min-width:901px)').matches) {
    3. 
                    	
  3. ・
    4. 
                    	
  4. ・
    5. 
                    	
  5. ・
    6. 
                    	
  6. }
    7.

なので上記を追加で設定しています。この表記の意味は、「900px」以下なら設定はナシ（空白）で、「901px」以上ならサイドバーの追従設定をおこなう、という事です。

もしスマホ時に別の設定をおこなうのであれば、「if」と「else if」の間にスマホ用の設定を記述すればOKです。なかなかスクリプトをいちから作るのは難しいので、徐々に覚えてもらえればと思います。

サンプルブログのファイル

今回は「js」のファイルもすべて用意できましたので、残すはPHPファイルが3つのみです。次は記事ページの出力に重要な「single.php」と各カテゴリーを一覧表示する「archive.php」を作成します。

竹馬

「js」もテーマフォルダにアップロードして動作を確認してみてください。まだページの高さが足りないのでサイドバーの追従は確認できないかもですが…（笑）。

sidebar.phpとsearch.phpの制作 archive.phpとsingle.phpの制作

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記