WordPress アクションフック / フィルターフックの意味と使い方

WordPress

WordPressフックとは?アクションフック・フィルターフックの使い方

2022年9月8日

今回はWordPressのアクションフック・フィルターフックの意味と使い方について紹介します。

WordPressのフックとは、WordPressサイトが表示されるまでの過程で、独自の処理(関数)を挿入することができる仕組み・トリガーです。

アクションフックやフィルターフックを理解すると、WordPressのテーマ自作する人もカスタマイズする人も圧倒的にやりやすくなるので覚えておきましょう。

WordPressのフックのイメージ
 

 

WordPressのフックとは?意味と概要

WordPressのフックとは、WordPressサイトが表示されるまでの過程で、独自の処理(関数)を挿入することができる仕組み・トリガーのことを言います。

PCやスマホからWordPressサイトのURLをクリックしてからサイト表示されるまでの間、WordPress側ではいくつかのタイミングごとに処理の流れが決まっており、その様々なタイミングでフックが用意されています。

WordPressのフックのイメージ
 

この特定のタイミングに対して独自の関数を登録することで、独自の処理を割り込ませることができます。

なお、フックにはアクションフックとフィルターフックの2種類があります。

アクションフック 特定のタイミングで独自の処理を追加するためのフック
フィルターフック WordPress が出力するテキスト関連の内容を変更するためのフック

それぞれの詳しい仕組みや使い方、実際の使用例については以下で詳しく解説していきます。

 

 

アクションフックの仕組み・使い方

それではまずは、アクションフックの仕組みや、アクションフックを使って特定のタイミングで独自の処理を追加する方法について紹介します。

add_action()関数でアクションフックの処理を実行する

WordPressでは予め特定のタイミングで様々なアクションフックが設定されています。

これらのアクションフックに対して独自の処理を登録することで、任意のタイミングで独自処理を実行することができます。処理の登録にはadd_action()関数を使用します。

add_action関数の使い方を解説している図

 

例えばWordPressでは、headタグの直前に「wp_head」という名前のアクションフックが準備されています。

そのため、以下のように記述してあげることで、headタグの閉じタグ直前に任意のタグを追加してあげることが可能です。

wp_headアクションフックを使用してheadタグ閉じタグ直前にコメントを挿入している例

上の例では、wp_headアクションフックを使用して、headタグの閉じタグ直前に「こんにちは!」といったコメントを追加しています。

wp_headアクションフックを利用すると、headタグに任意の文字列やタグを挿入できるので、アクセス解析タグや特定のファイルの読み込みタグなどを追加するのによく使用されます。

なお、第3引数の99は省略可能(初期値は10)です。WordPress本体があらかじめ登録されているアクションもあるので、不用意に1や2など早い順番にしない方が無難です。

(補足)関数の詳細

wp_head()にWordPress本体側であらかじめ登録されているアクションはwp-includes/default-filters.phpに登録されています。
/6.0.2/src/wp-includes/default-filters.php
default-filters.php in tags/6.0.2/src/wp-includes – WordPress Tracより引用
 

また、wp_head()やwp_footerなどの本体となる関数は、wp-includes/general-template.phpに登録されています。

/6.0.2/src/wp-includes/general-template.php
general-template.php in tags/6.0.2/src/wp-includes – WordPress Tracより引用

 

do_action()関数でフックを定義することも可能

なお、アクションフックは自分で任意の箇所に設置することも可能で、その際はdo_action()関数を使用します。

do_action関数の使い方を解説している図

 

例えば、以下のテストサイトのトップページ「お知らせ」セクションの前に、do_action()を使用して、「original_hook」という名前のアクションフックを設置したとします。

■テーマ側で「original_hook」という名前のアクションフックを設置している例
do_action()関数を使用して「original_hook」という名前のアクションフックを設置している例
 

■アクションフック解説用に準備したテストサイト
アクションフック解説用に準備したテストサイト
 

あとは、functions.phpなどでadd_action()関数を使って独自の処理を登録することができるので、以下のように記述することで、トップページ「お知らせ」セクションの前に独自のコードを追加することができます。

original_hookに対して独自の処理を追加している例

実際には自分でdo_action()を使用してアクションフックを設置することはないかもしれませんが、様々なテーマではこの仕組みを利用して、テーマ独自のアクションフックを設置していることがあります。

そのため、興味がある方はご自身の利用されているテーマで準備されているアクションフック一覧を調べてみると良いかと思います。

 

よく使われるアクションフックの種類

アクションフックの仕組み・使い方が分かったところで、ここではよく使われるアクションフックの種類を紹介していきます。以下の表では各アクションフックの実行タイミングと使用目的をまとめました。

wp_head wp_head関数が呼び出されるときに実行。head要素内に何かを追加したい場合に使用される。
wp_enqueue_scripts wp_head関数が呼び出されるときに実行。独自のCSSファイルやJavaScriptファイルを読み込みたいときなどに使用される。
pre_get_posts WordPressがクエリを取得する前に実行。ページ毎に表示される投稿数を変更したい場合に使用される。
wp_footer wp_footer関数が呼び出されるときに実行。bodyタグの閉じタグ直前に要素を追加することができる。

wp_headはすでに紹介しているので、以下ではwp_enqueue_scripts以降のアクションフックを詳しく解説していきます。

 

wp_enque_scripts:独自のCSSファイルやJavaScriptファイルを読み込む

wp_enque_scriptsはwp_head関数が呼び出されたときに実行されるアクションフックで、独自のCSSファイルやJavaScriptファイルを読み込みたいときなどに使用されます。

ファイルを読み込むには以下のようにwp_enqueue_style()関数やwp_enqueue_script()関数をwp_enque_scriptsにフックさせます。

(※)get_template_directory_uri はテーマフォルダまでのパスを返す関数です。 WordPressでパスを記載する時によく使いますので、覚えておくと便利です。
 

上記の引数の意味は下記のとおりです。

読み込み関数の引数を解説します。

  • $handle・・・スクリプトを区別するための任意の名称(必須)
  • $src ・・・スクリプトのパス(必須)
  • $deps ・・・スクリプトの読み込み順を配列で指定(依存関係がある場合に指定)
  • $ver ・・・スクリプトのバージョン指定
  • $in_footer ・・・スクリプトの読み込み位置を指定。指定方法はtrueでbodyタグの終了直前、falseでheadタグの終了直前。デフォルトはfalse。

(参考)WordPressでjQueryを利用する際の書き方と注意点
 

wp_enque_scriptsを使用すると独自のCSSファイルやJSファイルを読み込むことができる
 

前述のwp_head()でもheadタグ内にjsファイルやcssファイルを読み込ませることは可能ですが、wp_enqueue_script()は依存関係ファイルを指定することができ、より細かい動作制御ができます。そのため、wp_enqueue_script(xxxx)で読み込むことが一般的です。
 

なお、wp_enqueue_script()関数とwp_enqueue_scriptアクションフックは別物なので混同しないように気をつけましょう。

 

pre_get_posts:クエリ取得前に実行されるアクションフック

pre_get_postsはWordPressがクエリを取得する前に実行されるアクションフックです。たとえば、ページ毎に表示される投稿数を変更したい場合などに使用されます。
 

 
pre_get_postsを利用するとトップページのみ投稿数を変更することができる
 
上の例では、トップページだけ表示される投稿数を3つに変更しています。
 

wp_footer:bodyタグの閉じタグ直前に要素を追加することができる

wp_footerはwp_footer関数が呼び出されるときに実行され、bodyタグ直前に要素を追加することができます。

wp_footerを使用するとbodyタグの閉じタグ直前に要素を追加することができる

他にもフックは何十種類も用意されています。フックの一覧は「プラグイン API/アクションフック一覧/quick edit custom box」をご参照ください。
 

(注意)フックの種類によっては条件分岐が効かないことがある

フックの種類によっては条件分岐が効かないこともあります

is_single()やis_page()などで条件分岐して処理を実行したい場合に、アクションフックのタイミングが早すぎると条件分岐が効きません。

 

下記の検証結果が参考になりますが、条件分岐タグが正常にページ種別を判定できるようになるフックのタイミングは、parse_queryからだそうです。

条件分岐タグ(is_home()とかis_page()とか)がセットされて正常にページ種別を判定できるタイミングについても調べてみると、今回調べたフックの中ではフロント側ではparse_queryからだということがわかりました。

ただ、parse_queryは複数回実行されてしまう上にカスタマイザーのプレビュー画面では挙動が異なるので、条件分岐タグを定数化しておく場合などはwpアクションあたりでやっておくのが無難かなと思います。

引用:WordPressの主要なアクションフックが実行される順番を検証してみた

 

以前、is_page()やis_home()などで条件分岐しようとしても条件分岐が効かない!なんで?とハマったことがありましたが、フックの種類を変更したらうまくいくようになりました。

 

フィルターフックの仕組み・使い方

次にフィルターフックの仕組み・使い方を紹介していきます。

フィルターフックも基本的な仕組みはアクションフックと同じですが、フィルターフックではWordPressが出力するテキスト関連の内容を変更することができます。

add_filter()関数でフィルターフックの処理を実行する

独自の処理(関数)をフィルターフックに登録するにはadd_filter()関数を使用します。

add_filter関数の使い方を解説している図
 

 

例えば、固定ページのタイトルはデフォルトで「ページタイトル - サイト名」となっています。

固定ページのタイトルはデフォルトで「ページタイトル - サイト名」となっている
 

この区切り線「-」を「|」に変更してあげたい場合は、document_title_separatorフィルターフックを使用して、以下のように記述してあげれば、「ページタイトル | サイト名」といった表記に変更してあげることが可能です。

 

固定ページのタイトルの表記が「ページタイトル | サイト名」に変更されている
 

add_filter()で追加している関数の中身のコードについては詳しく解説しませんが、ざっくりフィルターフックを使えば「WordPress が出力するテキスト関連の内容を変更できるんだな」と考えれば良いかと思います。

 

よく使用されるフィルターフックの種類

フィルターフックの仕組み・使い方が分かったら、アクションフックの時と同様、よく使用されるフィルターフックの種類を紹介します。

document_title_separator タイトルのセパレーターを変更するのに使用される。
excerpt_length 抜粋の文字数を変更するのに使用される。
excerpt_more 抜粋の後に表示される省略記号を変更するのに使用される。

以下ではすでに紹介済みのdocument_title_separator以外のフィルターフックについて詳しく見ていきましょう。

 

excerpt_length:抜粋の文字数を変更するのに使用する

excerpt_lengthを使用すると抜粋の文字数を変更することができます。
 

 

excerpt_mblengthフィルターフックを使用して抜粋の文字数を変更している例
 

第3引数999について

なお、上の例でadd_filter()の第3引数であるフックの優先順位を「999」としていますが、excerpt_lengthではデフォルトのWordPressの処理が設定を上書きしないように、999のような大きめの値を入れて優先順位を低めにしています。

Make sure to set the priority correctly, such as 999, otherwise the default WordPress filter on this function will run last and override what you set here.
excerpt_length | Hook | WordPress Developer Resourcesより引用

 

なお、日本語の場合は、抜粋の文字数をうまく機能させるには「WP Multibyte Patch」プラグインをインストール・有効化させておく必要があります。

(注) 日本語のように語句の間を半角スペースで区切らない言語では「55単語」を判定できないため、抜粋できずに本文のほとんどが出力されてしまうことがあります。

WordPress 日本語版では、この問題を含むマルチバイト関連の問題に対処するために WP Multibyte Patch プラグインを同梱しています。このプラグインを使用すると、110文字まで(設定により変更可)を抜粋文として出力できます。

引用:テンプレートタグ/the excerpt - WordPress Codex 日本語版

(参考)【導入推奨WP Multibyte Patch】日本語環境強化プラグイン

 

excerpt_more:抜粋の後に表示される省略記号を変更する

excerpt_moreを使用すると抜粋の後に表示される省略記号「...」を変更することができます。

excerpt_moreを使用して抜粋の後に表示される省略記号を変更している例

上の例では省略記号ではなく、【続きを読む】といった形に変更しています。

 

フックを使用するメリット・重要性

フックを利用するとテーマのテンプレートファイル(header.phpやfooter.phpなど)を直接編集することなく、独自の処理を加えられるので保守メンテナンス性が向上します。

たとえば、子テーマを利用時にテンプレートファイル(header.phpやfooter.php)を直接編集するよりも、functions.phpでフックを利用してカスタマイズした方がメンテナンス性が向上します。

たとえば、特定のjavascriptを読み込むために子テーマでfooter.phpや直接編集すると、親テーマがバージョンアップした際に子テーマのfooter.phpとソースコードの差が出てくるため、レイアウト崩れなどがよく起きます。
親テーマと子テーマのバージョンの違いによる 不整合発生のリスクについて

一方、wp_enqueue_scripts()などのフックを利用してサイトをカスタマイズしていると、テーマのバージョンアップなどでfooter.phpやheader.phpの構造がかわっても影響されないにくいため、メンテナンス性を高めることができます。

 
(関連記事)WordPressで子テーマを作成してカスタマイズする方法

 

 

まとめ

まとめです。今回はWordPressのアクションフック・フィルターフックの意味と使い方について紹介しました。

WordPressのフックとは、WordPressサイトが表示されるまでの過程で、独自の処理(関数)を挿入することができる仕組み・トリガーです。

WordPressのフックのイメージ
 

アクションフックやフィルターフックを理解すると、WordPressのテーマ自作する人もカスタマイズする人も圧倒的にやりやすくなるので覚えておきましょう。

今回は以上になります。最後までご覧いただき、ありがとうございました。

 


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPress