【SWELL】検索フォームのプレースホルダーを簡単に変更する方法

ケケンタ

こんにちは！　ケケンタです。

今回は

SWELLで検索フォームのプレースホルダーを変更する方法

をご紹介します。

ケケンタ

SWELLではフィルターフックが用意されており、簡単に検索フォームのプレースホルダーを変更することが可能です。

初期状態ではただ単に「検索」としか表示されておらず味気ないため、ぜひこの記事を活用してお好みのテキストに変更してみてはいかがでしょうか。

この記事でご紹介する方法ではfunctions.phpを編集します。
作業をする際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス 

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法 

• Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
• 会員の自動更新を解除しておく＝期限が来たら自動解約
• １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

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

SWELLでは初期状態だと検索フォームは以下のような状態です。

検索フォーム（初期状態）

ケケンタ

このプレースホルダー「検索」という文字列を変更する場合、以下のソースコードをfunctions.phpに追加します。

add_filter( 'swell_searchform_placeholder', function( $placeholder ) {
    // プレースホルダーテキストをカスタマイズ
    $placeholder = __( '記事を検索する', 'swell' );
    return $placeholder;
});

すると、以下のように「検索」→「記事を検索する」に変わります。

検索フォーム（ソースコード追加後）

ソースコードでハイライトされている行（３行目）に入力したテキストが検索フォームに反映されます。

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

SWELLでは様々なフィルター・アクションフックが用意されている

SWELLには独自のフィルターフックやアクションフックが用意されています。

元々カスタマイズ性に優れているSWELLですが、このようにフィルターフックやアクションフックを利用することで、できることの幅がもっと広がります。

この記事をご覧になった方も、もしご興味があればご自身でSWELLの各フックについて調べてみるのもおもしろいかもしれません。

ケケンタ

最後までご覧いただきありがとうございました！
この記事がお役に立ったなら何よりです。

SWELLのその他の記事はこちら

 SWELL記事一覧

今回ご紹介した内容のテーマ 

SWELLを見てみる　>>