Luxeritas（ルクセリタス）のサイト内検索ボタン「検索」文字をアイコンへ

2020年1月3日2022年12月24日ルクセリタス

ルクセリタスの「サイト内検索フォーム」のボタンにある「検索」文字をアイコンにしてみました。

ルクセリタスがマテリアルアイコンに標準化されたので、Font Awesome 5 から、マテリアルアイコンに変更しました。

今は、Windows11 の検索アイコンが逆向きになったので、マテリアルアイコンも逆向きにしようとしましたが、少しコミカルにしたかったので、画像にしてます。

「検索」ボタンをアイコンにするには

まず、searchform.php の変更。２６行目を削除するか、コメントに。
そして、２７行目の</form>の前に次のコードを追記。

<button type="submit" id="kensaku2submit" aria-label="button"><span class="material-icons-outlined">search</span></button>

コメントにすると、このようになります。

</label>
<!--
<input type="submit" class="search-submit" value="<?php echo esc_attr( __( 'Search', 'luxeritas' ) ); ?>" />
-->
<button type="submit" id="kensaku2submit" aria-label="button"><span class="material-icons-outlined">search</span></button>
</form>
</div>

次に style.css に追記。

/* サイト内検索 */
#side #side-fixed .search-form,
#side #side-scroll .search-form {
	border: 1px solid #33cc99;
	border-radius: 5px;
	padding-right: 54px;
}
#side #side-fixed .search-field,
#side #side-scroll .search-field {
	height: 32px;
	border: none;
	border-radius: 5px;
	padding: 0 5px;
	background: none;
}
#kensaku2submit {
	font-size: 20px;
	width: 50px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	position: absolute;
	right: 0;
	top: 0;
	color: #121212;
	background: #33cc99;
}
#kensaku2submit:hover {
	color: #ff0066;
	cursor: pointer;
}

画像を使った時のコード

今は、画像にしています。

searchform.php のコード

保存先画像を指定する。
src="<?php echo esc_url(home_url()); ?>　自動
/wp-content/uploads/base/search2.png"　指定はここ

<input type="image" src="<?php echo esc_url(home_url()); ?>/wp-content/uploads/base/search2.png" alt="検索" id="kensaku2submit" />

style.cssのコード

/* サイト内検索 png */
#side #side-fixed .search-form,
#side #side-scroll .search-form {
	border:1px solid #33cc99;
	border-radius:5px;
	padding-right:47px;
}
#side #side-fixed .search-field
#side #side-scroll .search-field {
	border:none;
	border-radius:5px;
	padding:0 5px;
}
#kensaku2submit {
	border-radius:5px;
	position:absolute;
	right:0;
	top:1px;
	background-color:#33cc99;
}
#kensaku2submit:hover {
	background-color:#ff0066;
}