この記事にはプロモーションが含まれています。

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

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

ケケンタ

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

今回は

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

をご紹介します。

ケケンタ

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

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

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




ケケンタ

ケケンタのITブログでは、WebアプリPHPLaravel)やWeb制作WordPressコーディング)について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください!


運動不足、気になっていませんか?

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです!

ボタンにカーソルを合わせるだけ
カウントダウンが始まるタイマーをご用意してみました!

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい!

タイマースタート

3:00

※運動不足だと連続3分で取り組んでもかなり息が切れます
(僕は加えて気分もちょっと悪くなりました……)
絶対にご無理の無い範囲でお取り組みください!


目次

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

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

検索フォーム(初期状態)

検索フォーム(初期表示)
ケケンタ

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

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

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

検索フォーム(ソースコード追加後)

検索フォーム(プレースホルダー書き換え後)

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

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

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

外観→テーマファイルエディタ

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

SWELLで外観→テーマファイルエディタをクリックした直後の様子

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

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

SWELLでのfunctions.phpの編集個所
ケケンタ

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

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

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

フィルターフックやアクションフックについて

WordPress独自の機能のひとつで、フックに対して処理を登録することが可能
今回はアイキャッチ画像を表示するためのフック(swell_searchform_placeholder)に対して「プレースホルダーを書き換える処理」を登録しました。

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

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

ケケンタ

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

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

SWELL記事一覧

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

この記事が気に入ったら
フォローしてね!

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次