【目次】

404ページを作る

リクエストされたページが存在しなかった時に表示するためのページ（= 404ページ）を動的化していく

1. 「404.html」に記述していたコードを「404.php」に全てコピペする

2. headerやfooter、sidebarなどの共通パーツを、それぞれ共通化したテンプレパーツを読み込むコードに置き換えていく

3. 404のメインコンテンツ部分で、トップページに戻るリンクなど動的にする箇所があれば適宜動的にする 完成コード例）

   <!--==  header.php 読み込み ==-->
   <?php get_header(); ?>
   
   <!-- content -->
   <div id="content" class="m_one m_404">
       <div class="inner">
   
           <!-- primary -->
           <main id="primary">
   
               <!-- entry -->
               <div class="entry-404">
                   <h1 class="entry-404-head"><span>404</span>Not Found</h1><!-- /entry-404-head -->
                   <div class="entry-404-lead">お探しのページが<br class="m_sp" />見つかりませんでした</div><!-- /entry-404-head -->
                   <p class="entry-404-content">申し訳ありませんが、お探しのページが存在しないか、アクセスできません。<br>入力されたURLが正しいかご確認ください。</p><!-- /entry-404-content -->
                   <div class="entry-404-btn"><a class="btn" href="<?php echo home_url('/'); ?>">トップページに戻る</a></div><!-- /entry-404-btn -->
               </div><!-- /entry-404 -->
   
           </main><!-- /primary -->
   
           <!--==  sidebar.phpの読み込み  ==-->
           <?php get_sidebar(); ?>
   
       </div><!-- /inner -->
   </div><!-- /content -->
   
   <!--==  footer.phpの読み込み  ==-->
   <?php get_footer(); ?>
   

4. 作り終えたら、存在しないURLを入力し、404ページがきちんと表示されるか確認する

search.phpで検索結果ページを作る

「search.php」を使って検索結果ページを作成する

1. 「search.html」に記述していたコードを「search.php」に全てコピペする

2. headerやfooter、sidebarなどの共通パーツを、それぞれ共通化したテンプレパーツを読み込むコードに置き換えていく

3. 検索結果のタイトル（上記画像「”テスト”の検索結果：6件」の部分）を下記コードを使って動的にする

   <?php the_search_query(); ?>
   <?php echo $wp_query->found_posts; ?>
   
   //例
   <!-- archive-head -->
   <div class="archive-head">
       <div class="archive-lead">SEARCH</div>
       <h1 class="archive-title m_search"><span>"<?php the_search_query(); ?>"</span>の検索結果：<?php echo $wp_query->found_posts; ?>件</h1><!-- /archive-title -->
   </div><!-- /archive-head -->
   
   //置き換え前
   <!-- archive-head -->
   <div class="archive-head">
   	<div class="archive-lead">SEARCH</div>
   	<h1 class="archive-title m_search"><span>"タイトル"</span>の検索結果：38件</h1><!-- /archive-title -->
   </div><!-- /archive-head -->
   

4. メインコンテンツ部分を動的にしていく。なお、検索結果のタイトル以外は「archive.php」と同じはずなので、念のため確認しつつコピペ出来る所はコピペしていく。

   完成コード例）

   <?php get_header(); ?>
   
   <!-- content -->
   <div id="content">
       <div class="inner">
   
           <!-- primary -->
           <main id="primary">
   
               <!--==  breadcrumb読み込み  ==-->
               <?php get_template_part('template-parts/breadcrumb'); ?>
   
               <!-- archive-head -->
               <div class="archive-head">
                   <div class="archive-lead">SEARCH</div>
                   <h1 class="archive-title m_search"><span>"<?php the_search_query(); ?>"</span>の検索結果：<?php echo $wp_query->found_posts; ?>件</h1><!-- /archive-title -->
               </div><!-- /archive-head -->
   
               <?php
               //記事があればentriesブロック以下を表示
               if (have_posts()) : ?>
   
                   <!-- entries -->
                   <div class="entries m_horizontal">
   
                       <?php while (have_posts()) : the_post(); //記事数分ループ?>
                           <!-- entry-item -->
                           <a href="<?php the_permalink(); //記事のリンクを表示?>" class="entry-item">
                               <!-- entry-item-img -->
                               <div class="entry-item-img">
                                   <?php
                                   if (has_post_thumbnail()) {
                                       // アイキャッチ画像が設定されてれば大サイズで表示
                                       the_post_thumbnail('large');
                                   } else {
                                       // なければnoimage画像をデフォルトで表示
                                       echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
                                   }
                                   ?>
                               </div><!-- /entry-item-img -->
   
                               <!-- entry-item-body -->
                               <div class="entry-item-body">
                                   <div class="entry-item-meta">
                                       <!-- trueを引数として渡すとリンク付き、falseを渡すとリンクなし -->
                                       <div class="entry-item-tag"><?php my_the_post_category(false); ?></div><!-- /entry-item-tag -->
                                       <time class="entry-item-published" datetime="<?php the_time('c'); ?>"><?php the_time('Y/n/j'); ?></time><!-- /entry-item-published -->
                                   </div><!-- /entry-item-meta -->
                                   <h2 class="entry-item-title"><?php the_title(); //タイトルを表示?></h2><!-- /entry-item-title -->
                                   <div class="entry-item-excerpt">
                                       <?php the_excerpt(); //抜粋を表示?>
                                   </div><!-- /entry-item-excerpt -->
                               </div><!-- /entry-item-body -->
                           </a><!-- /entry-item -->
   
                       <?php endwhile; ?>
   
                   </div><!-- /entries -->
   
               <?php endif; ?>
   
               <!--==  paginationの読み込み  ==-->
               <?php get_template_part('template-parts/pagination'); ?>
   
           </main><!-- /primary -->
   
           <!--==  sidebar.phpの読み込み  ==-->
           <?php get_sidebar(); ?>
   
       </div><!-- /inner -->
   </div><!-- /content -->
   
   <!--==  footer.php 読み込み ==-->
   <?php get_footer(); ?>