連載第155回
2019年9月12日
検索フォームを少しリフォーム

 興が乗って、ちょっぴり使い勝手が悪くて改善したいと常日頃感じていた検索フォームをリフォームしてみることにした。複数ユーザーによる投稿の絞り込みを、検索フォームのオプションに加える工夫をしてみる(自分専用のサイトなので実際には使わないのだが勉強として)。現状のtagオプションのようなフックが必要になるかと考えていたのだが、カテゴリーのようにリスト表示する関数があると知り、まずは

【<?php wp_dropdown_users(‘depth=0&orderby=name&hide_empty=1&show_option_all=投稿者’); ?>】

としてみた。が、これは投稿者リストがプルダウンに表示されるだけで検索フォームに入力されるワケではないことが分かった。そこでWordPress日本語サイトで「wp dropdown users」のリファレンスを読んでいたら、サンプルコードとして紹介されていた「送信ボタン付きドロップダウンメニュー」を見つけ、それをぼんやり眺めていて、その中にある

【<?php wp_dropdown_users( array( ‘name’ => ‘author’ ) ); ?>】

が使えるんじゃないかと閃いた。早速設置して普通に動作すると気を良くしていたが、翌日になってよく見たら「空(ヌル)」の設定が出来ないことに気付いた。カテゴリーだとoption設定で指定していない時は「カテゴリー」を表示させているから、ここには「投稿者」としたい。そこで再度、昨晩参考にした関数リファレンスのページを見て、そこにある「デフォルトの使い方」の書式をじーーーっと眺めてスクリプトを書き直してみた。そしたらビンゴ!でバッチリ動作した。

 オマケでマウスから手を離してキーボードのリターンキーを押さなくても済むよう、虫眼鏡のアイコンを作って検索窓の中に入れた。これでだいぶ使い勝手が良くなったと思う。※これをflipflipflip.comのサイトに反映するのはまだ先になる(個人的には年内の改築を希望している)。

絞り込み検索のリフォーム

<form method="get" action="<?php echo home_url('/'); ?>" class="search-form" >
    <?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=カテゴリー'); ?>
    <input name="s" id="s" type="text" value="<?php the_search_query(); ?>" />
    <input name="img" id="img" type="image" src="search.png">
    <?php $tags = get_tags(); if ( $tags ) : ?>
        <select name='tag' id='tag'>
        <option value="" selected="selected">タグ</option>
        <?php foreach ( $tags as $tag ): ?>
        <option value="<?php echo esc_html( $tag->slug);  ?>"><?php echo esc_html( $tag->name ); ?></option>
        <?php endforeach; ?>
        </select>
    <?php endif; ?>
<?php
$args = array(
	'show_option_all'         => 投稿者,
	'name'                    => 'author',
);
wp_dropdown_users( $args );
?>
</form>

4行目:虫眼鏡設置用。※ただし画像へのパスは状況により絶対・相対できちんと記述する必要アリ。
13〜17行目:$argsに必要な要素を入れる。
18〜19行目:$argsをプルダウンメニューで表示。

検索用のCSS覚え書き

section#search {
	width: 840px;
	height: 0px;
	font-size: 20px;
	margin: 0px auto;
	padding-top: 0px;
	padding-left: 0px;
	position: relative;  
    top: -48px;
    right: 0px;  
    left: 0px;
	text-align: center;
	background-color: transparent;
	border: solid 0px black;
}

.search-form {
  width: 980px;
  height: 40px;
  padding-top: 0px; 
  margin: 0px 0px 0px 8px;
  text-align: left;
  border: solid 0px red;
}

.search-form input{
  vertical-align: middle;
}

.search-form #s{
  width: 380px;
  height: 34px;
  line-height:0px;
  padding: 0px 0px 0px 6px;
  border:1px solid #e3e3e3;
  font-size: 20px;
  font-weight: normal;
  color: #333;
  background-color: white;
  border: solid 1px #aebfef;
  border-radius:4px;
}

.search-form input#img{
  vertical-align: middle;
  position: relative;  
    top: 0px;
    right: 0px;  
    left: -30px;
    margin-right: -20px;
  border: solid 0px #aebfef;
}

select#cat{
	width: 180px;
	height: 28px;
	font-size: 14px;
	border: solid 1px #aebfef;
	border-radius:4px;
}

select#tag{
	width: 180px;
	height: 28px;
	font-size: 14px;
	border: solid 1px #aebfef;
	border-radius:4px;
}

select#author{
	width: 120px;
	height: 28px;
	font-size: 14px;
	border: solid 1px #aebfef;
	border-radius:4px;
}