Luxeritasのサイト内検索ボタン「検索」文字をアイコンへ

ソフトウェアルクセリタス

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

最初、画像を使っていましたが、 Font Awesome 5 に変更してみましたので、そのメモです。

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

まず、searchform.php の変更。Ver3.7.4 – 3.9.0 なら26行目を削除するか、コメントに。
そして、27行目の</form>の前に次のコードを追記。

<button type="submit" id="kensaku2submit" aria-label="button"><span class="fas fa-search" aria-hidden="true"></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="fas fa-search" aria-hidden="true"></span></button>
</form>
</div>

次に style.css に追記。

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

こんな感じになります。

画像を使った時のコード

画像を使った時のコードも忘れてしまうのでメモ。

アイコン透過画像 50×32 search2.png

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 Icon */
#side #side-fixed .search-form {
	border:1px solid #33cc99;
	border-radius:5px;
	padding-right:50px;
}
#side #side-fixed .search-field {
	border:none;
	border-radius:5px;
	padding:0 5px;
}
#kensaku2submit {
	border-radius:5px;
	position:absolute;
	right:0;
	top:0.7px;
	background-color:#33cc99;
}
#kensaku2submit:hover {
	background-color:#ff66cc;
}

こんな感じになります。