ワードプレス、検索ボタンをアイコンに変えるのに妙に苦労した件

ワードプレスのサイト内検索の「検索」ボタンを「虫メガネ」アイコンに変えたんですが、マニュアル通りにいかなくて苦労したのでメモ。

まず、検索ボックスの差し替え。

参考：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>

• 

• 

最後までお読みいただきましてありがとうございました。