ワードプレスのフックとは?アクションフックとフィルターフックの基本を紹介!

ワードプレスのフックとは?アクションフックとフィルターフックの基本を紹介! ワードプレス

今回は、ワードプレス(WordPress)の「アクションフック」と「フィルターフック」の基本について紹介します。

ワードプレスをカスタマイズする際に避けて通れないのが「フック」という仕組みです。
functions.phpでよく使う「add_action」や「add_filter」の意味を理解すれば、テーマやプラグインのカスタマイズの幅が大きく広がります。

当記事では、
フックの基本概念から、CSSやJavaScriptの読み込み、本文末への定型文追加といった具体的な実装例まで、初心者の方にもわかるように解説します。
「コードをどこに差し込めばシステムが動くのか」という制御の流れも解説していますので、ぜひ参考にしてください。

ワードプレスの「フック」とは

フック(Hook)とは、ワードプレスの処理の中に、独自のコードを差し込むための仕組みです。

ワードプレスでは、ブラウザからのアクセスを受けてからページが表示されるまでの間に、あらかじめ決まった順序でさまざまな処理が実行されています。
この処理の流れの中に「ここで独自の処理を差し込めますよ」というポイントが用意されており、これがフックです。

フックを釣り針にたとえると、ワードプレスの処理の流れ(川の流れ)に対して、自分のコード(エサ)を引っ掛ける(フックする)イメージです。

フックを使うことで、ワードプレス本体のファイルを直接編集することなく、機能の追加やカスタマイズが可能になります。

フックには「アクションフック」「フィルターフック」の2種類があります。

アクションフック
特定のタイミングで処理を追加する仕組み。
値を返す必要がなく、「何かを実行する」用途で使う。
フィルターフック
特定のデータを加工・変更する仕組み。
受け取った値を加工して「return」で返す。

フックのコードはどこに書くのか

フックのコードを記述する場所は、基本的に以下のいずれかです。

フックのコードを書く場所
  • テーマのfunctions.php:テーマのカスタマイズで最もよく使われる場所
  • プラグインファイル:独自のプラグインを作成する場合
【注意点】
テンプレートファイル(header.phpやsingle.phpなど)が読み込まれる時点では、すでに多くのフックが実行済みです。
そのため、フックのコードは処理の初期段階で読み込まれるfunctions.phpに記述する必要があります。

また、functions.phpを編集する際は、テーマの更新で上書きされないよう子テーマで作業するようにしましょう。

ワードプレスの処理の流れとフックのタイミング

ワードプレスがページを表示するまでの処理の流れと、主要なフックが実行されるタイミングを理解しておくことが大切です。

①、ワードプレス本体の読み込み開始

まず、wp-config.php → wp-settings.phpの順にコアファイルが読み込まれます。
この段階で、プラグインやテーマのfunctions.phpが読み込まれます。

②、init(初期化)

ワードプレスの初期化が完了するタイミングです。
カスタム投稿タイプの登録などはこのフックで行います。

③、wp_enqueue_scripts(CSS・JSの読み込み)

フロントエンド用のCSSやJavaScriptファイルを登録・読み込むタイミングです。

④、wp_head(headタグ内の出力)

HTMLのheadタグの閉じタグ直前に処理を追加するタイミングです。
メタタグや解析タグの追加などに使います。

⑤、the_content(本文の出力)

投稿本文が出力される際にデータを加工するタイミングです(フィルターフック)。
本文の前後に定型文を追加するなどの用途で使います。

⑥、wp_footer(フッター出力)

HTMLの閉じbodyタグ直前に処理を追加するタイミングです。

このように、ワードプレスには処理の各段階にフックが用意されています。
「自分がやりたい処理をどのタイミングで実行すべきか」を考え、適切なフックを選ぶことがカスタマイズの第一歩です。

アクションフックの基本と使い方

アクションフックは、特定のタイミングで独自の処理を追加するための仕組みです。
値を返す必要はなく、「何かの処理を実行する」ことが目的です。

add_action()の基本構文

アクションフックに処理を登録するには、add_action()関数を使います。

add_action( ‘フック名’, ‘実行する関数名’, 優先度, 引数の数 );

  • 第1引数(フック名):処理を差し込むタイミングを指定
  • 第2引数(関数名):そのタイミングで実行したい関数を指定
  • 第3引数(優先度):同じフックに複数の関数が登録されている場合の実行順序(デフォルト:10、数字が小さいほど先に実行)
  • 第4引数(引数の数):フックから受け取る引数の数(デフォルト:1)

具体例①:CSSとJavaScriptを読み込む(wp_enqueue_scripts)

ワードプレスでCSSやJavaScriptを読み込む際は、header.phpに直接linkタグやscriptタグを書くのではなく、functions.phpでwp_enqueue_scriptsフックを使って読み込むことが推奨されています。

■ CSSファイルを読み込む例

function my_enqueue_styles() {
  wp_enqueue_style(
    ‘my-style’,
    get_stylesheet_directory_uri() . ‘/css/custom.css’,
    array(),
    ‘1.0’
  );
}
add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_styles’ );

■ JavaScriptファイルを読み込む例

function my_enqueue_scripts() {
  wp_enqueue_script(
    ‘my-script’,
    get_stylesheet_directory_uri() . ‘/js/custom.js’,
    array( ‘jquery’ ),
    ‘1.0’,
    true
  );
}
add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_scripts’ );

【注意】
「wp_enqueue_scripts」はフック名(タイミングを指定するもの)で、「wp_enqueue_script()」はJavaScriptをキューに登録する関数です。
名前がほとんど同じなので混同しないよう注意してください。

また、wp_enqueue_scriptsフックはフロントエンドのみで動作します。
管理画面でCSSやJavaScriptを読み込みたい場合は「admin_enqueue_scripts」フックを使ってください。

wp_enqueue_style()やwp_enqueue_script()を使って読み込むメリットは、CSSやJavaScriptの重複読み込みを自動的に回避できることです。
また、依存関係(読み込み順)を管理できることです。

具体例②:headタグ内にコードを追加する(wp_head)

Googleアナリティクスのトラッキングコードなど、headタグ内にコードを追加したい場合は、wp_headフックを使います。

function my_add_head_code() {
  echo ‘<!– ここにheadタグ内に追加したいコード –>’;
}
add_action( ‘wp_head’, ‘my_add_head_code’ );

具体例③:フッターにコードを追加する(wp_footer)

フッター(bodyタグの閉じタグ直前)にスクリプトなどを追加したい場合は、wp_footerフックを使います。

function my_add_footer_code() {
  echo ‘<!– ここにフッターに追加したいコード –>’;
}
add_action( ‘wp_footer’, ‘my_add_footer_code’ );

具体例④:カスタム投稿タイプを登録する(init)

カスタム投稿タイプの登録は、ワードプレスの初期化が完了するタイミングであるinitフックで行います。

function my_custom_post_type() {
  register_post_type( ‘news’, array(
    ‘labels’ => array( ‘name’ => ‘お知らせ’ ),
    ‘public’ => true,
    ‘has_archive’ => true,
  ));
}
add_action( ‘init’, ‘my_custom_post_type’ );

フィルターフックの基本と使い方

フィルターフックは、ワードプレスの処理の途中でデータを加工・変更するための仕組みです。
アクションフックとの最大の違いは、値を受け取り、加工して「return」で返すという点です。

add_filter()の基本構文

フィルターフックに処理を登録するには、add_filter() 関数を使います。

add_filter( ‘フック名’, ‘実行する関数名’, 優先度, 引数の数 );

構文はadd_action()と同じですが、登録する関数は必ず値を「return」で返す必要があります。
returnを書き忘れると、データが空になり表示が消えてしまうので注意してください。

具体例①:本文の最後に定型文を追加する(the_content)

全ての投稿記事の本文の最後に、定型文やCTA(行動喚起)を自動的に追加するにはthe_contentフィルターフックを使います。

function my_add_content_after( $content ) {
  if ( is_single() ) {
    $content .= ‘<div class=”after-content”>’;
    $content .= ‘<p>最後までお読みいただき、ありがとうございます。</p>’;
    $content .= ‘</div>’;
  }
  return $content;
}
add_filter( ‘the_content’, ‘my_add_content_after’ );

上記のコードの流れを解説します。

1. ワードプレスが投稿本文を出力しようとするとき、the_contentフィルターが適用されます。
2. 登録したmy_add_content_after関数に本文データ($content)が渡されます。
3. is_single()で投稿記事ページのみに限定し、$contentの末尾に定型文を追加します。
4. 加工した$contentをreturnで返すと、ブラウザには定型文が追加された本文が表示されます。

具体例②:抜粋の「続きを読む」テキストを変更する(excerpt_more)

ワードプレスが自動生成する抜粋文の末尾に表示される「[…]」を変更するには、excerpt_moreフィルターフックを使います。

function my_excerpt_more( $more ) {
  return ‘… <a href=”‘ . get_permalink() . ‘”>続きを読む</a>’;
}
add_filter( ‘excerpt_more’, ‘my_excerpt_more’ );

具体例③:投稿タイトルを加工する(the_title)

投稿タイトルの表示を加工したい場合には、the_titleフィルターフックを使います。

function my_custom_title( $title ) {
  if ( is_single() ) {
    $title = ‘【公式】’ . $title;
  }
  return $title;
}
add_filter( ‘the_title’, ‘my_custom_title’ );
【フィルターフックの最重要ルール】
フィルターフックに登録する関数では、必ず「return」で値を返してください。
returnを書き忘れると、そのデータ(タイトルや本文など)が空になり、画面上から消えてしまいます。
これはフック関連で最もよくあるミスの一つです。

アクションフックとフィルターフックの違いまとめ

アクションフック
  • 登録関数:add_action()
  • 目的:処理を追加する
  • 返り値:不要
  • 用途例:CSS/JSの読み込み、headタグへのコード追加、カスタム投稿タイプの登録
フィルターフック
  • 登録関数:add_filter()
  • 目的:データを加工する
  • 返り値:必須(return)
  • 用途例:本文への定型文追加、タイトルの加工、抜粋テキストの変更
迷ったときは、
・何かを実行したい → add_action
・何かを加工したい → add_filter
と覚えましょう。

よく使うフック一覧(チートシート)

実際の開発でよく使うアクションフックとフィルターフックをまとめました。

よく使うアクションフック

  • init:ワードプレスの初期化完了後。カスタム投稿タイプの登録など。
  • wp_enqueue_scripts:フロントエンドのCSS・JSを読み込むタイミング。
  • admin_enqueue_scripts:管理画面のCSS・JSを読み込むタイミング。
  • wp_head:headタグの閉じタグ直前。メタタグや解析タグの追加に。
  • wp_footer:bodyタグの閉じタグ直前。スクリプトの追加に。
  • save_post:投稿が保存されたタイミング。保存時の追加処理に。
  • after_setup_theme:テーマのセットアップ直後。テーマサポートの追加に。
  • widgets_init:ウィジェットの初期化タイミング。サイドバーの登録に。

よく使うフィルターフック

  • the_content:投稿本文の出力時。本文の加工・追記に。
  • the_title:投稿タイトルの出力時。タイトルの加工に。
  • excerpt_more:抜粋の「続きを読む」テキストの変更に。
  • excerpt_length:抜粋文の文字数を変更するのに。
  • document_title_separator:タイトルタグのセパレータ変更に。
  • body_class:bodyタグに独自のクラスを追加するのに。
  • the_excerpt:抜粋文の出力時。抜粋全体の加工に。
  • wp_nav_menu_items:ナビメニューの項目を動的に変更するのに。

フック利用時の注意点とよくあるエラー

フィルターフックで「return」を忘れる

フィルターフックで最も多いミスが、return文の書き忘れです。
returnを書かないと、加工前のデータ(本文やタイトルなど)がnull(空)になり、画面上に何も表示されなくなります。

フィルターフックの関数を書いたら、必ずreturnがあるか確認する習慣をつけましょう。

優先度の設定ミス

同じフックに複数の関数が登録されている場合、第3引数の優先度で実行順序が決まります。

デフォルトの優先度は10です。
他のプラグインやテーマの処理より後に実行したい場合は、優先度の数字を大きく(例:20や99)、先に実行したい場合は小さく(例:1や5)設定しましょう。

プラグインやテーマと処理が競合する場合は、この優先度の調整で解決できることが多いです。

フック名のスペルミス

フック名を間違えてもエラーは表示されません。
ワードプレスは存在しないフック名でもエラーを出さずに無視するため、コードが動かないのにエラーも出ないという状況になります。

コードが思い通りに動かない場合は、まずフック名のスペルが正しいか確認してください。
公式のフックリファレンス(WordPress Developer Resources)で正確なフック名を調べることをおすすめします。

画面が真っ白になった場合の対処

functions.phpにコードを追加した後に画面が真っ白になった場合は、PHPの構文エラーが発生しています。

【対処法】

  • FTPクライアントでサーバーに接続し、functions.phpを開いて追加したコードを削除する
  • wp-config.php に「define( ‘WP_DEBUG’, true );」を追加してエラー内容を確認する
  • コードを追加する前に必ずバックアップを取っておく

独自フックの作成(do_action と apply_filters)

ワードプレスの標準フックだけでなく、自分で独自のフックを作成することもできます。
テーマやプラグインを開発する際に、他の開発者がカスタマイズできるポイントを提供する場合に役立ちます。

独自のアクションフックを作る

■ フックポイントの設置(テンプレートファイルなど)

do_action( ‘my_custom_action’ );

■ フックへの処理登録(functions.php)

function my_custom_function() {
  echo ‘<p>独自のアクションフックで追加されたコンテンツ</p>’;
}
add_action( ‘my_custom_action’, ‘my_custom_function’ );

独自のフィルターフックを作る

■ フックポイントの設置

$text = apply_filters( ‘my_custom_filter’, ‘デフォルトのテキスト’ );
echo $text;

■ フックへの処理登録(functions.php)

function my_modify_text( $text ) {
  return $text . ‘(加工済み)’;
}
add_filter( ‘my_custom_filter’, ‘my_modify_text’ );

独自フックは、テーマやプラグインの拡張性を高めるための上級テクニックです。
まずは標準のフックを使いこなせるようになってから、独自フックに挑戦してみましょう。

最後に

今回は、ワードプレスの「アクションフック」と「フィルターフック」の基本について紹介しました。

アクションフックは「add_action()で特定のタイミングに処理を追加する」仕組み、
フィルターフックは「add_filter()でデータを加工して返す」仕組みです。

フックを理解すれば、ワードプレスのコアファイルを編集することなく、
・CSSやJavaScriptの読み込み
・本文への定型文追加
・タイトルの加工
など、さまざまなカスタマイズが安全に行えます。

まずは、当記事で紹介した具体例をfunctions.phpにコピーして試してみることから始めてみてください。
当記事が、ワードプレスのフックを理解するきっかけになれば幸いです。

コメント

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