【WordPress】アクションフックの仕組み（add_action、wp_enqueue_scripts）

　サイト作成で調べたことを、忘備録として書き残すことにしました。どなたかの参考になるかも知れませんので、その辺も考慮して書きたいと思います。

　今回は、WordPressのアクションフックの仕組みについて調べました。シンタックスハイライターである『prism.js』ツールを組み込む時に使いました。

フックとは

　フックとは、WordPressの通常処理の中に、追加処理を組み込む仕組みのことです。WordPressには、フックにより追加処理を組み込める場所が、複数用意されています。

　フックという言葉は、『仕組み』を指す場合と、『組み込む場所』を指す場合がありますので、前後の文脈で判断する必要があります。

　ここでは、分かりやすくするために、『仕組み』を指す場合はフック機能と書き、『組み込む場所』を指す場合はフックポイントと書きます。

フック機能の種類

　フック機能には、フィルターフックとアクションフックの２種類があります。フィルターフック機能は、文字列を加工する処理を追加する場合などに使われます。

　アクションフック機能は、CSSファイルやJavascriptファイルの読み込み処理を追加する場合などに使われます。

アクションフック機能の仕組み

　アクションフック機能の仕組みを、CSSファイルとJavascriptファイルの読み込み処理の追加を例に説明します。

　アクションフック機能に登場するプレーヤー

　次にアクションフック機能に登場するプレイヤーを紹介します。

アクションフック機能の流れ

　WordPressはテーマを使ってWebページを表示するためのソースコードを作成します。それを踏まえて、CSSファイルとJavascriptファイルの読み込み処理を追加するアクションフック機能の流れを説明します。

function.phpファイルに記述する内容

　Webページにコードを埋め込むシンタックスハイライターのPrism.jsツールをサイトに組み込む場合、Prism.js用のCSSファイルとJavascriptファイルをアクションフックの追加処理で読み込ませる必要があります。

　function.phpファイルに記述する内容の具体例として、その時のものを下に示します。

【Prism.jsツールの組み込みで記述したfunction.phpファイルの内容】　

function action_hook_for_prism() {
  wp_enqueue_style('prism-style', get_stylesheet_directory_uri(). '/prism/prism.css');
  wp_enqueue_script('prism-script', get_stylesheet_directory_uri() . '/prism/prism.js',array(),'1.0',true);
}
add_action('wp_enqueue_scripts', 'action_hook_for_prism');　

関数の書き方

　それぞれの関数の書き方は次のようになります。

追加処理用のソースコードの作成と追加

　WordPressのテーマで使用されるwp_head()関数、あるいはwp_footer()関数の処理の中で、function.phpファイルに記述された内容に従って、追加処理用のソースコードが作成され、Webページを表示するソースコードに追加されます。

　WordPressのテーマを作成する場合は、wp_head()関数とwp_footer()関数を必ず使用する決まりになっています。

　追加されるソースコードは次のような感じになります。

【CSSファイル読み込み用のソースコードサンプル】

【Javascriptファイル読み込み用のソースコードサンプル】

終わりに

　今回、自分のパソコンの中に作ったWordPress環境に、Prism.jsツールを組み込んで使おうとしたのですが、以前サーバー環境に組み込んだ方法をすっかり忘れていました。やっぱり、忘備録は書いておいた方がいいですね。

　最後まで閲覧して頂き、ありがとうございました。

　それでは、また。