WordPressテーマ作成~検索ページに載せるもの追加(記事のカテゴリ・サムネイル・記事タイトル・投稿日・検索結果)~
投稿日
更新日
今回は、検索ページを作成していきたいと思います。
検索ページとは、検索窓に言葉を入れて検索した後に、検索結果が表示されるページの事です。(←当たり前のこと言ってるw)
こんな感じで、一覧で出ていた記事から、検索窓に言葉を入れて検索すると、
当てはまったものだけが表示されるわけです。
今回やったWordPressの場合、検索結果は別のページで表示しているので、
「search.php」というファイルを追加していきます(一覧のコピーをした方が早いかも)。
※一覧ページを作成した時の記事はこちら
実際に記述した内容としては、下記となります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="home-main"> <?php echo '<label class="category">', get_search_query(), '</label>'; if ( have_posts() ) : echo 'の検索の結果<ul>' , PHP_EOL; while ( have_posts() ) : the_post(); ?> <li> <div class="label"><?php the_category( ' ' ); ?></div> <div class="article"> <?php the_post_thumbnail( 'full', printf( '<a href="%s">', get_permalink() ), '</a>' ); ?> <time><?php the_time( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ) ); ?></time> <?php the_title( sprintf( '<a href="%s"><h2>', get_permalink() ), '</h2></a>' ); ?> </div> </li> <?php endwhile; echo '</ul>' , PHP_EOL; else : echo '<br>に関する記事は見つかりませんでした。。。'; endif; ?> </div> |
検索結果には、検索したい言葉に対して、当てはまる場合と、1つも当てはまらない場合があります。
そのため、当てはまった場合の記述と、当てはまらなかった場合の記述が必要となり、if文で分岐させています。
elseまでの部分が検索に当てはまった時に表示される内容です。
あ、ifよりも上にある、
1 |
echo '<label class="category">', get_search_query(), '</label>'; |
この部分が検索窓に入れて、検索した文言を表示してくれています。
で、それ以下の部分が出し分け。
1 2 3 4 5 6 7 8 |
if ( have_posts() ) : echo 'の検索の結果<ul>' , PHP_EOL; while ( have_posts() ) : the_post(); ?> <li> //記事一覧と同じ内容 </li> <?php endwhile; echo '</ul>' , PHP_EOL; |
検索に当てはまるものがあったら、さっきの検索した文言の後に、「の検索の結果」って出して、
当てはまった記事を ul の中に li で順番に出していくような形にしています。
(この辺は作り方によって・・・)
検索結果で当てはまるものがあれば、記事が出てきてくれますが、
1つも当てはまらなかった時に何も出てこないと、検索できたのかな?ってなってしまうので、
当てはまるものが無かったよっていうことを、表示します。
1 2 |
else : echo '<br>に関する記事は見つかりませんでした。。。'; |
文言等は、好きなように変更しましょー。