,

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

公開日: 2017/08/29
更新日: 2018/10/19

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

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

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

Dashicons is the official icon font of the WordPress admin as of 3.8.

Dashicons | WordPress Developer Resources

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

functions.php
// Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
function enqueue_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

公式で設定値を調べれば、すぐに利用できます。

<i class="dashicons dashicons-calendar"></i>

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

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

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

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="&#xf179;"', $text );
    return $text;
}

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

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