【検索ページ, カテゴリページの作成】自作ワードプレステーマの最低限を作る⑥

前回まで

2019.05.21【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤

検索ページを作る

今回変更するファイル

sidebar.php
search.php

sidebar.php

サイドバーに検索窓を追加します。

line3-5が追加部分です。

<div class="sidebar">
  <div class="side-content">
    <form action="<?php echo home_url('/');?>" method="get"> 
      <input type="text" placeholder="サイト内を検索" name="s" id="s" value=""> 
    </form>
  </div>
</div>

<form action="<?php echo home_url('/');?>" method="get">

</form>

</div>

search.php

検索結果のページを作ります。

line5-6が追加部分です。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content">
      <h2>「<?php the_search_query(); ?>」の検索結果</h2>
      <?php get_template_part('loop', 'main');?>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

<h2>「<?php the_search_query(); ?>」の検索結果</h2>

<?php get_template_part('loop', 'main');?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

インデックスページを完成させる

今回変更するファイル

index.php

気づいた人もいるかもしれませんが、今回のテーマはcategory.phpを作っていません。なのでカテゴリ別ページもindex.phpに飛んでしまいます。

なのでindex.phpにあるインデックスページの文字を動的に変更させていきます。

index.php

line:5-8が追加部分です。

本当はこれだけでは不十分なんですが、今回はこれで十分事足りるのでこのままにしておきます。

必要に応じてご自身で改変ください。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content">
      <?php if (is_category()):?>
      <h2><?php $cat_info = get_category( $cat );echo esc_html( $cat_info->name ); ?></h2>
      <?php else:?>
      <h2>ブログ新着</h2>
      <?php endif;?>
      <?php get_template_part('loop', 'main');?>
      <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>