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

ルクセリタスの「サイト内検索フォーム」のボタンにある「検索」文字をアイコンにしてみました。
ルクセリタスがマテリアルアイコンに標準化されたので、Font Awesome 5 から、マテリアルアイコンに変更しました。
今は、Windows11 の検索アイコンが逆向きになったので、マテリアルアイコンも逆向きにしようとしましたが、少しコミカルにしたかったので、画像にしてます。
「検索」ボタンをアイコンにするには
まず、searchform.php の変更。26行目を削除するか、コメントに。
そして、27行目の</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;
}
こんな感じになります。

画像を使った時のコード
今は、画像にしています。
アイコン透過画像 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 */
#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;
}
こんな感じになります。

コメント欄を閉じる
ディスカッション
コメント一覧
まだ、コメントがありません
コメントをどうぞ