Cocoon検索フォームの「サイト内を検索」の文言を変更する方法

Cocoon検索フォームの「サイト内を検索」の文言を変更する方法ブログカスタマイズ

WordPressには「検索」と呼ばれるウィジェットがあります。

訪問者にサイト内のページを検索してもらうために設置する機能です。

Cocoonで設置すると入力欄に薄い文字で「サイト内を検索」と表示されます。

今回はこの入力欄に薄い文字を修正する方法を紹介します。

サイトの雰囲気に合った文言にすることで、利用率が上がるかもしれません。

入力欄に薄い文字で説明を記載することを「プレースホルダー」と呼びます。

広告
そらしど

本業はWebプログラマー。
Cocoonのデザインをカスタマイズやブログノウハウを紹介しています。
気まぐれに遊べるおもちゃも作ってます。
リクエストは無料なので、気軽に投稿してください!
趣味はお昼寝です。
詳しいプロフィールはこちら

フォロー

検索フォームとは

WordPressにあるウィジェットの一つです。

自分のサイトにあるコンテンツをキーワード検索するための機能です。

使用しているWordPressテーマによってデザインが異なり、Cocoonの場合は以下のデザインになります。

Cocoon検索ウィジェットのデザイン
Cocoon検索ウィジェットのデザイン

カスタマイズ後は以下のようになります。(実際にカスタマイズしたページはこちら

広告

検索フォームのプレースホルダーを変更する手順

解決方法

WordPressでプレースホルダーの内容を変更するにはPHPで編集する方法Javascriptで編集する方法があります。

今回はJavascriptで編集する方法を紹介します。

PHPで編集する方が正規ですが、手順が多いかつ更新時の管理も大変です。今回は初心者向けにJavascriptの方法を選びました。

そらしど
そらしど

今回紹介するコードは厳密にはjQuery(Javascriptのライブラリの一つ)と呼ばれます。アレンジしたり詳しく調べたりする場合はjQueryで検索しましょう。

検索フォームのプレースホルダーを変更する手順
  • サーバーへアクセス
  • javascript.jsをダウンロード

  • Javascript.jsにコードを追記
  • 追記したJavascript.jsをアップロード

サーバー操作の手順は私が使っているConoHa WINGを例に進めます。

使用するファイルマネージャーの操作方法を見ながら進めるとスムーズに進められます。

サーバーへアクセス

ConoHa WINGにログインします。

サイト管理→ファイルマネージャーをクリックします。(ログインが求められる場合があります)

javascript.jsをダウンロード

次のフォルダへ移動します。

ファイルの場所

wp-content/themes/cocoon-child-master

javascript.jsをダウンロードします。(操作方法がわからない場合はこちら

Javascript.jsにコードを追記

ダウンロードしたJavascript.jsをテキストエディタで開き、以下のコードを一番後ろに追記します。

$('.search-edit').attr('placeholder','プレースホルダーの文言');
Copy

「プレースホルダーの文言」の部分が検索フォームに表示される文言です。
好きな文言に編集してください。

JavascriptのコードはMilk.moo様を参考にしました。

追記したJavascript.jsをアップロード

追記したファイルを保存して、先ほどダウンロードしたフォルダにアップロードします。

そらしど
そらしど

バックアップ忘れずに!

以上でカスタマイズは完了です。

当サイトで掲載しているソースコードについて

この記載はプライバシーポリシーからの抜粋です。

著作権およびライセンス

ブログに掲載されている、ブログ管理者(そらしど)が本来権利を有するソースコードについては、ライセンスをCC0とします。

商用・非商用を問わず自由に利用していただいて構いません。その際の連絡も不要です。

免責事項

当サイトに掲載しているカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についても当サイトはその責任を負いかねます。何卒ご理解、ご了承の上、当サイトをご活用いただきますようお願い申し上げます。

まとめ

WordPressの検索ウィジェットで設置できる検索フォームのプレースホルダーを変更する方法を紹介しました。

自分好みなサイト作りの助けになれば嬉しいです。

分からないことや質問があれば下記から気軽に連絡ください。

そらしど
そらしど

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

関連のおすすめ記事

コメント

タイトルとURLをコピーしました