WordPressフックの力を活用する：アクションとフィルターの説明

公開: 2022-07-22

他のCMSと同様に、WordPressは箱から出してすぐにすべてのニーズを満たすとは限りません。 オープンソースであるため、ハッキングしてビジネスニーズに適合させることができますが、代わりにWordPressのフックを使用して目標を達成することができます。 フックを使用して構築することは、WordPress開発者が想像できるほぼすべてのWebサイト機能を構築できるようにする優れた戦略です。

WordPressフック：アクションとフィルター

WordPressフックは、強力なカスタマイズツールであるだけでなく、WordPressコンポーネントが相互に作用する方法でもあります。 フックされた関数は、ページへのスタイルやスクリプトの追加、HTML要素でフッターテキストを囲むなど、WordPressの一部と見なされる日常的なタスクの多くを管理します。 WordPress Coreのコードベースを検索すると、700を超える場所に数千のフックが見つかります。 WordPressのテーマとプラグインにはさらに多くのフックが含まれています。

フックに飛び込んでアクションフックとフィルターフックの違いを探る前に、それらがWordPressのアーキテクチャーのどこに収まるかを理解しましょう。

WordPressインフラストラクチャ

WordPressのモジュラー要素は互いに簡単に統合できるため、次の要素を簡単に組み合わせたり、組み合わせたり、組み合わせることができます。

  1. WordPress Core：これらはWordPressが機能するために必要なファイルです。 WordPress Coreは、一般化されたアーキテクチャ、WP管理ダッシュボード、データベースクエリ、セキュリティなどを提供します。 WordPress CoreはPHPで記述されており、MySQLデータベースを使用しています。
  2. テーマ（または親テーマ）：テーマは、Webサイトの基本的なレイアウトとデザインを定義します。 PHP、HTML、JavaScript、およびCSSファイルを搭載したテーマは、WordPress MySQLデータベースを読み取って、ブラウザーでレンダリングするHTMLコードを生成することで機能します。 テーマのフックは、たとえば、スタイルシート、スクリプト、フォント、またはカスタム投稿タイプを追加する場合があります。
  3. 子テーマ：親テーマが提供する基本的なレイアウトとデザインを微調整するために、子テーマを自分で作成します。 子テーマでは、スタイルシートとスクリプトを定義して、継承された機能を変更したり、投稿タイプを追加または削除したりできます。 子テーマの指示は、常に親テーマの指示に優先します。
  4. プラグイン： WordPressのバックエンド機能を拡張するために、何千ものサードパーティプラグインから選択できます。 プラグインのフックは、たとえば、投稿が公開されたときに電子メールで通知したり、禁止された言語を含むユーザーが送信したコメントを非表示にしたりできます。
  5. カスタムプラグイン：サードパーティのプラグインがビジネスニーズを完全に満たしていない場合、PHPでカスタムプラグインを作成することでターボチャージできます。 または、新しいプラグインを最初から作成することもできます。 どちらの場合も、既存の機能を拡張するためにフックを追加します。

ベースからトップまで、5つのレベルを示すピラミッド：（1）WordPressコア、（2）テーマ、（3）子テーマ、（4）プラグイン、（5）カスタムプラグイン。
WordPressインフラストラクチャ階層

5つのレイヤーすべてのソースにアクセスできるのに、WordPressでフックが必要なのはなぜですか？

コードの安全性

進化するテクノロジーに対応するために、WordPress Core、親テーマ、およびプラグインへの貢献者は、セキュリティの脆弱性を軽減し、バグを修正し、非互換性を解決し、または新機能を提供するための更新を頻繁にリリースします。 緊急の経験を持つコンサルタントなら誰でも知っているように、WordPressコンポーネントを最新の状態に保つことに失敗すると、サイトが危険にさらされたり、無効になったりする可能性があります。

アップストリームのWordPressコンポーネントのローカルコピーを直接変更すると、問題が発生します。更新によってカスタマイズが上書きされます。 WordPressをカスタマイズするときにこれを回避するにはどうすればよいですか？ 子テーマとカスタムプラグインのフックを介して。

私たちの子供のテーマのコーディング

子テーマは、インストールしたテーマのルックアンドフィールをカスタマイズできる安全なスペースです。 ここで追加されたコードは、更新によって上書きされるリスクなしに、親の同等のコードをオーバーライドします。

子テーマがアクティブ化されると、非アクティブ化された親にリンクされ、親の更新による影響を受けずに、親の特性を継承して表示します。 テーマを変更したいという誘惑に負けないように、ベストプラクティスでは、セットアップの一部として子テーマをアクティブ化することをお勧めします。

カスタムプラグインの作成

プラグインがアクティブ化されると、そのfunctions.phpファイルはサーバーでの呼び出しごとに実行されます。 次に、WordPressは、すべてのアクティブなプラグインからフックを優先度に従ってロードおよびソートし、これらを順番に実行します。 サードパーティのプラグインの機能を拡張するために、独自のWordPressカスタムプラグインを作成できます。

WordPressのどこにフックを配置するか

ゴール例どこ？
子テーマPHP カスタムプラグインPHP
Webページの構造を変更するにはカスタムスタイルシートを追加して、Webサイト要素の色とフォントを変更します
別のプラグインの機能を変更するには（つまり、サードパーティのプラグインの機能を強化するプラグインを作成します） カスタム投稿タイプに小見出し（「ニュース」など）を追加する
WordPressコアを超える新機能を追加するには投稿にアクセスしたときに実行されるワークフローを変更して、データベースのカウンターを更新する

ダイビング前の準備：定義

用語の混同を避けるために、次の用語を使用します。

  • フックは、関数が実行するように登録されているWordPressのスイートスポットです。 関数をWordPressとそのコンポーネントの多くのフックの1つに接続するか、独自に作成することができます。
    • アクションフックはアクションを実行します。
    • フィルタフックはフィルタを実行します。
  • フックされた関数は、WordPressのフックの場所に「フック」したカスタムPHPコールバック関数です。 使用するタイプは、フックが関数外での変更を許可することを意図しているかどうかによって異なります。たとえば、Webページ出力に直接追加する、データベースを変更する、または電子メールを送信するなどです。 これらは副作用として知られています。
    • フィルタ（またはフィルタ関数）は、渡されたデータの変更されたコピーを処理して返すだけで、副作用を回避する必要があります。
    • 対照的に、アクション（またはアクション関数）は、副作用を引き起こすことを目的としています。 戻り値はありません。

互換性のあるフックとペアになっている機能を示す図。フィルターフックにはフィルター機能が付いており、アクションフックにはアクション機能が付いています。
WordPressフックには複数のコールバック関数を含めることができますが、すべてのコールバック関数は、登録されているフックのタイプと一致する必要があります。

これらの違いを念頭に置いて、フックの調査を開始できます。

抽象化とクリーンなコード

アクションまたはフィルターがフックに組み込まれると、必要に応じて、タスクごとに1つの関数のみを記述し、プロジェクト内でのコードの重複を回避するという目的を達成します。 たとえば、テーマの3つのページテンプレート（アーカイブ、単一ページ、カスタム投稿）に同じスタイルシートを追加するとします。 親の各テンプレートをオーバーライドしてから子テーマでそれぞれを再作成し、個々のヘッドセクションにスタイルシートを追加するのではなく、単一の関数でコードを記述し、 wp_headフックでアタッチできます。

思いやりのある命名法

子テーマまたはカスタムプラグインフックに一意の名前を付けることで、競合を予防的に回避します。 単一のサイトに同じ名前のフックがあることは、意図しないコード動作のレシピです。 ベストプラクティスでは、フックの名前を一意の短いプレフィックス（作成者、プロジェクト、会社のイニシャルなど）で始め、その後にわかりやすいフック名を付けるように規定しています。 たとえば、プロジェクトTahirのFabulous Pluginのパターン「プロジェクトのイニシャルとフック名」を使用して、フックtfp-upload-documentまたはtfp-create-post-newsという名前を付けることができます。

並行開発とデバッグ

1つのフックで、複数のアクションまたはフィルターがトリガーされる場合があります。 たとえば、複数のスクリプトを含むWebページを作成できます。これらのスクリプトはすべて、 wp_headアクションフックを使用して、ページのフロントエンドの<head>セクション内にHTML（たとえば、 <style>または<script>セクション）を出力します。

したがって、複数のプラグイン開発者は、単一のプラグインで複数の目標を並行して進めることも、プラグインを複数のより単純な個々のプラグインに分割することもできます。 機能が正しく機能しない場合は、プロジェクト全体を検索しなくても、フックされた関数を直接調査してデバッグできます。

行動

WordPressでイベントが発生すると、アクションはコードを実行します。 アクションは、次のような操作を実行できます。

  • データの作成。
  • データの読み取り。
  • データの変更。
  • データを削除しています。
  • ログインしたユーザーの権限を記録します。
  • 場所を追跡し、データベースに保存します。

アクションをトリガーできるイベントの例は次のとおりです。

  • init 、WordPressが読み込まれた後、ヘッダーを出力ストリームに送信する前。
  • save_post 、投稿が保存されたとき。
  • wp_create_nav_menu 、ナビゲーションメニューが正常に作成された直後。

アクションはAPIと対話してデータ（ソーシャルメディア上の投稿へのリンクなど）を送信できますが、呼び出し元のフックにデータを返すことはありません。

ソーシャルメディアを介したサイト上のすべての新しい投稿の共有を自動化したいとします。 投稿が公開されるたびにトリガーできるフックについて、WordPressのドキュメントを調べることから始めます。

私たちのフックを見つけるための近道はありません。私たちは、経験を通して学ぶか、リストされたアクションを通して、可能性のある候補を見つけるための穴を掘ります。 save_postを候補と見なすかもしれませんが、1回の編集セッション中に複数回トリガーされるため、すぐに除外します。 より適切な選択はtransition_post_statusです。これは、投稿のステータスが変更された場合にのみトリガーされます（たとえば、 draftからpublishへ、 publishからtrashへ）。

transition_post_statusを使用しますが、投稿のステータスがpublishに移行した場合にのみ実行されるようにアクションを調整します。 さらに、さまざまなソーシャルメディアプラットフォームの公式ドキュメントとAPIに従うことで、投稿のコンテンツを注目の画像とともに統合して公開できます。

 <?php function publish_post_on_social_media ( $new_status = NULL, $old_status = NULL, $post_ID = NULL ) { if ( 'publish' == $new_status && 'publish' != $old_status ) { // build the logic to share on social media } } add_action( 'transition_post_status', 'publish_post_on_social_media', 10, 3 ); ?>

アクションフックの使用方法がわかったので、特にCSSに関して特に役立つフックがあります。

wp_enqueue_scriptsを使用した優先順位の指定

他のすべてがロードされた後、子テーマのスタイルシートを最後に追加して、他の場所で発生した同じ名前のクラスが子テーマのクラスによってオーバーライドされるようにするとします。

WordPressはデフォルトの順序でスタイルシートをロードします：

  1. 親テーマの
  2. 子テーマの
  3. プラグイン

この構成では：

 add_action( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1)

…追加されたアクションのpriorityの値によって、実行の順序が決まります。

  • wp_enqueue_scripts （または任意のアクション）のデフォルトのpriority値は「10」です。
  • priorityを低い数値にリセットすると、関数は早く実行されます。
  • priorityをより高い数値にリセットすると、関数は後で実行されます。

子テーマのスタイルシートを最後にロードするには、WordPressのテーマとプラグインで一般的に使用されるアクションであるwp_enqueue_scriptsを使用します。 子テーマのアクションwp_enqueue_scriptsの優先度を、デフォルトの「10」よりも高い数値、たとえば「99」に変更するだけで済みます。

 add_action( 'wp_enqueue_scripts', 'child_theme_styles', 99 );


一般に、戻り値を探していないときにアクションを使用します。 呼び出し元のフックにデータを返すには、フィルターを調べる必要があります。

フィルタ

フィルタを使用すると、ブラウザに表示するために処理される前にデータを変更できます。 この目的のために、フィルターは変数を受け入れ、渡された値を変更し、さらに処理するためにデータを返します。

WordPressは、ブラウザー用のコンテンツを準備する前に、登録されているすべてのフィルターをチェックして実行します。 このようにして、必要に応じて、ブラウザまたはデータベースに送信する前にデータを操作できます。

私のクライアントの1人は、顧客が提供する画像を印刷して、販売する製品をパーソナライズしています。 このクライアントは、WooCommerceプラグインを使用してeコマースを管理します。 WooCommerceは、この機能をそのままではサポートしていません。 したがって、クライアントのfunctions.phpに2ビットのコードを追加しました。

  1. woocommerce_checkout_cart_item_quantityのドキュメントに記載されているwoocommerce_checkout_cart_item_quantityは、顧客がチェックアウトの前にカートに外部要素を追加できるようにするフィルターフックです。
  2. my_customer_image_data_in_cartは、WooCommerceがカートを表示する準備をするたびに、自分で作成してwoocommerce_checkout_cart_item_quantityをトリガーするために使用するフィルターです。

次のテンプレートを使用して、フィルターを追加し、カートのデフォルトの動作を変更できます。

 add_filter( 'woocommerce_checkout_cart_item_quantity', 'my_customer_image_data_in_cart', 1, 3 ); function my_customer_image_data_in_cart( $html, $cart_item, $cart_item_key ) { if ( !empty( $cart_item['images_data'] ) ) { // Store image // Get image URL // Modify $html } return $html; }

アクションを追加するのと同じ方法でフィルターを追加します。 フィルタは、優先度の処理方法など、アクションと同様に機能します。 フィルタとアクションの主な違いは、アクションは呼び出し元のフックにデータを返さないが、フィルタは返すことです。

カスタマイズされたアクションフックとフィルターフック

カスタムアクションフックを作成しても、Wordpress Coreは拡張されませんが、独自のコード内に新しいトリガーポイントが作成されるだけです。

カスタムアクションフックの作成

テーマまたはプラグインにカスタムフックを追加すると、他の開発者はコードベースを変更せずに機能を拡張できます。 カスタムフックを追加するには、WordPress Coreコードベース自体が使用するのと同じ手法を使用します。目的のトリガーポイントで、新しいフックの名前を使用してdo_actionを呼び出すだけで、オプションで、コールバックが役立つと思われる数の引数を追加します。

 do_action( 'myorg_hello_action', $arg1, $arg2 );

このコードは、カスタムフックにフックされたコールバック関数を実行するだけです。 名前空間はグローバルであるため、前に提案したように、カスタムフック名の前に組織（および場合によってはプロジェクトも）の名前の短縮形を付けることをお勧めします。したがって、ここではmyorg_を使用します。

myorg_hello_actionを定義したので、開発者は、組み込みフックについて前に説明したのとまったく同じ方法でフックすることができます。関数を定義してから、 add_action()を呼び出します。

新しいフックを純粋に内部的に使用したい場合を除いて（結局のところ、コードを構造化するのに役立つ方法です）、明確なドキュメントを介して、その可用性をダウンストリーム、チームの他のメンバー、またはプラグインの外部ユーザーに伝える必要があります。 。

カスタムフィルターフックの作成

カスタムフィルターフックのWordPressのパターンは、 apply_filters()の代わりにdo_action() ）を呼び出すことを除いて、アクションフックのパターンと同じです。

今回は、より具体的な例を見てみましょう。 プラグインがサイドバーメニューを作成するとします。サイドバーメニューは通常4つのアイテムで構成されています。 カスタムフィルターフックを追加して、私たち（およびダウンストリーム開発者）が他の場所でアイテムのリストを変更できるようにします。

 // Text labels of sidebar menu $sidebar_menu = array( "Page One", "Page Two", "Page Three", "Page Four" ); $sidebar_menu = apply_filters( 'myorg_sidebar_menu', $sidebar_menu );

これで、カスタムフィルターフックmyorg_sidebar_menuをプラグインで使用する準備が整いました。プラグインは、後でまたはこのプラグインの他の場所にロードできます。 これにより、ダウンストリームコードを作成する人は誰でも、サイドバーをカスタマイズできます。

組み込みのWordPressフックを使用する場合、私たちまたは他の開発者は同じパターンに従います。 つまり、渡されたデータの変更バージョンを返すいくつかのコールバック関数を定義することから始めます。

 function lowercase_sidebar_menu( $menu ) { $menu = array_map( 'strtolower', $menu ); return $menu; } function add_donate_item( $menu ) { $menu = array_push( $menu, 'Donate' ); return $menu; }

以前の例と同様に、フィルターコールバック関数をカスタムフックにフックする準備ができました。

 add_filter( 'myorg_sidebar_menu', 'add_donate_item', 100 ); add_filter( 'myorg_sidebar_menu', 'lowercase_sidebar_menu' );

これで、2つのコールバック関数の例をカスタムフィルターフックにフックしました。 どちらも$the_sidebar_menuの元のコンテンツを変更するようになりました。 add_donate_itemに高いpriorityの値を指定したため、 lowercase_sidebar_menuの実行後に後で実行されます。

このセクションで説明するフィルター関数の結果を示す3つのパネル。パネル1は、フィルターにコールバックがフックされていない場合のサイドバーを示しています。パネル2は、4つの項目名すべてが小文字で、フィルターにフックされたlowercase_sidebar_menuコールバックの場合と同じようにサイドバーを示しています。パネル3は、donate_buttonコールバックもフィルターにフックされた場合のサイドバーを示しています---パネル2と同じ小文字の項目に加えて、タイトルケースに残された5番目の項目「Donate」。

ダウンストリーム開発者は、 myorg_sidebar_menuにさらに多くのコールバック関数をいつでも自由にフックできます。 同様に、 priorityパラメーターを使用して、2つのコールバック関数の例の前、後、または間でフックを実行できます。

空はアクションとフィルターで限界です

アクション、フィルター、フックを使用すると、WordPressの機能は飛躍的に成長する可能性があります。 WordPressと同じように拡張可能な独自の貢献を残して、サイトのカスタム機能を開発できます。 フックを使用すると、WordPressサイトを次のレベルに引き上げる際に、安全性とベストプラクティスを順守できます。

Toptal Engineering Blogは、この記事の専門知識、ベータテスト、および技術レビューを提供してくれたFahadMurtazaに感謝の意を表します。