1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. サイトマップページの制作

サイトマップページの制作

サイトマップページの制作

ようやく今回からワードプレスの管理画面を使って固定ページを作成していきます。サンプルブログで作成する固定ページは「サイトマップ」と「お問い合わせ」の2ページのみです。

まずはサイトマップの固定ページを作成していきますが、サイトマップの内容は「page-sitemap.php」に設定しておいて、管理画面内ではタグの記述は一切おこないません。

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

目次 [閉じる]

page-sitemap.phpを作成する

それでは「page-sitemap.php」を作成しますので、こちらをコピペしておいてください。本来は管理画面にタグを記述して固定ページを作成しますが、今回はタグを記述しません。

page-sitemap.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.       <section id="sitemap">
    21. 
                    	
  21.         <div class="title">
    22. 
                    	
  22.           <h1>サイトマップ</h1>
    23. 
                    	
  23.         </div>
    24. 
                    	
  24.         <div class="listWrap">
    25. 
                    	
  25.           <h2>サンプルブログ</h2>
    26. 
                    	
  26.           <ul>
    27. 
                    	
  27.             <?php
    28. 
                    	
  28.             $categories = get_categories(array('parent' => 0));
    29. 
                    	
  29.             foreach ($categories as $category):
    30. 
                    	
  30.             ?>
    31. 
                    	
  31.             <li>
    32. 
                    	
  32.               <a href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $category->name; ?></a>
    33. 
                    	
  33.               <?php $my_query = new WP_Query(array('cat' => $category->term_id)); ?>
    34. 
                    	
  34.               <ul>
    35. 
                    	
  35.                 <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    36. 
                    	
  36.                 <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    37. 
                    	
  37.                 <?php endwhile; ?>
    38. 
                    	
  38.               </ul>
    39. 
                    	
  39.             </li>
    40. 
                    	
  40.             <?php endforeach; ?>
    41. 
                    	
  41.           </ul>
    42. 
                    	
  42.         </div>
    43. 
                    	
  43.         <div class="listWrap">
    44. 
                     	
  44.           <h2>サンプルブログについて</h2>
    45. 
                     	
  45.           <ul>
    46. 
                    	
  46.             <li><a href="<?php echo esc_url(get_home_url()); ?>/sitemap/">サイトマップ</a></li>
    47. 
                    	
  47.             <li><a href="<?php echo esc_url(get_home_url()); ?>/contact/">お問い合わせ</a></li>
    48. 
                    	
  48.           </ul>
    49. 
                    	
  49.         </div>
    50. 
                     	
  50.       </section>
    51. 
                    	
  51.     </div>
    52. 
                    	
  52.     <?php get_sidebar(); ?>
    53. 
                    	
  53.   </div>
    54. 
                    	
  54. </main>
    55. 
                    	
  55. <?php get_footer(); ?>
    56.

なぜサイトマップの固定ページをPHPファイルで作成するのかというと、管理画面のエディターではPHPの記述が反映されないからです。PHPのコードを利用したい場合、そのページ専用のファイルを作成してやればOKです。

サイトマップのパーマリンクを「sitemap」にしますので、ファイル名を「page-sitemap.php」とします。特定の固定ページに適応させるファイル名は「page-パーマリンク.php」という形にしなければいけません。

上記のコードでは「sitemap」のid名を持つ「section」タグの中身がサイトマップの内容となります。「サンプルブログ」の記述がある箇所はご自身の情報に書き換えてください。

                	
    
                    	
  1. <ul>
    2. 
                    	
  2.   <?php
    3. 
                    	
  3.   $categories = get_categories(array('parent' => 0));
    4. 
                    	
  4.   foreach ($categories as $category):
    5. 
                    	
  5.   ?>
    6. 
                    	
  6.   <li>
    7. 
                    	
  7.     <a href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $category->name; ?></a>
    8. 
                    	
  8.     <?php $my_query = new WP_Query(array('cat' => $category->term_id)); ?>
    9. 
                    	
  9.     <ul>
    10. 
                    	
  10.       <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    11. 
                    	
  11.       <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    12. 
                    	
  12.       <?php endwhile; ?>
    13. 
                    	
  13.     </ul>
    14. 
                    	
  14.   </li>
    15. 
                    	
  15.   <?php endforeach; ?>
    16. 
                    	
  16. </ul>
    17.

要はこのPHPを設定したいから「page-sitemap.php」を作成しています。この記述があると、各カテゴリーが表示され、さらにカテゴリー毎の記事タイトルが一覧表示されます。

サンプルブログではワードプレスに慣れていない方でも簡単にサイト運営をおこなって頂けるようこの形にしました。こうしておけば記事を投稿する度に手動でサイトマップを更新する手間が省けます。

竹馬

実は「functions.php」に設定を追加したり、「プラグイン」を導入すれば管理画面のエディターでもPHPが使用できます。が、今回は一番シンプルな形で進めていきます。

サイトマップのデザインをstyle.cssに追加

続いて「サイトマップ」のデザインを「style.css」に追加していきましょう。ココも特に難しい箇所はありませんので、前回までに記述したコードの下へコピペしておいてください。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. ～ヘッダー・フッター省略～
    5. 
                    	
  5. ～サイドバー・記事一覧・検索結果省略～
    6. 
                    	
  6. ～エラーページ省略～
    7. 
                    	
  7. ～その他の記事・記事ページ省略～
    8. 
                    	
  8. /* ------ sitemap ------ */
    9. 
                    	
  9. #sitemap .title h1 {
    10. 
                    	
  10.   font-size: 2.4rem;
    11. 
                    	
  11.   font-weight: 300;
    12. 
                    	
  12.   padding-bottom: 10px;
    13. 
                    	
  13.   margin-bottom: 40px;
    14. 
                    	
  14.   border-bottom: 1px dashed #c1c1c1;
    15. 
                    	
  15.   position: relative
    16. 
                    	
  16. }
    17. 
                    	
  17. #sitemap .listWrap {
    18. 
                    	
  18.   padding-bottom: 40px;
    19. 
                    	
  19.   background: #fff
    20. 
                    	
  20. }
    21. 
                    	
  21. #sitemap .listWrap h2 {
    22. 
                    	
  22.   color: #fff;
    23. 
                    	
  23.   font-size: 2.4rem;
    24. 
                    	
  24.   font-weight: 300;
    25. 
                    	
  25.   padding: 10px;
    26. 
                    	
  26.   background: #ff657c;
    27. 
                    	
  27.   position: relative
    28. 
                    	
  28. }
    29. 
                    	
  29. #sitemap .listWrap h2::before {
    30. 
                    	
  30.   content: '';
    31. 
                    	
  31.   width: 98%;
    32. 
                    	
  32.   height: 1px;
    33. 
                    	
  33.   background-image: linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 60%,transparent 60%,transparent 100%);
    34. 
                    	
  34.   background-size: 10px 3px;
    35. 
                    	
  35.   position: absolute;
    36. 
                    	
  36.   top: 5px;
    37. 
                    	
  37.   left: 1%;
    38. 
                    	
  38.   z-index: 999
    39. 
                    	
  39. }
    40. 
                    	
  40. #sitemap .listWrap h2::after {
    41. 
                    	
  41.   content: '';
    42. 
                    	
  42.   width: 98%;
    43. 
                    	
  43.   height: 1px;
    44. 
                    	
  44.   background-image: linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 60%,transparent 60%,transparent 100%);
    45. 
                    	
  45.   background-size: 10px 3px;
    46. 
                    	
  46.   position: absolute;
    47. 
                    	
  47.   bottom: 5px;
    48. 
                    	
  48.   left: 1%;
    49. 
                    	
  49.   z-index: 999
    50. 
                    	
  50. }
    51. 
                    	
  51. #sitemap .listWrap ul {
    52. 
                    	
  52.   padding: 0 20px;
    53. 
                    	
  53.   margin-top: 40px
    54. 
                    	
  54. }
    55. 
                    	
  55. #sitemap .listWrap li {
    56. 
                    	
  56.   font-size: 1.8rem;
    57. 
                    	
  57.   padding-left: 20px;
    58. 
                    	
  58.   position: relative
    59. 
                    	
  59. }
    60. 
                    	
  60. #sitemap .listWrap li + li { margin-top: 20px }
    61. 
                    	
  61. #sitemap .listWrap > ul > li + li {
    62. 
                    	
  62.   padding-top: 20px;
    63. 
                    	
  63.   margin-top: 20px;
    64. 
                    	
  64.   border-top: 1px dashed #c1c1c1
    65. 
                    	
  65. }
    66. 
                    	
  66. #sitemap .listWrap li::after {
    67. 
                    	
  67.   content: '';
    68. 
                    	
  68.   width: 6px;
    69. 
                    	
  69.   height: 6px;
    70. 
                    	
  70.   background: #ff657c;
    71. 
                    	
  71.   position: absolute;
    72. 
                    	
  72.   top: 10px;
    73. 
                    	
  73.   left: 0;
    74. 
                    	
  74.   border-radius: 50%;
    75. 
                    	
  75.   display: block
    76. 
                    	
  76. }
    77. 
                    	
  77. #sitemap .listWrap > ul > li + li::after { top: 30px }
    78. 
                    	
  78. #sitemap .listWrap a { display: block }
    79. 
                    	
  79. #sitemap .listWrap a:hover { color: #ff657c }
    80. 
                    	
  80. #sitemap .listWrap ul ul {
    81. 
                    	
  81.   padding: 0 0 0 20px;
    82. 
                    	
  82.   margin-top: 20px
    83. 
                    	
  83. }
    84. 
                    	
  84. #sitemap .listWrap ul ul li { padding-left: 20px }
    85. 
                    	
  85. #sitemap .listWrap ul ul a {
    86. 
                    	
  86.   position: relative;
    87. 
                    	
  87.   display: block
    88. 
                    	
  88. }
    89. 
                    	
  89. @media screen and (max-width: 768px) {
    90. 
                    	
  90.   #sitemap .title h1 {
    91. 
                    	
  91.     font-size: 2rem;
    92. 
                    	
  92.     margin-bottom: 20px
    93. 
                    	
  93.   }
    94. 
                    	
  94.   #sitemap .listWrap { padding-bottom: 20px }
    95. 
                    	
  95.   #sitemap .listWrap h2 { font-size: 1.7rem }
    96. 
                    	
  96.   #sitemap .listWrap ul { margin-top: 20px }
    97. 
                    	
  97.   #sitemap .listWrap li { font-size: 1.5rem }
    98. 
                    	
  98. }
    99.

リストの中にリストを作っているので、ちょっとややこしいですかね（笑）。「ul」タグと「li」タグがいくつも出てくるのでパッと見てどこの事かわかりづらいかも知れません。

僕はあんまりクラス名とかは付けないでコーディングしていくんですけど、CSSでの設定をわかりやすくするため、「ul」タグにクラス名を付けておくのも良いかも知れません。

外側の「ul」タグには「parent」のクラス名を付け、内側の「ul」タグには「child」のクラス名を付けておく事によって、CSSで指定する時に記述をスッキリさせる事ができます。

この辺はご自身のやりやすい記述方法に修正していってもらえればと思います。

竹馬

ついでに「>」や「+」の意味を説明しておくと、「>」は直下の要素、「+」は隣接する要素です。「ul > li + li」なら「ulタグ直下のliタグと隣り合うliタグ」という事です。

サイトマップの固定ページを作成する

「page-sitemap.php」を作成して「style.css」にデザインも追加しましたのでこれで準備完了です。ワードプレスの管理画面から「サイトマップ」の固定ページを作成していきます。

管理画面の左側に並んでいるメニューの中にある「固定ページ」→「新規追加」と進んで「固定ページを編集」へ移動します。このページで新規の固定ページを作成する事ができます。

固定ページを作成する

①にページタイトルの「サイトマップ」を記入し、②に表示されるパーマリンクの隣にある「編集」から「sitemap」に変更して「OK」をクリックします。「タイトル」と「パーマリンク」を設定できたら③の「更新」をクリックします。

はじめは「パーマリンク」が表示されません。「タイトル」を記入しても「パーマリンク」が表示されない場合は、先に「更新」をクリックすると「パーマリンク」も表示されるようになります。

管理画面での操作はこれだけです。「固定ページを編集」のパーマリンク部分は「a」タグでリンクも貼られていますので、クリックしてサイトマップページを確認してみてください。

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

それでは今回ですべてのファイルが揃いましたので、ご自身のテーマフォルダの中に上記のファイルがすべて入っているかご確認ください。あとは「お問い合わせ」ページのデザインを「style.css」に追加するだけです。

竹馬

特定ページ専用のPHPファイルを作成する場合は管理画面の設定がラクですね。次の「お問い合わせ」では管理画面のエディターにタグを記述していきます。

archive.phpとsingle.phpの制作 お問い合わせページの制作

よく読まれている記事

おすすめの記事

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

チェピレア日記