ワードプレスのサイト内検索の「検索」ボタンを「虫メガネ」アイコンに変えたんですが、マニュアル通りにいかなくて苦労したのでメモ。
まず、検索ボックスの差し替え。
参考:Wordpress.org「get_search_form()」
デフォルトでは、モバイルで折り返されてしまっているのを直すついでに「検索」を「虫メガネ」に変えようと思い立ったのですが…

get_search_form()関数ページの下部のユーザー投稿情報を参考に、自作のmy_search_form()関数にfilter機能で入れ替えようとすること1時間。
「searchform.php」を作ってそちらにコードを書く方法でないと上手くいかない可能性が浮上する。※filter機能でもsearchform.phpでもどちらでもいいと理解しておりました。
試してみると…
「検索」が「search」という英数字に変わっているが、「虫メガネ」は出ない…
参考:Google Fonts「Material Icons Guide」、「icons」
ステップは2つ。
まず、ページのheadエリアに専用CSSを読み込ませるコードを追記する。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
アイコンを入れたい場所に自動生成された下記のコードをコピペする。
<span class="material-icons-outlined">
search
</span>
たったこれだけなのに何故?
っと、更に1時間間違い探し…
自動生成されたコードだと、classが「material-icons-outlined」になっているんですが、実際に必要なclassは、「materials-icon」でした。
CSSの修正をしたい時は「.materials-icon」を使いましょう的なことが書いてあったので、こちらのクラスも揃えてみたら動いた…
つまり
<span class="material-icons">
search(=アイコン名)
</span>
とか
<i class="material-icons">
search(=アイコン名)
</i>
などと書けば上手くいきました。
まとめ
- ワードプレスの検索ボックスを置き換えたいときは、searchform.phpを作る
- Google font iconを使う時は、CSSの修正用に指定されているクラスを使う
因みに、最終的にsearchform.phpに書いたコードは下記の通り。
<form action="/" method="get">
<label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
<input type="text" name="s" id="search-text" value="<?php the_search_query(); ?>" />
<button type="submit" id="search-submit"><i class="material-icons">search</i></button>
</form>
修正前 修正後
最後までお読みいただきましてありがとうございました。