Vektor Passport ならABテストプラグインが無料で使える！

詳しくはこちら
製品のご購入
English

Vektor Passport ならABテストプラグインが無料で使える！

詳しくはこちら
製品のご購入
English

できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！

石川栄和

, ,
  1. HOME
  2. Staff Blog
  3. WordPress
  4. できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！

WordPressの拡張性を高める機能にアクションフックとフィルターフックがあります。これがあったから世界中で使われる事になったと言っても良いくらいWordPressがWordPressたらしめる最も重要な特徴の一つです。

今回はまずはアクションフックについて解説していきます。

主にデザイナー向けのアクションフックの使い方の紹介になっています。

この記事は「Vektor WordPress Solutions Advent Calendar 2020」の12月15日の記事になります。

この記事はPHPの基本がわかる方を前提としています。よくわからない方はまず下記の記事を確認ください。

できる！WordPressカスタマイズ #02 最低限知っておきたいPHP超入門
目次

アクションフックとは

WordPress本体やテーマ、プラグインなど、アクションフックが用意されている場所で任意のPHPが実行できるしくみです。

アクションフックが扱えるとできる事

「任意のPHPが実行できる」と聞くと非プログラマには無縁の感じるかもしれませんが、テーマファイルを改変する事なく任意のHTMLを追加する事ができます。

「アクションフックが用意されている場所」というのは、PHPのプログラムの中で do_action( 'フック名' ); という記述がある場所です。

<?php do_action( 'フック名' ); ?>

アクションフックの例

とりあえず意味がわからないと思うので代表的な例を見てみましょう。

wp_body_open

WordPress公式ディレクトリに登録されているテーマであればおそらくheader.phpがあり、その中で <body> タグのすぐ下あたりに以下のような記述があります。

<?php
if ( function_exists( 'wp_body_open' ) ) {
	wp_body_open();
} else {
	do_action( 'wp_body_open' );
}
?>

do_action( 'wp_body_open' ); という記述があるのがわかると思います。ちなみに上に wp_body_open(); という関数がありますが、この関数の中に書かれてるのは do_action( 'wp_body_open' ); だけです。

WordPressでは例えばhtmlの<head>タグの中にアクセス解析用のタグを埋め込みたい時に、プラグインなどで簡単に設置する事ができます。テーマファイルの<head>の部分のコードをカスタマイズしなくても追加できるのを不思議に思った事はありませんか？

テーマファイルの header.php を見てみましょう。多くのテーマにおいて、header.php には <?php wp_head(); ?> という記述があるのが確認できると思います。

この wp_head() という関数の中身は以下のようになっています。

function wp_head() {
    /**
     * Prints scripts or data in the head tag on the front end.
     *
     * @since 1.5.0
     */
    do_action( 'wp_head' );
}

do_action( ‘wp_head’ ); という記述が確認できます。これがアクションフックです。

とりあえず追加してみよう

子テーマのfunctions.phpなどに以下のように書いてみてください。

function example01(){
    echo '<!-- [ アクセス解析タグ ] -->';
}
add_action( 'wp_head', 'example01' );

実際のページを開いて、出力されているHTMLを確認してみてください。

<head>タグに書いてある <?php wp_head(); ?> のタイミングで出力されているのが確認できると思います。

この仕組を使う事でテーマファイルを改変する事なくプラグインなどから様々なカスタマイズが行えます。

アクションフックの基本の書式

アクションフックは今までの例で出てきたように、下記の書式で書く事ができます。

function ■実行する関数名■(){
    // ●実行する処理内容●;
}
add_action( '★フック名★', '■実行する関数名■' );

本当は実行の優先順を指定したりする事ができますが、それについては別途後半で説明します。

利用例

以下はhead内にOGタグのタイトルタグを出力する例です。

function example02(){
    echo '<!-- [ OGタイトル ] -->'."\n";
    echo '<meta property="og:title" content="アクションフックでOGタイトルを出力する練習" />'."\n";
    echo '<!-- [ /OGタイトル ] -->'."\n";
}
add_action('wp_head', 'example02');

これも実際に 子テーマの functions.php などに書いて、実際のページのHTMLに反映されているか見てみましょう。

アクションフックはどういう場面で使うの？※デザイナー向け

テーマなど直接改変したくないとき

WordPressには「子テーマ」という便利なしくみがあり、改変したいテーマファイルを子テーマに複製すればそちらを優先して実行してくれます。しかしながらほんの一部分改変したいだけなのにファイルごと変更してしまうと、テーマのアップデートで影響を受けやすくなってしまいます。そんな場面でアクションフックはとても有効です。

フックで対応できるならその方が影響範囲が少なくてすむ

例えば以下のようなheader.phpがあったとします。

もとのテーマファイル
<html>
<head>
<?php wp_head();?>
</head>
<body>
<header class="header">
ロゴ と メニュー
</header>
子テーマで改変

wp_head(); の下に og:title のタグを付けたかったために header.php を子テーマ化してしまったとします。

<html>
<head>
<?php wp_head();?>
<meta property="og:title" content="アクションフックでOGタイトルを出力する練習" />
</head>
<body>
<header class="header">
ロゴ と メニュー
</header>
親テーマのheader.phpがバージョンアップで改変

親テーマのheader.phpが機能強化のために以下のように改変になったとします。

<html>
<head>
<?php wp_head();?>
</head>
<body>
<header class="header">
キャッチコピー
ロゴ と メニュー 
キャンペーンテキスト
</header>

はい…。親テーマの header.php は進化・仕様変更したのに、子テーマで header.php を持っているとそれが読み込まれてしまうので『追加された機能が使えない』『表示が崩れる』などの問題が発生します。

そのため、親テーマのどこが変わったか、更新情報を細かくチェックする必要があります。とても大変で面倒です。

なので、先に紹介した通り、wp_head() についてアクションフックを使って出力すれば、header.php を改変する事なく任意のコードが追加できます。

簡単なHTML挿入実用例

例１. サイト上部にキャンペーンテキストを表示する

サイトの一番上にキャンペーン情報など一行のお知らせを表示させてみましょう。

function my_campaign_text(){
    echo '<div class="my-campaign-text"><div class="container">Lightning G3 近日リリース！</div></div>';
}
add_action( 'wp_body_open', 'my_campaign_text' );

ソースコード中で一旦PHPを閉じてしまえば素のHTMLで書く事もできます。PHPが苦手な人はこちらでも動作します。

function my_campaign_text_2(){ ?>
    <div class="my-campaign-text">
        <div class="container">
            Lightning G3 近日リリース！
        </div>
    </div>
<?php }
add_action( 'wp_body_open', 'my_campaign_text_2' );

例2. サイト上部にサイトのキャッチコピーを表示する

function my_site_catch(){ ?>
    <div class="my-campaign-text">
        <div class="container">
            <?php echo esc_html( get_bloginfo( 'description' ) ); ?>
        </div>
    </div>
<?php }
add_action( 'wp_body_open', 'my_site_catch' );

アクションフックってどこにあんの？

テーマやプラグイン内で do_action( で検索する

テーマやプラグインによってはカスタマイズしやすいようにファイル内にアクションフックが沢山用意されています。例えば改変したいテーマのテンプレートファイル（index.phpなど）がある場合は、そのファイルを開いて do_action( で検索してみましょう。

例えば WordPressテーマ Lightning ではテーマファイル内に do_action() がいろいろ置かれているので、必要に応じてHTMLを挿入できます。

以下ではヘッダーの直後にHTMLを追加しています。

function my_lightning_header_after(){ ?>
   <div class="text-center">do_action の書かれた場所に好きなようにHTMLを挿入できます</div>
<?php }
// 現行版
add_action( 'lightning_header_after', 'my_lightning_header_after' );
// G3版以降の場合
add_action( 'lightning_site_header_after', 'my_lightning_header_after' );

このカスタマイズ方法は非常に有効なので、今まで一度もやった事がない方は、ご利用中のテーマのファイルから do_action( の記載を探してみて是非一度やってみてください。

「アクションフック 一覧」でGoogle先生に聞いてみる。

アクションフックは見た目のHTML上だけでなく、例えば「テーマ一式が読み込まれた時」や「投稿が保存された時」など様々なタイミングがあります。不思議に思った事はGoogle先生に聞いてみましょう。

聞いてみると以下のページを案内してくれると思います。

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

アクションフックの優先順位

例えば wp_head() に対してアクションはいくらでも追加できます。しかし、その実行順番を指定したい時は、add_action() 関数の３つ目の引数が優先順位になり、値が小さい方が先に実行されます。未記入の場合は10で処理されます。

下記のコードを子テーマのfunctions.phpに書いてみてください。

function example03(){
    echo '<!-- こちらは優先度 10 の出力順 -->';
}
add_action( 'wp_head', 'example03', 10 );

function example04(){
    echo '<!-- こちらは優先度 5 の出力順 -->';
}
add_action( 'wp_head', 'example04', 5 );

優先度5の方が先に出力される事が確認できます。

アクションフックは外部から外せる

アクションフックのもう一つ大きなメリットは、追加してあるアクションフックの処理を外部から外せるという点です。

以下のように書いてみてみてください。

// wp_head にアクセス解析タグを追加
function example01(){
    echo '<!-- [ アクセス解析タグ ] -->';
}
add_action( 'wp_head', 'example01' );

// 登録済みのアクションを外す
remove_action( 'wp_head', 'example01' );

アクセス解析のタグを追加してありますが、その後ですぐに外していますので、実際のページを見ても表示されません。

もちろんこれはこのように自分で書いたものを自分で外すのではなく、例えばテーマやプラグインですでに誰かの手によって書かれているアクションフックの処理を、使う人が必要に応じて外す事ができるという便利な機能です。

外す時も順番指定は重要

優先順位の指定がある場合は、remove_action する時も add_action の時と同じ優先順位を指定しないと外せないので注意してください。

// wp_head にアクセス解析タグを追加
function example01(){
    echo '<!-- [ アクセス解析タグ ] -->';
}
add_action( 'wp_head', 'example01', 5 );

// 優先順位が一致していないので外せない（ 5 に変更すれば外せます ）
remove_action( 'wp_head', 'example01', 10 );

HTMLを挿入する以外にありとあらゆる操作が可能

  • save_post : 投稿が保存されたタイミング。一緒に他のステータスを自動でアップデートしたりする処理など。
  • user_register : ユーザーが新規登録されたタイミング。一緒に他のステータスを自動でアップデートするなど。

おまけ

アクションフック・フィルターフックに追加されている処理は以下のように調べられます。

global $wp_filter;
print '<pre style="text-align:left">';
print_r($wp_filter['フック名']);
print '</pre>';

まとめ

いかがでしたでしょうか？途中でも書いた通りこのカスタマイズ方法は非常に有効なので、今まで一度もやった事がない方は、ご利用中のテーマのファイルから do_action( の記載を探してみて是非一度やってみてください。

次回はもう一つのフック「フィルターフック」について解説します。

この記事を書いた人

石川栄和代表取締役
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

ブロックエディターで

ABテストを


自由に作成できる VK AB Testing

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

AB テストでクリック率 &
売上アップ！

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP