ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2020.01.14  最終更新日:2021.01.04

WordPress

wordpressで記事の検索フォーム と記事検索結果ページをつくる方法

簡単に、wordpressの記事の検索フォーム を設置して、記事検索結果のページをつくる方法です。

検索フォーム のつくりかた

一番簡単な書き方

一番簡単と思われる書き方は、下記のように1行書くだけでフォーム が表示されます。

<?php get_search_form(); ?>

このように書くと、

<form role="search" method="get" id="searchform" class="searchform" action="https://XXXXXXXXXXXX.XXX/">
				<div>
					<label class="screen-reader-text" for="s">検索:</label>
					<input type="text" value="" name="s" id="s" />
					<input type="submit" id="searchsubmit" value="検索" />
				</div>
</form>

とHTMLが出力されます。見た目は下のような感じです。

ただ、labelタグなど、不要だなと感じることもあるかと思います。
その際には、以下のように、ご自身でコードを書けます。

自分で記述する書き方

直接HTMLを、

<form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
		<input type="search" value="<?php echo get_search_query(); ?>" name="s">
		<input type="submit" value="検索">
</form>

のように書くこともできます!

検索結果の一覧ページをつくる

search.phpを準備して、そのファイルに、

<h2>『 <?php printf( __( '%s', 'altitude' ), get_search_query()); ?> 』の記事一覧</h2>

<ul>
    <?php if (have_posts()): while (have_posts()) : the_post(); ?>
        <li>
            〜ここにはご自身が必要なタグを記述ください。〜
	</li>
    <?php endwhile; endif; wp_reset_postdata();?>

</ul>

と書きます。(全く一緒でなくてもいいので、あくまで参考までに見ていただければ。)

上記のコードのように書くと、

例えば、『初心者』と検索フォーム に入力して検索をかけると、検索結果一覧のページの見出しの部分では、

『初心者』の記事一覧

と表示されます。

最新記事