ワードプレスのフックとは何?アクション/フィルターフックの基本を理解する

ワードプレスのフックとは何?アクション/フィルターフックの基本を理解する
2020年3月22日
この記事は最終更新から4年以上経過しています。内容が古くなっている可能性があります。

ワードプレスを使い始めて、初心者の方がすぐに引っかかるポイントの1つにアクションフックフィルターフックという言葉があります。馴染みのない方にとっては、意味がさっぱりわかりませんよね。
私もワードプレスを使い始めた頃は結構ググった気がしますが、英語のサイトばかり出てきて理解するのに苦労した覚えがあります。

そこで今回は、ワードプレスのアクションフックとフィルターフックについて、簡単に実際の例を挙げながら解説してみたいと思います。

フックとは?

フックと言われても、生粋の日本人の私などは、コート掛けかフック船長くらいしか思い浮かびません。なんなんでしょうか。

イメージとしてはワードプレスの独自関数内に、新たな関数を登録できるポイントが用意されているといった感じでしょうか。このポイントがフックです。

ワードプレスには独自関数がたくさんあります。テンプレート内で良く使われるものに以下のような関数があります。

  • the_title(投稿のタイトルを出力)
  • the_content(投稿の本文を出力)
  • the_date(投稿日を出力)

他にも無数にありますが、これらはすべてワードプレス独自の関数で、ワードプレスのコアファイルの中で定義されています。

これらの関数の挙動はワードプレスのコアファイルを開いて書き換えれば、好きなようにカスタマイズできますが、それではワードプレスが更新されてもアップデートできなくなってしまいますし、コアファイルを編集するのはちょっと怖いですよね。

こうした時に、関数内に用意されたフックを利用する事で、ワードプレスの独自関数の挙動をコアファイル外から安心・安全にカスタマイズする事が可能になります。

フックの種類と関連する関数

フックには2種類あります。用途は以下のような感じです。

アクションフック

フックの実行タイミングでアクションを追加できる。

例:echoするなど

アクションフックを作成する関数は、do_actionです。つまり、ワードプレス独自関数のソースコード内でdo_actionが使用されていれば、フックを利用してそこに処理を追加する事ができます。

アクションフックに関数を登録する関数は、add_actionです。

フィルターフック

フックから値を受け取り編集して戻せる。

例:テキストを変更するなど

フィルターフックを作成する関数は、apply_filtersです。こちらは、ワードプレス独自関数のソースコード内でapply_filtersが使用されていれば、そこで値を受け取って編集して返す事が可能だという事になります。

フィルターフックに関数を登録する関数は、add_filterとなります。

 

なんとなく、アクションフックとフィルターフックで出来る事がわかったかもしれませんが、実際に使用してみないとよくわかりませんよね。次からはそれぞれのフックを実際に使用してみます。

アクションフックの使用例

まずはアクションフックを実際に使用してみましょう。今回は例として、wp_head関数のソースコードを見てみましょう。wp_head関数はHTMLのhead内にtitleタグやscript・CSSの読み込みコードなどを出力してくれる関数です。

wp_head関数のソースコードは上のようになっています。

あれ?do_actionの書かれた最終行以外はコメントアウトですね。do_action関数のパラメータは、1つ目がフック名、2つ目以降はフックに登録した関数へ渡せる値です。つまり、wp_head関数はwp_headという名前のアクションフックを作成して、登録された関数を優先順位に従って実行するだけの関数なんですね。

そして、wp_headフックには、デフォルトの状態で既にたくさんの出力系の関数が登録されています。これによって、このwp_headという空っぽの関数を書くだけで、head内で必要な様々なコードが出力されるというわけです。

add_actionの記述例

では、wp_headフックを利用して、HTMLのhead内にコードを追加してみましょう。

上のコードを使用中のテーマのfunctions.phpに追記すると、head内にHTMLのコメントアウトが追加されます。

コメントアウトでは意味がありませんが、「全ページのhead内にコードを挿入してください」なんて場面って多いですよね。もちろんheader.phpに記述しても可能ですが、このようにフックを使用して追加することも可能です。

フィルターフックの使用例

フィルターフックの実例として、get_the_title関数のソースを見てみましょう。get_the_title関数は投稿のタイトルを取得する関数で、ページテンプレート内で頻繁に使用されるthe_title関数の中でも使用されています。the_titleはget_the_titleで取得した内容を出力(echo)する関数です。

説明に関係のない部分は割愛してしまいましたが、ワードプレスのコアファイルの中で、get_the_title関数は上のように定義されています。

最終行で作成されたタイトルをreturnするわけですが、本来フックなど必要なければ

で良いのですが、ここでapply_filtersが使用されていますね。$titleを編集できるようにフィルターフックが仕込まれています。

apply_filtersのパラメータは、1つ目がフック名、2つ目が編集できる値、3つ目以降はフックに登録した関数に渡して利用できる値です。3つ目以降のパラメータで関数に渡した値は利用はできますが、編集して返す事はできません。

となっていますので、the_titleという名前のフィルターフックが作成されています。2番目のパラメータが$titleですから、この値を編集できます。また、利用できる値として3番目のパラメータで$idが渡されていますので、フックに登録した関数内で$idが利用可能です。

add_filterの記述例

具体的な記述方法としては以下のように書きます。使用中のテーマのfunctions.phpに記述するのが良いでしょう。

思い切りシンプルな例ですが、上のようにフィルター関数を追加すると、get_the_titleで取得する全てのタイトルの末尾に投稿IDが付きます。

一応解説を付けておくと、まずadd_filterでフィルターフック”the_title”に、custom_titleという関数を登録します。3番目のパラメータの9999は実行される順序です。同じフックに複数の関数が登録された場合、この数字の小さいものから順に実行されます。初期値は10ですので、こんなに大きな値は必要ないかもしれませんが、最後に実行したい場合などは大きな値を入れておくと確実です。最後のパラメータの2は関数に渡すパラメータの数です。今回の場合、$titleと$idを渡しますので、2で良いですね。

そして、custom_title関数では$titleと$idを連結して返しているだけです。ここで、好きなように編集して返せばOKです。

アクションフックとフィルターフックでなんでもできるの?

これも初心者の方が疑問に思う点かもしれません。

ワードプレスでは非常にたくさんのフックが用意されていますので、かなりの事ができます。しかし、なんでも出来る訳ではありません。前述したように、目的に合ったフックが用意されている必要があるからです。

そして、カスタマイズに必ずフックを利用しなければいけない訳でもありません。テンプレートを編集した方が良いなら、そうすれば良いでしょう。

目的と状況に合わせて、都合のよい方法を選択しましょう。

最後に

いかがでしょうか。フックに関する疑問やわからない点がなんとなく解消されたでしょうか?

ややこしくなるので記事の中では触れませんでしたが、フックはワードプレスの独自関数だけでなく、テーマの独自関数の中に用意されている事もあります。カスタマイズ用にテーマ制作者が用意してくれているんですね。

個人的なカスタマイズではあまり意味がありませんが、オリジナルで作成した関数内でdo_actionやapply_filtersを使用すれば、フックを自作する事ももちろん可能です。

また、記事内で例に挙げたthe_titleのように、フック名と関数名が同じケースが多々あります。混同してしまいがちですが、それぞれ別だと覚えておきましょう。

 

関連のある記事

ワードプレスの管理画面メニューのラベルテキストを変更する方法

ワードプレスの管理画面メニューのラベルテキストを変更する方法

記事を読む

【初心者向け・目的別】ワードプレスでURLやパスを取得する関数まとめ

【初心者向け・目的別】ワードプレスでURLやパスを取得する関数まとめ

記事を読む

MW WP Formで郵便番号から住所を自動入力させる方法

MW WP Formで郵便番号から住所を自動入力させる方法

記事を読む

MW WP Formで動的にフォームのデフォルト値を設定する方法

MW WP Formで動的にフォームのデフォルト値を設定する方法

記事を読む

MW WP Formのセレクトボックス・チェックボックス・ラジオボタンを動的に設定する方法

記事を読む

ブロックエディタ(Gutenberg)の編集画面にeditor-style.cssを読み込ませる方法【WordPress】

ブロックエディタ(Gutenberg)の編集画面にeditor-style.cssを読み込ませる方法【WordPress】

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

目次へ