Prism.js WordPress パソコンの使い方

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

更新日:

スポンサーリンク

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

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

フックとは

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

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

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

 

フック機能の種類

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

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

 

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

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

 

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

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

項番 プレーヤー 説  明
1 wp_enqueue_style()関数 CSSファイルの読み込み追加処理を記述する関数です。
2 wp_enqueue_script()関数 Javascriptfファイルの読み込み追加処理を記述する関数です。
3 アクションフック定義関数 項番1と2をまとめて記述する関数です。
4 wp_enqueue_scriptsアクションフック アクションフックの一つで、ファイル読み込み追加処理に使われるアクションフックの名称です。
5 add_action()関数 アクションフックに追加処理を登録する関数です。
6 function.phpファイル WordPressのテーマを構成するファイルの一つで、WordPressに関するさまざまな設定を記述するファイルです。
7 ソースコード Webページを表示するためのコードです。Webページ上でマウスを右クリックして、『ページのソースを表示(V)』メニューをクリックすると表示されるコードのことです。
8 wp_head()関数 WordPressの関数で、アクションフックに追加された処理などのソースコードを作成し、それを</head>タグ直前に追加する関数です。
9 wp_footer()関数 上と同じですが、ソースコードを追加する場所が</body>タグ直前になります。

 

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

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

  1. function.phpファイルにアクションフックに追加する処理を関数で記述します。
  2. function.phpファイルにアクションフックに追加処理を登録する関数を記述します。
  3. WordPressがテーマを使ってWebページを表示するソースコードを作成する時、アクションフックに登録されている追加処理用のソースコードを作成し、それを追加します。
  4. Webページを表示すると追加処理が反映されて表示されることになります。

注意事項

function.phpファイルは子テーマのものに記述するか、Code Snippetsなどのプラグインを使って安全に記述してください。親テーマのfunction.phpファイルには記述しないでください。

 

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

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

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

追加ファイルの位置

この例では子テーマのディレクトリ直下にprismディレクトリを設け、その中に次の追加ファイルを格納していますが、特に決まりはないので、管理しやすい場所でOKです。

  • prism.cssファイル
  • prism.jsファイル

 

【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'); 
  • 番号2がCSSファイルの読み込み追加処理用の関数です。get_stylesheet_directory_uri()関数で子テーマのディレクトリを求めていますが、他の関数を使ってもOKです。
  • 番号3がJavascriptファイルの読み込み追加処理用の関数です。
  • 番号1から4が追加処理をまとめて記述した関数です。
  • 番号5がアクションフックに追加処理を登録する関数です。

 

関数の書き方

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

  • CSSファイル読み込み追加処理用の関数

wp_enqueue_style(ハンドル名,URL,依存関係,バージョン,メディア);

引  数 内  容
ハンドル名 システム上の名前になります。ユニークな名前を指定します。
URL CSSファイルのURLを指定します。CSSファイルへのパスです。
依存関係 このCSSファイルより前に読み込みたいCSSファイルのハンドル名を配列で指定します。省略時は空の配列になります。
バージョン CSSファイルのバージョン番号を指定します。省略時はWordPressのバージョン番号になります。バージョン番号はURLのクエリパラメータ(?で始まるパラメータ)に反映されるので、バージョン番号を変えることにより、ブラウザの予期しないキャッシュを防ぐことができます。
メディア CSSに付けるメディアタイプを指定します。省略時はallになります。

 

  • Javascriptファイル読み込み追加処理用の関数

wp_enqueue_script(ハンドル名,URL,依存関係,バージョン,読み込み位置);

引  数 内  容
ハンドル名 システム上の名前になります。ユニークな名前を指定します。
URL JavascriptファイルのURLを指定します。Javascriptファイルへのパスです。
依存関係 このJavascriptファイルより前に読み込みたいJavascriptファイルのハンドル名を配列で指定します。省略時は空の配列になります。
バージョン Javascriptファイルのバージョン番号を指定します。省略時はWordPressのバージョン番号になります。バージョン番号はURLのクエリパラメータ(?で始まるパラメータ)に反映されるので、バージョン番号を変えることにより、ブラウザの予期しないキャッシュを防ぐことができます。
読み込み位置 falseあるいはtrueで読み込み位置を指定します。省略時はfalseになり、</head>タグ直前で読み込まれます。trueを指定すると、</body>タグ直前で読み込まれます。

 

  • 追加処理をまとめたアクションフック定義関数

function アクションフック定義関数名() {

  追加処理用関数

}

項  目 内  容
アクションフック定義関数名 アクションフック定義関数の名前になります。ユニークな名前を指定します。
追加処理用関数 追加処理用の関数をまとめて記述します。

 

  • アクションフック登録関数

add_action(アクションフック名,アクションフック定義関数名,プライオリティ,引数の数);

引  数 内  容
アクションフック名 アクションフック名を指定します。ここに指定したアクションフックに、アクションフック定義関数に記述した追加処理が登録されることになります。
アクションフック定義関数名 J追加処理をまとめて記述したアクションフック定義関数名を指定します。
プライオリティ 実行される優先順位を整数で指定します。省略時は10になります。小さい整数ほど早く実行されます。
引数の数 アクションフックを処理する関数が受け取る引数の数を整数で指定します。省略時は1になります。

 

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

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

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

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

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

<link rel='stylesheet',id='prism-style-css' href='https://sample.com/wp-content/themes/sample-child/prism/prism.css?ver=5.4.2 type='text/css' media='all' />

 

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

<script type='text/javascript',src='https://sample.com/wp-content/themes/sample-child/prism/prism.js?ver=1.0'></script>

 

終わりに

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

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

 それでは、また。

スポンサーリンク

-Prism.js, WordPress, パソコンの使い方

© 2024 中強度のウォーキングとベジファーストがいいらしい。 Powered by AFFINGER5