[WordPress General] 検索フォームのサブミットボタンをアイコンフォントに変更する

サーチウィジェットが自動生成するサブミットボタンのテキストを、WordPress に組み込まれている Dashicons フォントに変更します。

[markdown]
## Dashicons をフロントで利用できるようにスタイルシートを読み込む

Dashicons は管理画面で利用されているアイコンフォントです。

> Dashicons is the official icon font of the WordPress admin as of 3.8.
>
> [Dashicons | WordPress Developer Resources](https://developer.wordpress.org/resource/dashicons/#calendar)

`wp_enqueue_style` で dashicons のスタイルシートを読み込みます。

> * [WordPress：Dashiconsをテーマで使用する方法 | NxWorld](https://www.nxworld.net/wordpress/wp-dashicons-using-theme.html)

“`php:functions.php
// Enqueue Dashicons
add_action( ‘wp_enqueue_scripts’, ‘enqueue_dashicons’ );
function enqueue_dashicons() {
wp_enqueue_style( ‘dashicons’ );
}
“`

[公式](https://developer.wordpress.org/resource/dashicons/)で設定値を調べれば、すぐに利用できます。

“`html

“`

## サーチボタンのテキストを置き換える

WordPress でサーチフォームの設置を行う場合、用意されているサーチウィジェットを利用することが多いと思います。
自動生成されるタグを WordPress らしく `functions.php` を利用して置き換えます。

> * [Topic: How do I change some details of the SEARCH WIDGET? « WordPress.org Forums](https://wordpress.org/support/topic/how-do-i-change-some-details-of-the-search-widget/)

下記では `value=”検索”` もしくは `value=”Search”` という文字をアイコンフォント に置き換えています。

“`php:functions.php
/**
* Change text in search button
* @link https://wordpress.org/support/topic/how-do-i-change-some-details-of-the-search-widget
*/
// Enqueue Dashicons
add_action( ‘wp_enqueue_scripts’, ‘enqueue_dashicons’ );
function enqueue_dashicons() {
wp_enqueue_style( ‘dashicons’ );
}
// Replace search button value
add_filter( ‘get_search_form’, ‘new_search_button’ );
function new_search_button( $text ) {
$values = array( ‘value=”検索”‘, ‘value=”Search”‘ );
$text = str_replace( $values, ‘value=””‘, $text );
return $text;
}
“`

最後に CSS でフォントファミリーを指定します。
必要に応じてフォントサイズなどの調整を行います。

“`css:style.css
// Search form
.search-form input[type=submit] {
font-family: ‘dashicons’;
font-size: 1rem;
line-height: 1;
“`
[/markdown]