1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. sidebar.phpとsearch.phpの制作

sidebar.phpとsearch.phpの制作

sidebar.phpとsearch.phpの制作

それでは次に「sidebar.php」と「search.php」を作成していきましょう。サイドバーには「検索ボックス」「カテゴリーリンク」「管理人情報」の3点だけを表示しています。

検索ボックスを設置する場合、検索結果を表示するページが必要になりますので、そのために「search.php」を作成します。検索ボックスは記事数が多いサイトにはとても便利な機能です。

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

目次 [閉じる]

sidebar.phpを作成する

「sidebar.php」に表示している内容は「検索ボックス」「カテゴリーリンク」「管理人情報」だけのシンプルな形です。ソースコードも短いので中身を確認してみてください。

sidebar.php

                	
    
                    	
  1. <aside id="sideWrap">
    2. 
                    	
  2.   <div id="sideBox">
    3. 
                     	
  3.     <div class="searchBox">
    4. 
                     	
  4.       <form method="get" action="<?php echo home_url('/'); ?>">
    5. 
                     	
  5.         <input type="text" name="s" class="search" placeholder="検索キーワード">
    6. 
                     	
  6.         <input type="submit" class="btn" value="検索する">
    7. 
                     	
  7.       </form>
    8. 
                     	
  8.     </div>
    9. 
                     	
  9.     <div class="sideNav">
    10. 
                     	
  10.       <nav>
    11. 
                     	
  11.         <ul>
    12. 
                     	
  12.           <?php
    13. 
                    	
  13.             $args = array(
    14. 
                    	
  14.               'parent' => 0,
    15. 
                    	
  15.               'orderby' => 'term_order',
    16. 
                    	
  16.               'order' => 'ASC'
    17. 
                    	
  17.             );
    18. 
                    	
  18.             $categories = get_categories( $args );
    19. 
                    	
  19.           ?>
    20. 
                    	
  20.           <?php foreach( $categories as $category ) : ?>
    21. 
                    	
  21.           <li><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->name; ?></a></li>
    22. 
                    	
  22.           <?php endforeach; ?>
    23. 
                    	
  23.         </ul>
    24. 
                    	
  24.       </nav>
    25. 
                    	
  25.     </div>
    26. 
                     	
  26.     <?php dynamic_sidebar('sidebar-item'); ?>
    27. 
                     	
  27.   </div>
    28. 
                    	
  28. </aside>
    29.

それでは「sidebar.php」のコードもコピペしておきましょう。簡単なところから説明すると、「sideNav」というクラス名の中身が各カテゴリーページへのリンクメニュー部分です。

                	
    
                    	
  1. <?php
    2. 
                     	
  2.   $args = array(
    3. 
                    	
  3.     'parent' => 0,
    4. 
                    	
  4.     'orderby' => 'term_order',
    5. 
                     	
  5.     'order' => 'ASC'
    6. 
                     	
  6.   );
    7. 
                     	
  7.   $categories = get_categories($args);
    8. 
                      	
  8. ?>
    9. 
                      	
  9. <?php foreach($categories as $category) : ?>
    10. 
                      	
  10. <li><a href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a></li>
    11. 
                      	
  11. <?php endforeach; ?>
    12.

この記述は見覚えがありますよね。そうです、「header.php」に記述したドロワー（三本線）メニューの記述とまったく同じです。このコードでカテゴリーページのURLとカテゴリー名を出力しています

                	
    
                     	
  1. <div class="searchBox">
    2. 
                     	
  2.   <form method="get" action="<?php echo home_url('/'); ?>">
    3. 
                     	
  3.     <input type="text" name="s" class="search" placeholder="検索キーワード">
    4. 
                     	
  4.     <input type="submit" class="btn" value="検索する">
    5. 
                     	
  5.   </form>
    6. 
                     	
  6. </div>
    7.

そして検索ボックスを作るのも難しくないです。たったこれだけのコードで検索ボックスは作れてしまいます。重要なのは「form」タグと「type=”text”」の「input」タグの記述です。

「form」タグの「method」属性に「get」、「action」属性に「<?php echo home_url(‘/’); ?>」、そして「input」タグの「name」属性には「s」と記述します。

                	
    
                     	
  1. <?php dynamic_sidebar('sidebar-item'); ?>
    2.

こちらのコードでウィジェットが出力されます。ウィジェットは管理画面で設定する事が可能です。サンプルブログはできるだけファイルを編集しなくても良いように作りましたので、あえてウィジェットを利用しています。

竹馬

ワードプレスってちょっと記述が違うだけでエラーが出たりしてしまうんですよ。僕もはじめて検索ボックスを設置した時に「s」の記述漏れをやらかしてしまいました（笑）。

サイドデザインをstyle.cssに追加

「sidebar.php」を作りましたので、サイドバーのデザインも「style.css」に追加しておきましょう。前回までに記述したコードの下へ追加しておいてください。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. ～ヘッダー・フッター省略～
    5. 
                    	
  5. /* ------ aside ------ */
    6. 
                    	
  6. .mainInner aside {
    7. 
                    	
  7.   width: 26%;
    8. 
                    	
  8.   max-width: 300px;
    9. 
                    	
  9.   vertical-align: top;
    10. 
                    	
  10.   padding-bottom: 60px;
    11. 
                    	
  11.   display: inline-block
    12. 
                    	
  12. }
    13. 
                    	
  13. .mainInner aside #sideBox {
    14. 
                    	
  14.   width: 100%;
    15. 
                    	
  15.   max-width: 300px
    16. 
                    	
  16. }
    17. 
                    	
  17. 
                    	
  18. /* serach box */
    19. 
                    	
  19. .mainInner aside .searchBox .formBox { font-size: 0 }
    20. 
                    	
  20. .mainInner aside .searchBox input[type="text"] {
    21. 
                    	
  21.   width: calc(100% - 80px);
    22. 
                    	
  22.   height: 36px;
    23. 
                    	
  23.   font-size: 1.4rem;
    24. 
                    	
  24.   font-family: "Kiwi Maru", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    25. 
                    	
  25.   line-height: 36px;
    26. 
                    	
  26.   vertical-align: top;
    27. 
                    	
  27.   padding: 0 10px;
    28. 
                    	
  28.   border: 1px solid #c1c1c1;
    29. 
                    	
  29.   border-right: none;
    30. 
                    	
  30.   display: inline-block
    31. 
                    	
  31. }
    32. 
                    	
  32. .mainInner aside .searchBox input[type="text"]:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset }
    33. 
                    	
  33. .mainInner aside .searchBox input[type="submit"] {
    34. 
                    	
  34.   width: 80px;
    35. 
                    	
  35.   height: 36px;
    36. 
                    	
  36.   color: #fff;
    37. 
                    	
  37.   font-size: 1.3rem;
    38. 
                    	
  38.   font-family: "Kiwi Maru", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    39. 
                    	
  39.   line-height: 36px;
    40. 
                    	
  40.   vertical-align: top;
    41. 
                    	
  41.   border: none;
    42. 
                    	
  42.   background: #ff657c;
    43. 
                    	
  43.   display: inline-block
    44. 
                    	
  44. }
    45. 
                    	
  45. 
                    	
  46. /* side nav */
    47. 
                    	
  47. .mainInner aside .sideNav { margin-top: 40px }
    48. 
                    	
  48. .mainInner aside nav ul {
    49. 
                    	
  49.   padding: 0 10px;
    50. 
                    	
  50.   background: #fff
    51. 
                    	
  51. }
    52. 
                    	
  52. .mainInner aside nav li {
    53. 
                    	
  53.   font-size: 1.6rem;
    54. 
                    	
  54.   line-height: 50px;
    55. 
                    	
  55.   position: relative
    56. 
                    	
  56. }
    57. 
                    	
  57. .mainInner aside nav li + li { border-top: 1px dashed #c1c1c1 }
    58. 
                    	
  58. .mainInner aside nav li {
    59. 
                    	
  59.   font-size: 1.5rem;
    60. 
                    	
  60.   position: relative
    61. 
                    	
  61. }
    62. 
                    	
  62. .mainInner aside nav a {
    63. 
                    	
  63.   position: relative;
    64. 
                    	
  64.   display: block
    65. 
                    	
  65. }
    66. 
                    	
  66. .mainInner aside nav li a { padding: 0 10px }
    67. 
                    	
  67. .mainInner aside nav a::after {
    68. 
                    	
  68.   content: "";
    69. 
                    	
  69.   width: 100%;
    70. 
                    	
  70.   height: 2px;
    71. 
                    	
  71.   margin: auto;
    72. 
                    	
  72.   background: #fff;
    73. 
                    	
  73.   position: absolute;
    74. 
                    	
  74.   right: 0;
    75. 
                    	
  75.   bottom: 0;
    76. 
                    	
  76.   left: 0;
    77. 
                    	
  77.   transform: scale(0, 1);
    78. 
                    	
  78.   transform-origin: center top;
    79. 
                    	
  79.   transition: transform .3s
    80. 
                    	
  80. }
    81. 
                    	
  81. @media screen and (max-width: 900px) {
    82. 
                    	
  82.   .mainInner aside {
    83. 
                    	
  83.     width: 100%;
    84. 
                    	
  84.     max-width: inherit;
    85. 
                    	
  85.     padding-bottom: 40px;
    86. 
                    	
  86.     display: block
    87. 
                    	
  87.   }
    88. 
                    	
  88.   .mainInner aside #sideBox { max-width: inherit }
    89. 
                    	
  89. }
    90. 
                    	
  90. 
                    	
  91. /* author */
    92. 
                    	
  92. .mainInner aside .author {
    93. 
                    	
  93.   padding: 20px;
    94. 
                    	
  94.   margin-top: 40px;
    95. 
                    	
  95.   background: #fff
    96. 
                    	
  96. }
    97. 
                    	
  97. .mainInner aside .author .authorTop {
    98. 
                    	
  98.   font-size: 0;
    99. 
                    	
  99.   text-align: center;
    100. 
                    	
  100.   padding-bottom: 20px;
    101. 
                    	
  101.   border-bottom: 1px dashed #c1c1c1
    102. 
                    	
  102. }
    103. 
                    	
  103. .mainInner aside .author .imageWrap {
    104. 
                    	
  104.   width: 60px;
    105. 
                    	
  105.   vertical-align: middle;
    106. 
                    	
  106.   margin-right: 30px;
    107. 
                    	
  107.   display: inline-block
    108. 
                    	
  108. }
    109. 
                    	
  109. .mainInner aside .author .imageWrap img { width: 100% }
    110. 
                    	
  110. .mainInner aside .author .nameWrap {
    111. 
                    	
  111.   vertical-align: middle;
    112. 
                    	
  112.   display: inline-block
    113. 
                    	
  113. }
    114. 
                    	
  114. .mainInner aside .author .nameWrap p { font-size: 2rem }
    115. 
                    	
  115. .mainInner aside .author .nameWrap p span {
    116. 
                    	
  116.   font-size: 1.2rem;
    117. 
                    	
  117.   display: block
    118. 
                    	
  118. }
    119. 
                    	
  119. .mainInner aside .author .txtWrap {
    120. 
                    	
  120.   text-align: center;
    121. 
                    	
  121.   font-size: 1.6rem;
    122. 
                    	
  122.   margin-top: 20px;
    123. 
                    	
  123.   background: #fff;
    124. 
                    	
  124.   position: relative
    125. 
                    	
  125. }
    126. 
                    	
  126. .mainInner aside .author .txtWrap::before {
    127. 
                    	
  127.   content: "";
    128. 
                    	
  128.   margin-left: -11px;
    129. 
                    	
  129.   border: 12px solid transparent;
    130. 
                    	
  130.   border-bottom: 12px solid #fff;
    131. 
                    	
  131.   position: absolute;
    132. 
                    	
  132.   top: -24px;
    133. 
                    	
  133.   left: 50%;
    134. 
                    	
  134.   z-index: 2
    135. 
                    	
  135. }
    136. 
                    	
  136. .mainInner aside .author .txtWrap a {
    137. 
                    	
  137.   color: #ff657c;
    138. 
                    	
  138.   text-decoration: underline
    139. 
                    	
  139. }
    140.

ココのデザインに関しては特に問題ないですが、サイドバーに関してひとつお伝えしておくと、サンプルブログではページを下へスクロールしていくとサイドバーが付いてくるように設定しています。

この動きはチェピレアでも実装しているのでパソコンでご覧の方は確認してみてください。

通常であればスクロールするとサイドバーは上部に取り残され、長いページの場合はサイドバーのスペースが空白になってしまいます。ココを空白にするのは淋しいし勿体ない。

なのでサンプルブログではどんなに長いページでもサイドバーが表示されるようにしているというワケです。設定自体はJSファイルでおこなっていますので、後の「main.jsを作成する」で紹介させて頂きます。

サイト管理人の設定方法

準備が整いましたので管理画面のウィジェットを利用して「管理人情報」を作成していきましょう。その際にご自身の写真やイラストなどがあれば、印象アップの効果があります。

竹馬

ちなみに僕は「chappie」というアプリでプロフィール画像を作っています。こちらは「App Store」しか取り扱っていないようですが良ければチェックしてみてください。

サンプルブログのアイコンサイズは「横幅60px × 高さ60px」で表示しています。アイコンの形は正方形でも円形でもどちらでも構いません。

テーマの有効化

それでは管理画面でテーマの切り替えをおこないます。「外観」→「テーマ」と進んで、作成したテーマにマウスを重ねると現れる「有効化」をクリックします。

まだテーマフォルダをアップロードしていない方は、FTPソフトを使ってルートディレクトリにある「wp-content」の中の「themes」の中にテーマフォルダを設置しておいてください。

メディアの追加

次にプロフィール画像をアップロードします。「メディア」→「ライブラリ」と進んで、「新規追加」から画像をアップロードします。画像をアップロードすると「ファイルのURL」も表示されますのでメモっておいてください。

ウィジェットの設定

最後に管理人情報を設定していきます。「外観」→「ウィジェット」と進んで、「サイドバー」内にあるブロックを開いて、下記のコードを記述して「保存」をクリックします。

                	
    
                    	
  1. <div class="authorTop">
    2. 
                     	
  2.   <div class="imageWrap">
    3. 
                     	
  3.     <img src="https://chepirare.com/sample/02/wp-content/uploads/2022/02/user.png" alt="竹馬" title="竹馬">
    4. 
                     	
  4.   </div>
    5. 
                     	
  5.   <div class="nameWrap">
    6. 
                     	
  6.     <p>竹馬<br><span>サイト管理人</span></p>
    7. 
                     	
  7.   </div>
    8. 
                    	
  8. </div>
    9. 
                    	
  9. <div class="txtWrap">
    10. 
                    	
  10.   <p>こちらは<a href="https://chepirare.com/">チェピレア</a>が制作したサンプルのブログサイトです。ワードプレスの設置からサイトの作り方までを解説しています。ご自身のブログサイトを持ちたいとお考えの方はぜひ参考になさってください。</p>
    11. 
                    	
  11. </div>
    12.

このままだとサンプルブログの情報なので、「プロフィール画像のURL」「名前」「紹介文」はご自身のものに書き換えてください。プロフィール画像のURLは先ほどメモったURLです。

ウィジェットの「サイドバー」の中は記述したブロックひとつだけでOKです。デフォルトではいくつかのブロックが用意されていると思いますので、他のブロックは削除しておいてください。

竹馬

この状態で一度サイトをチェックしてみましょう。管理人情報も表示されているかと思います。まだカテゴリーを作成していないのでリンクは表示されない状態です。

search.phpを作成する

続いて「search.php」を作成していきますので、下記のコードをコピペしておいてください。検索結果を表示する際には、いくつかの条件分岐を設定する必要があります。

search.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_search_query(); ?>」の検索結果</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="category">
    21. 
                    	
  21.         <div class="title">
    22. 
                    	
  22.           <h1>「<?php the_search_query(); ?>」の検索結果</h1>
    23. 
                    	
  23.         </div>
    24. 
                    	
  24.         <div class="inner">
    25. 
                    	
  25.           <div class="postWrap">
    26. 
                    	
  26.             <?php if (empty(get_search_query())): ?>
    27. 
                    	
  27.             <div class="notFoundWrap">
    28. 
                    	
  28.               <p>検索キーワードが未入力です。<br>もう一度検索して頂くかサイトマップからご確認ください。</p>
    29. 
                    	
  29.               <div class="btn">
    30. 
                    	
  30.                 <a href="<?php echo esc_url(get_home_url()); ?>/sitemap/">サイトマップ</a>
    31. 
                    	
  31.               </div>
    32. 
                    	
  32.             </div>
    33. 
                    	
  33.             <?php else : ?>
    34. 
                    	
  34.               <?php if ( have_posts() ) : ?>
    35. 
                    	
  35.               <?php while ( have_posts() ) : the_post(); ?>
    36. 
                    	
  36.               <article>
    37. 
                    	
  37.                 <a href="<?php the_permalink(); ?>">
    38. 
                    	
  38.                   <figure class="thumbnail">
    39. 
                    	
  39.                     <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
    40. 
                    	
  40.                   </figure>
    41. 
                    	
  41.                   <div class="txt">
    42. 
                    	
  42.                     <h2 itemprop="headline"><?php echo get_the_title(); ?></h2>
    43. 
                    	
  43.                   </div>
    44. 
                    	
  44.                 </a>
    45. 
                    	
  45.               </article>
    46. 
                    	
  46.               <?php endwhile; ?>
    47. 
                    	
  47.               <?php else : ?>
    48. 
                    	
  48.               <div class="notFoundWrap">
    49. 
                    	
  49.                 <p>「<?php the_search_query(); ?>」を含む記事が見つかりませんでした。<br>別のキーワードで検索して頂くかサイトマップからご確認ください。</p>
    50. 
                    	
  50.                 <div class="btn">
    51. 
                    	
  51.                   <a href="<?php echo esc_url(get_home_url()); ?>/sitemap/">サイトマップ</a>
    52. 
                     	
  52.                 </div>
    53. 
                     	
  53.               </div>
    54. 
                     	
  54.               <?php endif; ?>
    55. 
                     	
  55.             <?php endif; ?>
    56. 
                     	
  56.           </div>
    57. 
                     	
  57.           <div class="paginationWrap">
    58. 
                     	
  58.             <?php wp_pagination(); ?>
    59. 
                     	
  59.           </div>
    60. 
                     	
  60.         </div>
    61. 
                     	
  61.       </section>
    62. 
                     	
  62.       <div class="recommend">
    63. 
                     	
  63.         <div class="title">
    64. 
                     	
  64.           <h2>その他の記事</h2>
    65. 
                     	
  65.         </div>
    66. 
                     	
  66.         <div class="postWrap">
    67. 
                     	
  67.           <?php
    68. 
                     	
  68.           $args = array(
    69. 
                     	
  69.             'post_type' => 'post',
    70. 
                     	
  70.             'posts_per_page' => 6,
    71. 
                     	
  71.             'orderby' => 'rand'
    72. 
                     	
  72.           );
    73. 
                     	
  73.           $the_query = new WP_Query($args);
    74. 
                     	
  74.           while ($the_query->have_posts()) : $the_query->the_post();
    75. 
                     	
  75.           ?>
    76. 
                     	
  76.           <article>
    77. 
                      	
  77.             <a href="<?php the_permalink(); ?>">
    78. 
                      	
  78.               <figure class="thumbnail">
    79. 
                      	
  79.                 <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
    80. 
                      	
  80.               </figure>
    81. 
                      	
  81.               <div class="txt">
    82. 
                      	
  82.                 <h3 itemprop="headline"><?php echo get_the_title(); ?></h3>
    83. 
                      	
  83.                 <div class="cattegory">
    84. 
                      	
  84.                   <p><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
    85. 
                      	
  85.                 </div>
    86. 
                      	
  86.               </div>
    87. 
                      	
  87.             </a>
    88. 
                     	
  88.           </article>
    89. 
                     	
  89.           <?php endwhile; ?>
    90. 
                     	
  90.         </div>
    91. 
                     	
  91.       </div>
    92. 
                    	
  92.     </div>
    93. 
                    	
  93.     <?php get_sidebar(); ?>
    94. 
                    	
  94.   </div>
    95. 
                    	
  95. </main>
    96. 
                    	
  96. <?php get_footer(); ?>
    97.

「search.php」の中身は大きく分けて「パンくずリスト」「検索結果」「その他の記事」です。ココでは「検索結果」の表示を解説して、「その他の記事」に関しては後の「archive.phpを作成する」でご紹介させて頂きます。

条件分岐の記述には「if文」を使用します。if文とは「もし～なら●●をする、～でなければ○○をする。」という指示を加えた設定です。検索結果の設定にはこの「if文」の中にさらに「if文」を入れていきます。

                	
    
                    	
  1. <?php if (empty(get_search_query())): ?>
    2. 
                    	
  2. ・
    3. 
                    	
  3. // 検索ワードが未入力の場合
    4. 
                    	
  4. ・
    5. 
                    	
  5. <?php else : ?>
    6. 
                    	
  6. ・
    7. 
                    	
  7. // 検索ワードが入力されている場合
    8. 
                    	
  8. ・
    9. 
                    	
  9.   <?php if ( have_posts() ) : ?>
    10. 
                    	
  10.   ・
    11. 
                    	
  11.   // 検索ワードに該当する記事がある場合
    12. 
                    	
  12.   ・
    13. 
                    	
  13.   <?php else : ?>
    14. 
                    	
  14.   ・
    15. 
                    	
  15.   // 検索ワードに該当する記事がない場合
    16. 
                    	
  16.   ・
    17. 
                     	
  17.   <?php endif; ?>
    18. 
                     	
  18. <?php endif; ?>
    19.

上記は検索結果で設定されているPHPの「if文」のみを取り出したコードです。これだけで見てもらうと「if文」の中に「if文」がある（入れ子）状態というのがわかってもらえるかと思います。

「<?php if (empty(get_search_query())): ?>」の意味は「検索ワードが未入力の場合」です。「<?php else : ?>」は「それ以外」という意味なので、今回で言うと「検索ワードが入力されている場合」となります。

さらに「検索ワードが入力されている場合」には、「該当する記事がある場合」と「該当する記事がない場合」という条件も追加しています。「if文」の終わりには「<?php endif; ?>」の記述も必要なので注意してください。

                	
    
                    	
  1. <h1>「<?php the_search_query(); ?>」の検索結果</h1>
    2.

あとタイトルなどにも使用している「<?php the_search_query(); ?>」を記述すると、検索ボックスで記入された文字列を出力する事ができます。

竹馬

JavaScriptやPHPなどでシステムを構築する際にはこの「if文」をよく利用します。まぁ、「こういう考え方をするんだ」っていうコトだけ知っておいてください。

検索結果のデザインをstyle.cssに追加

「search.php」の検索結果のデザインを「style.css」に追加します。それと「index.php」の作成時に省略したループ部分のデザインも記載しますのでご確認ください。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. ～ヘッダー・フッター省略～
    5. 
                    	
  5. ～サイドバーデザイン省略～
    6. 
                    	
  6. * ------ category ------ */
    7. 
                    	
  7. #category .title h1,
    8. 
                    	
  8. #category .title h2 {
    9. 
                    	
  9.   font-size: 2.4rem;
    10. 
                    	
  10.   font-weight: 300;
    11. 
                    	
  11.   padding-bottom: 10px;
    12. 
                    	
  12.   border-bottom: 1px dashed #c1c1c1;
    13. 
                    	
  13.   position: relative
    14. 
                    	
  14. }
    15. 
                    	
  15. #category .inner { margin-top: 40px }
    16. 
                    	
  16. #category article {
    17. 
                    	
  17.   width: 100%;
    18. 
                    	
  18.   max-width: 50%;
    19. 
                    	
  19.   vertical-align: top;
    20. 
                    	
  20.   padding: 40px 15px 0;
    21. 
                    	
  21.   display: inline-block
    22. 
                    	
  22. }
    23. 
                    	
  23. #category article:first-child,
    24. 
                    	
  24. #category article:nth-child(2) {
    25. 
                    	
  25.   padding: 0 15px
    26. 
                    	
  26. }
    27. 
                    	
  27. #category article a { display: block }
    28. 
                    	
  28. #category article figure img { transition: all 0.3s ease-in-out }
    29. 
                    	
  29. #category article a:hover figure img { opacity: 0.7 }
    30. 
                    	
  30. #category article .txt {
    31. 
                    	
  31.   padding: 10px 20px 20px;
    32. 
                    	
  32.   background: #fff
    33. 
                    	
  33. }
    34. 
                    	
  34. #category article h2 {
    35. 
                    	
  35.   font-size: 1.6rem;
    36. 
                    	
  36.   font-weight: 300;
    37. 
                    	
  37.   text-align: left
    38. 
                    	
  38. }
    39. 
                    	
  39. #category article .cattegory p {
    40. 
                    	
  40.   font-size: 1.3rem;
    41. 
                    	
  41.   text-align: left;
    42. 
                    	
  42.   margin-top: 6px
    43. 
                    	
  43. }
    44. 
                    	
  44. @media screen and (max-width: 768px) {
    45. 
                    	
  45.   #category .title h1 { font-size: 2rem }
    46. 
                    	
  46.   #category .inner {
    47. 
                    	
  47.     padding: 20px 10px;
    48. 
                    	
  48.     margin-top: 20px;
    49. 
                    	
  49.     background: #fff
    50. 
                    	
  50.   }
    51. 
                    	
  51.   #category article {
    52. 
                    	
  52.     max-width: 100%;
    53. 
                    	
  53.     display: block
    54. 
                    	
  54.   }
    55. 
                    	
  55.   #category article:first-child { padding: 0 }
    56. 
                    	
  56.   #category article:nth-child(2) { padding: 20px 0 0 }
    57. 
                    	
  57.   #category article + article {
    58. 
                    	
  58.     padding: 20px 0 0;
    59. 
                    	
  59.     margin-top: 20px;
    60. 
                    	
  60.     border-top: 1px dashed #c1c1c1
    61. 
                    	
  61.   }
    62. 
                    	
  62.   #category article a { font-size: 0 }
    63. 
                    	
  63.   #category article figure {
    64. 
                    	
  64.     width: 100px;
    65. 
                    	
  65.     vertical-align: top;
    66. 
                    	
  66.     margin-right: 10px;
    67. 
                    	
  67.     display: inline-block
    68. 
                    	
  68.   }
    69. 
                    	
  69.   #category article .txt {
    70. 
                    	
  70.     width: calc(100% - 110px);
    71. 
                    	
  71.     vertical-align: top;
    72. 
                    	
  72.     padding: 0 10px;
    73. 
                    	
  73.     display: inline-block
    74. 
                    	
  74.   }
    75. 
                    	
  75. }
    76. 
                    	
  76. 
                    	
  77. /* pagenation */
    78. 
                    	
  78. #category .paginationWrap { text-align: center }
    79. 
                    	
  79. #category .paginationWrap .pagination { margin: 40px auto 0 }
    80. 
                    	
  80. #category .paginationWrap .pagination li {
    81. 
                    	
  81.   position: relative;
    82. 
                    	
  82.   display: inline-block
    83. 
                    	
  83. }
    84. 
                    	
  84. #category .paginationWrap .pagination li + li::before {
    85. 
                    	
  85.   content: "";
    86. 
                    	
  86.   width: 1px;
    87. 
                    	
  87.   height: 50px;
    88. 
                    	
  88.   border-left: 1px solid #c1c1c1;
    89. 
                    	
  89.   position: absolute;
    90. 
                    	
  90.   top: 0;
    91. 
                    	
  91.   left: 0;
    92. 
                    	
  92.   z-index: 1
    93. 
                    	
  93. }
    94. 
                    	
  94. #category .paginationWrap .pagination li a,
    95. 
                    	
  95. #category .paginationWrap .pagination li span  {
    96. 
                    	
  96.   min-width: 50px;
    97. 
                    	
  97.   height: 50px;
    98. 
                    	
  98.   font-size: 1.5rem;
    99. 
                    	
  99.   line-height: 50px;
    100. 
                    	
  100.   padding: 0 20px;
    101. 
                    	
  101.   background: #dcdcdc;
    102. 
                    	
  102.   transition: 0.3s;
    103. 
                    	
  103.   float: left;
    104. 
                    	
  104.   position: relative
    105. 
                    	
  105. }
    106. 
                    	
  106. #category .paginationWrap .pagination li .next,
    107. 
                    	
  107. #category .paginationWrap .pagination li .prev {
    108. 
                    	
  108.   font-size: 2rem
    109. 
                    	
  109. }
    110. 
                    	
  110. #category .paginationWrap .pagination li .next { border-radius: 0 25px 25px 0 }
    111. 
                    	
  111. #category .paginationWrap .pagination li .prev { border-radius: 25px 0 0 25px }
    112. 
                    	
  112. #category .paginationWrap .pagination li a:hover {
    113. 
                    	
  113.   color: #fff;
    114. 
                    	
  114.   background: #ff657c
    115. 
                    	
  115. }
    116. 
                    	
  116. #category .paginationWrap .pagination li .current {
    117. 
                    	
  117.   color: #fff;
    118. 
                    	
  118.   background: #ff657c;
    119. 
                    	
  119.   cursor: default
    120. 
                    	
  120. }
    121. 
                    	
  121. @media screen and (max-width: 768px) {
    122. 
                    	
  122.   #category .paginationWrap .pagination li + li::before { height: 40px }
    123. 
                    	
  123.   #category .paginationWrap .pagination li a,
    124. 
                    	
  124.   #category .paginationWrap .pagination li span  {
    125. 
                    	
  125.     min-width: 40px;
    126. 
                    	
  126.     height: 40px;
    127. 
                    	
  127.     line-height: 40px;
    128. 
                    	
  128.     padding: 0 15px;
    129. 
                    	
  129.   }
    130. 
                    	
  130.   #category .paginationWrap .pagination li .next { border-radius: 0 20px 20px 0 }
    131. 
                    	
  131.   #category .paginationWrap .pagination li .prev { border-radius: 20px 0 0 20px }
    132. 
                    	
  132. }
    133. 
                    	
  133. 
                    	
  134. /* ------ search ------ */
    135. 
                    	
  135. #category .inner .notFoundWrap {
    136. 
                    	
  136.   text-align: center;
    137. 
                    	
  137.   padding: 20px;
    138. 
                    	
  138.   background: #fff
    139. 
                    	
  139. }
    140. 
                    	
  140. #category .inner .notFoundWrap p { font-size: 1.7rem }
    141. 
                    	
  141. #category .inner .notFoundWrap .btn {
    142. 
                    	
  142.   text-align: center;
    143. 
                    	
  143.   margin-top: 30px
    144. 
                    	
  144. }
    145. 
                    	
  145. #category .inner .notFoundWrap .btn a {
    146. 
                    	
  146.   width: 100%;
    147. 
                    	
  147.   max-width: 300px;
    148. 
                    	
  148.   color: #fff;
    149. 
                    	
  149.   font-size: 1.6rem;
    150. 
                    	
  150.   line-height: 50px;
    151. 
                    	
  151.   margin: 0 auto;
    152. 
                    	
  152.   background: #ff657c;
    153. 
                    	
  153.   display: block
    154. 
                    	
  154. }
    155. 
                    	
  155. #category .inner .notFoundWrap .btn a:hover { opacity: 0.7 }
    156.

少し長いですけどじっくり見てもらえれば難しい事もやってないので問題ないハズです。それではこちらもコピペしてもらって、これまでのファイルを確認しておきましょう。

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

結構ファイルも揃ってきましたね。次は「page.php」と「404.php」を作成していきます。「404」というのは存在しないページにアクセスした時に表示される「エラーページ」の事です。

竹馬

今回、自作のテーマを「有効化」してもらいましたのでサイトも確認できるようになりましたね。あともう少しファイルの作成をしていきますので頑張っていきましょう。

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

よく読まれている記事

おすすめの記事

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

チェピレア日記