タグクラウドだけじゃ足りない！やっぱり便利なキーワード検索

　見出しの通りタグクラウドだけでは検索機能としてやっぱり足りない。だってわたし自身が未だに特定の記事を探すのに苦労しちゃうぐらいなんだから。こうなるとキーワード検索は必須ですな。

　nameを「s」としたテキストボックスを用意し、キーワードをgetで投げてやることで、ワードプレスの検索機能を簡単に利用することができるぞ。そしてその検索結果を表示するページの体裁は、search.phpというテンプレートファイルをカスタマイズして整えよう。

検索ボックスを用意して

　以下がキモとなるテキストボックスね。

<form class="form" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
	<input class="s-box" name="s" type="text" placeholder="記事検索"/>
	<button type="submit" class="s-btn-area"><div class="s-btn">検索</div></button>
</form>

　上に書いた通りmethodはgetに、nameはsに設定。action属性にはesc_url()を使ってこのサイトのトップページURLを記入した。これで、例えば「マチダ」というキーワードで検索したすると、その文字列がテキストボックス「s」からの情報としてURLのお尻に付与されて【https://machida-life.com/?s=マチダ】という形になるわけだね。

search.phpも用意して

　続いて検索結果を表示するためのsearch.phpを作成する。当サイトのテンプレートの中で今回の用途に一番近しいのは、タグクラウドからタグページを表示するために用意したtag.phpなので、そいつをコピペして利用するとしよう。

　上から下までコードを確認してみると、どうやらタグ名が表示されるようになっているページタイトルのところを検索ワードに変えてやればそれだけで使えそうだ。

/*タグページではタグ名を表示していたh2タイトルの中身を*/
<h2 class="category_title">
	<div><i class="fa-solid fa-tag icon"></i><span><?php single_tag_title(); ?></span></div>
</h2>

/*ごそっと変更*/
<h2 class="category_title">
	<div>
		<i class="fa-solid fa-magnifying-glass"></i>
		<span>
			<?php
			if ( get_search_query() ) {
				echo esc_html( get_search_query() );
			} else {
				echo '検索ワード無し';
			}
			?>
		</span>
	</div>
</h2>

　get_search_query()で検索ワードを取得し、ある場合はその検索ワードを、空の場合は「検索ワード無し」と表示する。iにくっついている「fa-solid fa-magnifying-glass」クラスはFont Awesomeを利用するためのものだ。

　これで検索ワードがページタイトルになったはいいものの、タグと違ってそれが何文字になるかわからないため、長くなり過ぎた時の対策をしておかないとレイアウトが崩れてしまうかもしれない。今回はtext-overflowを使用し、ボックスをはみ出すほど長くなる場合は三点リーダーで省略することにした。

.other_page.tag .category_title div {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

　displayをinline-blockに指定し、基本的には文字数に合わせたボックス幅になるように。そしてmax-width:100%;とすることで親要素の幅を超えないよう制限した上で、white-space: nowrap以下、三点リーダー処理の定番セットを記入して作業は終了だ。

　件の検索フォームはPCでは右カラムの最下部に、画面幅959px以下ではメインコンテンツ最下部、言い換えるとフッターの直上に設置したので、ご入り用の際はぜひ使ってみて欲しい。

　わたしのサイトがまた一つ便利になってなんだか嬉しいぞ。こうなってくると、使う方がいらっしゃるのなら色々こだわらずにパンくずリストも付けた方がいいのかなぁって…。どうしようかな。