Menu

WordPress Cocoon 検索窓 placeholder 「サイト内を検索」を別の文字に変更する

2024年03月26日

WordPress テーマ Cocoon の検索ウィジェットで設定し表示している検索窓（検索フォーム）には「サイト内を検索」と placeholder が設定されます。

この「サイト内を検索」を別の文字に変更したい場合がありますが、その場合は PHP（ functions.php に記述） または Javascript での対応が可能です。

PHP を使う場合は get_search_form をフックしてフォームの内容を書き換え、Javascript を使う場合は placeholder アトリビュートを書き換えします。

検索窓は基本としてサイトに１つ設置していることを想定しますが、デザインによっては複数設置している場合もあるのかなと思います。

すべての検索窓の「サイト内を検索」を別の文字に変更したいと言った場合であればさほど考慮することもないかと思いますが、検索窓を複数設置している場合でかつ一部の検索窓だけ文字を変更したいと言った場合は少し考慮する必要があるのかなと、ソースコードを書きながら思ったり。

そう言ったケースはレアなケースかもしれませんが、そのようなケースも想定して、いくつかのサンプルコードを試してみましたので以下にその内容を記述します。

WordPress バージョン 6.4.3、Cocoon バージョン 2.7.1.2 にて確認しています。functions.php やテーマファイルを変更する前にバックアップを行ってから作業されることをお勧めします。

※ 以下のサンプルコードは「サイト内を検索」を「記事を検索」に変更する例としてコードを記載しています。

PHP

if ( !function_exists( 'my_get_search_form' ) ) {
	function my_get_search_form( $form ) {
		$form = str_replace( 'サイト内を検索', '記事を検索', $form );
		return $form;
	}
	add_filter( 'get_search_form', 'my_get_search_form' );
}

JQuey

<script>
	$('.search-edit').attr('placeholder','記事を検索');
</script>

以下、単体対応の場合。

※ id = #search-2 は環境により異なりますので、ブラウザの検証ツールなどでご自身の環境の id をお調べください。

<script>
	$('#search-2 .search-box .search-edit').attr('placeholder','記事を検索');
</script>

Javascript 

JQuery で事足りると思いましたが、Javascript で書いたらどうなるのかな？と思って書きました。

<script>
	const search_form = document.querySelectorAll('.search-edit');
	search_form.forEach( (element) => {
		element.setAttribute('placeholder','記事を検索');
	});
</script>

以下、単体対応の場合。

※ id = #search-2 は環境により異なりますので、ブラウザの検証ツールなどでご自身の環境の id をお調べください。

<script>
	const search_form = document.querySelector('#search-2 .search-box .search-edit');
	search_form.setAttribute('placeholder','記事を検索');
</script>

それぞれもっと良い書き方はあるかもしれませんが、WordPress テーマ Cocoon の検索窓の「サイト内を検索」を別の文字に変更する際の参考になりましたら幸いです。

広告