ワードプレスのキーワード検索ウィジェット内に表示される透かし文字を変更する

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

ワードプレスのウィジェットで差し込んだキーワード検索ボックス内の透かし文字を変更するカスタマイズをご紹介いたします。基本的なカスタマイズは以下をfunctions.phpへ差し込んで行います。

function wp_keyword_search_widget_form_add_placeholder( $html ) {
	$html = str_replace( 'placeholder="変更前の透かし文字', 'placeholder="変更後の透かし文字', $html );
	return $html;
}
add_filter( 'get_search_form', 'wp_keyword_search_widget_form_add_placeholder' );

カンタンに解説するとhtml内のplaceholderで指定されている元々の透かし文字を探して入れ替えています。サイト内にある文言を複数同時に入れ替えるときにも使えますし、一部のタグを指定して差し替えることもできるので使い方次第でとても便利な構文です。では以下でもう少し詳しく解説させていただきます。

ワードプレスのキーワード検索ウィジェット内に表示される透かし文字を変更する
- 元々のplaceholder「キーワードで検索する」を「変更したあとの透かし文字」に変更する
- 元々のplaceholder「キーワードで検索する」を「入力してエンターをどうぞ」に変更する
まとめ

ワードプレスのキーワード検索ウィジェット内に表示される透かし文字を変更する

もし元々が以下で表示されていたとします。下記のhtmlはソース上でplaceholder="キーワードで検索する"となっています。このhtmlをfunctions.phpから強制的に入れ替えるのが今回の手法です。

透かし文字を変更した状態が以下です。好みの文言を指定したい場面がありますよね。

文言の入れ替えなので元となるplaceholderが設定されている必要があります指定はカンタンです。元々の透かし文字の「キーワードで検索する」を「変更したあとの透かし文字」へ調整する場合は下記です。

元々のplaceholder「キーワードで検索する」を「変更したあとの透かし文字」に変更する

function wp_keyword_search_widget_form_add_placeholder( $html ) {
	$html = str_replace( 'placeholder="キーワードで検索する', 'placeholder="変更したあとの透かし文字', $html );
	return $html;
}
add_filter( 'get_search_form', 'wp_keyword_search_widget_form_add_placeholder' );

placeholderの単語をくくっているダブルクォーテーションの「閉じ側がない」のはわざとです。上記の「変更したあとの透かし文字」を「入力してエンターをどうぞ」に変更したバージョンが以下。

元々のplaceholder「キーワードで検索する」を「入力してエンターをどうぞ」に変更する

function wp_keyword_search_widget_form_add_placeholder( $html ) {
	$html = str_replace( 'placeholder="キーワードで検索する', 'placeholder="入力してエンターをどうぞ', $html );
	return $html;
}
add_filter( 'get_search_form', 'wp_keyword_search_widget_form_add_placeholder' );

書き方は以上です。注意点としてはテーマ側のfunctions.phpなどでキーワード検索ウィジェットの設定を上書きしているテーマの場合は透かし文字のテキストが入れ替わらない場合があります。

まとめ

今回はウィジェットのキーワード検索内にある透かし文字を変更する方法をご紹介いたしました。今回の構文では「get_search_form」で指定しているのでテーマ側で「get_search_form」が実行されるときの設定を上書きしているという仕組みになります。ワードプレスでは色々な構文が用意されているのでそのときどきに合わせて指定すれば今回のようなhtmlタグの上書きも可能です。ぜひご活用くださいませ。