［WP覚書］検索機能にカテゴリー・タグ別検索を追加をカスタマイズ

2011年12月14日2013年3月13日

Webクリエイターボックスさんのこちらの記事を見ながらちょいちょいいじっただけです。
WordPressの検索機能をもっと使いやすくする | Webクリエイターボックス

serchform.phpを設置するときの注意点（超基本）

・UTF-8でファイルを保存する。
・自分が今使っているテーマのディレクトリに設置する

こんな感じでserchform.phpを作ってみました。
検索窓はどこぞのテーマからパクってきた「The Morning After」から部分的にもらってきた(^^;そのままなのですが。

<div id="search-form">                  
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>

<input type="text" name="s" id="s" class="search_input" value="<?php the_search_query(); ?>" />

<input type="submit" id="searchsubmit" class="submit_input" value="Search" />
</div>
</form>
<div id="search-dropdown">
<?php wp_dropdown_categories(); ?>

<?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; ?>
</div>
</div>

201313追記
dropdown部分をスタイル的に制御するため、

<div id="search-dropdown">～</div>

で囲みました。
また、クリエイターボックスさんで紹介されているものはlabelが付いてますが、意図的にはずしてます。

<label for="s" class="none">Search for:</label>

<label for="searchsubmit" class="none">Go</label>

スタイルシートも少し整理しまして、こんな感じに。
もうちょっとまとめたいです。

/* Search and navigation
-------------------------------------------------------------- */
#head #search_menu {
	height: 90px;
	width: 400px;
	float: right;
	padding-left: 9px;
	position: absolute;
	left: 540px;
	top: 19px;
	line-height: 1;
}
#head #search_menu #search {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 5px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
}

/* Form styles
-------------------------------------------------------------- */
input {
	margin:0;
	padding:0;
}


input.search_input {
	width: 292px;
	border: 0;
	padding: 5px;
	margin: 0;	
	color: #E0691A;
	font-weight: bold;
	float: left;
	background-image: url(images/custom/input.png);
	background-repeat: no-repeat;
	background-color: transparent;
}
input.submit_input {
	height: 24px;
	padding: 0;
	width: 65px;
	margin: 0 0 0 5px;
	color: #FFF;
	font: bold 0.9em arial, sans-serif;
	float: left;
	background-image: url(images/custom/submit.png);
	background-repeat: no-repeat;
	border:none;
}

input.submit_input:hover { 
	cursor: pointer; }
	
.none { display: none; }

h3.md-search {
	border:none;
	border-bottom:none;
	margin:0;
	font-size: 0.8em;
	letter-spacing: 0.1em;
	padding: 0;
	line-height: 1.8em;
	text-transform: uppercase;
	}
	
form#searchform {
	margin:0;
	padding: 0;
	border:none;
	}

#search-dropdown {
	position:relative;
	display:block;
	clear: both;
	}
	
a:focus,
textarea:focus,
input:focus {
	outline: 1px solid #2091da;
}