WordPress アクションフックの使い方を覚える

なんとなくアクションフックを使えるレベルの中の人が、WordPressのアクションフックの使い方を基本的なことから理解できるように覚え直そうとする投稿です。

アクションフックはWordPressテーマを自作するときや、既存のテーマをカスタマイズするときに便利なようですね。

確かにWordPress Codexを読んでいてもアクションフックを目にすることが多いので、独学でWordPressをカスタマイズしたりテーマ作成チャレンジを趣味とする私としては大切なテックニックの一つになると思えます。

1. WordPressのアクションフックの使い方で覚えたいこと
- 1.1. アクションフックとは何か？
- 1.2. WordPressでどのようにアクションフックするのか？
2. アクションフックに使用するadd_actionの使い方
- 2.1. アクションフック一覧からフック先を探す
- 2.2. add_actionと自作関数でアクションフックする使い方
3. 覚えたWordPressのアクションフックを試してみる
- 3.1. アクションフックでwp_footerにフックする
- 3.2. wp_enqueue_scriptsでstyle.cssをアクションフック
4. まとめ

WordPressのアクションフックの使い方で覚えたいこと

WordPressのアクションフックの使い方で覚えたいことは2つあります。

そもそもアクションフックとは何か？

そしてもう一つは

WordPressでどのようにアクションフックするのか？

アクションフックの概要的なことを覚えてから、実際にWordPressでアクションフックの使い方を試してみて覚えられるようにしたいと思います。

アクションフックとは何か？

WordPressのアクションフックはフックの一種です。

フックだけの場合で考えると、WordPressにはプラグインAPI というものがあります。

APIは「Application Programming Interface」と言います。

WordPressのAPIは、私たちが自由に変更できる仕組みの「フィルター」と、特定のタイミングで独自の処理をさせる事ができる仕組みの「アクション」の2通りの機能があります。

WordPressのアクションフックは、「特定のタイミングで独自の処理をさせる事ができる仕組みの機能」の方です。

簡単に言うと、WordPressが実行する処理のタイミングに、私たちが作成した処理を割り込ませることができるのがフックの一つの「アクションフック」です。

WordPressでどのようにアクションフックするのか？

「特定のタイミングで独自の処理をさせる事ができる仕組み」にする場合、WordPressでどのようにアクションフックするのか？

WordPressでアクションフックを使うには、「アクションが起こせるフックポイント」つまり引っ掛けるフックの場所が必要なのと、引っ掛けたフックで実行できるアクションの内容が必要です。

アクションフックとして処理を引っ掛けるにはWordPressの関数で「add_action」が必要です。

そして、引っ掛けたフックで実行できるアクションの内容に必要なのがユーザー関数の作成です。これはPHPでコードを書いて作成します。

アクションフックに使用するadd_actionの使い方

WordPressのアクションフックの使い方を覚えるための順番としては、add_actionの使い方を覚えてしまうのがいいかと思います。

add_actionはアクションフックとして処理を引っ掛けるときのWordPressの関数です。

WordPressの関数「add_action」の使い方で覚えておきたいのが、add_actionで渡せるパラメータの使い方です。

パラメータ(引数)は4つ渡すことができます。

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

add_action( 'フックさせたい場所の名前', '呼び出してほしい関数名', 優先順位(省略可能),引数の数(省略可能) );

$hook→フックの名前を指定します。
$function_to_add→フックしたタイミングで実行したい関数を指定します。
$priority→優先順位を整数で指定します。同じフック処理がある場合に数値が小さい方から実行されます。
$accepted_args→関数で使用する引数の数を指定します。指定できる引数の数はフックによって異なりますが、複数指定の場合でも1つ目の引数が本来の値で、２つ目以降の引数はフックされた時に利用する為の追加の要素にすぎません。

必ず必要なパラメータは、$hookと$function_to_addです。

$hookは「どのタイミングで」、$function_to_addは「何を実行してほしいか」を指定するために使います。

add_actionは$hookで指定されたラベルを見つけ、そのコードにフックして、「すでに実行している処理に加えて、$function_to_addの関数を実行し、これらの引数を渡します」というコードを伝えることができます。

add_actionとかfunction_to_addとかどんな意味だろうと思い、日本語圏の私は翻訳して見ました。そうすると英語で覚えるより意味が覚えやすかったです。

addの意味⇒追加
add_actionの意味⇒アクションを追加
function_to_addの意味⇒追加する関数

アクションフック一覧からフック先を探す

WordPressのアクションフックの使い方に必要なadd_actionのパラメータ(引数)で$hookの部分は、先述しましたが「どのタイミングにフックするか」を指定する部分です。

覚えておきたいことは、アクションフックの処理を実行できるタイミングは任意ではなく、WordPressがあらかじめ用意してくれているタイミングの中から、フックプログラムを作る人が選択すると言うことです。

このときの「フック処理の実行ポイント」を探すには、WordPressのアクションフック一覧で探すことができます。

例えば、アクションフック一覧にある「wp_head」でアクションフックするとします。

<?php add_action( wp_head, original_head ); ?>

WordPressテーマの<head></head> セクションにおいて、wp_head() 関数を呼び出したときに、上記add_actionのパラメータで渡すoriginal_headがwp_headが起動するタイミングで実行されます。

アクションフックの処理を実行できるタイミングは、それぞれどんなことをアクションフックしてテーマで処理させたいかで変わるので、その都度codexのアクションフック一覧を見ることをおすすめします。

プラグイン API/アクションフック一覧

codexのアクションフック一覧にはまだ記載がないWordPress5.2から新たに追加されたwp_body_openというフック関数で<body>の直後にコードを出力できるようになっています。そのうちアクションフック一覧に追加記載されるかとは思いますが、wp_body_openについての記事を書いていますので気になる方は読んでみてください。

WordPressのwp_body_openをbodyに記述してフックする

add_actionと自作関数でアクションフックする使い方

ここまでのアクションフックの使い方は、add_actionのパラメータの渡し方や指定方法あたりのことを覚えられるようにしましたが、次はアクションフックしたとき実行されるユーザー関数の使い方についてです。

アクションフックで実行する「関数を定義」すると言った方が好ましいのですかね。

//フック関数
function 呼び出してほしい関数名() {
　echo '呼び出してほしい関数名で出力したい内容';
}

add_action( 'フックさせたい場所の名前', '呼び出してほしい関数名' );

上のコードのようにPHPでfunctionを記述して「呼び出してほしい関数名」を決めます。関数名は任意ですが重複しない関数名にします。

そして、呼び出してほしい関数名で実行したい処理の内容をechoで記述して出力します。

echoではなくても色々な関数の作り方があるので、それぞれWordPressのアクションフックの作り方で何をフックしたいかによって、目的に必要な関数を組み立てられます。

アクションフックする関数を作成した「呼び出してほしい関数名」は、WordPressのadd_actionのパラメータ(引数)の中でも使います。

add_action( ‘フックさせたい場所の名前’, ‘呼び出してほしい関数名‘ );と書きます。

例えば「sample_hook」と言う関数名で関数を作成してwp_footerにアクションフックする場合は以下のような関数の作り方です。

function sample_hook() {
　echo '呼び出してほしい関数名で出力したい内容';

add_action( 'wp_footer', 'sample_hook' );

覚えたWordPressのアクションフックを試してみる

WordPressのアクションフックの使い方は、実際に試すのが一番覚えることの近道です。もしなんとなくしか覚えられていない部分があったとしても試して見ることで、分からなかった疑問を埋めることができます。

WordPressを使用していると目にすることが多い「wp_footer」と「wp_enqueue_script」の2つのアクションフックを使って関数の処理をしてみようと思います。

アクションフックでwp_footerにフックする

アクションフックを使い方をわかりやすく覚えられるように、簡単にechoでdiv要素をフッターに出力する関数を作り、アクションフックで処理できる使い方を試してみたいと思います。

//フッターにオリジナル関数追加テスト
function sample_footer() {
　echo '<div class="test">フッターにオリジナル関数をテスト</div>'."\n";
}
add_action('wp_footer', 'sample_footer');

関数名を「sample_footer」にして、アクションフックはadd_actionの引数でカッコの中の最初に(‘wp_footer’);を記述してアクションをフックするポイントとします。

さらにadd_actionの引数には、作成した関数の関数名の記述を加えて、(‘wp_footer’, ‘sample_footer’);とします。

上の作成した自作のアクションフックをテーマのfunctions.phpに記述します。

こうして記述したアクションフックの実行結果は以下の画像のようにフッターでマークアップしたHTMLが確認できます。

アクションフックで処理が成功しているのが分かりますね。

wp_enqueue_scriptsでstyle.cssをアクションフック

WordPressのwp_enqueue_scriptsにアクションフックする場合の使い方も試してコツを覚えたいと思います。アクションフックでstyle.cssを読み込みます。

function theme_encueue_styles() {
　wp_encueue_style( 'main-css',get_temlate_directory_url().'/style.css' );
}

add_action( 'wp_enqueue_scripts','theme_encueue_styles' );

WordPressのアクションフックの中で「wp_enqueue_scripts」は、スクリプトとスタイルをエンキューするときに適切なフックですのでwp_enqueue_scriptsをフック場所として使用します。

そしてアクションフックを実行して読み込まれるCSSファイルをwp_enqueue_styleでCSSファイルまでのファイルパス指定をします。

このような使い方をしたアクションフックは、wp_enqueue_scriptが登録されてるwp_head()がdo_action( ‘wp_head’ ) で wp_head アクションを実行し、<head></head>のセクションに指定したCSSファイルが読み込まれます。